fix: make the ticker's changing region an ELEMENT, not a run of glyphs

The round trip -- fail, parse the message's own suggestion, apply it, page must
then be stable -- failed on three separate CI runs with three unrelated regions
for the same page:

    [216,52,216,65]   1 column
    [62,50,219,67]    157x17
    [71,51,71,68]     1 column

The diagnosis was right every time. What it was diagnosing would not hold still.

Ten random glyphs are a bad thing to measure. Their extent depends on which
characters came up, and a capture on a slower machine can land mid-repaint and
see a single column of a single character -- hence regions ranging over two
orders of magnitude. Pinning the font to monospace (previous commit) fixed the
extent but not the mid-repaint sliver, so it was necessary and not sufficient.

Now every tick paints the box a RANDOM colour. Two attempts then differ across
the whole element at high contrast, a partial repaint is still an unmistakable
diff, and the region is the element -- which `position: absolute` with a fixed
width and height pins exactly.

Random, specifically, and not a black/white toggle: a two-state flip depends on
parity, and two attempts ~100ms apart are an unpredictable number of 30ms ticks
apart, so they can land on the SAME phase. Measured -- with the toggle the region
came back as [69,50,210,66], the text again.

Measured after: eight consecutive local runs, all green, every one reporting

    [40,40,239,79] -- 1.62% of the 800x600 image, changed in 4 of 4 pairs

which is the CSS box (left:40 top:40 200x40) to the pixel. Before this change no
two runs agreed.

This is also the honest shape of what the fixture stands in for: a clock or
spinner repainting inside a box that does not move, which is exactly the case
where `skip_area` is the right answer.

`rake test` and standardrb below.

Author: pftg

test/fixtures/app/index-with-ticker.html

@@ -42,12 +42,32 @@ <h1>Ticker</h1>
 <div id="ticker">0000000000</div>
 
 <script>
+// Same box, different pixels, forever -- but the CHANGE HAS TO BE THE WHOLE
+// BOX, not the glyphs inside it.
+//
+// Glyphs were the first attempt and they are unreliable to measure: a capture
+// on a slow machine can land mid-repaint and see a single column of a single
+// character, so the reported region came out anywhere from 1x17 to 157x17 for
+// the same page (runs 32750597989, 32752142873, and the selenium_headless cell
+// of the third). The diagnosis was right every time; what it was diagnosing
+// would not hold still.
+//
+// Inverting the whole box changes ~8000 px at maximum contrast, so a partial
+// repaint is still an unmistakable diff, and the region is the ELEMENT --
+// which `position: absolute` with a fixed width and height pins exactly. That
+// is also the honest shape of the real thing this stands in for: a clock or
+// spinner repainting inside a box that does not move.
+// A RANDOM colour, not a two-state toggle: alternating black/white depends on
+// parity, and two attempts ~100ms apart are an unpredictable number of 30ms
+// ticks apart, so they can land on the SAME phase -- identical background,
+// only the glyphs differing, and the measured region collapses back to text.
+// Verified locally: with a toggle the region came out [69,50,210,66] (text),
+// with a random colour it is the element.
 const retick = () => {
-  // Same box, different pixels, forever. Every character changes, the way a
-  // spinner or a re-rendered clock does -- a counter where only the last
-  // digit moves would make the measured region a single glyph, which is a
-  // property of THAT page, not of unstable pages.
-  document.getElementById("ticker").textContent =
+  const el = document.getElementById("ticker")
+  const channel = () => Math.floor(Math.random() * 256)
+  el.style.backgroundColor = `rgb(${channel()}, ${channel()}, ${channel()})`
+  el.textContent =
     Array.from({length: 10}, () => "0123456789ABCDEF"[Math.floor(Math.random() * 16)]).join("")
 }
 retick()