Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-22 17:55:50 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1448969 [wpt PR 10182] - Port nested sticky tests from reftests to JS tests, a=testonly

Browse Source 
Automatic update from web-platform-testsPort nested sticky tests from reftests to JS tests

Bug: 699244
Change-Id: Ia85a44be9d9f7b0d0db382892520f2755523f514
Reviewed-on: https://chromium-review.googlesource.com/980236
Reviewed-by: Robert Flack <flackr@chromium.org>
Commit-Queue: Stephen McGruer <smcgruer@chromium.org>
Cr-Commit-Position: refs/heads/master@{#546172}

wpt-commits: 8214a83ae15810425ebbdb305ba5a0a746f4b36e
wpt-pr: 10182
wpt-commits: 8214a83ae15810425ebbdb305ba5a0a746f4b36e
wpt-pr: 10182
This commit is contained in:
Stephen McGruer 2018-04-09 18:17:27 +00:00 committed by James Graham
parent 68c64975ed
commit ca23a4ea2f
12 changed files with 340 additions and 941 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

130
testing/web-platform/meta/MANIFEST.json
View File

@ -122861,18 +122861,6 @@
{}
]
],
"css/css-position/position-sticky-nested-bottom.html": [
[
"/css/css-position/position-sticky-nested-bottom.html",
[
[
"/css/css-position/position-sticky-nested-bottom-ref.html",
"=="
]
],
{}
]
],
"css/css-position/position-sticky-nested-inline.html": [
[
"/css/css-position/position-sticky-nested-inline.html",
@ -122885,30 +122873,6 @@
{}
]
],
"css/css-position/position-sticky-nested-left.html": [
[
"/css/css-position/position-sticky-nested-left.html",
[
[
"/css/css-position/position-sticky-nested-left-ref.html",
"=="
]
],
{}
]
],
"css/css-position/position-sticky-nested-right.html": [
[
"/css/css-position/position-sticky-nested-right.html",
[
[
"/css/css-position/position-sticky-nested-right-ref.html",
"=="
]
],
{}
]
],
"css/css-position/position-sticky-nested-table.html": [
[
"/css/css-position/position-sticky-nested-table.html",
@ -122921,18 +122885,6 @@
{}
]
],
"css/css-position/position-sticky-nested-top.html": [
[
"/css/css-position/position-sticky-nested-top.html",
[
[
"/css/css-position/position-sticky-nested-top-ref.html",
"=="
]
],
{}
]
],
"css/css-position/position-sticky-rendering.html": [
[
"/css/css-position/position-sticky-rendering.html",
@ -250056,36 +250008,16 @@
{}
]
],
"css/css-position/position-sticky-nested-bottom-ref.html": [
[
{}
]
],
"css/css-position/position-sticky-nested-inline-ref.html": [
[
{}
]
],
"css/css-position/position-sticky-nested-left-ref.html": [
[
{}
]
],
"css/css-position/position-sticky-nested-right-ref.html": [
[
{}
]
],
"css/css-position/position-sticky-nested-table-ref.html": [
[
{}
]
],
"css/css-position/position-sticky-nested-top-ref.html": [
[
{}
]
],
"css/css-position/position-sticky-rendering-ref.html": [
[
{}
@ -314571,6 +314503,30 @@
{}
]
],
"css/css-position/position-sticky-nested-bottom.html": [
[
"/css/css-position/position-sticky-nested-bottom.html",
{}
]
],
"css/css-position/position-sticky-nested-left.html": [
[
"/css/css-position/position-sticky-nested-left.html",
{}
]
],
"css/css-position/position-sticky-nested-right.html": [
[
"/css/css-position/position-sticky-nested-right.html",
{}
]
],
"css/css-position/position-sticky-nested-top.html": [
[
"/css/css-position/position-sticky-nested-top.html",
{}
]
],
"css/css-position/position-sticky-offset-overflow.html": [
[
"/css/css-position/position-sticky-offset-overflow.html",
@ -506145,20 +506101,16 @@
"testharness"
],
"css/css-position/position-sticky-left.html": [
"2a04672cdac818a6887eac7d6824ea85d3d0559d",
"d28b5ee55d5fed4b263b130df700092e14b9e784",
"testharness"
],
"css/css-position/position-sticky-margins.html": [
"3f6bc9537adf2a4d477f99866d73f42b65c26db3",
"testharness"
],
"css/css-position/position-sticky-nested-bottom-ref.html": [
"59a8e46358a8a5bf8638a2d1982c63becef5bc77",
"support"
],
"css/css-position/position-sticky-nested-bottom.html": [
"3604a921be04927dd19b805b7c9abaed6d0e7c72",
"reftest"
"82b1bdada6bfc0c2b6fc04ee3fdd9036e807c1e4",
"testharness"
],
"css/css-position/position-sticky-nested-inline-ref.html": [
"8fb9378e91a20b71ef886b9aac0147b25d00a9a3",
@ -506168,21 +506120,13 @@
"50be9f2fb6ab9295081f6f13705be4853e48fdde",
"reftest"
],
"css/css-position/position-sticky-nested-left-ref.html": [
"52804c5589c3035818cd653c1801a70645a9fe99",
"support"
],
"css/css-position/position-sticky-nested-left.html": [
"c32881097147e285b6ee66e6239af4808d780c83",
"reftest"
],
"css/css-position/position-sticky-nested-right-ref.html": [
"5703ad6457deca332232e510dc479c39b7020d24",
"support"
"dabe2ee93d0f0078beacf5c715fd040558ad9c08",
"testharness"
],
"css/css-position/position-sticky-nested-right.html": [
"39683624316599779b0efcb347010b92694e02a6",
"reftest"
"023e0eea58b52a249c2313c533be38a033f40da0",
"testharness"
],
"css/css-position/position-sticky-nested-table-ref.html": [
"7b8956bc720e2e25e7ff0bc5889812c26837ab58",
@ -506192,13 +506136,9 @@
"87a80629bcfcace28d4f13bce99325d55d317574",
"reftest"
],
"css/css-position/position-sticky-nested-top-ref.html": [
"66ea8b8c72023089d52e6ebdf5bfff5d56259bfc",
"support"
],
"css/css-position/position-sticky-nested-top.html": [
"88e35164b6ede3adf9727989cf59ff9956bdbae7",
"reftest"
"ae24eeaea7f25860fa770141d0894abf9e961c5e",
"testharness"
],
"css/css-position/position-sticky-offset-overflow.html": [
"cab620b2008a9df57abc6907b1199e35a4099241",
@ -506225,7 +506165,7 @@
"reftest"
],
"css/css-position/position-sticky-right.html": [
"80caf6fb1e6c84dbf3e371a11166ac5b71bba687",
"8bd2ae1a53ade0a524d98f5c8b0fe2ebce66d338",
"testharness"
],
"css/css-position/position-sticky-root-scroller.html": [
@ -506333,7 +506273,7 @@
"reftest"
],
"css/css-position/resources/sticky-util.js": [
"c7b441a3a07276cad9528dd3ef7d82844d06e2d8",
"7f8a5b4d9047c07378473362acb3d001e70d5663",
"support"
],
"css/css-properties-values-api/register-property-syntax-parsing.html": [

18
testing/web-platform/tests/css/css-position/position-sticky-left.html
View File

@ -12,29 +12,29 @@
<script>
test(() => {
const elements = setupStickyTest('left', 50, true);
const elements = setupStickyTest('left', 50);
elements.scroller.scrollLeft = 100;
const nonStickyLeftY = elements.container.offsetLeft +
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftY);
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX);
}, 'before reaching the sticking point the sticky box should not be offset');
test(() => {
const elements = setupStickyTest('left', 50, true);
const elements = setupStickyTest('left', 50);
elements.scroller.scrollLeft = 200;
// This math actually cancels to sticky.offsetLeft == (scroller.scrollLeft + 50),
// but for clarity the calculations are left explicit.
const nonStickyLeftY = elements.container.offsetLeft +
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
const targetLeftY = elements.scroller.scrollLeft + 50;
const stickyOffset = targetLeftY - nonStickyLeftY;
const targetLeftX = elements.scroller.scrollLeft + 50;
const stickyOffset = targetLeftX - nonStickyLeftX;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftY + stickyOffset);
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX + stickyOffset);
}, 'after reaching the sticking point the sticky box should be offset');
test(() => {
const elements = setupStickyTest('left', 50, true);
const elements = setupStickyTest('left', 50);
elements.scroller.scrollLeft = 300;
const maxOffsetInContainer = elements.container.offsetLeft +
elements.container.clientWidth - elements.sticky.clientWidth;

76
testing/web-platform/tests/css/css-position/position-sticky-nested-bottom-ref.html
View File

@ -1,76 +0,0 @@
<!DOCTYPE html>
<title>Reference for nested bottom-constrained position:sticky elements should render correctly</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;
}
.outerIndicator {
background-color: green;
position: absolute;
left: 0;
width: 100%;
height: 100px;
}
.innerIndicator {
background-color: blue;
position: absolute;
left: 0;
width: 100%;
height: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 75;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 200px;"></div>
<div class="innerIndicator" style="top: 200px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 250px;"></div>
<div class="innerIndicator" style="top: 290px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="outerIndicator" style="top: 300px;"></div>
<div class="innerIndicator" style="top: 350px;"></div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

183
testing/web-platform/tests/css/css-position/position-sticky-nested-bottom.html
View File

@ -1,135 +1,68 @@
<!DOCTYPE html>
<title>Nested bottom-constrained position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-bottom-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky elements with a bottom constraint render correctly" />
<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;
}
.prepadding {
height: 200px;
}
.container {
height: 200px;
}
.filler {
height: 100px;
}
.outerIndicator {
background-color: red;
position: absolute;
left: 0;
width: 100%;
height: 100px;
}
.innerIndicator {
background-color: red;
position: absolute;
left: 0;
width: 100%;
height: 50px;
}
.outerSticky {
background-color: green;
position: sticky;
bottom: 25px;
width: 100%;
height: 100px;
}
.innerFiller {
height: 50px;
}
.innerSticky {
background-color: blue;
position: sticky;
bottom: 35px;
width: 100%;
height: 50px;
}
</style>
<body></body>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 75;
document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 250;
});
test(() => {
const elements = setupNestedStickyTest('bottom', 25, 35);
elements.scroller.scrollTop = 300;
const nonStickyTopY = elements.container.offsetTop +
elements.filler.clientHeight;
assert_equals(elements.sticky.offsetTop, nonStickyTopY);
// The inner sticky should not be offset from the outer.
const nonStickyInnerTopY = elements.sticky.clientHeight -
elements.innerSticky.clientHeight;
assert_equals(elements.innerSticky.offsetTop, nonStickyInnerTopY);
}, 'before reaching the sticking point, neither sticky box should be offset');
test(() => {
const elements = setupNestedStickyTest('bottom', 25, 50);
elements.scroller.scrollTop = 150;
const nonStickyTopY = elements.container.offsetTop +
elements.filler.clientHeight;
assert_equals(elements.sticky.offsetTop, nonStickyTopY);
assert_equals(elements.innerSticky.offsetTop, 35);
}, 'the inner sticky can stick before the outer one if necessary');
test(() => {
const elements = setupNestedStickyTest('bottom', 25, 35);
elements.scroller.scrollTop = 100;
const nonStickyTopY = elements.container.offsetTop +
elements.filler.clientHeight;
const nonStickyBottomY = nonStickyTopY + elements.sticky.clientHeight;
const targetBottomY = elements.scroller.clientHeight +
elements.scroller.scrollTop - 25;
const stickyOffset = nonStickyBottomY - targetBottomY;
assert_equals(elements.sticky.offsetTop, nonStickyTopY - stickyOffset);
// The inner sticky has similar math, but its offsetTop is relative to the
// sticky element and in this test is (height - the difference between the
// top values).
assert_equals(elements.innerSticky.offsetTop, 40);
}, 'both sticky boxes can be stuck at the same time');
test(() => {
const elements = setupNestedStickyTest('bottom', 25, 35);
elements.scroller.scrollTop = 0;
assert_equals(elements.sticky.offsetTop, elements.container.offsetTop);
assert_equals(elements.innerSticky.offsetTop, 0);
}, 'neither sticky can escape their containing block');
test(() => {
const elements = setupNestedStickyTest('bottom', 25, 500);
elements.scroller.scrollTop = 200;
// It doesn't matter how big the inner sticky offset is, it cannot escape its
// containing block (the outer sticky).
assert_equals(elements.innerSticky.offsetTop, 0);
}, 'the inner sticky cannot be pushed outside the outer sticky');
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="top: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 0;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="top: 250px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 40px;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="top: 300px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 50px;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

76
testing/web-platform/tests/css/css-position/position-sticky-nested-left-ref.html
View File

@ -1,76 +0,0 @@
<!DOCTYPE html>
<title>Reference for nested left-constrained position:sticky elements should render correctly</title>
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
}
.outerIndicator {
background-color: green;
position: absolute;
top: 0;
height: 100%;
width: 100px;
}
.innerIndicator {
background-color: blue;
position: absolute;
top: 0;
height: 100%;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 225;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 150px;"></div>
<div class="innerIndicator" style="left: 150px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 175px;"></div>
<div class="innerIndicator" style="left: 185px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 200px;"></div>
<div class="innerIndicator" style="left: 250px;"></div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

196
testing/web-platform/tests/css/css-position/position-sticky-nested-left.html
View File

@ -1,141 +1,75 @@
<!DOCTYPE html>
<title>Nested left-constrained position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-left-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky elements with a left constraint render correctly" />
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
<script src="resources/sticky-util.js"></script>
.contents {
height: 100%;
width: 500px;
/* Allow nice formatting of inline divs. Fonts are not used in this test. */
font-size: 0;
}
.prepadding {
display: inline-block;
height: 100%;
width: 100px;
}
.container {
display: inline-block;
height: 100%;
width: 200px;
}
.innerpadding {
display: inline-block;
height: 100%;
width: 50px;
}
.outerIndicator {
background-color: red;
position: absolute;
top: 0;
display: inline-block;
height: 100%;
width: 100px;
}
.innerIndicator {
background-color: red;
position: absolute;
top: 0;
display: inline-block;
height: 100%;
width: 50px;
}
.outerSticky {
background-color: green;
position: sticky;
left: 50px;
display: inline-block;
height: 100%;
width: 100px;
}
.innerSticky {
background-color: blue;
position: sticky;
left: 60px;
display: inline-block;
height: 100%;
width: 50px;
}
</style>
<body></body>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 50;
document.getElementById('scroller2').scrollLeft = 125;
document.getElementById('scroller3').scrollLeft = 225;
});
test(() => {
const elements = setupNestedStickyTest('left', 50, 60);
elements.scroller.scrollLeft = 100;
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX);
// The inner sticky should not be offset from the outer.
assert_equals(elements.innerSticky.offsetLeft, 0);
}, 'before reaching the sticking point, neither sticky box should be offset');
test(() => {
const elements = setupNestedStickyTest('left', 50, 60);
elements.scroller.scrollLeft = 145;
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX);
assert_equals(elements.innerSticky.offsetLeft, 5);
}, 'the inner sticky can stick before the outer one if necessary');
test(() => {
const elements = setupNestedStickyTest('left', 50, 60);
elements.scroller.scrollLeft = 200;
// This math cancels to sticky.offsetLeft == (scroller.scrollLeft + 50), but
// for clarity the calculations are left explicit.
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
const targetLeftX = elements.scroller.scrollLeft + 50;
const stickyOffset = targetLeftX - nonStickyLeftX;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX + stickyOffset);
// The inner sticky has similar math, but its offsetLeft is relative to the
// sticky element and in this test is the difference between the left values.
assert_equals(elements.innerSticky.offsetLeft, 10);
}, 'both sticky boxes can be stuck at the same time');
test(() => {
const elements = setupNestedStickyTest('left', 50, 60);
elements.scroller.scrollLeft = 300;
const maxOffsetInContainer = elements.container.offsetLeft +
elements.container.clientWidth - elements.sticky.clientWidth;
assert_equals(elements.sticky.offsetLeft, maxOffsetInContainer);
const maxOffsetInOuterSticky = elements.sticky.clientWidth -
elements.innerSticky.clientWidth;
assert_equals(elements.innerSticky.offsetLeft, maxOffsetInOuterSticky);
}, 'neither sticky can escape their containing block');
test(() => {
const elements = setupNestedStickyTest('left', 50, 300);
elements.scroller.scrollLeft = 100;
// The outer sticky has not stuck yet.
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX);
// But the inner sticky still cannot escape the outer sticky (as it is the
// containing block).
const maxOffsetInOuterSticky = elements.sticky.clientWidth -
elements.innerSticky.clientWidth;
assert_equals(elements.innerSticky.offsetLeft, maxOffsetInOuterSticky);
}, 'the inner sticky cannot be pushed outside the outer sticky');
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="left: 150px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 0;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="left: 175px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding">
</div><div class="outerSticky">
<div class="innerIndicator" style="left: 10px;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="left: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 50px;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

76
testing/web-platform/tests/css/css-position/position-sticky-nested-right-ref.html
View File

@ -1,76 +0,0 @@
<!DOCTYPE html>
<title>Reference for position:sticky elements should respect the right constraint</title>
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
.contents {
height: 100%;
width: 500px;
}
.outerIndicator {
background-color: green;
position: absolute;
top: 0;
height: 100%;
width: 100px;
}
.innerIndicator {
background-color: blue;
position: absolute;
top: 0;
height: 100%;
width: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 75;
document.getElementById('scroller2').scrollLeft = 175;
document.getElementById('scroller3').scrollLeft = 250;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 200px;"></div>
<div class="innerIndicator" style="left: 200px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 250px;"></div>
<div class="innerIndicator" style="left: 290px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="outerIndicator" style="left: 300px;"></div>
<div class="innerIndicator" style="left: 350px;"></div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

198
testing/web-platform/tests/css/css-position/position-sticky-nested-right.html
View File

@ -1,149 +1,69 @@
<!DOCTYPE html>
<title>Nested right-constrained position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-right-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky elements with a right constraint render correctly" />
<style>
.group {
position: relative;
width: 250px;
height: 150px;
}
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
.scroller {
position: relative;
width: 200px;
height: 100px;
overflow-x: auto;
overflow-y: hidden;
}
<script src="resources/sticky-util.js"></script>
.contents {
height: 100%;
width: 500px;
/* Allow nice formatting of inline divs. Fonts are not used in this test. */
font-size: 0;
}
.prepadding {
display: inline-block;
height: 100%;
width: 200px;
}
.container {
display: inline-block;
height: 100%;
width: 200px;
}
.filler {
display: inline-block;
height: 100%;
width: 100px;
}
.outerIndicator {
background-color: red;
position: absolute;
top: 0;
display: inline-block;
height: 100%;
width: 100px;
}
.innerIndicator {
background-color: red;
position: absolute;
top: 0;
display: inline-block;
height: 100%;
width: 50px;
}
.outerSticky {
background-color: green;
position: sticky;
right: 25px;
display: inline-block;
height: 100%;
width: 100px;
}
.innerFiller {
display: inline-block;
height: 100%;
width: 50px;
}
.innerSticky {
background-color: blue;
position: sticky;
right: 35px;
display: inline-block;
height: 100%;
width: 50px;
}
</style>
<body></body>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollLeft = 75;
document.getElementById('scroller2').scrollLeft = 175;
document.getElementById('scroller3').scrollLeft = 250;
});
test(() => {
const elements = setupNestedStickyTest('right', 25, 35);
elements.scroller.scrollLeft = 200;
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX);
// The inner sticky should not be offset from the outer.
const nonStickyInnerLeftX = elements.sticky.clientWidth -
elements.innerSticky.clientWidth;
assert_equals(elements.innerSticky.offsetLeft, nonStickyInnerLeftX);
}, 'before reaching the sticking point, neither sticky box should be offset');
test(() => {
const elements = setupNestedStickyTest('right', 25, 50);
elements.scroller.scrollLeft = 150;
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX);
assert_equals(elements.innerSticky.offsetLeft, 35);
}, 'the inner sticky can stick before the outer one if necessary');
test(() => {
const elements = setupNestedStickyTest('right', 25, 35);
elements.scroller.scrollLeft = 100;
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
const nonStickyBottomX = nonStickyLeftX + elements.sticky.clientWidth;
const targetBottomX = elements.scroller.clientWidth +
elements.scroller.scrollLeft - 25;
const stickyOffset = nonStickyBottomX - targetBottomX;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX - stickyOffset);
// The inner sticky has similar math, but its offsetLeft is relative to the
// sticky element and in this test is (height - the difference between the
// top values).
assert_equals(elements.innerSticky.offsetLeft, 40);
}, 'both sticky boxes can be stuck at the same time');
test(() => {
const elements = setupNestedStickyTest('right', 25, 35);
elements.scroller.scrollLeft = 0;
assert_equals(elements.sticky.offsetLeft, elements.container.offsetLeft);
assert_equals(elements.innerSticky.offsetLeft, 0);
}, 'neither sticky can escape their containing block');
test(() => {
const elements = setupNestedStickyTest('right', 25, 500);
elements.scroller.scrollLeft = 200;
// It doesn't matter how big the inner sticky offset is, it cannot escape its
// containing block (the outer sticky).
assert_equals(elements.innerSticky.offsetLeft, 0);
}, 'the inner sticky cannot be pushed outside the outer sticky');
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="left: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 0;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="left: 250px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 40px;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="left: 300px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="filler"></div>
<div class="outerSticky">
<div class="innerIndicator" style="left: 50px;"></div>
<div class="innerFiller"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

