position-change-heuristic-ib-split.html (1643B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="author" title="Mozilla" href="https://mozilla.org"> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1559627"> 7 <link rel="help" href="https://drafts.csswg.org/css-scroll-anchoring/#suppression-triggers"> 8 <style> 9 body, h1 { 10 margin: 0 11 } 12 .sticky { 13 width: 100%; 14 top: 0; 15 left: 0; 16 } 17 .sticky > div { 18 width: 100%; 19 height: 50px; 20 background: darkblue; 21 } 22 header { 23 background: lightblue; 24 } 25 main { 26 background: lightgrey; 27 height: 200vh; 28 } 29 </style> 30 <header> 31 <h1>Some title</h1> 32 <span class="sticky"><div>Sticky header</div></span> 33 </header> 34 <main> 35 Some actual content. 36 </main> 37 <script> 38 const sticky = document.querySelector(".sticky"); 39 const nonStickyOffset = sticky.firstElementChild.offsetTop; 40 const t = async_test("Scroll offset adjustments are correctly suppressed when changing the position of an inline"); 41 let firstEvent = true; 42 window.onscroll = t.step_func(function() { 43 sticky.style.position = 44 document.documentElement.scrollTop > nonStickyOffset ? "fixed" : "static"; 45 if (firstEvent) { 46 firstEvent = false; 47 requestAnimationFrame(t.step_func(function() { 48 requestAnimationFrame(t.step_func_done(function() { 49 assert_equals(sticky.style.position, "fixed", "Element should become and remain fixed") 50 })); 51 })); 52 } 53 }); 54 window.onload = t.step_func(function() { 55 window.scrollTo(0, nonStickyOffset + 1); 56 }); 57 </script>