zoom-with-fullzoom-dynamic-1.html (2133B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <!-- This test verifies that css 'zoom' properly stacks with full-page zoom, in 5 subdocuments, particularly when the full-page-zoom is dynamically adjusted 6 after pageload. This test has a 3x css-zoom that gets applied to the 7 iframe, which combines with a 5x css-zoom on the root node inside the 8 iframe; and then after flushing paints, this test adds an additional 2x 9 full-page-zoom factor. This test's expectation is that these zoom factors 10 all stack to forma 2*3*5=30x effective zoom inside the iframe. --> 11 <link rel="match" href="zoom-with-fullzoom-dynamic-1-ref.html"> 12 <style> 13 iframe { 14 border: 0; 15 zoom: 3; 16 /* If we left the iframe at its default 300x150 size, it'd overflow 17 * the WPT harness's viewport when its 3x CSS 'zoom' is applied, 18 * which would give test failures from scrollbars showing up. To avoid 19 * that, we set it to 50x50. This is still large enough to hold the 20 * content, and small enough to avoid overflow when scaled by the 21 * zoom factors in this test. 22 */ 23 width: 50px; 24 height: 50px; 25 } 26 body { 27 margin: 0; 28 } 29 </style> 30 <script> 31 // Ensure the original zoom level is restored after the screenshot. 32 const originalZoom = SpecialPowers.getFullZoom(window); 33 window.addEventListener("beforeunload", () => { 34 SpecialPowers.setFullZoom(window, originalZoom); 35 }); 36 37 async function go() { 38 // Start out with a double-rAF, to flush paints from pageload: 39 await new Promise(r => requestAnimationFrame(r)); 40 await new Promise(r => requestAnimationFrame(r)); 41 42 // Increase the full-page-zoom factor, and then (after it takes effect) 43 // take the reftest snapshot. 44 SpecialPowers.setFullZoom(window, 2); 45 addEventListener("resize", () => { 46 document.documentElement.classList.remove("reftest-wait"); 47 }); 48 } 49 </script> 50 <body onload="go()"> 51 <iframe srcdoc="<!DOCTYPE html><html style='zoom:5'><body style='margin:0'><div style='width:5px;height:5px;background:blue'></div></body>"> 52 </iframe> 53 </body> 54 </html>