Pinned the fixture encode to one thread and reported what else moves the pixels (#52)

x264 splits a frame across its worker threads and splits it differently for a
different thread count, so the fixture video re-encoded to different bytes on a
differently-sized runner. Those bytes are on screen in the snapshots, as box
offsets, sizes and the bitrate plot's shape, which is a visual change with
nothing in the diff behind it. Verified on ffmpeg 6.1.1-3ubuntu5: -threads 1
reproduces byte for byte, while 1, 2, 4 and auto each give a different file.

The two things left that move pixels on their own are now printed rather than
left to be guessed at: the runner image behind the ubuntu-24.04 label, which is
rebuilt weekly with new fonts, and the fixture's sha256. A branch behind main
also reads as changes of its own, since Chromatic diffs against the branch's own
last build, so the run says how far behind it is and asks for a merge first.


Claude-Session: https://claude.ai/code/session_01CaXNNi6tdDMUPQMpsNz97S

Co-authored-by: Claude <noreply@anthropic.com>

Author: CodyCBakerPhD

.github/workflows/chromatic-playwright.yml

@@ -20,6 +20,28 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Report the runner image
+        # The ubuntu-24.04 label is not a fixed machine: the image behind it is rebuilt roughly
+        # weekly, and a new one brings new fonts and rasterizer libraries, which move text pixels
+        # on their own. Printed so a snapshot diff with no code change behind it can be checked
+        # against the image its baseline was drawn on.
+        run: |
+          echo "Runner image: ${ImageOS:-unknown} ${ImageVersion:-unknown}"
+
+      - name: Report how far the branch is behind main
+        # Chromatic takes the branch's own last build as the baseline, so a branch that has not
+        # seen main in a week diffs against a week-old UI and reports main's changes as this
+        # branch's. Merge main in before reading the result.
+        if: github.ref != 'refs/heads/main'
+        run: |
+          git fetch --no-tags --quiet origin main
+          behind=$(git rev-list --count HEAD..origin/main)
+          if [ "$behind" -eq 0 ]; then
+            echo "Branch is up to date with main."
+          else
+            echo "::notice::This branch is $behind commit(s) behind main. Chromatic diffs it against the branch's own last build, so the changes it reports may be main's rather than this branch's; merge main in before reading them."
+          fi
+
       - name: Set up Node
         uses: actions/setup-node@v7
         with:
@@ -47,6 +69,14 @@ jobs:
         env:
           CHROMATIC_STATIC_VERSION: "true"
 
+      - name: Report the fixture video's hash
+        # The fixture is re-encoded on every run (tests/fixtures/demoVideo.ts) and its bytes reach
+        # the snapshots, so an encode that came out different is a visual change with nothing in
+        # the diff to explain it. Printed rather than asserted against a stored hash: the expected
+        # value would have to be re-pinned for every ffmpeg version.
+        if: always()
+        run: sha256sum tests/fixtures/.generated/* || echo "No generated fixture to hash."
+
       - name: Run Chromatic
         uses: chromaui/action@v18.8.0
         with:

.github/workflows/chromatic-storybook.yml

@@ -20,6 +20,28 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Report the runner image
+        # The ubuntu-24.04 label is not a fixed machine: the image behind it is rebuilt roughly
+        # weekly, and a new one brings new fonts and rasterizer libraries, which move text pixels
+        # on their own. Printed so a snapshot diff with no code change behind it can be checked
+        # against the image its baseline was drawn on.
+        run: |
+          echo "Runner image: ${ImageOS:-unknown} ${ImageVersion:-unknown}"
+
+      - name: Report how far the branch is behind main
+        # Chromatic takes the branch's own last build as the baseline, so a branch that has not
+        # seen main in a week diffs against a week-old UI and reports main's changes as this
+        # branch's. Merge main in before reading the result.
+        if: github.ref != 'refs/heads/main'
+        run: |
+          git fetch --no-tags --quiet origin main
+          behind=$(git rev-list --count HEAD..origin/main)
+          if [ "$behind" -eq 0 ]; then
+            echo "Branch is up to date with main."
+          else
+            echo "::notice::This branch is $behind commit(s) behind main. Chromatic diffs it against the branch's own last build, so the changes it reports may be main's rather than this branch's; merge main in before reading them."
+          fi
+
       - name: Set up Node
         uses: actions/setup-node@v7
         with:

tests/fixtures/demoVideo.ts

@@ -52,6 +52,13 @@ export function buildFixtureVideo(): string {
         `sine=frequency=440:duration=${FIXTURE_SECONDS}`,
         "-c:v",
         "libx264",
+        // x264 splits a frame across its worker threads, and how it splits depends on how many
+        // there are, which is the runner's core count. Left to itself the same command re-encodes
+        // to different bytes on a differently-sized machine, and those bytes are on screen in the
+        // snapshots (box offsets, sizes, the bitrate plot's shape), so the run reads as a visual
+        // change with no code change behind it. One thread is slower and deterministic.
+        "-threads",
+        "1",
         "-preset",
         "veryfast",
         "-crf",