viewport-resize-event-on-iframe-size-change.html (1680B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Viewport: Resize Event On Iframe Size Change</title> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, minimum-scale=1"> 7 <script src="/resources/testharness.js"></script> 8 <script src="/resources/testharnessreport.js"></script> 9 <script> 10 async_test(t => { 11 document.addEventListener("DOMContentLoaded", () => { 12 let iframe = document.querySelector("iframe"); 13 onload = () => { 14 requestAnimationFrame(() => { requestAnimationFrame(() => { 15 // First full rendering update is complete. 16 let resize_event_count = 0; 17 iframe.contentWindow.visualViewport.addEventListener("resize", () => { 18 resize_event_count++; 19 }); 20 iframe.style.width = "200px"; 21 iframe.clientWidth; 22 requestAnimationFrame(() => { 23 t.step(() => { 24 assert_equals(resize_event_count, 1); 25 t.done(); 26 }); 27 }) }); // 2x requestAnimationFrame 28 }) 29 }; 30 }); 31 }, "Resize event fired when an iframe is resized."); 32 </script> 33 </head> 34 <body> 35 <h1>Viewport: Resize Event On Iframe Size Change</h1> 36 <h4> 37 Test Description: This test ensures that we fire a resize event when 38 the size of an iframe changes. 39 </h4> 40 <iframe srcdoc="<p>Hello, world!</p>"></iframe> 41 <div id="log"></div> 42 </body> 43 </html>