dynamic-grow-width.html (746B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta name="viewport" content="width=device-width, minimum-scale=0.5"> 4 <style> 5 html { 6 overflow-x: hidden; 7 } 8 html, body { 9 margin: 0; 10 width: 100%; 11 height: 100%; 12 } 13 div { 14 height: 100%; 15 position: absolute; 16 } 17 </style> 18 <div id="green" style="background: green; width: 100%;"></div> 19 <div style="background: blue; width: 100%;"></div> 20 <script> 21 document.addEventListener('MozReftestInvalidate', () => { 22 // Grow width to generate overflow-x:hidden area but the content height is 23 // 100vh so that we don't scale down the contents (bug 1508177). 24 green.style.width = '200%'; 25 requestAnimationFrame(() => { 26 document.documentElement.classList.remove('reftest-wait'); 27 }); 28 }); 29 </script> 30 </html>