mirror of
https://github.com/servo/servo.git
synced 2025-06-30 12:03:38 +01:00
60 lines
1.6 KiB
HTML
60 lines
1.6 KiB
HTML
<!DOCTYPE html>
|
|
<title>Sticky positioning can cause overflow but must be accessible.</title>
|
|
<link rel="help" href="https://www.w3.org/TR/css-position-3/#sticky-pos" />
|
|
<meta name="assert" content="This test checks that a sticky positioned element
|
|
can cause overflow but must still be accessible through scrolling" />
|
|
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<style>
|
|
.container {
|
|
overflow: scroll;
|
|
width: 100px;
|
|
height: 100px;
|
|
}
|
|
|
|
.box {
|
|
background-color: green;
|
|
height: 50px;
|
|
width: 50px;
|
|
}
|
|
|
|
.sticky {
|
|
position: sticky;
|
|
top: 200px; /* Forces the sticky position element below the overflow. */
|
|
}
|
|
</style>
|
|
|
|
<div id="scroller1" class="container">
|
|
<div class="sticky box"></div>
|
|
</div>
|
|
|
|
<div id="scroller2" class="container">
|
|
<div class="sticky box"></div>
|
|
</div>
|
|
|
|
<script>
|
|
test(() => {
|
|
var scroller = document.getElementById('scroller1');
|
|
var sticky = scroller.querySelector('.sticky');
|
|
|
|
var stickyOffset = sticky.offsetTop -
|
|
scroller.scrollTop - scroller.offsetTop;
|
|
assert_equals(stickyOffset, 200);
|
|
assert_equals(scroller.scrollHeight, 250);
|
|
}, 'sticky position offset should be able to cause overflow');
|
|
|
|
test(() => {
|
|
var scroller = document.getElementById('scroller2');
|
|
var sticky = scroller.querySelector('.sticky');
|
|
|
|
scroller.scrollTop = 150;
|
|
var stickyOffset = sticky.offsetTop -
|
|
scroller.scrollTop - scroller.offsetTop;
|
|
assert_equals(stickyOffset, 50);
|
|
// Scroll height should be unaffected.
|
|
assert_equals(scroller.scrollHeight, 250);
|
|
|
|
}, 'sticky position offset in overflow should be accessible');
|
|
</script>
|