iframe-zoom-nested.html (1426B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>nested iframes with CSS zoom</title> 5 <link rel="author" title="Yotam Hacohen" href="mailto:yotha@chromium.org"> 6 <link rel="author" title="Stefan Zager" href="mailto:szager@chromium.org"> 7 <link rel="author" title="Google" href="http://www.google.com/"> 8 <link href="reference/iframe-zoom-nested-ref.html" rel="match"> 9 <link rel="help" href="https://drafts.csswg.org/css-viewport/"> 10 11 <style> 12 body { 13 columns: 2; 14 --iframe-width: 256px; 15 --iframe-height: 128px; 16 } 17 iframe { 18 border: none; 19 width: var(--iframe-width); 20 height: var(--iframe-height); 21 } 22 .zoom { 23 zoom: 1.5; 24 } 25 </style> 26 </head> 27 28 <body> 29 30 <iframe id="baseline" src="resources/nested-iframe.html" scrolling="no"></iframe> 31 <iframe id="zoom-child" src="resources/nested-iframe.html?zoom=2" scrolling="no"></iframe> 32 <iframe id="zoom-top" class="zoom" src="resources/nested-iframe.html" scrolling="no"></iframe> 33 <iframe id="zoom-top-child" class="zoom" src="resources/nested-iframe.html?zoom=2" scrolling="no"></iframe> 34 35 <script> 36 // Wait for all iframes to load before allowing the screenshot 37 let loadedCount = 0; 38 const iframes = document.querySelectorAll('iframe'); 39 const totalFrames = iframes.length; 40 41 iframes.forEach(iframe => { 42 iframe.onload = function() { 43 loadedCount++; 44 if (loadedCount === totalFrames) { 45 document.documentElement.classList.remove("reftest-wait"); 46 } 47 }; 48 }); 49 </script>