commit 8a355456f3313da2eb0b34428bc87b00d8a3f4d1
parent 26d612bf9ed90d1df47685a76265fefab9002560
Author: Blink WPT Bot <blink-w3c-test-autoroller@chromium.org>
Date: Thu, 6 Nov 2025 21:36:29 +0000
Bug 1995414 [wpt PR 55556] - [anchor] Clear scroll-offsets after failing to find the last successful, a=testonly
Automatic update from web-platform-tests
[anchor] Clear scroll-offsets after failing to find the last successful (#55556)
Previously we used the remembered scroll-offsets only for the valid
try-option. This wasn't strictly correct, as we needed to use them for
the other try-options as well.
Now we use the remembered scroll-offsets for the "first-pass", e.g. to
determine if we can reuse the last-successful try-option.
If we can't, or if nothing fits, e.g. within:
- OOFCandidateStyleIterator::Reset()
- MoveToLastSuccessfulOrStyleWithoutFallbacks()
We clear the remembered scroll-offsets and generate a new set.
This patch also generates a new set when invalidated by the scroll-range
e.g. within: AnchorPositionScrollData::InvalidateLayoutAndPaint
All behaviour change should be behind the flag: CSSAnchorUpdate
Most of the position-area tests were written to be within a scroller,
which shouldn't flip now, so instead rework them to be a nested
scroller.
Bug: 438515315
Change-Id: If51a4c2c1334dcf727193d953e224008f2fa7a90
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7040577
Reviewed-by: Vladimir Levin <vmpstr@chromium.org>
Commit-Queue: Vladimir Levin <vmpstr@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1532513}
Co-authored-by: Ian Kilpatrick <ikilpatrick@chromium.org>
--
wpt-commits: ce8e41e71a4c231a22b7937262adddeb7bec1f15
wpt-pr: 55556
Diffstat:
7 files changed, 73 insertions(+), 87 deletions(-)
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-scrolling-005.html b/testing/web-platform/tests/css/css-anchor-position/position-area-scrolling-005.html
@@ -22,7 +22,7 @@
}
</style>
<div style="position:relative; width:500px; height:500px; background:yellow;">
- <div id="scrollable" style="overflow: hidden; width: 500px; height: 500px;">
+ <div id="scrollable" style="overflow: scroll; scrollbar-width: none; width: 500px; height: 500px;">
<div style="width:2000px; height:2000px;">
<div id="container">
<div style="anchor-name:--anchor; margin:200px; width:50px; height:50px; background:gray;"></div>
@@ -62,17 +62,17 @@
promise_test(async() => {
// Switch to bottom left.
- scrollable.scrollTo(100, 150);
+ scrollable.scrollTo(100, 200);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_rects_equal(anchored, 50, 100, 50, 200);
- }, "Scroll to 100,150");
+ assert_rects_equal(anchored, 50, 50, 50, 225);
+ }, "Scroll to 100,200");
promise_test(async() => {
scrollable.scrollTo(0, 0);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_rects_equal(anchored, 150, 250, 50, 200);
+ assert_rects_equal(anchored, 150, 250, 50, 225);
}, "Scroll to 0,0");
promise_test(async() => {
@@ -89,7 +89,7 @@
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_rects_equal(anchored, 50, 50, 225, 50);
- }, "Scroll to 750,100");
+ }, "Scroll to 200,100");
promise_test(async() => {
// Switch to bottom right.
@@ -97,5 +97,5 @@
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_rects_equal(anchored, 50, 50, 225, 225);
- }, "Scroll to 750,196");
+ }, "Scroll to 200,200");
</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-scrolling-006.html b/testing/web-platform/tests/css/css-anchor-position/position-area-scrolling-006.html
@@ -12,15 +12,20 @@
border: solid;
position-anchor: --anchor;
position-try-fallbacks: flip-block;
+ position-visibility: always;
width: 50%;
height: 50%;
+ min-width: 60px;
+ min-height: 60px;
background: cyan;
}
</style>
-<div id="scrollable" style="position:relative; overflow:scroll; scrollbar-width:none; width:500px; height:500px; background:yellow;">
- <div style="display: flow-root; width:2000px; height:2000px;">
- <div style="anchor-name:--anchor; margin:200px; width:50px; height:1000px; background:gray;"></div>
- <div id="anchored" style="position-area:top left;"></div>
+<div style="position:relative; width:500px; height:500px; background:yellow;">
+ <div id="scrollable" style="overflow:scroll; scrollbar-width:none; width:100%; height:100%; background:yellow;">
+ <div style="display: flow-root; width:2000px; height:2000px;">
+ <div style="anchor-name:--anchor; margin:200px; width:50px; height:1000px; background:gray;"></div>
+ <div id="anchored" style="position-area:top left;"></div>
+ </div>
</div>
</div>
<script>
@@ -39,31 +44,31 @@
promise_test(async() => {
// Swich to bottom option.
- scrollable.scrollTo(0, 1500);
+ scrollable.scrollTo(0, 1000);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_rects_equal(anchored, 100, 1200, 100, 400);
+ assert_rects_equal(anchored, 100, 200, 100, 150);
}, "Scroll to the bottom");
promise_test(async() => {
scrollable.scrollTo(0, 500);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_rects_equal(anchored, 100, 1200, 100, 400);
+ assert_rects_equal(anchored, 100, 640, 100, 60);
}, "Scroll to 500");
promise_test(async() => {
- scrollable.scrollTo(0, 195);
+ scrollable.scrollTo(0, 150);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_rects_equal(anchored, 100, 1200, 100, 400);
- }, "Scroll to 195");
+ assert_rects_equal(anchored, 100, 990, 100, 60);
+ }, "Scroll to 150");
promise_test(async() => {
// Switch to top option.
- scrollable.scrollTo(0, 194);
+ scrollable.scrollTo(0, 100);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_rects_equal(anchored, 100, 194, 100, 6);
- }, "Scroll to 194");
+ assert_rects_equal(anchored, 100, 40, 100, 60);
+ }, "Scroll to 100");
</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-area-scrolling-007.html b/testing/web-platform/tests/css/css-anchor-position/position-area-scrolling-007.html
@@ -22,14 +22,18 @@
position-try-fallbacks: flip-inline, flip-block, flip-block flip-inline;
width: 100%;
height: 100%;
+ min-width: 60px;
+ min-height: 60px;
background: hotpink;
}
</style>
-<div id="scroller" style="position:relative; overflow:hidden; width:400px; height:400px;">
- <div id="anchor"></div>
- <div style="width:1000px; height:1000px;"></div>
- <div id="anchored"></div>
+<div style="position:relative; width:400px; height:400px;">
+ <div id="scroller" style="overflow:scroll; scrollbar-width:none; width:100%; height:100%;">
+ <div id="anchor"></div>
+ <div style="width:1000px; height:1000px;"></div>
+ <div id="anchored"></div>
+ </div>
</div>
<script>
@@ -43,62 +47,32 @@
}, 'initial position');
promise_test(async () => {
- scroller.scrollTo(0, 10);
+ scroller.scrollTo(0, 150);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
assert_equals(anchored.offsetLeft, 0);
- assert_equals(anchored.offsetTop, 250);
+ assert_equals(anchored.offsetTop, 100);
assert_equals(anchored.offsetWidth, 100);
- assert_equals(anchored.offsetHeight, 160);
- }, 'Scroll down to 0,10');
-
- promise_test(async () => {
- scroller.scrollTo(10, 10);
- await waitUntilNextAnimationFrame();
- await waitUntilNextAnimationFrame();
- assert_equals(anchored.offsetLeft, 250);
- assert_equals(anchored.offsetTop, 10);
- assert_equals(anchored.offsetWidth, 160);
- assert_equals(anchored.offsetHeight, 190);
- }, 'Scroll right to 10,10');
-
- promise_test(async () => {
- scroller.scrollTo(10, 0);
- await waitUntilNextAnimationFrame();
- await waitUntilNextAnimationFrame();
- assert_equals(anchored.offsetLeft, 250);
- assert_equals(anchored.offsetTop, 10);
- assert_equals(anchored.offsetWidth, 160);
- assert_equals(anchored.offsetHeight, 190);
- }, 'Scroll up to 10,0');
-
- promise_test(async () => {
- scroller.scrollTo(10, 20);
- await waitUntilNextAnimationFrame();
- await waitUntilNextAnimationFrame();
- assert_equals(anchored.offsetLeft, 10);
- assert_equals(anchored.offsetTop, 250);
- assert_equals(anchored.offsetWidth, 90);
- assert_equals(anchored.offsetHeight, 170);
- }, 'Scroll down to 10,20');
+ assert_equals(anchored.offsetHeight, 300);
+ }, 'Scroll down to 0,150');
promise_test(async () => {
- scroller.scrollTo(101, 20);
+ scroller.scrollTo(50, 150);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_equals(anchored.offsetLeft, 250);
- assert_equals(anchored.offsetTop, 20);
- assert_equals(anchored.offsetWidth, 251);
- assert_equals(anchored.offsetHeight, 180);
- }, 'Scroll down to 101,20');
+ assert_equals(anchored.offsetLeft, 200);
+ assert_equals(anchored.offsetTop, 100);
+ assert_equals(anchored.offsetWidth, 200);
+ assert_equals(anchored.offsetHeight, 300);
+ }, 'Scroll right to 50,150');
promise_test(async () => {
- scroller.scrollTo(101, 30);
+ scroller.scrollTo(50, 0);
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_equals(anchored.offsetLeft, 250);
+ assert_equals(anchored.offsetLeft, 200);
assert_equals(anchored.offsetTop, 250);
- assert_equals(anchored.offsetWidth, 251);
- assert_equals(anchored.offsetHeight, 180);
- }, 'Scroll down to 101,30');
+ assert_equals(anchored.offsetWidth, 200);
+ assert_equals(anchored.offsetHeight, 150);
+ }, 'Scroll up to 50,0');
</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-try-fallbacks-003.html b/testing/web-platform/tests/css/css-anchor-position/position-try-fallbacks-003.html
@@ -19,6 +19,7 @@
position-anchor: --a;
position-area: top left;
position-try-fallbacks: flip-block;
+ position-visibility: always;
width: 100px;
height: 100px;
background: hotpink;
@@ -28,13 +29,15 @@
position-anchor: --a;
position-area: top right;
position-try-fallbacks: flip-block;
+ position-visibility: always;
width: 100px;
- height: 450px;
+ height: 300px;
background: yellow;
}
</style>
-<div id="scroller" style="position:relative; overflow-y:scroll; width:400px; height:400px;">
+<div style="position:relative; width:400px; height:400px;">
+<div id="scroller" style="overflow-y:scroll; scrollbar-width: none; width:400px; height:400px;">
<div id="anchor"></div>
<div style="height:1000px;"></div>
<div id="anchored1"></div>
@@ -59,15 +62,15 @@
// Both options fits. Pick the first one.
assert_equals(anchored1.offsetTop, 100);
// None of the options for #anchor2 fits. Use the first one.
- assert_equals(anchored2.offsetTop, -250);
+ assert_equals(anchored2.offsetTop, 0);
}, 'initial position');
promise_test(async () => {
scroller.scrollTop = 100;
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_equals(anchored1.offsetTop, 100);
- assert_equals(anchored2.offsetTop, -250);
+ assert_equals(anchored1.offsetTop, 0);
+ assert_equals(anchored2.offsetTop, 0);
}, 'scroll to 100');
promise_test(async () => {
@@ -76,9 +79,9 @@
await waitUntilNextAnimationFrame();
// The first option for #anchored1 no longer fits. Move to the second one,
// which fits.
- assert_equals(anchored1.offsetTop, 250);
+ assert_equals(anchored1.offsetTop, 149);
// None of the options for #anchor2 fits. Keep using the first one.
- assert_equals(anchored2.offsetTop, -250);
+ assert_equals(anchored2.offsetTop, 0);
}, 'scroll to 101');
promise_test(async () => {
@@ -87,38 +90,38 @@
await waitUntilNextAnimationFrame();
// The first option fits again, but stay at the second option, since that
// one too still fits.
- assert_equals(anchored1.offsetTop, 250);
+ assert_equals(anchored1.offsetTop, 150);
- assert_equals(anchored2.offsetTop, -250);
+ assert_equals(anchored2.offsetTop, 0);
}, 'scroll back to 100');
promise_test(async () => {
await redisplay();
// Redisplaying the anchored element should go through the options over
// again, which means that the first options will be chosen.
- assert_equals(anchored1.offsetTop, 100);
- assert_equals(anchored2.offsetTop, -250);
+ assert_equals(anchored1.offsetTop, 0);
+ assert_equals(anchored2.offsetTop, 0);
}, 'redisplay at 100');
promise_test(async () => {
- scroller.scrollTop = 299;
+ scroller.scrollTop = 200;
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
// The first option no longer fits. Move to the second one, which fits.
- assert_equals(anchored1.offsetTop, 250);
+ assert_equals(anchored1.offsetTop, 50);
- assert_equals(anchored2.offsetTop, -250);
- }, 'scroll to 299');
+ assert_equals(anchored2.offsetTop, 50);
+ }, 'scroll to 200');
promise_test(async () => {
scroller.scrollTop = 300;
await waitUntilNextAnimationFrame();
await waitUntilNextAnimationFrame();
- assert_equals(anchored1.offsetTop, 250);
+ assert_equals(anchored1.offsetTop, -50);
// The second option now fits.
- assert_equals(anchored2.offsetTop, 250);
+ assert_equals(anchored2.offsetTop, -50);
}, 'scroll to 300');
promise_test(async () => {
@@ -131,6 +134,6 @@
// The second option no longer fits, but neither does the first one. Stay at
// the second one.
- assert_equals(anchored2.offsetTop, 250);
+ assert_equals(anchored2.offsetTop, 100);
}, 'scroll back to 0');
</script>
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-002.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-002.html
@@ -12,6 +12,7 @@
}
#scroll-container {
overflow: hidden scroll;
+ scrollbar-width: none;
width: 100%;
height: 100%;
}
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-ref.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll-ref.html
@@ -2,6 +2,7 @@
<style>
#scroll-container {
overflow: hidden scroll;
+ scrollbar-width: none;
width: 400px;
height: 150px;
}
diff --git a/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.html b/testing/web-platform/tests/css/css-anchor-position/position-visibility-no-overflow-scroll.html
@@ -10,8 +10,10 @@
height: 150px;
overflow: hidden;
}
+
#scroll-container {
overflow: hidden scroll;
+ scrollbar-width: none;
width: 100%;
height: 100%;
}
