commit 7165d46e3b2405fcbe87188998e20af6b3c56b7d
parent cb45424f429d3618455071440543c3b5423190b4
Author: Timothy Nikkel <tnikkel@gmail.com>
Date: Wed, 26 Nov 2025 13:04:53 +0000
Bug 1988032. Add some basic anchor pos plus async scroll reftests. r=hiro,layout-reviewers
Differential Revision: https://phabricator.services.mozilla.com/D272456
Diffstat:
10 files changed, 371 insertions(+), 0 deletions(-)
diff --git a/layout/reftests/async-scrolling/anchor-pos-1-ref.html b/layout/reftests/async-scrolling/anchor-pos-1-ref.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<style>
+.anchored {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: 50px;
+ top: 0;
+}
+</style>
+<div class="anchored"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/anchor-pos-1.html b/layout/reftests/async-scrolling/anchor-pos-1.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<style>
+.container {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.scroller {
+ position: absolute;
+ overflow: auto;
+ scrollbar-width: none;
+ width: 100px;
+ height: 100px;
+}
+.spacer {
+ width: 1px;
+ height: 500px;
+}
+.anchor {
+ width: 50px;
+ height: 50px;
+ background: blue;
+ anchor-name: --my-anchor;
+}
+.anchored {
+ position: absolute;
+ position-anchor: --my-anchor;
+ position-visibility: always;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: anchor(right);
+ top: anchor(bottom);
+}
+</style>
+<div class="container">
+ <div class="scroller"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="100" reftest-displayport-h="500"
+ reftest-async-scroll-y="50">
+ <div class="anchor"></div>
+ <div class="spacer"></div>
+ </div>
+ <div class="anchored"></div>
+</div>
+</html>
diff --git a/layout/reftests/async-scrolling/anchor-pos-2-ref.html b/layout/reftests/async-scrolling/anchor-pos-2-ref.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html>
+<style>
+.anchor1 {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background: blue;
+ left: 50px;
+ top: 0;
+}
+.anchored {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: 100px;
+ top: 50px;
+}
+</style>
+<div class="anchor1"></div>
+<div class="anchored"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/anchor-pos-2.html b/layout/reftests/async-scrolling/anchor-pos-2.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<style>
+.container {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.scroller {
+ position: absolute;
+ overflow: auto;
+ scrollbar-width: none;
+ width: 150px;
+ height: 100px;
+}
+.spacer {
+ width: 1px;
+ height: 500px;
+}
+.anchor1 {
+ width: 50px;
+ height: 50px;
+ background: blue;
+ anchor-name: --my-anchor1;
+ position: absolute;
+ position-anchor: --my-anchor2;
+ position-visibility: always;
+ left: anchor(right);
+ top: anchor(bottom);
+}
+.anchor2 {
+ width: 50px;
+ height: 50px;
+ background: pink;
+ anchor-name: --my-anchor2;
+}
+.anchored {
+ position: absolute;
+ position-anchor: --my-anchor1;
+ position-visibility: always;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: anchor(right);
+ top: anchor(bottom);
+}
+</style>
+<div class="container">
+ <div class="scroller"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="150" reftest-displayport-h="500">
+ <div class="scroller"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="150" reftest-displayport-h="500"
+ reftest-async-scroll-y="50">
+ <div class="anchor2"></div>
+ <div class="spacer"></div>
+ </div>
+ <div class="anchor1"></div>
+ <div class="spacer"></div>
+ </div>
+ <div class="anchored"></div>
+</div>
+</html>
diff --git a/layout/reftests/async-scrolling/anchor-pos-sticky-1-ref.html b/layout/reftests/async-scrolling/anchor-pos-sticky-1-ref.html
@@ -0,0 +1,22 @@
+<html>
+<style>
+.anchor {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background: blue;
+ left: 0;
+ top: 50px;
+}
+.anchored {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: 50px;
+ top: 100px;
+}
+</style>
+<div class="anchor"></div>
+<div class="anchored"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/anchor-pos-sticky-1.html b/layout/reftests/async-scrolling/anchor-pos-sticky-1.html
@@ -0,0 +1,52 @@
+<html reftest-async-scroll>
+<style>
+.container {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.scroller {
+ position: absolute;
+ overflow: auto;
+ scrollbar-width: none;
+ width: 100px;
+ height: 100px;
+}
+.spacer {
+ width: 1px;
+ height: 100px;
+}
+.largespacer {
+ width: 1px;
+ height: 500px;
+}
+.anchor {
+ position: sticky;
+ top: 0;
+ width: 50px;
+ height: 50px;
+ background: blue;
+ anchor-name: --my-anchor;
+}
+.anchored {
+ position: absolute;
+ position-anchor: --my-anchor;
+ position-visibility: always;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: anchor(right);
+ top: anchor(bottom);
+}
+</style>
+<div class="container">
+ <div class="scroller"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="100" reftest-displayport-h="500"
+ reftest-async-scroll-y="50">
+ <div class="spacer"></div>
+ <div class="anchor"></div>
+ <div class="largespacer"></div>
+ </div>
+ <div class="anchored"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/anchor-pos-sticky-2-ref.html b/layout/reftests/async-scrolling/anchor-pos-sticky-2-ref.html
@@ -0,0 +1,22 @@
+<html>
+<style>
+.anchor {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background: blue;
+ left: 0;
+ top: 0;
+}
+.anchored {
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: 50px;
+ top: 50px;
+}
+</style>
+<div class="anchor"></div>
+<div class="anchored"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/anchor-pos-sticky-2.html b/layout/reftests/async-scrolling/anchor-pos-sticky-2.html
@@ -0,0 +1,52 @@
+<html reftest-async-scroll>
+<style>
+.container {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.scroller {
+ position: absolute;
+ overflow: auto;
+ scrollbar-width: none;
+ width: 100px;
+ height: 100px;
+}
+.spacer {
+ width: 1px;
+ height: 100px;
+}
+.largespacer {
+ width: 1px;
+ height: 500px;
+}
+.anchor {
+ position: sticky;
+ top: 0;
+ width: 50px;
+ height: 50px;
+ background: blue;
+ anchor-name: --my-anchor;
+}
+.anchored {
+ position: absolute;
+ position-anchor: --my-anchor;
+ position-visibility: always;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: anchor(right);
+ top: anchor(bottom);
+}
+</style>
+<div class="container">
+ <div class="scroller"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="100" reftest-displayport-h="500"
+ reftest-async-scroll-y="250">
+ <div class="spacer"></div>
+ <div class="anchor"></div>
+ <div class="largespacer"></div>
+ </div>
+ <div class="anchored"></div>
+</html>
diff --git a/layout/reftests/async-scrolling/reftest.list b/layout/reftests/async-scrolling/reftest.list
@@ -189,3 +189,8 @@ defaults pref(apz.allow_zooming,true) test-pref(apz.fixed-margin-override.enable
== dynamic-toolbar-sticky-6b.html dynamic-toolbar-sticky-6-ref.html
== dynamic-toolbar-sticky-6c.html dynamic-toolbar-sticky-6-ref.html
defaults
+
+== anchor-pos-1.html anchor-pos-1-ref.html
+== anchor-pos-2.html anchor-pos-2-ref.html
+== anchor-pos-sticky-1.html anchor-pos-sticky-1-ref.html
+== anchor-pos-sticky-2.html anchor-pos-sticky-2-ref.html
diff --git a/testing/web-platform/tests/css/css-anchor-position/anchor-loop-crash.html b/testing/web-platform/tests/css/css-anchor-position/anchor-loop-crash.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html reftest-async-scroll>
+<style>
+.container {
+ position: absolute;
+ left: 0;
+ top: 0;
+}
+.scroller {
+ position: absolute;
+ overflow: auto;
+ scrollbar-width: none;
+ width: 150px;
+ height: 100px;
+}
+.spacer {
+ width: 1px;
+ height: 500px;
+}
+.anchor1 {
+ width: 50px;
+ height: 50px;
+ background: blue;
+ anchor-name: --my-anchor1;
+ position: absolute;
+ position-anchor: --my-anchor2;
+ position-visibility: always;
+ left: anchor(right);
+ top: anchor(bottom);
+}
+.anchor2 {
+ width: 50px;
+ height: 50px;
+ background: pink;
+ anchor-name: --my-anchor2;
+ position: absolute;
+ position-anchor: --my-anchor3;
+ position-visibility: always;
+ left: anchor(right);
+ top: anchor(bottom);
+}
+.anchored {
+ position: absolute;
+ position-anchor: --my-anchor1;
+ position-visibility: always;
+ width: 50px;
+ height: 50px;
+ background: yellow;
+ left: anchor(right);
+ top: anchor(bottom);
+ anchor-name: --my-anchor3;
+}
+</style>
+<div class="container">
+ <div class="scroller"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="150" reftest-displayport-h="500">
+ <div class="scroller"
+ reftest-displayport-x="0" reftest-displayport-y="0"
+ reftest-displayport-w="150" reftest-displayport-h="500"
+ reftest-async-scroll-y="50">
+ <div class="anchor2"></div>
+ <div class="spacer"></div>
+ </div>
+ <div class="anchor1"></div>
+ <div class="spacer"></div>
+ </div>
+ <div class="anchored"></div>
+</div>
+</html>
