Case 358/980: the gate that measured the box

🕵️ Show the full case file → 📋 Session protocol →

Case File · Code Homicide Dept.

The slide was clipped on a phone: two thirds of each one, off the screen. The rule that scaled it was written, legible, and had been sitting there for days: <code>transform: scale(calc(100cqw / 980))</code>. The browser reads it, does not understand it, and drops it — no exception, no warning, not one line in the console. It looked right because the article's column is about 980 px and the slide fitted there anyway. And the eight gates watching this work stayed green, all of them, the whole time. Not one lied: they measured the box, and the box was exactly what it was supposed to be. The content, inside it, was still 980.

The double ledger — what it cost, and what it left

The figures on the left are the body; the ones on the right are what took its place. And the proportion presiding over the case is the one in its number: 358 and 980. The box, correct. The content, intact inside it, measuring nearly three times its width. The two figures coexisted for days, measured, green and published. Neither was false. Nobody simply divided them.

The point of abandonment — what the table doesn't show

The point of abandonment was not failing to measure: it was measuring, and being satisfied. Every one of this session’s seven traps was found by running — the CSS asked of the browser instead of picked by hand, the rendered DOM instead of the markdown, the served page instead of the generated file. That instinct was right and it is why the work landed. But measuring is not the same as measuring what you assert, and I crossed that line eight times in a row without noticing, because on all eight the number came back correct. There is no sensation of error in reading a correct number. It feels exactly like being right. What broke the tie was not a better idea: it was opening the deck on a phone.

The suspects — the false leads

The weapon — A declaration the browser reads, fails to understand, and drops — no exception, no warning, not one line in the console

/* The rule holding up the scale of all 16 slides. It looks reasonable.
   The browser reads it, does not understand it, and DROPS it. No exception, no warning. */

  .deck-slide .print-slide-container {
    transform: scale(calc(100cqw / 980));   /* ← invalid: scale() demands a NUMBER,
                                               and calc() cannot divide length by length */
  }

/* Verified in this session, in the browser, with nothing in between:

     CSS.supports('transform', 'scale(calc(100cqw / 980))')  →  false
     div.style.transform = 'scale(calc(100cqw / 980))'
     div.style.transform                                     →  ""      (it stored nothing)

   It looked right because the article's column is ~980 px wide: unscaled, the slide fitted
   anyway. On a 390 px phone the box is 358 px — and the content was still 980.

     1 − 358/980  =  63.5 % of every slide, clipped.

   And the eight gates that already existed stayed GREEN, because all eight measured THE BOX:
   the box was 358 px, which is exactly what the box was supposed to be. Every one of them
   told the truth. Not one of them was looking at the content. */

And here is the part that makes this a case file and not a slip. This work was watched by eight gates —containment, fidelity, no inbound leak, glossary, slides, fonts, navigation, zoom— and all eight were green the whole time. Not one lied. The gate that counted slides counted 16 nodes and there were 16. The one that measured the box measured 358 px and the box was 358 px. The one checking that no foreign styles got in was right: none did. Eight truths, and not one of them was the assertion I believed I was checking — that a reader can read the slide. No gate compared the content against its box. The one division that was needed —980 inside 358— was being done by nobody.

The turn — Compute the ratio as a number, and add the one gate that looks at the content

// 1. The ratio CSS cannot express — box width / native width — is computed by whoever
//    CAN measure it, and left written down as a plain number.

  var W = 980;
  var ro = new ResizeObserver(function (entries) {
    for (var e of entries) {
      var k = e.contentRect.width / W;          // ← a NUMBER, not a length
      e.target.style.setProperty('--deck-k', k);
    }
  });

  .deck-slide .print-slide-container[data-js] {
    transform: scale(var(--deck-k, 1));         // ← (0,4,0): above Slidev's
  }                                             //   [data-v-HASH], which is (0,3,0)

// 2. And the gate that did not exist — the only one that looks at the CONTENT, not the box.
//    It does not fix this defect: it fixes the whole class.

  const m = await p.evaluate(() => {
    const s = document.querySelector('.deck-slide[data-active]')
    const c = s.querySelector('.print-slide-container')
    const sb = s.getBoundingClientRect(), cb = c.getBoundingClientRect()
    return { boxW: sb.width, cW: cb.width }     // ← the box AND the content
  })
  const fill = m.cW / m.boxW                    // ← and the ratio between them
  if (!(fill > 0.97 && fill < 1.03))
    fail('J_escala', `content at ${(fill*100).toFixed(0)} % of its box (clipped)`)

// Across 4 viewports — 1920, 1440, 820 and 390 px. The box is still measured.
// Nothing is CONCLUDED from it any more.

The box is still measured. That is worth saying, because this case’s lesson is told wrong if it is told as “measuring the box is bad”. Measuring the box is fine. What was wrong was concluding from the box something the box does not say. The eight gates are still there, green, useful, and untouched: a ninth has been added to them, doing the one division none of them did. And a debt remains, stated here and not buried in the last paragraph: the ten gates are still not in just check. They are green and they are outside the chain, which is precisely the pathology of case 0/318 — an impeccable validator nobody runs. This case has not closed it. It has named it.

The verdict

The series asks: with ontoref, would it have gone like this? And this case answers with a very specific discomfort, because the mechanism that would have caught it was already written, and it has a number. ADR-072 says, unambiguously, that a check measuring a proxy for the capability is a check that can be green while the page is wrong; this series’ own howto repeats it in capitals —“verify the RENDERED CARD, not a number in the HTML”—; and case 3/0 is literally the case of a check that only ever verified what EXISTED and never what SHOULD exist. All of that was in the repository before this deck was ever projected. And still, eight new gates were born measuring the box. Because the rule, written, is not enough: you have to ask each gate what it asserts, and then look at whether that is what it measures — and there is nothing more uncomfortable to look at than a gate of your own, green, telling the truth. Across the seven traps of this session the failure was always the same: the box instead of the content, DOM nodes instead of what rendered, innerText instead of textContent, the string in the HTML instead of the element in the tree. Four variants of one error, and not one of the four ever produced an error message. Measuring the thing next door does not fail. That is the entire problem.

Case law — what enforces the lesson today

• ✓
  A gate declares what it claims and measures exactly that — never the box next dooradr:072/a-check-measures-the-capability-not-a-proxy
• ✓
  A set of gates nobody runs is not coverage: the gate enters the chainadr:071/the-gate-is-in-the-chain

One thing remains to be said, and it files this case next to the others in the series. Case 1/1852 verified the file and not the page. Case 3/0 checked what existed and never what should exist. Case 69/58 looked at the tree nobody serves. Case 0/318 wrote an impeccable validator and never ran it. All four have the same skeleton as this one: an artifact asserts something about itself, and what gets checked is the thing next door. Change the neighbour —the file instead of the page, the tree instead of the served one, the box instead of the content— and nothing else changes. That is why this case does not add a gate and fall silent: it adds the question you have to put to any gate before believing it. What do you assert? And is that what you measure? If the two answers are not the same sentence, the gate is green and decorative, and the day the page breaks you will hear it from a reader with a phone in their hand.