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