David Baron
90a0c0284b
Automatic update from web-platform-tests Add support for newly-resolved keywords for @supports named-feature(). This adds two new keywords to @supports named-feature(): * anchor-position-follows-transforms * single-axis-scroll-container (behind a flag) This also removes support for the align-content-on-display-block used for the initial implementation, which was an important initial use case but for which this probably came too late to be useful. See resolutions in: https://github.com/w3c/csswg-drafts/issues/13677 https://github.com/w3c/csswg-drafts/issues/13678 and the already-updated spec in: https://drafts.csswg.org/css-conditional-5/#support-definition-named-features Bug: 353715317, 486922896 Fixed: 517156025, 517159367 Change-Id: I1661212fc93185d7d0a9339cbeb4588077eb6df4 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7879705 Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: David Baron <dbaron@chromium.org> Cr-Commit-Position: refs/heads/main@{#1637213} -- wpt-commits: 54d1316bd75a960e482a9c611fab13e0f589a3fa wpt-pr: 60214
68 lines
2.8 KiB
HTML
68 lines
2.8 KiB
HTML
<!DOCTYPE html>
|
|
<title>Single-axis sticky constraints: Basic and Clip</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-position-3/#sticky-pos">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style>
|
|
.scroller-y { overflow-y: scroll; overflow-x: clip; width: 100px; height: 100px; margin-bottom: 20px; }
|
|
.scroller-x { overflow-x: scroll; overflow-y: clip; width: 100px; height: 200px; }
|
|
.clip-y { overflow-x: scroll; overflow-y: clip; width: 100px; height: 200px; }
|
|
.sticky { position: sticky; top: 10px; left: 20px; width: 10px; height: 10px; background: green; }
|
|
.spacer { width: 400px; height: 400px; }
|
|
</style>
|
|
|
|
<!-- Standard independent scrollers. -->
|
|
<div id="outer-basic" class="scroller-y">
|
|
<div id="inner-basic" class="scroller-x">
|
|
<div id="sticky-basic" class="sticky"></div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Scroller with overflow: clip on one axis. -->
|
|
<div id="outer-clip" class="scroller-y">
|
|
<div id="inner-clip" class="clip-y">
|
|
<div id="sticky-clip" class="sticky" style="left: 10px;"></div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let outer = document.getElementById("outer-basic");
|
|
let inner = document.getElementById("inner-basic");
|
|
let sticky = document.getElementById("sticky-basic");
|
|
|
|
// Scroll both axes. The sticky element tracks 'inner' for the X axis and 'outer' for the Y axis.
|
|
inner.scrollLeft = 50;
|
|
outer.scrollTop = 60;
|
|
|
|
let rOuter = outer.getBoundingClientRect();
|
|
let rSticky = sticky.getBoundingClientRect();
|
|
|
|
assert_equals(rSticky.left - rOuter.left, 20, "Left constraint applies to inner scroller");
|
|
assert_equals(rSticky.top - rOuter.top, 10, "Top constraint applies to outer scroller");
|
|
// This assert_true about CSS.supports() should only pass if the
|
|
// previous assert_equals passes. (If it fails, the test will fail
|
|
// before getting here.)
|
|
assert_true(CSS.supports("named-feature(single-axis-scroll-container)"),
|
|
"named-feature() detects support correctly");
|
|
}, "Constraints apply independently across nested single-axis scrollers");
|
|
|
|
test(() => {
|
|
let outer = document.getElementById("outer-clip");
|
|
let inner = document.getElementById("inner-clip");
|
|
let sticky = document.getElementById("sticky-clip");
|
|
|
|
// Scroll both axes. Because 'inner' is overflow-y: clip, the sticky element skips it and attaches to 'outer' for the Y axis.
|
|
inner.scrollLeft = 50;
|
|
outer.scrollTop = 60;
|
|
|
|
let rOuter = outer.getBoundingClientRect();
|
|
let rSticky = sticky.getBoundingClientRect();
|
|
|
|
assert_equals(rSticky.left - rOuter.left, 10, "Left constraint applies to inner scroller");
|
|
assert_equals(rSticky.top - rOuter.top, 10, "Top constraint skips clip and applies to outer");
|
|
}, "Constraints correctly skip axes that are overflow: clip");
|
|
</script>
|