helper_position_fixed_scroll_handoff-5.html (3567B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>APZ overscroll handoff for fixed elements in a subdoc</title> 5 <script type="application/javascript" src="apz_test_utils.js"></script> 6 <script type="application/javascript" src="apz_test_native_event_utils.js"></script> 7 <script src="/tests/SimpleTest/paint_listener.js"></script> 8 <meta name="viewport" content="width=device-width"/> 9 <style> 10 iframe { 11 width: 400px; 12 height: 400px; 13 border: solid 2px black; 14 } 15 #rootcontent { 16 height: 200vh; 17 background: yellow; 18 } 19 </style> 20 </head> 21 <body> 22 <iframe id="subdoc" srcdoc=" 23 <!DOCTYPE html> 24 <html> 25 <head> 26 <style> 27 #fixed { 28 position: fixed; 29 top: 0; 30 height: 100px; 31 width: 80%; 32 overflow: scroll; 33 } 34 #fixed-content { 35 background: red; 36 } 37 #rootcontent { 38 background: green; 39 } 40 .spacer { 41 height: 200vh; 42 width: 100%; 43 } 44 </style> 45 </head> 46 <body> 47 <div id='fixed'> 48 <div id='fixed-content' class='spacer'></div> 49 </div> 50 <div id='rootcontent' class='spacer'></div> 51 </body> 52 </html> 53 "></iframe> 54 <div id="rootcontent"></div> 55 </body> 56 <script> 57 async function test() { 58 // Scroll to the bottom of the fixed position element to ensure that the following 59 // scroll does trigger overscroll handoff to the subdoc root scrollable element. 60 subdoc.contentWindow.fixed.scrollTop = subdoc.contentWindow.fixed.scrollHeight; 61 62 // After scrolling to bottom tick the refresh driver. 63 await promiseFrame(); 64 65 let firstTransformEnd = promiseTransformEnd(); 66 67 info("start scroll #1"); 68 69 // Async scroll the fixed element by 200 pixels using the mouse-wheel. This should 70 // handoff the overscroll to the subdoc's root scrollable element. 71 await promiseMoveMouseAndScrollWheelOver(subdoc.contentWindow.fixed, 50, 50, false, 200); 72 73 info("After scroll #1: fixed=" + subdoc.contentWindow.fixed.scrollTop + 74 " subdoc window=" + subdoc.contentWindow.scrollY + " window=" + window.scrollY); 75 76 info("wait scroll #1"); 77 await firstTransformEnd; 78 79 // Do not attempt the second scroll if we did scroll the root document. 80 // A scroll in this case would likely cause the test to timeout. The assertions at the 81 // end of the test will catch this. 82 83 // If we triggered a scroll handoff to the _root_ document from the subframe, do not 84 // make another attempt at a second scroll. The test has already failed. 85 if (window.scrollY == 0) { 86 let secondTransformEnd = promiseTransformEnd(); 87 88 info("start scroll #2"); 89 90 await promiseMoveMouseAndScrollWheelOver(subdoc.contentWindow.fixed, 50, 50, false, 200); 91 92 info("After scroll #2: fixed=" + subdoc.contentWindow.fixed.scrollTop + 93 " subdoc window=" + subdoc.contentWindow.scrollY + " window=" + window.scrollY); 94 95 info("wait scroll #2"); 96 await secondTransformEnd; 97 } 98 99 // Ensure that the main element has not scrolled and overscroll was handed off to 100 // the subdocument root scrollable element. 101 is(window.scrollY, 0, "The overscroll should not handoff to the root window"); 102 isnot(subdoc.contentWindow.scrollY, 0, 103 "The overscroll should handoff to the subdocument's root scrollable element"); 104 } 105 106 waitUntilApzStable() 107 .then(test) 108 .then(subtestDone, subtestFailed); 109 </script> 110 </html>