viewport-scrollbars-cause-resize-in-iframe.html (1657B)
1 <!doctype html> 2 <title>Viewport: Scrollbars Cause Resize</title> 3 <meta charset="utf-8"> 4 <meta name="viewport" content="width=device-width, minimum-scale=1"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="viewport_support.js"></script> 8 <h1>Viewport: Scrollbars Cause Resize In IFrame</h1> 9 <h4> 10 Test Description: This test checks that the appearance of classic 11 scrollbars will cause a resize event to be fired at window.visualViewport in iframe. 12 </h4> 13 <iframe srcdoc="<p>Hello, world!</p>"></iframe> 14 <script> 15 async_test(t => { 16 window.onload = () => { 17 const iframe = document.querySelector("iframe"); 18 19 let resize_event_count = 0; 20 iframe.contentWindow.visualViewport.addEventListener("resize", () => { 21 resize_event_count++; 22 }); 23 24 const originalVisualViewportWidth = iframe.contentWindow.visualViewport.width; 25 26 iframe.contentDocument.body.style.height = "10000px"; 27 // Force layout to queue a resize event at this moment. 28 iframe.contentDocument.body.clientWidth; 29 30 requestAnimationFrame(t.step_func_done(() => { 31 // it's uncontrollable whether the test will run 32 // with classic or overlay scrollbars in the case of Mac, 33 // so the check has to be conditional. 34 const width_changed = iframe.contentWindow.visualViewport.width !== originalVisualViewportWidth; 35 assert_equals(resize_event_count, width_changed ? 1 : 0); 36 })); 37 } 38 }, "the appearance of classic scrollbars will fire a resize event" + 39 "at window.visualViewport in iframe"); 40 </script> 41 <div id="log"></div>