[anchor] Fix under-invalidation of position-try-fallbacks.

bfgeek · chromium-wpt-export-bot · commit 89f0524cc191 · 2026-05-07T14:14:27.000-07:00
*** Duplicate of: https://chromium-review.googlesource.com/c/chromium/src/+/7819103 (as other patch wouldn't trigger CQ). When we use a different fallback style, we recalc the style, then set it on the element, but with ApplyStyleChanges::kNo set. This results in no invalidation from the style changing. If we have two fallback options which both invoke layout (within ComputeOofBlockDimensions) with different constraints, they may end up hitting each other's layout cache resulting in incorrect layout. For the moment fix this by manually invalidating layout when the style changes on the layout object. The downside of this approach is that if we revisit the same OOF multiple times, we need to relayout multiple times. Conceptually we could have a smarter measure cache which also takes a style so that we could do a deep equality check on it. Bug: 486806596 Change-Id: I22dd5c28d784b5886a61eb8ad40aa006de54a6cf Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7828781 Reviewed-by: Morten Stenshorne <mstensho@chromium.org> Commit-Queue: Morten Stenshorne <mstensho@chromium.org> Auto-Submit: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1627027}
diff --git a/css/css-anchor-position/under-invalidation.html b/css/css-anchor-position/under-invalidation.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<link rel="help" href="https://crbug.com/486806596">
+<link rel="match" href="../reference/ref-filled-green-100px-square-only.html">
+<style>
+#container {
+  position: relative;
+  width: 100px;
+  height: 100px;
+}
+#anchor {
+  position: absolute;
+  anchor-name: --a;
+  width: 100px;
+  height: 10px;
+  top: 90px;
+  background: green;
+}
+#target {
+  position: absolute;
+  width: 100px;
+  min-height: 150px;
+  bottom: anchor(--a top);
+  background: green;
+  position-try-fallbacks: --fallback;
+}
+@position-try --fallback {
+   min-height: 90px;
+}
+</style>
+<p>Test passes if there is a filled green square.</p>
+<div id="container">
+  <div id="anchor"></div>
+  <div id="target"></div>
+</div>
