Skip to content

[Chess] Use time-based animation values and dynamic OKLCH palette - #119

Open
kraskevich wants to merge 1 commit into
WebKit:tentative-1-4-testsfrom
kraskevich:upstream-chess
Open

kraskevich wants to merge 1 commit into
WebKit:tentative-1-4-testsfrom
kraskevich:upstream-chess

Conversation

@kraskevich

Copy link
Copy Markdown

In the current Chess subtest, --anim-value is incremented by 1 on each animate() call and passed through mod(var(--anim-input), 400) * 1grad against a fixed 5-color OKLCH palette.

Why this matters:

  • Driving animation progress from a frame counter (++this._animValue) rather than elapsed time (performance.now()) couples the visual speed of the workload to the display refresh rate and frame drops (e.g., running twice as fast at 120 Hz as at 60 Hz), whereas real web animations advance as a continuous function of elapsed time.
  • Stepping an integer modulo 400 against a static palette restricts every leaf's conic and linear gradient to 400 discrete states across the entire benchmark run. An engine can cache or pre-bake those 400 resolved gradient states after the first few seconds instead of evaluating dynamic CSS gradients and color-mix() styles each frame. Using continuous floating-point elapsed time and modulating the stage's OKLCH palette channels over time ensures the subtest measures ongoing CSS color/gradient evaluation and rasterization while preserving contain: strict and static glyph masks.

In the current Chess subtest, `--anim-value` is incremented by `1` on each `animate()` call and passed through `mod(var(--anim-input), 400) * 1grad` against a fixed 5-color OKLCH palette.

Why this matters:
- Driving animation progress from a frame counter (`++this._animValue`) rather than elapsed time (`performance.now()`) couples the visual speed of the workload to the display refresh rate and frame drops (e.g., running twice as fast at 120 Hz as at 60 Hz), whereas real web animations advance as a continuous function of elapsed time.
- Stepping an integer modulo 400 against a static palette restricts every leaf's conic and linear gradient to 400 discrete states across the entire benchmark run. An engine can cache or pre-bake those 400 resolved gradient states after the first few seconds instead of evaluating dynamic CSS gradients and `color-mix()` styles each frame. Using continuous floating-point elapsed time and modulating the stage's OKLCH palette channels over time ensures the subtest measures ongoing CSS color/gradient evaluation and rasterization while preserving `contain: strict` and static glyph masks.
@netlify

netlify Bot commented Sep 30, 2026 •

Copy link
Copy Markdown

✅ Deploy Preview for webkit-motionmark-preview ready!

Name Link
🔨 Latest commit c7d50b1
🔍 Latest deploy log https://app.netlify.com/projects/webkit-motionmark-preview/deploys/6abcdeb2a3a89f0008577229
😎 Deploy Preview https://deploy-preview-119--webkit-motionmark-preview.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant