Skip to content

GitLab

T
tangled
Commit eca9e323 authored by Bret Sepulveda's avatar Bret Sepulveda Committed by Commit Bot
Browse files
Options

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

This reverts commit 91310914.

Reason for revert:
Multiple failures on Linux, for example:
https://ci.chromium.org/buildbot/chromium.webkit/WebKit%20Linux%20Trusty/39500
https://ci.chromium.org/buildbot/chromium.webkit/WebKit%20Linux%20Trusty%20%28dbg%29/9251

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}

TBR=flackr@chromium.org,smcgruer@chromium.org

Change-Id: I7a773131066157e0d4216d7fa7c228bd8bff2021
No-Presubmit: true
No-Tree-Checks: true
No-Try: true
Reviewed-on: https://chromium-review.googlesource.com/893536Reviewed-by: default avatarBret Sepulveda <bsep@chromium.org>
Commit-Queue: Bret Sepulveda <bsep@chromium.org>
Cr-Commit-Position: refs/heads/master@{#533000}
parent 9dd3decb
Hide whitespace changes
Inline Side-by-side
Showing with 736 additions and 194 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-position/position-sticky-inflow-position-ref.html 0 → 100644
View file @ eca9e323
<!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 @ eca9e323
<!DOCTYPE html> <!DOCTYPE html>
<title>position:sticky elements should not affect the flow position of other elements</title> <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" /> <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" /> <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> <style>
.scroller { .scroller {
position: relative;
height: 200px; height: 200px;
width: 100px; width: 100px;
overflow: scroll; overflow-y: scroll;
margin-bottom: 15px;
} }
#sticky { .sticky {
background-color: green; background-color: green;
position: sticky; position: sticky;
top: 150px; top: 150px;
} }
#before { .box {
background-color: fuchsia; height: 50px;
width: 50px;
} }
#after { .before {
background-color: orange; background-color: fuchsia;
} }
.box { .after {
height: 50px; background-color: orange;
width: 50px;
} }
.padding { .padding {
...@@ -39,20 +37,10 @@ ...@@ -39,20 +37,10 @@
</style> </style>
<div class="scroller"> <div class="scroller">
<div id="before" class="box"></div> <div class="before box"></div>
<div id="sticky" class="box"></div> <div class="sticky box"></div>
<div id="after" class="box"></div> <div class="after box"></div>
<div class="padding"></div> <div class="padding"></div>
</div> </div>
<script> <div>You should see a fuchsia box, a one-box gap, an orange box, and then a green box above.</div>
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 0 → 100644
View file @ eca9e323
<!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 @ eca9e323
<!DOCTYPE html> <!DOCTYPE html>
<title>position:sticky elements should properly interact with margins</title> <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" /> <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" /> <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" />
<script src="/resources/testharness.js"></script> <style>
<script src="/resources/testharnessreport.js"></script> .group {
display: inline-block;
position: relative;
width: 180px;
height: 400px;
}
<script src="resources/sticky-util.js"></script> .scroller {
position: relative;
width: 150px;
height: 300px;
overflow-y: scroll;
overflow-x: hidden;
}
<body></body> .holder {
width: 130px;
height: 200px;
}
.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> <script>
test(() => { window.addEventListener('load', function() {
const elements = setupStickyTest('top', 50); document.getElementById('scroller1').scrollTop = 0;
elements.sticky.style.margin = '15px'; document.getElementById('scroller2').scrollTop = 60;
elements.scroller.scrollTop = 100; document.getElementById('scroller3').scrollTop = 120;
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> </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 0 → 100644
View file @ eca9e323
<!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 @ eca9e323
<!DOCTYPE html> <!DOCTYPE html>
<title>position:sticky elements should respect padding on their ancestor overflow element</title> <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" /> <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" /> <meta name="assert" content="This test checks that position:sticky elements respect padding on their ancestor overflow element" />
<script src="/resources/testharness.js"></script> <style>
<script src="/resources/testharnessreport.js"></script> .group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
<script src="resources/sticky-util.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;
}
<body></body> .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>
<script> <script>
test(() => { window.addEventListener('load', function() {
const elements = setupStickyTest('top', 50); document.getElementById('scroller1').scrollTop = 50;
elements.scroller.style.padding = '20px 0'; document.getElementById('scroller2').scrollTop = 175;
document.getElementById('scroller3').scrollTop = 220;
// 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> </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 0 → 100644
View file @ eca9e323
<!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 @ eca9e323
<!DOCTYPE html> <!DOCTYPE html>
<title>position:sticky should operate correctly for the root scroller</title> <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" /> <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" /> <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> <style>
body { body {
/* Assumption: 3000px is taller than any user agents test window size. */ /* Assumption: 3000px is taller than any user agents test window size. */
height: 3000px; height: 3000px;
} }
#sticky { .indicator {
background-color: red;
position: absolute;
}
.sticky {
background-color: green;
position: sticky; position: sticky;
top: 50px; top: 50px;
}
.box {
width: 200px; width: 200px;
height: 200px; height: 200px;
background-color: green;
} }
</style> </style>
<div id="sticky"></div>
<script> <script>
test(() => { window.addEventListener('load', function() {
window.scrollTo(0, 700); window.scrollTo(0, 700);
assert_equals(sticky.offsetTop, 700 + 50); });
}, 'Sticky elements work with the root (document) scroller');
</script> </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 0 → 100644
View file @ eca9e323
<!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 0 → 100644
View file @ eca9e323
<!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 @ eca9e323
<!DOCTYPE html> <!DOCTYPE html>
<title>translations on position:sticky elements should apply after sticking</title> <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" /> <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" /> <meta name="assert" content="This test checks that translations on position:sticky elements are carried out on their stuck position" />
<script src="/resources/testharness.js"></script> <style>
<script src="/resources/testharnessreport.js"></script> .group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
<script src="resources/sticky-util.js"></script> .scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
<body style="margin: 0;"></body> .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>
<script> <script>
test(() => { window.addEventListener('load', function() {
const elements = setupStickyTest('top', 50); document.getElementById('scroller1').scrollTop = 50;
elements.sticky.style.transform = 'translateY(-100%)'; document.getElementById('scroller2').scrollTop = 70;
elements.scroller.scrollTop = 100; document.getElementById('scroller3').scrollTop = 50;
// 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> </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 @ eca9e323
<!DOCTYPE html> <!DOCTYPE html>
<title>transforms on position:sticky elements should apply after sticking</title> <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" /> <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" /> <meta name="assert" content="This test checks that transforms on position:sticky elements are carried out on their stuck position" />
<script src="/resources/testharness.js"></script> <style>
<script src="/resources/testharnessreport.js"></script> .group {
display: inline-block;
position: relative;
width: 150px;
height: 250px;
}
<script src="resources/sticky-util.js"></script> .scroller {
position: relative;
width: 100px;
height: 200px;
overflow-x: hidden;
overflow-y: auto;
}
<body style="margin: 0;"></body> .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>
<script> <script>
test(() => { window.addEventListener('load', function() {
const elements = setupStickyTest('top', 50); document.getElementById('scroller1').scrollTop = 50;
elements.sticky.style.transform = 'scale(2)'; document.getElementById('scroller2').scrollTop = 50;
elements.scroller.scrollTop = 200; document.getElementById('scroller3').scrollTop = 50;
});
// 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> </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