Skip to content

Commit

Permalink
Bug 1888944 [wpt PR 45451] - [css-anchor-position] Support basic posi…
Browse files Browse the repository at this point in the history 
…tion-visibility: anchors-visible, a=testonly

Automatic update from web-platform-tests
[css-anchor-position] Support basic position-visibility: anchors-visible

This patch implements basic support for position-visibility:
anchors-visible with a single anchor. There is active discussion about
whether to track the visibility of multiple anchors at:
w3c/csswg-drafts#7758 (comment).
The high-level approach in this patch is to use a post-layout
intersection observer for the tracked anchor. On visibility changes, the
anchored element's paint layer is updated via
`PaintLayer::SetInvisibleForPositionVisibility`.

Spec:
w3c/csswg-drafts#7758 (comment)

Bug: 329703412
Change-Id: Icedcb43510a0c6a491cf463e7dc8a114ab7abf5f
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5410539
Commit-Queue: Xianzhu Wang <[email protected]>
Auto-Submit: Philip Rogers <[email protected]>
Reviewed-by: Xianzhu Wang <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1281911}

--

wpt-commits: 6673c544f6ecefa1e89dcd47db63b1c43a29396f
wpt-pr: 45451
  • Loading branch information
@progers @moz-wptsync-bot
progers authored and moz-wptsync-bot committed Apr 10, 2024
1 parent 130ba73 commit 302fb98
Show file tree
Hide file tree
Showing 13 changed files with 505 additions and 40 deletions.
32 changes: 32 additions & 0 deletions ...ests/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-in-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#scroll-container {
overflow: hidden scroll;
width: 300px;
height: 100px;
}

#anchor {
width: 100px;
height: 100px;
background: orange;
margin-bottom: 100px;
}

#target {
width: 100px;
height: 100px;
background: green;
}
</style>

<div id="scroll-container">
<div id="anchor">anchor</div>
</div>
<div id="target">target</div>

<script>
const scroller = document.getElementById('scroll-container');
scroller.scrollTop = 0;
</script>
64 changes: 64 additions & 0 deletions ...ss/css-anchor-position/position-visibility-anchors-visible-after-scroll-in.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
<!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</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
<link rel="match" href="position-visibility-anchors-visible-after-scroll-in-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/rendering-utils.js"></script>
<style>
#scroll-container {
overflow: hidden scroll;
width: 300px;
height: 100px;
}

#anchor {
anchor-name: --a1;
width: 100px;
height: 100px;
background: orange;
}

#spacer {
height: 100px;
}

#target {
position-anchor: --a1;
position-visibility: anchors-visible;
inset-area: block-end;
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 0;
left: 0;
}
</style>

<div id="scroll-container">
<div id="anchor">anchor</div>
<div id="spacer"></div>
<div id="target">target</div>
</div>

<script>
// #target should be initially visible because it is anchored to #anchor,
// which is visible.
waitForAtLeastOneFrame().then(() => {
// Scroll #anchor out of view.
const scroller = document.getElementById('scroll-container');
scroller.scrollTop = 100;
// #target should now be invisible.

waitForAtLeastOneFrame().then(() => {
// Scroll #anchor back into view.
scroller.scrollTop = 0;

// #target should now be visible again.
takeScreenshot();
});
});
</script>
22 changes: 22 additions & 0 deletions ...sts/css/css-anchor-position/position-visibility-anchors-visible-after-scroll-out-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#scroll-container {
overflow: hidden scroll;
width: 300px;
height: 100px;
}

#spacer {
height: 200px;
}
</style>

<div id="scroll-container">
<div id="spacer"><div>
</div>

<script>
const scroller = document.getElementById('scroll-container');
scroller.scrollTop = 100;
</script>
59 changes: 59 additions & 0 deletions ...s/css-anchor-position/position-visibility-anchors-visible-after-scroll-out.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<!DOCTYPE html>
<html class=reftest-wait>
<meta charset="utf-8">
<meta name="assert" content="Scrolling an anchor out of view should cause a position-visibility: anchors-visible element to disappear." />
<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
<link rel="match" href="position-visibility-anchors-visible-after-scroll-out-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/rendering-utils.js"></script>
<style>
#scroll-container {
overflow: hidden scroll;
width: 300px;
height: 100px;
}

#anchor {
anchor-name: --a1;
width: 100px;
height: 100px;
background: orange;
}

#spacer {
height: 100px;
}

#target {
position-anchor: --a1;
position-visibility: anchors-visible;
inset-area: bottom;
width: 100px;
height: 100px;
background: red;
position: absolute;
top: 0;
left: 0;
}
</style>

<div id="scroll-container">
<div id="anchor">anchor</div>
<div id="spacer"></div>
<div id="target">target</div>
</div>

<script>
// #target should be initially visible because it is anchored to #anchor,
// which is visible.

