LearnNewsExamplesServices
Frontmatter
id9394
titleE2E: Validate GridRowScrollPinning against DevIndex Canvas Worker Latency
stateClosed
labels
aitestinggrid
assigneestobiu
createdAtMar 8, 2026, 5:25 PM
updatedAtMar 8, 2026, 5:44 PM
githubUrlhttps://github.com/neomjs/neo/issues/9394
authortobiu
commentsCount1
parentIssue9380
subIssues[]
subIssuesCompleted0
subIssuesTotal0
blockedBy[]
blocking[]
closedAtMar 8, 2026, 5:44 PM

E2E: Validate GridRowScrollPinning against DevIndex Canvas Worker Latency

Closed v12.1.0 aitestinggrid
tobiu
tobiu commented on Mar 8, 2026, 5:25 PM

This ticket tracks the E2E validation of the CSS Variable based GridRowScrollPinning architecture against the devindex application.

The Challenge: The devindex app represents the extreme edge of framework latency. Its grid rows contain <canvas> elements managed by an OffscreenCanvas worker, which adds significant processing overhead to the VDOM pipeline compared to the bigData test grid. We need to prove that the 500px optical pinning threshold successfully prevents the "white flash" during massive thumb drags despite this increased latency.

Testing Strategy:

  1. Environment: apps/devindex/index.html
  2. Streaming Wait: The test must explicitly wait for the initial GitHub API data streaming to complete before initiating scroll maneuvers to ensure a stable testing baseline.
  3. Measurement: We will reuse the requestAnimationFrame + getBoundingClientRect visual blanking detector developed in #9392.
  4. Assertion: The grid must record 0 blank frames during a simulated massive scrollbar thumb drag.
tobiu added the ai label on Mar 8, 2026, 5:25 PM
tobiu added the testing label on Mar 8, 2026, 5:25 PM
tobiu added the grid label on Mar 8, 2026, 5:25 PM
tobiu added parent issue #9380 on Mar 8, 2026, 5:25 PM
tobiu referenced in commit 97a2fa2 - "Test: Add DevIndex E2E Validation for GridRowScrollPinning (#9394) on Mar 8, 2026, 5:43 PM
tobiu
tobiu Mar 8, 2026, 5:44 PM

Input from Gemini 3.1 Pro:

✦ The test/playwright/e2e/GridThumbDragDevIndex.spec.mjs test file has been committed and pushed.

Findings from the DevIndex Playwright Test:

  • White Flashes: 0 frames. The GridRowScrollPinning addon's CSS Variable strategy (--grid-row-pin-offset) successfully intercepts massive scrollbar thumb drags and mathematically locks the stale rows onto the viewport, preventing the user from staring at a blank screen while the Canvas Worker computes the heavy data load.
  • Jitter Bounces: 5 frames. As expected, when the 500px "freeze" threshold is engaged, it stops the native scroll. Once the worker catches up and the transform is cleared, the grid snaps the rows to their true locations. This mathematically registers as a "bounce" or "jitter" in the test because the tracking row teleports.

Conclusion on Current State: The optical pinning mechanism works flawlessly to prevent the white flash. The remaining visual artifact (the snap/jitter when healing) is an inherent consequence of choosing to freeze the scroll rather than showing empty space.

Closing this ticket to finalize the baseline. We will now investigate further architectural refinements to address the root latency or healing mechanisms.

tobiu assigned to @tobiu on Mar 8, 2026, 5:44 PM
tobiu closed this issue on Mar 8, 2026, 5:44 PM
tobiu referenced in commit 5fc7737 - "Test: Optimize Playwright E2E Config for Native GPU Acceleration (#9394) on Mar 8, 2026, 6:34 PM