exit-fullscreen-scroll-to-unscrollable-area-overflow-hidden.html (1424B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <link rel="match" href="exit-fullscreen-scroll-to-unscrollable-area-overflow-hidden-ref.html"> 5 <link rel="author" title="Vitor Roriz" href="https://github.com/vitorroriz"> 6 <style> 7 .container { overflow: hidden; position: relative; } 8 .image { position: absolute; left: 100vw; } 9 </style> 10 </head> 11 12 <body> 13 <div class="container"> 14 <div style="width: 2500px; height: 500px; background-color: green;"></div> 15 <button id="fullscreen-button" style="margin-top: 2px; border: 1px solid black; border-radius: 0; background-color: white;"> Request fullscreen!</button> 16 <img id="target" src="../../images/red.png" class="image"> 17 PASS if visually equal after exiting fullscreen (no scrolling has happened). 18 </div> 19 20 <script src="/resources/testdriver.js"></script> 21 <script src="/resources/testdriver-vendor.js"></script> 22 <script> 23 const fullscreenButton = document.getElementById('fullscreen-button'); 24 const image = document.getElementById('target'); 25 fullscreenButton.onclick = () => { image.requestFullscreen(); } 26 document.onfullscreenchange = () => { 27 if (document.fullscreenElement) { 28 // entering fullscreen 29 document.exitFullscreen(); 30 } else { 31 // exiting fullscreen 32 document.documentElement.classList.remove("reftest-wait"); 33 } 34 }; 35 test_driver.click(fullscreenButton); 36 </script> 37 </body> 38 </html>