waitForAtLeastOneFrame().then(() => {
// Scroll #anchor so that it is out of view.
const scroller = document.getElementById('scroll-container');
scroller.scrollTop = 100;

// #target should now be invisible.
takeScreenshot();
});
</script>
29 changes: 29 additions & 0 deletions .../tests/css/css-anchor-position/position-visibility-anchors-visible-change-anchor-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#scroll-container {
overflow: hidden scroll;
width: 300px;
height: 100px;
}
#anchor {
width: 100px;
height: 200px;
background: orange;
}
#target {
width: 100px;
height: 100px;
background: green;
}
</style>

<div id="scroll-container">
<div id="anchor"></div>
</div>
<div id="target">target</div>

<script>
const scroller = document.getElementById('scroll-container');
scroller.scrollTop = 100;
</script>
68 changes: 68 additions & 0 deletions .../css/css-anchor-position/position-visibility-anchors-visible-change-anchor.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
<!DOCTYPE html>
<html class=reftest-wait>
<meta charset="utf-8">
<meta name="assert" content="Position-visibility should not be affected by the visibility of a previous anchor." />
<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
<link rel="match" href="position-visibility-anchors-visible-change-anchor-ref.html">
<script src="/common/reftest-wait.js"></script>
<script src="/common/rendering-utils.js"></script>
<style>
#scroll-container {
overflow: hidden scroll;
width: 300px;
height: 100px;
}

.anchor {
width: 100px;
height: 100px;
background: orange;
display: inline-block;
}

#anchor1 {
height: 200px;
anchor-name: --a1;
}

#anchor2 {
anchor-name: --a2;
}

#target {
position-anchor: --a2;
position-visibility: anchors-visible;
inset-area: bottom;
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 0;
left: 0;
}
</style>

<div id="scroll-container">
<div id="anchor1" class="anchor">anchor1</div>
<div id="anchor2" class="anchor">anchor2</div>
<div id="target">target</div>
</div>

<script>
// #target should be initially visible because it is anchored to #anchor2,
// which is visible.
waitForAtLeastOneFrame().then(() => {
// Change #target to be anchored to #anchor1.
target.style.positionAnchor = '--a1';
// #target should be still be visible because #anchor1 is also visible.
waitForAtLeastOneFrame().then(() => {
// Scroll #anchor2 out of view, with #anchor1 still in view.
const scroller = document.getElementById('scroll-container');
scroller.scrollTop = 100;
// #target should still be visible because it is anchored to #anchor1,
// which is still visible.
takeScreenshot();
});
});
</script>
10 changes: 10 additions & 0 deletions ...ss-anchor-position/position-visibility-anchors-visible-non-intervening-container-ref.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
<!DOCTYPE html>
<meta charset="utf-8">
<style>
#target {
width: 100px;
height: 100px;
background: green;
}
</style>
<div id="target">target</div>
65 changes: 65 additions & 0 deletions ...hor-position/position-visibility-anchors-visible-non-intervening-container.tentative.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="assert" content="position-visibility: anchors-visible should consider the visibility of the anchor relative the containing scroller, ignoring visibility in other scrollers." />
<title>CSS Anchor Positioning Test: position-visibility: anchors-visible</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7758">
<link rel="match" href="position-visibility-anchors-visible-non-intervening-container-ref.html">
<style>
#non-intervening-scroll-container {
overflow: hidden;
width: 200px;
height: 200px;
position: relative;
}

#position-container {
position: relative;
}

#scroll-container {
overflow: hidden scroll;
width: 400px;
height: 100px;
}

#anchor {
anchor-name: --a1;
width: 100px;
height: 100px;
background: orange;
}

#spacer {
height: 100px;
}

#target {
position-anchor: --a1;
position-visibility: anchors-visible;
inset-area: right;
width: 100px;
height: 100px;
background: green;
position: absolute;
top: 0;
left: 0;
}
</style>

<div id="non-intervening-scroll-container">
<div id="position-container">
<div id="scroll-container">
<!-- The anchor is not visible to the screen, but it is visible in the -->
<!-- containing block of anchor1 and target1, so the target should not -->
<!-- be hidden due to position-visibility: anchors-visible. -->
<div id="anchor">anchor</div>
<div id="spacer"></div>
<div id="target">target</div>
</div>
</div>
</div>

<script>
const non_intervening_scroller = document.getElementById('non-intervening-scroll-container');
non_intervening_scroller.scrollLeft = 100;
</script>
21 changes: 4 additions & 17 deletions ...g/web-platform/tests/css/css-anchor-position/position-visibility-anchors-visible-ref.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,30 +3,17 @@
<style>
#scroll-container {
overflow: hidden scroll;
width: 400px;
width: 300px;
height: 100px;
}

#contents-container {
height: 400px;
}

.anchor {
width: 100px;
height: 100px;
background: orange;
display: inline-block;
#spacer {
height: 200px;
}
</style>

<div id="scroll-container">
<div id="contents-container">
<div class="anchor">anchor1</div>

<div class="anchor" style="height: 150px;">anchor2</div>

<div class="anchor" style="height: 150px;">anchor3</div>
</div>
<div id="spacer"></div>
</div>

<script>
Expand Down
Loading

0 comments on commit 302fb98

Please sign in to comment.