Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-09-05 04:28:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 10168e9a5d44efbc6e7d416d1d454eb9c9f1396c

Browse source
This commit is contained in:
Josh Matthews 2018-01-31 09:13:41 -05:00
parent c88dc51d03
commit 0e1caebaf4
791 changed files with 23381 additions and 5501 deletions
Download patch file Download diff file Expand all files Collapse all files

127
tests/wpt/web-platform-tests/css/css-position/position-sticky-top.html
View file

@ -1,104 +1,43 @@
<!DOCTYPE html>
<title>position:sticky elements should respect the top constraint</title>
<link rel="match" href="position-sticky-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 position:sticky elements obey their top anchor after scrolling" />
<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;
}
.indicator {
background-color: red;
position: absolute;
left: 0;
}
.sticky {
background-color: green;
position: sticky;
top: 50px;
}
.box {
width: 100%;
height: 100px;
}
</style>
<body></body>
<script>
window.addEventListener('load', function() {
document.getElementById('scroller1').scrollTop = 50;
document.getElementById('scroller2').scrollTop = 125;
document.getElementById('scroller3').scrollTop = 200;
});
test(() => {
const elements = setupStickyTest('top', 50);
elements.scroller.scrollTop = 100;
const nonStickyTopY = elements.container.offsetTop +
elements.filler.clientHeight;
assert_equals(elements.sticky.offsetTop, nonStickyTopY);
}, 'before reaching the sticking point the sticky box should not be offset');
test(() => {
const elements = setupStickyTest('top', 50);
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);
}, 'after reaching the sticking point the sticky box should be offset');
test(() => {
const elements = setupStickyTest('top', 50);
elements.scroller.scrollTop = 300;
const maxOffsetInContainer = elements.container.offsetTop +
elements.container.clientHeight - elements.sticky.clientHeight;
assert_equals(elements.sticky.offsetTop, maxOffsetInContainer);
}, 'the sticky box should not be pushed outside its containing block');
</script>
<div class="group">
<div id="scroller1" class="scroller">
<div class="indicator box" style="top: 150px;"></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: 175px;"></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: 200px;"></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>