[anchor] Respect anchor-scope in PhysicalAnchorQuery::AnchorReference

The scroll-snapshotting code uses PhysicalAnchorQuery::AnchorReference (via LayoutBox::FindTargetAnchor) in order to find the relevant anchor element. This traversal also needs to check whether a candidate anchor and querying element is in the same (anchor) scope. This fixes an issue where scroll transforms would not apply to anchored elements under some scope. Fixed: 380234225 Change-Id: If778f3c52276c13e9a0b7f0b364ad71266e3da51 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6054228 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Anders Hartvoll Ruud <[email protected]> Cr-Commit-Position: refs/heads/main@{#1389656}
web-platform-tests · Nov 29, 2024 · 5ed255a · 5ed255a
1 parent f238d7d
commit 5ed255a
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 0 deletions.
diff --git a/css/css-anchor-position/anchor-scope-scroll-ref.html b/css/css-anchor-position/anchor-scope-scroll-ref.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<title>CSS Anchor Positioning: scroll transforms respect anchor-scope (ref)</title>
+<style>
+#scroller {
+  width: 200px;
+  height: 200px;
+  border: 1px solid black;
+  position: relative;
+}
+
+#item {
+  height: 50px;
+  background: lightgray;
+}
+
+#anchored {
+  position: absolute;
+  background: skyblue;
+  right: 0px;
+  width: 50px;
+  height: 50px;
+}
+
+.spacer {
+  height: 100px;
+}
+</style>
+<div id=scroller>
+  <div class=spacer></div>
+  <div id=item>
+    <b id=anchored></b>
+  </div>
+</div>
diff --git a/css/css-anchor-position/anchor-scope-scroll.html b/css/css-anchor-position/anchor-scope-scroll.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Anchor Positioning: scroll transforms respect anchor-scope</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-scope">
+<link rel="help" href="https://issues.chromium.org/issues/380234225">
+<link rel="match" href="anchor-scope-scroll-ref.html">
+<style>
+#scroller {
+  width: 200px;
+  height: 200px;
+  overflow-y: hidden;
+  border: 1px solid black;
+}
+
+#item {
+  anchor-scope: --item;
+  anchor-name: --item;
+  height: 50px;
+  background: lightgray;
+}
+
+#anchored {
+  position-anchor: --item;
+  position: absolute;
+  background: skyblue;
+  right: anchor(right);
+  top: anchor(top);
+  width: 50px;
+  height: 50px;
+}
+
+.spacer {
+  height: 150px;
+}
+</style>
+<div id=scroller>
+  <div class=spacer></div>
+  <div id=item>
+    <b id=anchored></b>
+  </div>
+  <div class=spacer></div>
+</div>
+<!-- This element should *not* affect scroll transforms for #anchored: -->
+<div style="anchor-name: --item"></div>
+<script>
+  scroller.scrollTop = 50;
+</script>
+</html>