[css-anchor-position] First step of scroll adjustment with overflow:h…

…idden This implements fail-safe for missing nodes referenced from adjustment ids of an anchored transform node. The case may happen - for overflow:hidden scrollers for which we don't create scroll nodes for now; - for adjustment containers that are not painted due to cull rect, etc. We'll use the main-thread calculated adjustment when any node is missing. This is not perfect (e.g. position of anchored may lag behind composited scrolling) but is better than not being anchored or jumping between anchored and not anchored. We may implement better solutions and decide whether to remove this fail-safe (or convert it to CHECK) in the future. Bug: 332331854 Change-Id: I9b9121a173fdc52eeaf2987f3886155f3ea773bf Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5455174 Reviewed-by: Philip Rogers <pdr@chromium.org> Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Cr-Commit-Position: refs/heads/main@{#1288314}
web-platform-tests · Apr 16, 2024 · 31314c5 · 31314c5
1 parent 6159bd0
commit 31314c5
Show file tree

Hide file tree

Showing 2 changed files with 104 additions and 0 deletions.
diff --git a/css/css-anchor-position/anchor-scroll-overflow-hidden-ref.html b/css/css-anchor-position/anchor-scroll-overflow-hidden-ref.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+body {
+  font: 20px/1 Ahem;
+  margin: 0;
+}
+
+#placefiller-above-anchor {
+  height: 200px;
+}
+
+#placefiller-before-anchor {
+  display: inline-block;
+  width: 50px;
+}
+
+#inner-anchored {
+  color: green;
+  position: fixed;
+  left: 70px;
+  top: 180px;
+}
+
+#outer-anchored {
+  color: yellow;
+  position: fixed;
+  left: 70px;
+  top: 220px;
+}
+</style>
+
+<div id="placefiller-above-anchor"></div>
+<div id="placefiller-before-anchor"></div>
+<span id="anchor">anchor</span>
+<div id="inner-anchored">inner-anchored</div>
+<div id="outer-anchored">outer-anchored</div>
diff --git a/css/css-anchor-position/anchor-scroll-overflow-hidden.html b/css/css-anchor-position/anchor-scroll-overflow-hidden.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<title>Basic of anchor positioned scrolling: anchored elements should be "pinned" to the anchor when anchor is scrolled in overflow:hidden</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-1/">
+<link rel="match" href="anchor-scroll-overflow-hidden-ref.html">
+<link rel="stylesheet" href="/fonts/ahem.css">
+<style>
+body {
+  font: 20px/1 Ahem;
+  margin: 0;
+}
+
+#scroll-container {
+  width: 400px;
+  height: 400px;
+  overflow: hidden;
+}
+
+#scroll-contents {
+  width: 1000px;
+  height: 1000px;
+}
+
+#placefiller-above-anchor {
+  height: 500px;
+}
+
+#placefiller-before-anchor {
+  display: inline-block;
+  width: 500px;
+}
+
+#anchor {
+  anchor-name: --anchor;
+}
+
+#inner-anchored {
+  color: green;
+  position: absolute;
+  left: anchor(--anchor left);
+  bottom: anchor(--anchor top);
+  position-anchor: --anchor;
+}
+
+#outer-anchored {
+  color: yellow;
+  position: absolute;
+  left: anchor(--anchor left);
+  top: anchor(--anchor bottom);
+  position-anchor: --anchor;
+}
+</style>
+
+<div id="scroll-container">
+  <div id="scroll-contents">
+    <div id="placefiller-above-anchor"></div>
+    <div id="placefiller-before-anchor"></div>
+    <span id="anchor">anchor</span>
+    <div id="inner-anchored">inner-anchored</div>
+  </div>
+</div>
+<div id="outer-anchored">outer-anchored</div>
+
+<script>
+const scroller = document.getElementById('scroll-container');
+scroller.scrollTop = 300;
+scroller.scrollLeft = 450;
+</script>