helper_overscroll_behavior_bug1494440.html (1953B)
1 <head> 2 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 3 <title>Inactive iframe with overscroll-behavior</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 </head> 8 <body> 9 <iframe id="scroll" srcdoc="<!doctype html><html style='overscroll-behavior:none; overflow: auto;'><div style='width:100px;height:2000px;'>"> 10 </iframe> 11 <div style="height: 5000px;"></div><!-- So the page is scrollable as well --> 12 13 <script type="application/javascript"> 14 15 async function test() { 16 var iframe = document.getElementById("scroll"); 17 var iframeWindow = iframe.contentWindow; 18 19 // scroll the iframe to the bottom, such that a subsequent scroll on it 20 // _would_ hand off to the page if overscroll-behavior allowed it 21 iframeWindow.scrollTo(0, iframeWindow.scrollMaxY); 22 await promiseApzFlushedRepaints(); 23 is(iframeWindow.scrollY, iframeWindow.scrollMaxY, "iframe has scrolled to the bottom"); 24 25 // Scroll over the iframe, and make sure that the page 26 // does not scroll. 27 // We can't wait for a "scroll" event unconditionally, since if the platform 28 // behaviour we are testing is correct (overscroll-behavior is respected), 29 // one will never arrive. 30 var waitForScroll = false; 31 await promiseMoveMouseAndScrollWheelOver(iframeWindow, 100, 100, waitForScroll); 32 // However, we need to give a potential "scroll" event a chance to be dispatched, 33 // so that if the platform behaviour we are testing is incorrect (overscroll-behavior) 34 // is not respected, we catch it. 35 await promiseApzFlushedRepaints(); 36 is(window.scrollY, 0, "overscroll-behavior was respected"); 37 } 38 39 waitUntilApzStable() 40 .then(test) 41 .then(subtestDone, subtestFailed); 42 43 </script> 44 <style> 45 #scroll { 46 width: 200px; 47 height: 500px; 48 } 49 </style> 50 </body>