visual-scrollIntoView-003.html (2082B)
1 <!DOCTYPE html> 2 <html> 3 <meta name="viewport" content="width=device-width,initial-scale=1"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/resources/testdriver.js"></script> 7 <script src="/resources/testdriver-actions.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="support/action-utils.js"></script> 10 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1951021"> 11 <link rel="help" href="https://drafts.csswg.org/cssom-view/#perform-a-scroll"> 12 <style> 13 body { 14 margin: 0px; 15 padding: 0px; 16 } 17 #container { 18 position: fixed; 19 width: 100%; 20 height: 100%; 21 top: 0px; 22 left: 0px; 23 } 24 #banner { 25 position: fixed; 26 bottom: 0px; 27 left: 0px; 28 right: 0px; 29 background-color: blue; 30 } 31 </style> 32 <div id="anchor"></div> 33 <div id="container"> 34 <aside id="banner"></aside> 35 </div> 36 <script> 37 promise_test(async t => { 38 assert_equals(window.scrollY, 0); 39 assert_equals(visualViewport.scale, 1.0); 40 assert_equals(visualViewport.pageTop, 0); 41 42 // Pinch zoom in this document. 43 await pinch_zoom_action(); 44 45 assert_greater_than(visualViewport.scale, 1.0); 46 47 // Suppose that the pinch zoom-in gesture at the center of the document did 48 // move the visual viewport offset. 49 assert_greater_than(visualViewport.pageTop, 0); 50 51 // Move to zero offset of the visual viewport. 52 let scrollPromise = 53 new Promise(resolve => visualViewport.addEventListener("scroll", resolve)); 54 document.querySelector('#anchor').scrollIntoView({ behavior: "instant" }); 55 await scrollPromise; 56 57 assert_equals(visualViewport.pageTop, 0); 58 59 // Now trigger a scrollIntoView call to an element inside nested position:fixed elements. 60 scrollPromise = 61 new Promise(resolve => visualViewport.addEventListener("scroll", resolve)); 62 document.querySelector("#banner").scrollIntoView({ behavior: "instant" }); 63 await scrollPromise; 64 65 assert_greater_than(visualViewport.pageTop, 0); 66 }, "Element.scrollIntoView scrolls visually to an element in nested position: fixed elements"); 67 </script>