min-scale-aspect-ratio.html (1247B)
1 <html class="reftest-wait"> 2 <meta name="viewport" content="width=device-width minimum-scale=0.25 initial-scale=1.0"> 3 <style> 4 html, body { 5 margin: 0; 6 width: 100%; 7 height: 100%; 8 scrollbar-width: none; 9 } 10 div { 11 position: absolute; 12 } 13 .B { 14 width: 200%; 15 height: 400%; 16 background: white; 17 } 18 .C { 19 width: 200%; 20 height: 200%; 21 background: green; 22 } 23 </style> 24 <div class="B"></div> 25 <div class="C"></div> 26 <script> 27 document.addEventListener('MozReftestInvalidate', () => { 28 // The page here is twice the width of the ICB, and four times the height. 29 // We want the layout viewport to be expanded to be twice the width and 30 // height of the ICB (to maintain aspect ratio), rather than four times the 31 // height. 32 // To test this, scroll to the end of the layout scroll range. 33 // If the layout viewport is expanded too much, we have no layout scroll 34 // range, so nothing will happen, and a green area will remain in view. 35 // If the layout viewport is expanded to the desired size, a white area 36 // will be scrolled into view, matching the reference page. 37 window.scrollTo(window.scrollMaxX, window.scrollMaxY); 38 document.documentElement.classList.remove('reftest-wait'); 39 }); 40 </script> 41 </html>