position-sticky-root-scroller-with-scroll-behavior.html (1209B)
1 <!DOCTYPE html> 2 <title>position:sticky should operate correctly for the root scroller</title> 3 <link rel="help" href="https://drafts.csswg.org/css-position-3/#valdef-position-sticky"> 4 <link rel="help" href="https://drafts.csswg.org/cssom-view/#propdef-scroll-behavior"> 5 <meta name="assert" content="This test checks that position:sticky elements work when using the root (document) scroller which has `scroll-behavior` property" /> 6 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script src="support/scroll-behavior.js"></script> 10 11 <style> 12 html { 13 scroll-behavior: smooth; 14 } 15 16 body { 17 /* Assumption: 3000px is taller than any user agents test window size. */ 18 height: 3000px; 19 /* A property which propagates for <html>. */ 20 overflow-x: hidden; 21 } 22 23 #sticky { 24 position: sticky; 25 top: 50px; 26 width: 200px; 27 height: 200px; 28 background-color: green; 29 } 30 </style> 31 32 <div id="sticky">This is a sticky element!</div> 33 34 <script> 35 promise_test(async () => { 36 window.scrollTo(0, 700); 37 38 await waitForScrollEnd(document.scrollingElement); 39 40 assert_equals(sticky.offsetTop, 700 + 50); 41 }, 'Sticky elements work with the root (document) scroller'); 42 </script>