83
testing/web-platform/tests/css/css-position/position-sticky-nested-top-ref.html
View File

@ -1,83 +0,0 @@
<!DOCTYPE html>
<title>Reference for nested top-constrained position:sticky elements should render correctly</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;
}
.green {
background-color: green;
}
.blue {
background-color: blue;
}
.indicator {
position: absolute;
left: 0;
}
.bigBox {
width: 100%;
height: 100px;
}
.smallBox {
width: 100%;
height: 50px;
}
</style>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 225;
});
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="contents">
<div class="green indicator bigBox" style="top: 150px;"></div>
<div class="blue indicator smallBox" style="top: 150px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="contents">
<div class="green indicator bigBox" style="top: 175px;"></div>
<div class="blue indicator smallBox" style="top: 185px;"></div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="contents">
<div class="green indicator bigBox" style="top: 200px;"></div>
<div class="blue indicator smallBox" style="top: 250px;"></div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

182
testing/web-platform/tests/css/css-position/position-sticky-nested-top.html
View File

@ -1,128 +1,74 @@
<!DOCTYPE html>
<title>Nested top-constrainted position:sticky elements should render correctly</title>
<link rel="match" href="position-sticky-nested-top-ref.html" />
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
<meta name="assert" content="This test checks that nested position:sticky elements with a top constraint render correctly" />
<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;
}
.prepadding {
height: 100px;
}
.container {
height: 200px;
}
.innerpadding {
height: 50px;
}
.outerIndicator {
background-color: red;
position: absolute;
left: 0;
height: 100px;
width: 100%;
}
.innerIndicator {
background-color: red;
position: absolute;
left: 0;
height: 50px;
width: 100%;
}
.outerSticky {
background-color: green;
position: sticky;
top: 50px;
width: 100%;
height: 100px;
}
.innerSticky {
background-color: blue;
position: sticky;
top: 60px;
width: 100%;
height: 50px;
}
</style>
<body></body>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 225;
});
test(() => {
const elements = setupNestedStickyTest('top', 50, 60);
elements.scroller.scrollTop = 100;
const nonStickyTopY = elements.container.offsetTop +
elements.filler.clientHeight;
assert_equals(elements.sticky.offsetTop, nonStickyTopY);
// The inner sticky should not be offset from the outer.
assert_equals(elements.innerSticky.offsetTop, 0);
}, 'before reaching the sticking point, neither sticky box should be offset');
test(() => {
const elements = setupNestedStickyTest('top', 50, 60);
elements.scroller.scrollTop = 145;
const nonStickyTopY = elements.container.offsetTop +
elements.filler.clientHeight;
assert_equals(elements.sticky.offsetTop, nonStickyTopY);
assert_equals(elements.innerSticky.offsetTop, 5);
}, 'the inner sticky can stick before the outer one if necessary');
test(() => {
const elements = setupNestedStickyTest('top', 50, 60);
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);
// The inner sticky has similar math, but its offsetTop is relative to the
// sticky element and in this test is the difference between the top values.
assert_equals(elements.innerSticky.offsetTop, 10);
}, 'both sticky boxes can be stuck at the same time');
test(() => {
const elements = setupNestedStickyTest('top', 50, 60);
elements.scroller.scrollTop = 300;
const maxOffsetInContainer = elements.container.offsetTop +
elements.container.clientHeight - elements.sticky.clientHeight;
assert_equals(elements.sticky.offsetTop, maxOffsetInContainer);
const maxOffsetInOuterSticky = elements.sticky.clientHeight -
elements.innerSticky.clientHeight;
assert_equals(elements.innerSticky.offsetTop, maxOffsetInOuterSticky);
}, 'neither sticky can escape their containing block');
test(() => {
const elements = setupNestedStickyTest('top', 50, 300);
elements.scroller.scrollTop = 100;
// The outer sticky has not stuck yet.
const nonStickyTopY = elements.container.offsetTop +
elements.filler.clientHeight;
assert_equals(elements.sticky.offsetTop, nonStickyTopY);
// But the inner sticky still cannot escape the outer sticky (as it is the
// containing block).
const maxOffsetInOuterSticky = elements.sticky.clientHeight -
elements.innerSticky.clientHeight;
assert_equals(elements.innerSticky.offsetTop, maxOffsetInOuterSticky);
}, 'the inner sticky cannot be pushed outside the outer sticky');
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="outerIndicator" style="top: 150px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 0;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller2" class="scroller">
<div class="outerIndicator" style="top: 175px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 10px;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div class="group">
<div id="scroller3" class="scroller">
<div class="outerIndicator" style="top: 200px;"></div>
<div class="contents">
<div class="prepadding"></div>
<div class="container">
<div class="innerpadding"></div>
<div class="outerSticky">
<div class="innerIndicator" style="top: 50px;"></div>
<div class="innerSticky"></div>
</div>
</div>
</div>
</div>
</div>
<div>You should see three green and three blue boxes above. No red should be visible.</div>

