helper_scroll_on_position_fixed.html (3298B)
1 <head> 2 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 3 <title>Wheel-scrolling over position:fixed and position:sticky elements, in the top-level document as well as iframes</title> 4 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 5 <script type="application/javascript" src="apz_test_utils.js"></script> 6 <script src="/tests/SimpleTest/paint_listener.js"></script> 7 <script type="application/javascript"> 8 9 async function test() { 10 var iframeWin = document.getElementById("iframe").contentWindow; 11 12 // scroll over the middle of the iframe's position:sticky element, check 13 // that it scrolls the iframe 14 var scrollPos = iframeWin.scrollY; 15 await promiseMoveMouseAndScrollWheelOver(iframeWin.document.body, 50, 150); 16 ok(iframeWin.scrollY > scrollPos, "iframe scrolled after wheeling over the position:sticky element"); 17 18 // same, but using the iframe's position:fixed element 19 scrollPos = iframeWin.scrollY; 20 await promiseMoveMouseAndScrollWheelOver(iframeWin.document.body, 250, 150); 21 ok(iframeWin.scrollY > scrollPos, "iframe scrolled after wheeling over the position:fixed element"); 22 23 // same, but scrolling the scrollable frame *inside* the position:fixed item 24 var fpos = document.getElementById("fpos_scrollable"); 25 scrollPos = fpos.scrollTop; 26 await promiseMoveMouseAndScrollWheelOver(fpos, 50, 150); 27 ok(fpos.scrollTop > scrollPos, "scrollable item inside fixed-pos element scrolled"); 28 // wait for it to layerize fully and then try again 29 await promiseAllPaintsDone(); 30 await promiseOnlyApzControllerFlushed(); 31 scrollPos = fpos.scrollTop; 32 await promiseMoveMouseAndScrollWheelOver(fpos, 50, 150); 33 ok(fpos.scrollTop > scrollPos, "scrollable item inside fixed-pos element scrolled after layerization"); 34 35 // same, but using the top-level window's position:sticky element 36 scrollPos = window.scrollY; 37 await promiseMoveMouseAndScrollWheelOver(document.body, 50, 150); 38 ok(window.scrollY > scrollPos, "top-level document scrolled after wheeling over the position:sticky element"); 39 40 // same, but using the top-level window's position:fixed element 41 scrollPos = window.scrollY; 42 await promiseMoveMouseAndScrollWheelOver(document.body, 250, 150); 43 ok(window.scrollY > scrollPos, "top-level document scrolled after wheeling over the position:fixed element"); 44 } 45 46 waitUntilApzStable() 47 .then(test) 48 .then(subtestDone, subtestFailed); 49 50 </script> 51 </head> 52 <body style="height:5000px; margin:0"> 53 <div style="position:sticky; width: 100px; height: 300px; top: 0; background-color:red">sticky</div> 54 <div style="position:fixed; width: 100px; height: 300px; top: 0; left: 200px; background-color: green">fixed</div> 55 <iframe id='iframe' width="300" height="400" srcdoc="<body style='height:5000px; margin:0'><div style='position:sticky; width:100px; height:300px; top: 0; background-color:red'>sticky</div><div style='position:fixed; right:0; top: 0; width:100px; height:300px; background-color:green'>fixed</div>"></iframe> 56 57 <div id="fpos_scrollable" style="position:fixed; width: 100px; height: 300px; top: 0; left: 400px; background-color: red; overflow:scroll"> 58 <div style="background-color: blue; height: 1000px; margin: 3px">scrollable content inside a fixed-pos item</div> 59 </div> 60 </body>