Skip to content

GitLab

T
tangled
Commit 2686180f authored by Stephen McGruer's avatar Stephen McGruer Committed by Commit Bot
Browse files
Options

Reland "Port another set of sticky tests to JS rather than reftests" 

This is a reland of 91310914

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: default avatarRobert Flack <flackr@chromium.org>
Cr-Commit-Position: refs/heads/master@{#541437}
parent 42864292
Hide whitespace changes
Inline Side-by-side
Showing with 194 additions and 736 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-inflow-position-ref.html deleted 100644 → 0
View file @ 42864292
<!DOCTYPE html>
<title>Reference for position:sticky elements should not affect the flow position of other elements</title>
<style>
.scroller {
height: 200px;
width: 100px;
overflow-y: scroll;
margin-bottom: 15px;
}
.sticky {
background-color: green;
}
.box {
height: 50px;
width: 50px;
}
.before {
background-color: fuchsia;
}
.after {
background-color: orange;
}
.padding {
height: 450px;
}
</style>
<div class="scroller">
<div class="before box"></div>
<div class="box"></div>
<div class="after box"></div>
<div class="sticky box"></div>
<div class="padding"></div>
</div>
<div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-inflow-position.html
View file @ 2686180f
<!DOCTYPE html>
<title>position:sticky elements should not affect the flow position of other elements</title>
<link rel="match" href="position-sticky-inflow-position-ref.html" />
<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 do not affect the flow position of other elements" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.scroller {
position: relative;
height: 200px;
width: 100px;
overflow-y: scroll;
margin-bottom: 15px;
overflow: scroll;
}
.sticky {
#sticky {
background-color: green;
position: sticky;
top: 150px;
}
.box {
height: 50px;
width: 50px;
}
.before {
#before {
background-color: fuchsia;
}
.after {
#after {
background-color: orange;
}
.box {
height: 50px;
width: 50px;
}
.padding {
height: 500px;
}
</style>
<div class="scroller">
<div class="before box"></div>
<div class="sticky box"></div>
<div class="after box"></div>
<div id="before" class="box"></div>
<div id="sticky" class="box"></div>
<div id="after" class="box"></div>
<div class="padding"></div>
</div>
<div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>
<script>
test(() => {
// The sticky element is pushed to be stuck 150 pixels from the top.
assert_equals(sticky.offsetTop, 150);
// Neither 'before' or 'after' should be affected by the change in the sticky
// element's location.
assert_equals(before.offsetTop, 0);
assert_equals(after.offsetTop, before.clientHeight + sticky.clientHeight);
}, 'sticky offset should not affect the position of other elements.');
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-margins-ref.html deleted 100644 → 0
View file @ 42864292
<!DOCTYPE html>
<title>Reference for position:sticky elements should properly interact with margins</title>
<style>
.group {
display: inline-block;
position: relative;
width: 180px;
height: 400px;
}
.scroller {
width: 150px;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
.indicator {
position: relative;
background-color: green;
margin: 15px;
}
.box {
width: 100px;
height: 100px;
}
.padding {
height: 385px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 60;
document.getElementById('scroller3').scrollTop = 120;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 0;"></div>
<div class="padding"></div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 50px;"></div>
<div class="padding"></div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 85px;"></div>
<div class="padding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-margins.html
View file @ 2686180f
<!DOCTYPE html>
<title>position:sticky elements should properly interact with margins</title>
<link rel="match" href="position-sticky-margins-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="position:sticky elements should ignore margins when sticking, but consider them when making sure sticky elements do not escape their containing block" />
<style>
.group {
display: inline-block;
position: relative;
width: 180px;
height: 400px;
}
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
.scroller {
position: relative;
width: 150px;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
<script src="resources/sticky-util.js"></script>
.holder {
width: 130px;
height: 200px;
}
<body></body>
.sticky {
position: sticky;
background-color: green;
top: 5px;
margin: 15px;
}
.indicator {
left: 15px;
position: absolute;
background-color: red;
}
.box {
width: 100px;
height: 100px;
}
.padding {
height: 300px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 0;
document.getElementById('scroller2').scrollTop = 60;
document.getElementById('scroller3').scrollTop = 120;
});
test(() => {
const elements = setupStickyTest('top', 50);
elements.sticky.style.margin = '15px';
elements.scroller.scrollTop = 100;
assert_equals(elements.sticky.offsetTop,
elements.container.offsetTop + elements.filler.clientHeight + 15);
}, 'Before sticking, the margin should be obeyed.');
test(() => {
const elements = setupStickyTest('top', 50);
elements.sticky.style.margin = '15px';
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 + 50;
const stickyOffset = targetTopY - nonStickyTopY;
assert_equals(elements.sticky.offsetTop, nonStickyTopY + stickyOffset);
}, 'Whilst stuck, the margin is irrelevant.');
test(() => {
const elements = setupStickyTest('top', 50);
elements.sticky.style.margin = '15px';
elements.scroller.scrollTop = 300;
const maxOffsetInContainer = elements.container.offsetTop +
elements.container.clientHeight - elements.sticky.clientHeight;
assert_equals(elements.sticky.offsetTop, maxOffsetInContainer - 15);
}, 'The margin is taken into account when making sure the sticky element ' +
'does not escape its container');
</script>
<!-- Before sticking, the margin should be obeyed. -->
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 15px;"></div>
<div class="holder">
<div class="sticky box"></div>
</div>
<div class="padding"></div>
</div>
</div>
<!-- Whilst stuck, the margin is irrelevant. -->
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 65px;"></div>
<div class="holder">
<div class="sticky box"></div>
</div>
<div class="padding"></div>
</div>
</div>
<!-- The margin does count when making sure the sticky element does not escape
its containing block. -->
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 100px;"></div>
<div class="holder">
<div class="sticky box"></div>
</div>
<div class="padding"></div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-overflow-padding-ref.html deleted 100644 → 0
View file @ 42864292
<!DOCTYPE html>
<title>Reference for position:sticky elements should respect padding on their ancestor overflow element</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
padding: 20px 0;
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.indicator {
background-color: green;
position: absolute;
left: 0;
}
.box {
width: 100%;
height: 100px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 220;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 170px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 195px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 220px;"></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-overflow-padding.html
View file @ 2686180f
<!DOCTYPE html>
<title>position:sticky elements should respect padding on their ancestor overflow element</title>
<link rel="match" href="position-sticky-overflow-padding-ref.html" />
<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" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
.scroller {
/* The target sticky position should be offset by this padding. */
padding: 20px 0;
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
<script src="resources/sticky-util.js"></script>
.contents {
height: 500px;
}
.prepadding {
height: 100px;
}
.container {
height: 200px;
}
.innerpadding {
height: 50px;
}
.indicator {
background-color: red;
position: absolute;
left: 0;
}
.sticky {
background-color: green;
position: sticky;
top: 0;
}
.box {
width: 100%;
height: 100px;
}
</style>
<body></body>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 220;
});
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>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 170px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 195px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 220px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-root-scroller-ref.html deleted 100644 → 0
View file @ 42864292
<!DOCTYPE html>
<title>Reference for position:sticky should operate correctly for the root scroller</title>
<style>
body {
/* Assumption: 3000px is taller than any user agents test window size. */
height: 3000px;
}
.indicator {
background-color: green;
position: absolute;
top: 750px;
}
.box {
width: 200px;
height: 200px;
}
</style>
<script>
window.addEventListener('load', function() {
window.scrollTo(0, 700);
});
</script>
<div class="indicator box"></div>
<div style="position: absolute; top: 1000px;">You should see a green box above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-root-scroller.html
View file @ 2686180f
<!DOCTYPE html>
<title>position:sticky should operate correctly for the root scroller</title>
<link rel="match" href="position-sticky-root-scroller-ref.html" />
<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 work when using the root (document) scroller" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
body {
/* Assumption: 3000px is taller than any user agents test window size. */
height: 3000px;
}
.indicator {
background-color: red;
position: absolute;
}
.sticky {
background-color: green;
#sticky {
position: sticky;
top: 50px;
}
.box {
width: 200px;
height: 200px;
background-color: green;
}
</style>
<div id="sticky"></div>
<script>
window.addEventListener('load', function() {
test(() => {
window.scrollTo(0, 700);
});
assert_equals(sticky.offsetTop, 700 + 50);
}, 'Sticky elements work with the root (document) scroller');
</script>
<div class="indicator box" style="top: 750px;"></div>
<div class="sticky box"></div>
<div style="position: absolute; top: 1000px;">You should see a green box above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-transforms-ref.html deleted 100644 → 0
View file @ 42864292
<!DOCTYPE html>
<title>Reference for transforms on position:sticky elements should apply after sticking</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.indicator {
background-color: green;
position: relative;
}
.box {
width: 100%;
height: 50px;
}
.rotated {
transform: rotateX(60deg);
height: 100px;
width: 100%;
}
.perspective {
transform: perspective(3px) translateZ(1px);
height: 50px;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 50;
document.getElementById('scroller3').scrollTop = 50;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator box" style="height: 100px; top: 75px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="rotated indicator" style="top: 100px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<!-- Required for blending. -->
<div class="perspective" style="position: absolute; background: red; top: 100px;"></div>
<div class="contents">
<div class="perspective indicator" style="top: 100px;"></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-transforms-translate-ref.html deleted 100644 → 0
View file @ 42864292
<!DOCTYPE html>
<title>Reference for translations on position:sticky elements should apply after sticking</title>
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
.contents {
height: 500px;
}
.indicator {
background-color: green;
position: relative;
}
.box {
width: 100%;
height: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 70;
document.getElementById('scroller3').scrollTop = 50;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 50px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 50px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="indicator box" style="top: 200px;"></div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-transforms-translate.html
View file @ 2686180f
<!DOCTYPE html>
<title>translations on position:sticky elements should apply after sticking</title>
<link rel="match" href="position-sticky-transforms-translate-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that translations on position:sticky elements are carried out on their stuck position" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
<script src="resources/sticky-util.js"></script>
.contents {
height: 500px;
}
.container {
height: 150px;
}
.indicator {
background-color: red;
position: absolute;
left: 0;
}
.sticky {
background-color: green;
position: sticky;
top: 50px;
}
.box {
width: 100%;
height: 50px;
}
</style>
<body style="margin: 0;"></body>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 70;
document.getElementById('scroller3').scrollTop = 50;
});
test(() => {
const elements = setupStickyTest('top', 50);
elements.sticky.style.transform = 'translateY(-100%)';
elements.scroller.scrollTop = 100;
// Transforms don't affect offsetTop, so use getBoundingClientRect.
assert_equals(elements.sticky.getBoundingClientRect().y,
elements.scroller.getBoundingClientRect().y);
}, 'Translation transform can move sticky element past sticking point');
test(() => {
const elements = setupStickyTest('top', 50);
elements.sticky.style.transform = 'translateY(50%)';
elements.scroller.scrollTop = 200;
// Transforms don't affect offsetTop, so use getBoundingClientRect.
const stickyElementOffset = elements.sticky.getBoundingClientRect().y -
elements.scroller.getBoundingClientRect().y;
assert_equals(stickyElementOffset, 100);
}, 'Stuck elements can still be moved via translations');
test(() => {
const elements = setupStickyTest('top', 50);
elements.container.style.transform = 'translateY(100px)';
elements.scroller.scrollTop = 200;
// Transforms don't affect offsetTop, so use getBoundingClientRect.
// Here the sticky element will originally have stuck at 50px from the top,
// but is then 'pulled' downwards by the 100px container transform.
const stickyElementOffset = elements.sticky.getBoundingClientRect().y -
elements.scroller.getBoundingClientRect().y;
assert_equals(stickyElementOffset, 150);
}, 'The sticky element should stick before the container is offset by a ' +
'translation');
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 50px;"></div>
<div class="contents">
<div class="container">
<div class="sticky box" style="transform: translateY(-100%);"></div>
</div>
</div>
</div>
</div>
<!-- The pre-transform sticky is not allowed to escape its containing block. -->
<div class="group">
<div id="scroller2" class="scroller">
<div class="indicator box" style="top: 50px;"></div>
<div class="contents">
<div class="container">
<div class="sticky box" style="transform: translateY(-100%);"></div>
</div>
</div>
</div>
</div>
<!-- The sticky element should stick before the container is transformed. -->
<div class="group">
<div id="scroller3" class="scroller">
<div class="indicator box" style="top: 200px;"></div>
<div class="contents">
<div class="container" style="transform: translateY(100px);">
<div class="sticky box"></div>
</div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-transforms.html
View file @ 2686180f
<!DOCTYPE html>
<title>transforms on position:sticky elements should apply after sticking</title>
<link rel="match" href="position-sticky-transforms-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that transforms on position:sticky elements are carried out on their stuck position" />
<style>
.group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
.scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
<script src="resources/sticky-util.js"></script>
.contents {
height: 500px;
}
.container {
height: 150px;
}
.indicator {
background-color: red;
position: absolute;
}
.sticky {
background-color: green;
position: sticky;
top: 50px;
}
.box {
width: 100%;
height: 50px;
}
.rotated {
transform: rotateX(60deg);
width: 100%;
height: 100px;
}
.perspective {
transform: perspective(3px) translateZ(1px);
height: 50px;
width: 50px;
}
</style>
<body style="margin: 0;"></body>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 50;
document.getElementById('scroller3').scrollTop = 50;
});
test(() => {
const elements = setupStickyTest('top', 50);
elements.sticky.style.transform = 'scale(2)';
elements.scroller.scrollTop = 200;
// Transforms don't affect offsetTop, so use getBoundingClientRect.
// Scaling the sticky element by 2 means its top-y moves (1/2 * height)
// upwards, in this case placing it at the top of the viewport.
const boundingRect = elements.sticky.getBoundingClientRect();
assert_equals(boundingRect.y, elements.scroller.getBoundingClientRect().y);
}, 'Scale transforms are carried out on the stuck element position');
test(() => {
const elements = setupStickyTest('top', 50);
elements.sticky.style.transform = 'rotateX(60deg)';
elements.scroller.scrollTop = 200;
// Transforms don't affect offsetTop, so use getBoundingClientRect.
// Rotating around the x-axis essentially 'squashes' it (from the camera's
// viewpoint), in this case shifting the offset to 75 rather than 50.
const stickyElementOffset = elements.sticky.getBoundingClientRect().y -
elements.scroller.getBoundingClientRect().y;
assert_equals(stickyElementOffset, 75);
}, 'Rotate transforms are carried out on the stuck element position');
test(() => {
const elements = setupStickyTest('top', 50);
elements.sticky.style.transform = 'perspective(3px) translateZ(1px)';
elements.scroller.scrollTop = 200;
// Transforms don't affect offsetTop, so use getBoundingClientRect.
const stickyElementOffset = elements.sticky.getBoundingClientRect().y -
elements.scroller.getBoundingClientRect().y;
assert_equals(stickyElementOffset, 25);
}, 'Perspective transforms are carried out on the stuck element position');
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="height: 100px; top: 75px;"></div>
<div class="contents">
<div class="container">
<div class="sticky box" style="transform: scale(2);"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="rotated indicator" style="top: 100px;"></div>
<div class="contents">
<div class="container" style="height: 250px;">
<div class="rotated sticky"></div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="perspective indicator" style="top: 100px;"></div>
<div class="contents">
<div class="container">
<div class="perspective sticky"></div>
</div>
</div>
</div>
</div>
<div>You should see three green boxes above. No red should be visible.</div>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment