Skip to content

test(react-positioning): pin browser geometry and lifecycle contracts - #36947

Draft
Dmytro Kirpa (dmytrokirpa) wants to merge 3 commits into
masterfrom
dmytrokirpa-upstream-positioning-contracts
Draft

Dmytro Kirpa (dmytrokirpa) wants to merge 3 commits into
masterfrom
dmytrokirpa-upstream-positioning-contracts

Conversation

@dmytrokirpa

@dmytrokirpa Dmytro Kirpa (dmytrokirpa) commented Oct 20, 2026 •

Copy link
Copy Markdown
Contributor

Previous Behavior

The existing positioning tests do not pin the real-browser geometry and lifecycle output of the current Floating UI engine comprehensively enough to serve as a compatibility oracle for an engine replacement.

The first version also pinned host-dependent fractional left/top layout rectangles: Linux CI failed only DPR 1.5 and 3 with transforms disabled. The unchanged engine emitted the same exact 280.667px inline coordinates, but Linux Electron 130 measured 280.65625 instead of the original macOS host's 280.6640625.

A subsequent React 17 compatibility job identified six additional scroll-fixture failures: the older Chromium bundled with Cypress 13 ignores scrollbar-width: none, leaving a 15px scrollbar and shifting the geometry by exactly 15px.

New Behavior

Adds 143 browser contracts: 126 geometry scenarios, 14 lifecycle cases, one baseline-integrity check, and two negative-control tests. Coverage includes placements and RTL, flips/fallbacks, shifting/tethering, offsets, boundaries, arrows, sizing, transformed containers, virtual targets, fractional DPR rounding, updates, and cleanup. Includes documentation, Cypress cache inputs, and one none Beachball file. No production engine changes.

For fractional DPR scenarios with transforms disabled, rectangle x/y are compared exactly against an engine-free sibling in the same containing block, positioned from the committed literal left/top and dimensions. This isolates native layout quantization from the engine's device-pixel rounding. No epsilon, rounding tolerance, engine-derived expected coordinates, browser/platform switch, or regenerated baseline is used. All inline styles, widths/heights, placements, visibility flags, and other output remain literal exact assertions. All other rectangle snapshots remain exact literal comparisons.

Negative controls at DPR 1.5 and 3 prove that changing inline left or top by 0.001px is rejected even when the rendered rectangle is identical. They also reject a displaced rectangle with unchanged inline left/top. A missing reference fails explicitly.

A scoped ::-webkit-scrollbar rule hides the host/floating fixture scrollbars in older Chromium without disabling scrolling. Scroll scenarios explicitly assert the host retains its full 400px client width and scrollable overflow. Existing geometry expectations are unchanged.

This is the lower contract layer in the existing upstream positioning stack. The initial five-file patch at immutable commit fca219991ed9e907b01274bd89ac1431e51c573a matched the pinned source diff from f626209351609e43bc98eb8cc1296273faa679b7 to 788e3b739fe79246a2f8850d1c575cf4018fd744. The original baseline file remains byte-for-byte unchanged, preserving Cypress 14.4.1 / Electron 130 at 800x600 provenance and the observed explicit strategy: 'absolute' => fixed behavior. Corrections are separate additive commits, not a rewrite of the benchmark oracle.

Validation (Node 22.22.3, existing upstream engine):

  • NX_DAEMON=false yarn nx run react-positioning:e2e --browser=electron --config=retries=0 --skip-nx-cache — passed 150/150 tests after fractional fix bba60dd91c; standard NX_DAEMON=false yarn nx run react-positioning:e2e --browser=electron --config=retries=0 also passed 150/150 after final scrollbar correction 85dedaeb3d. Local Cypress 14.4.1 / Electron 130; existing webpack tsconfig warnings non-fatal.
  • NX_DAEMON=false yarn nx run react-positioning:test-rit--17--e2e — passed 150/150 tests after final scrollbar correction, using Cypress 13.17.0 and its older Electron. Missing RIT dependencies were restored through the existing Nx prepare target before validation.
  • NX_DAEMON=false yarn nx run-many -p react-positioning -t build,type-check,lint,test --parallel=1 --skip-nx-cache — passed all targets after fractional fix; 24 unit suites, 219 tests, four snapshots. Final lint and type-check also passed after scrollbar correction.
  • NX_DAEMON=false yarn nx run react-positioning:format:check — passed after final correction.
  • git diff --cached --check — passed; baseline file identity verified against fca219991e.
  • Final CI on 85dedaeb3d — all four jobs passed: main (including formatting, build/test/lint/SSR), E2E, React 17/18 integration (E2E, type-check and tests), and React Compiler analysis. This verifies both the original Linux fractional-coordinate failures and the older-Chromium scrollbar failures are resolved against the existing engine.
  • Current upstream master e2642c72390b31645e5766683776199f0ab01ce2 has no positioning source/config changes relative to this branch's original master base e4aeb0bcb176702796d2029a4e950cd061e654bd.
  • yarn beachball change --type none --message 'test(react-positioning): pin Floating UI browser geometry and lifecycle contracts' --no-commit --no-fetch --since origin/master — passed during initial publication; the same single none file is updated for these corrections.

Related Issue(s)

  • No issue is closed by this test-only change.
  • Preserves the contract provenance from dmytrokirpa/fluentui#23; that PR is not modified.
  • Related positioning work: #36870, not modified by this PR.

@github-actions

Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

@@ -0,0 +1,6 @@
{

@github-actions github-actions Bot Oct 20, 2026 •

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🕵🏾‍♀️ visual changes to review in the Visual Change Report

vr-tests-react-components/Menu Converged - submenuIndicator slotted content 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Menu Converged - submenuIndicator slotted content.default.submenus open.chromium.png 413 Changed
vr-tests-react-components/Positioning 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/Positioning.Positioning end.updated 2 times.chromium.png 138 Changed
vr-tests-react-components/Positioning.Positioning end.chromium.png 12 Changed
vr-tests-react-components/ProgressBar converged 2 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness - High Contrast.default.chromium.png 115 Changed
vr-tests-react-components/ProgressBar converged.Indeterminate + thickness.default.chromium.png 115 Changed
vr-tests-react-components/TagPicker 1 screenshots
Image Name Diff(in Pixels) Image Type
vr-tests-react-components/TagPicker.disabled - RTL.disabled input hover.chromium.png 635 Changed

There were 1 duplicate changes discarded. Check the build logs for more information.

@dmytrokirpa
Dmytro Kirpa (dmytrokirpa) added this pull request to stack #36952 October 20, 2026 09:34
@dmytrokirpa
Dmytro Kirpa (dmytrokirpa) marked this pull request as draft October 20, 2026 09:47

This branch has not been deployed

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant