[anchor-position] Fix scrolling with auto fallbacks

Existing code uses `OffsetInfo::fallback_index` to check if we are currently using a position fallback style, in which case scrolling can trigger a fallback position invalidation. However, the condition is wrong if the fallback is an auto fallback. This patch fixes it by adding a `uses_fallback_style` flag to indicate if the style is a fallback style. The new flag will also be used by other patches. Note: even though `anchor(auto)` will be removed soon, the code added by this patch will still be relevant, because we'll have other forms of auto fallbacks. Fixed: 1476972 Change-Id: Ia6be58070a47033158594d5e8e9d9fbf4cf1e794 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4842787 Auto-Submit: Xiaocheng Hu <xiaochengh@chromium.org> Reviewed-by: Ian Kilpatrick <ikilpatrick@chromium.org> Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org> Cr-Commit-Position: refs/heads/main@{#1193275}
web-platform-tests · Sep 6, 2023 · f97b1df · f97b1df
1 parent 3fbfb91
commit f97b1df
Showing 1 changed file with 60 additions and 0 deletions.
diff --git a/css/css-anchor-position/anchor-position-auto-004.html b/css/css-anchor-position/anchor-position-auto-004.html
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<title>Tests auto fallbacks with scrolling</title>
+<link rel="author" href="mailto:xiaochengh@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#scroll">
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-automatic">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="support/test-common.js"></script>
+
+<style>
+#container {
+  position: relative;
+  width: 200px;
+  height: 300px;
+}
+
+#scroller {
+  height: 300px;
+  overflow-y: scroll;
+}
+
+#anchor {
+  width: 100px;
+  height: 100px;
+  margin-top: 200px;
+  margin-bottom: 200px;
+  background: orange;
+  anchor-name: --a;
+}
+
+#target {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  anchor-default: --a;
+  left: anchor(left);
+  top: anchor(auto);
+  background: lime;
+}
+</style>
+
+<div id="container">
+  <div id="scroller">
+    <div id="anchor"></div>
+  </div>
+  <div id="target"></div>
+</div>
+
+<script>
+promise_test(async () => {
+  await waitUntilNextAnimationFrame();
+  assert_fallback_position(target, anchor, 'top');
+}, 'Should be above the anchor when at initial scroll position');
+
+promise_test(async () => {
+  scroller.scrollTop = 100;
+  await waitUntilNextAnimationFrame();
+  assert_fallback_position(target, anchor, 'bottom');
+}, 'Scroll down to allow enough space below the anchor, should move target below');
+</script>