overflow-hidden-region-dynamic-width-change.html (938B)
1 <!DOCTYPE html> 2 <!-- 3 `reftest-snapshot-all` is necessary to take the screenshot for whole canvas 4 when zoom level is changed. 5 This is the same as what we do in the case where reftest-async-zoom is 6 specified. 7 --> 8 <html class="reftest-wait reftest-snapshot-all"> 9 <meta name="viewport" content="width=device-width, minimum-scale=0.5"> 10 <style> 11 html { 12 overflow: hidden; 13 } 14 html, body { 15 margin: 0; 16 width: 100%; 17 height: 100%; 18 } 19 div { 20 position: absolute; 21 } 22 </style> 23 <div id="red" style="background: red; width: 100%; height: 300%;"></div> 24 <div id="green" style="background: green; width: 100%; height: 200%;"></div> 25 <div style="background: blue; width: 100%; height: 100%;"></div> 26 <script> 27 document.addEventListener('MozReftestInvalidate', () => { 28 green.style.width = '200%'; 29 red.style.width = '300%'; 30 requestAnimationFrame(() => { 31 document.documentElement.classList.remove('reftest-wait'); 32 }); 33 }); 34 </script> 35 </html>