test(svg): VRT page + MDI icon assets for SVG loading#42
Merged
Conversation
Adds examples/tests/svg-icons.ts covering the fixes from the previous commit: - 16 Material Design icons (Apache 2.0, fetched from jsdelivr) rendered at natural size (24x24), 4x (96x96), and extreme upscale (400x400) — the latter two regress visibly without DPR-aware rasterization. - Four source-region crops on rocko2.svg using srcX/srcY/srcWidth/ srcHeight, including a stretched centered region — exercises the new 9-arg drawImage source-crop path. - One cross-origin SVG loaded directly from jsdelivr to confirm the img.crossOrigin = 'anonymous' path works end-to-end (status label flips to green on success). Icons committed under examples/assets/svg-icons/. The test exports an automation() that calls settings.snapshot() so it is picked up by the visual-regression runner; the certified snapshot still needs to be generated locally (pnpm test:visual:update) and reviewed before committing. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
The dev server sends Cross-Origin-Embedder-Policy: require-corp on the
document, which forces every subresource to opt in via either:
- a Cross-Origin-Resource-Policy header on the response, or
- a CORS request (e.g. <img crossorigin="anonymous">) plus an
Access-Control-Allow-Origin header on the response
Vite already returns Access-Control-Allow-Origin: * but not CORP, so any
no-CORS subresource (notably <img> tags without crossorigin) was being
blocked by COEP — even for same-origin assets. This silently broke SVG
texture loading in the examples app: the <img> errored out before
onload fired and the texture went to the failed state.
Setting CORP: cross-origin on the dev server response matches the
existing ACAO: * and lets no-CORS loads succeed without changing the
COEP guarantees the document opted into.
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds a visual regression test page that exercises the SVG loading paths in
ImageTexture/loadSvg. Lands ahead of the SVG resolution/perf fix PR (#41) so that the fix PR can update the certified snapshot in one step instead of bundling test infrastructure + fix.What's in here
examples/tests/svg-icons.ts— new VRT page exporting anautomation()that callssettings.snapshot(). Five sections:srcX/srcY/srcWidth/srcHeight) onrocko2.svg, including full / left-half / right-half / centered-stretchedexamples/assets/svg-icons/— 16 Material Design Icons (Apache 2.0, sourced from@material-design-icons/svg): play_arrow, pause, skip_previous, skip_next, replay_10, forward_10, volume_up, fullscreen, subtitles, settings, cast, info, live_tv, movie, home, search. All have explicitwidth="24" height="24"plusviewBox.Why land this first
On
main(before #41), running this test will visibly show the issues the follow-up PR fixes — fuzzy upscales, wrong crops, failing cross-origin load. That's the intended baseline. Once merged, #41 can update the certified snapshot to capture the corrected output and the diff in the snapshot tells the story.Test plan
pnpm buildcleanpnpm testpasses (193/193)pnpm start→ navigate to?test=svg-iconsto confirm the page renders (will look rough onmain; that's expected)pnpm test:visual:update -t svg-iconsand commit it as a follow-up (or leave for fix(svg): DPR-aware rasterization, source-region crop, zero-copy upload #41 to introduce alongside the fix)🤖 Generated with Claude Code