[css-anchor-position-1] Fix flicker with try-option with fixed-positi…

…on anchor Previously we supposed the default anchor wouldn't change in try-options, but the latest draft spec allows that. When the currently tried option will use a default anchor that is different from the currently used default anchor, checking overflow with the snapshotted AnchorPositionScrollData will be incorrect, and the incorrect results caused oscillation between try options. To resolve that, when the total offset is requested for a different default anchor, we need to calculate it on the fly instead of getting it from the snapshotted result. Also allow one more layout if ValidateSnapshot() (called after the first layout in a document lifecycle update) finds that the snapshotted scroll data needs update, to ensure correct layout and paint with the changed anchor and scroll adjustment in most cases. In rare cases when we need more than one additional layout to get the stable layout, ShouldScheduleNextService() will schedule another lifecycle. Fixed: 338929745 Change-Id: I295fbc605ac8b7f0298eef7aeff4434c6bd54628 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5529048 Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/main@{#1299608}
web-platform-tests · May 11, 2024 · bba96a1 · bba96a1
1 parent d3dfe27
commit bba96a1
Show file tree

Hide file tree

Showing 4 changed files with 180 additions and 0 deletions.
diff --git a/css/css-anchor-position/position-try-switch-from-fixed-anchor-ref.html b/css/css-anchor-position/position-try-switch-from-fixed-anchor-ref.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<style>
+body {
+  width: 150vw;
+  height: 150vh;
+}
+.anchor {
+  width: 50px;
+  height: 50px;
+  background: orange;
+}
+#anchor1 {
+  position: absolute;
+  top: 100px;
+  left: 350px;
+}
+#anchor2 {
+  position:fixed;
+  right: 0;
+  bottom: 0;
+}
+#anchored {
+  position: absolute;
+  top: 50px;
+  left: 350px;
+  width: 50px;
+  height: 50px;
+  background: blue;
+}
+</style>
+<div class="anchor" id="anchor1"></div>
+<div class="anchor" id="anchor2"></div>
+<div id="anchored"></div>
diff --git a/css/css-anchor-position/position-try-switch-from-fixed-anchor.html b/css/css-anchor-position/position-try-switch-from-fixed-anchor.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: @position-try with different default anchors,
+       switching to fixed-position anchor on scroll and back on another scroll</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-rule">
+<link rel="match" href="position-try-switch-from-fixed-anchor-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+body {
+  width: 150vw;
+  height: 150vh;
+}
+.anchor {
+  width: 50px;
+  height: 50px;
+  background: orange;
+}
+#anchor1 {
+  anchor-name: --anchor1;
+  position: absolute;
+  top: 100px;
+  left: 350px;
+}
+#anchor2 {
+  anchor-name: --anchor2;
+  position:fixed;
+  right: 0;
+  bottom: 0;
+}
+#anchored {
+  position-anchor: --anchor1;
+  inset-area: top;
+  position-try-options: --fixed;
+  position: fixed;
+  width: 50px;
+  height: 50px;
+  background: blue;
+}
+@position-try --fixed {
+  inset-area: top left;
+  position-anchor: --anchor2;
+}
+</style>
+<div class="anchor" id="anchor1"></div>
+<div class="anchor" id="anchor2"></div>
+<div id="anchored"></div>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  window.scrollTo(250, 100);
+  waitForAtLeastOneFrame().then(() => {
+    window.scrollTo(0, 0);
+    takeScreenshot();
+  });
+});
+</script>
diff --git a/css/css-anchor-position/position-try-switch-to-fixed-anchor-ref.html b/css/css-anchor-position/position-try-switch-to-fixed-anchor-ref.html
@@ -0,0 +1,37 @@
+<!doctype html>
+<meta charset="utf-8">
+<style>
+body {
+  width: 150vw;
+  height: 150vh;
+}
+.anchor {
+  width: 50px;
+  height: 50px;
+  background: orange;
+}
+#anchor1 {
+  position: absolute;
+  top: 100px;
+  left: 350px;
+}
+#anchor2 {
+  position:fixed;
+  right: 0;
+  bottom: 0;
+}
+#anchored {
+  position: fixed;
+  right: 50px;
+  bottom: 50px;
+  width: 50px;
+  height: 50px;
+  background: blue;
+}
+</style>
+<div class="anchor" id="anchor1"></div>
+<div class="anchor" id="anchor2"></div>
+<div id="anchored"></div>
+<script>
+window.scrollTo(250, 100);
+</script>
diff --git a/css/css-anchor-position/position-try-switch-to-fixed-anchor.html b/css/css-anchor-position/position-try-switch-to-fixed-anchor.html
@@ -0,0 +1,53 @@
+<!doctype html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<title>CSS Anchor Positioning Test: @position-try with different default anchors, switching to fixed-position anchor on scroll</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#fallback-rule">
+<link rel="match" href="position-try-switch-to-fixed-anchor-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+body {
+  width: 150vw;
+  height: 150vh;
+}
+.anchor {
+  width: 50px;
+  height: 50px;
+  background: orange;
+}
+#anchor1 {
+  anchor-name: --anchor1;
+  position: absolute;
+  top: 100px;
+  left: 350px;
+}
+#anchor2 {
+  anchor-name: --anchor2;
+  position:fixed;
+  right: 0;
+  bottom: 0;
+}
+#anchored {
+  position-anchor: --anchor1;
+  inset-area: top;
+  position-try-options: --fixed;
+  position: fixed;
+  width: 50px;
+  height: 50px;
+  background: blue;
+}
+@position-try --fixed {
+  inset-area: top left;
+  position-anchor: --anchor2;
+}
+</style>
+<div class="anchor" id="anchor1"></div>
+<div class="anchor" id="anchor2"></div>
+<div id="anchored"></div>
+<script>
+waitForAtLeastOneFrame().then(() => {
+  window.scrollTo(250, 100);
+  takeScreenshot();
+});
+</script>