commit 92aa8ae7a01ef6c9931d138906dde343de2111dc
parent 603a95298a15f4b16e2de7dad5a126652ba2ab76
Author: Johannes Odland <johannes.odland@nrk.no>
Date: Tue, 16 Dec 2025 08:47:01 +0000
Bug 1997323 [wpt PR 55763] - Add test for overconstrained sticky view rectangle, a=testonly
Automatic update from web-platform-tests
Add test for overconstrained sticky view rectangle (#55763)
--
wpt-commits: c65337ee485b4ea260ad72d5b126d975f23e9c49
wpt-pr: 55763
Diffstat:
2 files changed, 134 insertions(+), 0 deletions(-)
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-and-right-overconstrained.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-left-and-right-overconstrained.html
@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<title>position:sticky elements with width larger than the space available between left and right</title>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
+<meta name="assert" content="This test checks that the end edge is adjusted when the sticky view rectangle width ends up smaller than the width of the sticky element border box" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+
+.scroller {
+ width: 100px;
+ height: 100px;
+ overflow: auto;
+ position: relative;
+ display: flex;
+}
+.padding {
+ width: 200px;
+ height: 100px;
+ flex: none;
+}
+.sticky {
+ position: sticky;
+ background: green;
+ left: 20px;
+ right: 0;
+ width: 200px;
+ height: 100px;
+ flex: none;
+}
+</style>
+
+<body>
+ <div class="scroller">
+ <div class="padding"></div>
+ <div class="sticky"></div>
+ <div class="padding"></div>
+ </div>
+</body>
+
+<script>
+test(() => {
+ const scroller = document.querySelector('.scroller');
+ const element = document.querySelector('.sticky');
+ scroller.scrollLeft = 0;
+ assert_equals(element.offsetLeft, 20);
+}, 'start of scroll container');
+
+test(() => {
+ const scroller = document.querySelector('.scroller');
+ const element = document.querySelector('.sticky');
+ scroller.scrollLeft = 160;
+ assert_equals(element.offsetLeft, 180);
+}, 'right before the in-flow position of the sticky box');
+
+test(() => {
+ const scroller = document.querySelector('.scroller');
+ const element = document.querySelector('.sticky');
+ scroller.scrollLeft = 220;
+ assert_equals(element.offsetLeft, 240);
+}, 'right after the in-flow position the sticky box');
+
+test(() => {
+ const scroller = document.querySelector('.scroller');
+ const element = document.querySelector('.sticky');
+ scroller.scrollLeft = 500;
+ assert_equals(element.offsetLeft, 400);
+}, 'end of scroll container');
+</script>
diff --git a/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-and-bottom-overconstrained.html b/testing/web-platform/tests/css/css-position/sticky/position-sticky-top-and-bottom-overconstrained.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<title>position:sticky elements with height larger than the space available between top and bottom</title>
+<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
+<meta name="assert" content="This test checks that the end edge is adjusted when the sticky view rectangle height ends up smaller than the height of the sticky element border box" />
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+
+.scroller {
+ height: 100px;
+ overflow: auto;
+ position: relative;
+}
+.padding {
+ height: 200px;
+}
+.sticky {
+ position: sticky;
+ background: green;
+ top: 20px;
+ bottom: 0;
+ height: 200px;
+}
+</style>
+
+<body>
+ <div class="scroller">
+ <div class="padding"></div>
+ <div class="sticky"></div>
+ <div class="padding"></div>
+ </div>
+</body>
+
+<script>
+test(() => {
+ const scroller = document.querySelector('.scroller');
+ const element = document.querySelector('.sticky');
+ scroller.scrollTop = 0;
+ assert_equals(element.offsetTop, 20);
+}, 'start of scroll container');
+
+test(() => {
+ const scroller = document.querySelector('.scroller');
+ const element = document.querySelector('.sticky');
+ scroller.scrollTop = 160;
+ assert_equals(element.offsetTop, 180);
+}, 'right before the in-flow position of the sticky box');
+
+test(() => {
+ const scroller = document.querySelector('.scroller');
+ const element = document.querySelector('.sticky');
+ scroller.scrollTop = 220;
+ assert_equals(element.offsetTop, 240);
+}, 'right after the in-flow position the sticky box');
+
+test(() => {
+ const scroller = document.querySelector('.scroller');
+ const element = document.querySelector('.sticky');
+ scroller.scrollTop = 500;
+ assert_equals(element.offsetTop, 400);
+}, 'end of scroll container');
+</script>
