zoom-iframe-dynamic.html (1739B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 4 <link rel="author" title="Mozilla" href="https://mozilla.org/"> 5 <link rel="help" href="https://drafts.csswg.org/css-viewport/"> 6 <title>Dynamic CSS zoom change on iframe</title> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <iframe srcdoc="Child frame"></iframe> 10 <script> 11 const iframe = document.querySelector("iframe"); 12 13 function promiseDpiChange(win, expected) { 14 // There might be multiple resize events, wait for the one that changes the device pixel ratio to the expected value. 15 return new Promise(resolve => { 16 win.addEventListener("resize", function listener() { 17 if (win.devicePixelRatio == expected) { 18 win.removeEventListener("resize", listener); 19 resolve(); 20 } 21 }); 22 }); 23 } 24 25 promise_test(async function(t) { 26 if (document.readyState != "complete") { 27 await new Promise(r => addEventListener("load", r, { once: true })); 28 } 29 30 let parentDpi = window.devicePixelRatio; 31 let origSize = iframe.getBoundingClientRect(); 32 assert_equals(parentDpi, iframe.contentWindow.devicePixelRatio, "DPI should match between frame and parent"); 33 const dpiChangePromise = promiseDpiChange(iframe.contentWindow, 2 * parentDpi); 34 iframe.style.zoom = 2; 35 await dpiChangePromise; 36 assert_equals(iframe.contentWindow.devicePixelRatio, 2 * parentDpi, "DPI should have doubled on the frame"); 37 assert_equals(iframe.getBoundingClientRect().width, origSize.width * 2, "Width should have doubled as well"); 38 assert_equals(iframe.getBoundingClientRect().height, origSize.height * 2, "Height should have doubled as well"); 39 }); 40 </script>