mirror of
https://github.com/servo/servo.git
synced 2025-08-10 16:05:43 +01:00
Update web-platform-tests to revision e92532746b7615dcccdfa060937a87664816b1db
This commit is contained in:
WPT Sync Bot
parent
cccca27f4f
commit
726b56aa12
149 changed files with 22796 additions and 1884 deletions
|
|
@ -1,42 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,46 +1,58 @@
|
|||
<!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>
|
||||
|
|
|
|||
|
|
@ -1,63 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,92 +1,49 @@
|
|||
<!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>
|
||||
|
|
|
|||
|
|
@ -1,69 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,106 +1,54 @@
|
|||
<!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>
|
||||
|
|
|
|||
|
|
@ -1,30 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,39 +1,31 @@
|
|||
<!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>
|
||||
|
|
|
|||
|
|
@ -1,81 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
<!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>
|
||||
|
|
@ -1,92 +1,45 @@
|
|||
<!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>
|
||||
|
|
|
|||
|
|
@ -1,101 +1,49 @@
|
|||
<!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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue