scrollIntoView-fixed-outside-of-viewport.html (1852B)
1 <!DOCTYPE html> 2 <html> 3 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1947223"> 7 <style> 8 html { 9 width: 200vw; 10 height: 200vh; 11 } 12 .fixed { 13 position: fixed; 14 top: 0px; 15 left: -200px; 16 width: 100px; 17 height: 100px; 18 overflow: scroll; 19 } 20 #target { 21 width: 100px; 22 height: 100px; 23 } 24 </style> 25 <div class="fixed"> 26 <div id="target"></div> 27 <div style="height: 200vh"></div> 28 </div> 29 <script> 30 promise_test(async t => { 31 assert_equals(window.scrollY, 0); 32 assert_equals(visualViewport.pageTop, 0); 33 34 // Scroll the root scroll container a bit. 35 const scrollPromise = 36 new Promise(resolve => window.addEventListener("scroll", resolve)); 37 window.scrollTo(0, 10); 38 await scrollPromise; 39 assert_equals(window.scrollY, 10); 40 assert_equals(visualViewport.pageTop, 10); 41 42 window.addEventListener("scroll", () => { 43 assert_unreached("Any scroll event should not be observed"); 44 }); 45 46 // Now trigger a scrollIntoView call to an element inside a position:fixed element. 47 // NOTE: smooth scroll is a trigger of the firefox bug. 48 document.querySelector('#target').scrollIntoView({ behavior: "smooth" }); 49 50 // Wait four rAFs to give a chance the scrollIntoView scrolls this document. 51 await new Promise(resolve => requestAnimationFrame(resolve)); 52 await new Promise(resolve => requestAnimationFrame(resolve)); 53 await new Promise(resolve => requestAnimationFrame(resolve)); 54 await new Promise(resolve => requestAnimationFrame(resolve)); 55 56 assert_equals(window.scrollY, 10); 57 assert_equals(visualViewport.pageTop, 10); 58 }, "Element.scrollIntoView doesn't scroll a position:fixed element outside of the layout viewport"); 59 </script>