commit 10d1eab040580c7521cd19b7432bf70b6c62931d
parent 556fbb28777facf1f68083fc94c79b97bb419407
Author: Philip Rogers <pdr@chromium.org>
Date: Thu, 9 Oct 2025 20:34:35 +0000
Bug 1992197 [wpt PR 55191] - Only use clipping ancestors for pos-vis intervening clips, a=testonly
Automatic update from web-platform-tests
Only use clipping ancestors for pos-vis intervening clips
Our position-visibility implementation could use non-clipping ancestors
for the position-visibility intersection observer root which meant that
the non-clipping ancestor would be required to intersect the anchor.
This could result in an anchor that was considered invisible, even
though it was visible to the user. This patch skips over non-clipping
ancestors when computing the intersecting root.
Fixed: 448173938, 425901169
Change-Id: Iee6791b55e331cf15be6958b4aced8f19b2403b5
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7001193
Auto-Submit: Philip Rogers <pdr@chromium.org>
Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org>
Reviewed-by: Xianzhu Wang <wangxianzhu@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1523996}
--
wpt-commits: 5ee496ffd3db1607db172e3d7fff6cf56b725340
wpt-pr: 55191
Diffstat:
4 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-document-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-document-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+ #anchor {
+ width: 100px;
+ height: 100px;
+ margin-left: 150vw;
+ background: orange;
+ }
+
+ #target {
+ width: 100px;
+ height: 100px;
+ margin-top: -100px;
+ margin-left: calc(150vw - 100px);
+ background: green;
+ }
+</style>
+
+<div id="anchor">anchor</div>
+<div id="target">target</div>
+
+<script>
+ document.documentElement.scrollLeft = document.documentElement.scrollWidth;
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-document.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-document.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<meta charset="utf-8">
+<meta name="assert" content="Scrolling an anchor in to view should cause a position-visibility: anchors-visible element to appear." />
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible after scrolling in the document</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
+<link rel="match" href="position-visibility-anchors-visible-after-scroll-in-document-ref.html">
+<script src="/common/reftest-wait.js"></script>
+<script src="/common/rendering-utils.js"></script>
+<style>
+ #anchor {
+ anchor-name: --anchor;
+ margin-left: 150vw;
+ width: 100px;
+ height: 100px;
+ background: orange;
+ }
+
+ #spacer {
+ height: 100px;
+ }
+
+ #target {
+ position-anchor: --anchor;
+ position-visibility: anchors-visible;
+ position-area: left;
+ width: 100px;
+ height: 100px;
+ background: green;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+</style>
+
+<div id="anchor">anchor</div>
+<div id="spacer"></div>
+<div id="target">target</div>
+
+<script>
+ document.documentElement.scrollLeft = 0;
+ waitForAtLeastOneFrame().then(() => {
+ // Scroll #anchor in to view.
+ document.documentElement.scrollLeft = document.documentElement.scrollWidth;
+ waitForAtLeastOneFrame().then(() => {
+ takeScreenshot();
+ });
+ });
+</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow-ref.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+ #outer-container {
+ width: 100px;
+ height: 100px;
+ overflow: visible;
+ position: relative;
+ }
+ #inner-container {
+ width: 100px;
+ height: 100px;
+ overflow: visible;
+ position: relative;
+ }
+ #anchor {
+ anchor-name: --anchor;
+ position: relative;
+ margin-left: 200px;
+ width: 100px;
+ height: 100px;
+ background: orange;
+ }
+ #spacer {
+ height: 200px;
+ }
+ #target-a {
+ position-anchor: --anchor;
+ position-visibility: anchors-visible;
+ position-area: top left;
+ width: 50px;
+ height: 50px;
+ background: green;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #target-b {
+ position-anchor: --anchor;
+ position-visibility: anchors-visible;
+ position-area: center left;
+ width: 50px;
+ height: 50px;
+ background: green;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #target-c {
+ position-anchor: --anchor;
+ position-visibility: anchors-visible;
+ position-area: bottom left;
+ width: 50px;
+ height: 50px;
+ background: green;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+</style>
+
+<div id="spacer"></div>
+<div id="anchor">anchor</div>
+<div id="target-a">target-a</div>
+<div id="target-b">target-b</div>
+<div id="target-c">target-c</div>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-in-overflow.html
@@ -0,0 +1,74 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="assert" content="A position-visibility: anchors-visible element should be visible if the anchor is under overflow: visible." />
+<title>CSS Anchor Positioning Test: position-visibility: anchors-visible in overflow</title>
+<link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-visibility">
+<link rel="match" href="position-visibility-anchors-visible-in-overflow-ref.html">
+<style>
+ #outer-container {
+ width: 100px;
+ height: 100px;
+ overflow: visible;
+ position: relative;
+ }
+ #inner-container {
+ width: 100px;
+ height: 100px;
+ overflow: visible;
+ position: relative;
+ }
+ #anchor {
+ anchor-name: --anchor;
+ position: relative;
+ margin-left: 200px;
+ width: 100px;
+ height: 100px;
+ background: orange;
+ }
+ #spacer {
+ height: 200px;
+ }
+ #target-a {
+ position-anchor: --anchor;
+ position-visibility: anchors-visible;
+ position-area: top left;
+ width: 50px;
+ height: 50px;
+ background: green;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #target-b {
+ position-anchor: --anchor;
+ position-visibility: anchors-visible;
+ position-area: center left;
+ width: 50px;
+ height: 50px;
+ background: green;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ #target-c {
+ position-anchor: --anchor;
+ position-visibility: anchors-visible;
+ position-area: bottom left;
+ width: 50px;
+ height: 50px;
+ background: green;
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+</style>
+
+<div id="outer-container">
+ <div id="inner-container">
+ <div id="spacer"></div>
+ <div id="anchor">anchor</div>
+ <div id="target-a">target-a</div>
+ </div>
+ <div id="target-b">target-b</div>
+</div>
+<div id="target-c">target-c</div>
