mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-10 21:28:04 +02:00
a12f231eac
Automatic update from web-platform-testsReland "Port another set of sticky tests to JS rather than reftests" This is a reland of 913109149534a732bdb5461d0ba2759f5d2f50f4 Now that the WPT test infra has been pulled from upstream, the hope is that changing tests from reftest to jsharness won't cause the bots to fail horribly. Original change's description: > Port another set of sticky tests to JS rather than reftests > > Change-Id: Idf6dd882d2d50b1ec349f245d76717553ee266b3 > Reviewed-on: https://chromium-review.googlesource.com/882002 > Reviewed-by: Robert Flack <flackr@chromium.org> > Commit-Queue: Stephen McGruer <smcgruer@chromium.org> > Cr-Commit-Position: refs/heads/master@{#532966} Bug: 699244 Change-Id: Ib8c16d08f1327765e0bd322a708452373db8581c Reviewed-on: https://chromium-review.googlesource.com/951662 Commit-Queue: Stephen McGruer <smcgruer@chromium.org> Reviewed-by: Robert Flack <flackr@chromium.org> Cr-Commit-Position: refs/heads/master@{#541437} wpt-commits: 0070589338713156909137fbf4cc86ebdba8bc7c wpt-pr: 9881 wpt-commits: 0070589338713156909137fbf4cc86ebdba8bc7c wpt-pr: 9881
54 lines
2.1 KiB
HTML
54 lines
2.1 KiB
HTML
<!DOCTYPE html>
|
|
<title>position:sticky elements should respect padding on their ancestor overflow element</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
|
<meta name="assert" content="This test checks that position:sticky elements respect padding on their ancestor overflow element" />
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<script src="resources/sticky-util.js"></script>
|
|
|
|
<body></body>
|
|
|
|
<script>
|
|
test(() => {
|
|
const elements = setupStickyTest('top', 50);
|
|
elements.scroller.style.padding = '20px 0';
|
|
|
|
// Before sticking; the element isn't within the padding range.
|
|
elements.scroller.scrollTop = 150;
|
|
const nonStickyTopY = elements.container.offsetTop +
|
|
elements.filler.clientHeight;
|
|
assert_equals(elements.sticky.offsetTop, nonStickyTopY);
|
|
}, 'A sticky element should not be affected by ancestor padding until it ' +
|
|
'reaches it');
|
|
|
|
test(() => {
|
|
const elements = setupStickyTest('top', 50);
|
|
elements.sticky.style.top = '0';
|
|
elements.scroller.style.padding = '20px 0';
|
|
|
|
elements.scroller.scrollTop = 200;
|
|
|
|
// This math cancels to sticky.offsetTop == (scroller.scrollTop + 50), but
|
|
// for clarity the calculations are left explicit.
|
|
const nonStickyTopY = elements.container.offsetTop +
|
|
elements.filler.clientHeight;
|
|
const targetTopY = elements.scroller.scrollTop;
|
|
const stickyOffset = targetTopY - nonStickyTopY;
|
|
|
|
assert_equals(elements.sticky.offsetTop, nonStickyTopY + stickyOffset + 20);
|
|
}, 'A sticky element should be offset by ancestor padding even when stuck');
|
|
|
|
test(() => {
|
|
const elements = setupStickyTest('top', 50);
|
|
elements.sticky.style.top = '0';
|
|
elements.scroller.style.padding = '20px 0';
|
|
|
|
elements.scroller.scrollTop = 315;
|
|
const maxOffsetInContainer = elements.container.offsetTop +
|
|
elements.container.clientHeight - elements.sticky.clientHeight;
|
|
assert_equals(elements.sticky.offsetTop, maxOffsetInContainer);
|
|
}, 'Ancestor overflow padding does not allow a sticky element to escape its ' +
|
|
'container');
|
|
</script>
|