20
testing/web-platform/tests/css/css-position/position-sticky-right.html
View File

@ -12,29 +12,29 @@
<script>
test(() => {
const elements = setupStickyTest('right', 25, true);
const elements = setupStickyTest('right', 25);
elements.scroller.scrollLeft = 200;
const nonStickyLeftY = elements.container.offsetLeft +
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftY);
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX);
}, 'before reaching the sticking point the sticky box should not be offset');
test(() => {
const elements = setupStickyTest('right', 25, true);
const elements = setupStickyTest('right', 25);
elements.scroller.scrollLeft = 75;
const nonStickyLeftY = elements.container.offsetLeft +
const nonStickyLeftX = elements.container.offsetLeft +
elements.filler.clientWidth;
const nonStickyBottomY = nonStickyLeftY + elements.sticky.clientWidth;
const targetBottomY = elements.scroller.clientWidth +
const nonStickyRightX = nonStickyLeftX + elements.sticky.clientWidth;
const targetRightX = elements.scroller.clientWidth +
elements.scroller.scrollLeft - 25;
const stickyOffset = nonStickyBottomY - targetBottomY;
const stickyOffset = nonStickyRightX - targetRightX;
assert_equals(elements.sticky.offsetLeft, nonStickyLeftY - stickyOffset);
assert_equals(elements.sticky.offsetLeft, nonStickyLeftX - stickyOffset);
}, 'after reaching the sticking point the sticky box should be offset');
test(() => {
const elements = setupStickyTest('right', 25, true);
const elements = setupStickyTest('right', 25);
elements.scroller.scrollLeft = 15;
assert_equals(elements.sticky.offsetLeft, elements.container.offsetLeft);
}, 'the sticky box should not be pushed outside its containing block');

