helper_fullscreen.html (1633B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width; initial-scale=1.0"> 6 <title>Tests that layout viewport is not larger than visual viewport on fullscreen</title> 7 <script type="application/javascript" src="apz_test_utils.js"></script> 8 <script src="/tests/SimpleTest/paint_listener.js"></script> 9 <style> 10 body { 11 margin: 0; 12 padding: 0; 13 overflow-x: hidden; 14 } 15 </style> 16 </head> 17 <body> 18 <div style="background: blue; width: 100%; height: 100%;"></div> 19 <div style="background: red; width: 200%; height: 100px;">overflowed element</div> 20 <div id="target" style="background: green; width: 100px; height: 100px;"></div> 21 <script type="application/javascript"> 22 const utils = SpecialPowers.getDOMWindowUtils(window); 23 24 function waitForFullscreenChange() { 25 return new Promise(resolve => { 26 document.addEventListener("fullscreenchange", resolve); 27 }); 28 } 29 30 async function test() { 31 target.requestFullscreen(); 32 33 await waitForFullscreenChange(); 34 35 is(document.fullscreenElement, target, 36 "The target element should have been fullscreen-ed"); 37 38 // Try to move rightward, but it should NOT happen. 39 utils.scrollToVisual(200, 0, utils.UPDATE_TYPE_MAIN_THREAD, 40 utils.SCROLL_MODE_INSTANT); 41 42 await waitUntilApzStable(); 43 44 is(visualViewport.offsetLeft, 0, 45 "The visual viewport offset should never be moved"); 46 47 document.exitFullscreen(); 48 } 49 50 waitUntilApzStable().then(test).then(subtestDone, subtestFailed); 51 </script> 52 </body> 53 </html>