dynamic-grow-width-and-height.html (1089B)
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-x: hidden; 13 scrollbar-width: none; 14 } 15 html, body { 16 margin: 0; 17 width: 100%; 18 height: 100%; 19 } 20 div { 21 position: absolute; 22 } 23 </style> 24 <div id="green" style="background: green; width: 100%; height: 100%;"></div> 25 <div style="background: blue; width: 100%; height: 100%;"></div> 26 <script> 27 document.addEventListener('MozReftestInvalidate', () => { 28 green.style.width = '200%'; 29 requestAnimationFrame(() => { 30 // At this moment we don't scale down the contents due to bug 1508177. 31 32 green.style.height = '200%'; 33 requestAnimationFrame(() => { 34 // Growing height should make the overflow-x:hidden area visible. 35 document.documentElement.classList.remove('reftest-wait'); 36 }); 37 }); 38 }); 39 </script> 40 </html>