43
testing/web-platform/tests/css/css-position/resources/sticky-util.js
View File

@ -11,14 +11,15 @@
* </div>
* </div>
*
* If 'inline' is true, the necessary blocks will be marked as inline-block,
* and the dimensions above are flipped.
* If the sticky direction is 'left' or 'right', the necessary blocks will be
* marked as inline-block and the dimensions above are flipped.
*
* Returns an 'elements' object which has each of the above elements as an
* accessible property.
*/
function setupStickyTest(stickyDirection, stickyOffset, inline = false) {
function setupStickyTest(stickyDirection, stickyOffset) {
const elements = {};
const inline = stickyDirection === 'left' || stickyDirection === 'right';
elements.scroller = document.createElement('div');
elements.scroller.style.position = 'relative';
@ -67,3 +68,39 @@ function setupStickyTest(stickyDirection, stickyOffset, inline = false) {
return elements;
}
/**
* Similar to above, but nests a second sticky (named innerSticky) inside the
* sticky element.
*
* In the 'bottom' and 'right' cases, we also inject some padding before the
* innerSticky element, to give it something to push into. This inner padding is
* not exposed.
*/
function setupNestedStickyTest(stickyDirection, outerStickyOffset,
innerStickyOffset) {
const elements = setupStickyTest(stickyDirection, outerStickyOffset);
const inline = stickyDirection === 'left' || stickyDirection === 'right';
if (stickyDirection === 'bottom' || stickyDirection === 'right') {
const innerPadding = document.createElement('div');
innerPadding.style.height = (inline ? '100%' : '50px');
innerPadding.style.width = (inline ? '50px' : '100%');
if (inline)
innerPadding.style.display = 'inline-block';
elements.sticky.appendChild(innerPadding);
}
elements.innerSticky = document.createElement('div');
elements.innerSticky.style = `${stickyDirection}: ${innerStickyOffset}px;`;
elements.innerSticky.style.position = 'sticky';
elements.innerSticky.style.height = (inline ? '100%' : '50px');
elements.innerSticky.style.width = (inline ? '50px' : '100%');
elements.innerSticky.style.backgroundColor = 'blue';
if (inline)
elements.innerSticky.style.display = 'inline-block';
elements.sticky.appendChild(elements.innerSticky);
return elements;
}