# Jio / reference visual comparison

The reference stack is isolated from the Jio site and exposes the reference
theme at https://localhost:9443. The local reference source remains read-only.

~~~powershell
$env:REFERENCE_THEME_PATH='C:\Users\Xing\Desktop\zibll'
docker compose -f tests/visual/docker-compose.reference.yml up -d
docker compose -f tests/visual/docker-compose.reference.yml run --rm wp core install --url=https://localhost:9443 --title='Reference' --admin_user=visual_admin --admin_password='Jio-Visual-2026!' --admin_email=visual@example.test --skip-email
docker compose -f tests/visual/docker-compose.reference.yml run --rm wp theme activate reference
docker compose -f tests/visual/docker-compose.reference.yml run --rm wp eval-file /visual-fixtures/article-fixtures.php create
~~~

Run the same theme-neutral article generator inside the Jio WordPress
container. Mount `tests/visual/` read-only at `/visual-fixtures` in that stack:

~~~powershell
wp eval-file /visual-fixtures/article-fixtures.php create
wp eval-file /visual-fixtures/article-fixtures.php cleanup
~~~

The shared generator creates the same authors, category, tag, dates, images,
featured/no-image/multi-image/first-image/external-cover posts, slide and video
metadata, pay/VIP states, sticky state, and interaction counters in both sites.
Fixture-only metadata is written together so the rendered business state is
identical without adding compatibility code to either theme.

Use `tests/visual/article-visual-matrix-v1.json` for the article-only captures.
Every reference/candidate pair must record the screenshot, DOM, computed styles,
bounding boxes, console messages, and failed network requests. The matrix pins
1440, 1024, 768, 767, 641, 640, and 390 widths across light/dark,
sidebar/no-sidebar, list/card modes, media states, and all pagination states.

The acceptance gate is at most 1 CSS px geometry delta and 1.5% pixel
difference, with no visible mismatch, console error, unexpected failed request,
or critical/serious accessibility issue.

Clean the reference fixture before removing its volumes:

~~~powershell
docker compose -f tests/visual/docker-compose.reference.yml run --rm wp eval-file /visual-fixtures/article-fixtures.php cleanup
docker compose -f tests/visual/docker-compose.reference.yml down -v
~~~

The older `tools/wp-cli-visual-fixtures.php`, widget golden file, and broad page
matrix remain dedicated to non-article component regression tests and are not
the truth source for this replacement.