Free Debreuil
046d5c6356
Automatic update from web-platform-tests Overflow visible coerces to auto for single-axis scroll containers Resolve `visible` to `auto` when the other overflow axis is scrollable, even when SingleAxisScrollContainers is enabled. Narrows feature scope to only preserve `clip` in off-axis to a scroll axis. Also make `ComputedStyle::IsOverflowVisibleOrClip()` check the resolved overflow values directly to maintain existing behavior. Fixed: 489725066 Change-Id: Ifcbcbf072d04e4652186b29f8ad653b1fe7afeb5 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7634826 Reviewed-by: Vladimir Levin <vmpstr@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Commit-Queue: Free Debreuil <freedebreuil@google.com> Cr-Commit-Position: refs/heads/main@{#1600555} -- wpt-commits: 5eccb7441fedbe6c2f6e49acfb4f57a99eb94006 wpt-pr: 58551
47 lines
1.9 KiB
HTML
47 lines
1.9 KiB
HTML
<!DOCTYPE html>
|
|
<title>Single-axis sticky constraints: Nested elements</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>
|
|
#outer { overflow-y: scroll; overflow-x: clip; width: 200px; height: 200px; }
|
|
#inner { overflow-x: scroll; overflow-y: clip; width: 200px; height: 1000px; }
|
|
#sticky-outer { position: sticky; top: 10px; left: 20px; width: 100px; height: 60px; background: lightblue; }
|
|
#sticky-inner { position: sticky; top: 25px; left: 40px; width: 50px; height: 20px; background: blue; }
|
|
.spacer { width: 1000px; height: 1000px; }
|
|
</style>
|
|
|
|
<div id="outer">
|
|
<div id="inner">
|
|
<div id="sticky-outer">
|
|
<div id="sticky-inner"></div>
|
|
</div>
|
|
<div class="spacer"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
let outer = document.getElementById("outer");
|
|
let inner = document.getElementById("inner");
|
|
let stickyOuter = document.getElementById("sticky-outer");
|
|
let stickyInner = document.getElementById("sticky-inner");
|
|
|
|
// Scroll both axes to activate sticky offsets.
|
|
inner.scrollLeft = 50;
|
|
outer.scrollTop = 60;
|
|
|
|
let rOuter = outer.getBoundingClientRect();
|
|
let rStickyOuter = stickyOuter.getBoundingClientRect();
|
|
let rStickyInner = stickyInner.getBoundingClientRect();
|
|
|
|
// Verify the outer sticky element resolves against its own constraints.
|
|
assert_equals(rStickyOuter.left - rOuter.left, 20, "Outer sticky left");
|
|
assert_equals(rStickyOuter.top - rOuter.top, 10, "Outer sticky top");
|
|
|
|
// Verify the inner sticky element accumulates offsets from the outer sticky element.
|
|
assert_equals(rStickyInner.left - rOuter.left, 40, "Inner sticky left accumulates");
|
|
assert_equals(rStickyInner.top - rOuter.top, 25, "Inner sticky top accumulates");
|
|
}, "Nested sticky elements accumulate offsets correctly on independent axes");
|
|
</script>
|