Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that disables it given conditions:
- (os == "mac") and (os_version == "14.70") and (processor == "x86_64") and not debug : Bug 1931150
- (os == "mac") and (os_version == "14.70") and (processor == "x86_64") and debug : Bug 1931150
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /visual-viewport/viewport-scrollbars-cause-resize-in-iframe.html - WPT Dashboard Interop Dashboard
<!doctype html>
<title>Viewport: Scrollbars Cause Resize</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="viewport_support.js"></script>
<h1>Viewport: Scrollbars Cause Resize In IFrame</h1>
<h4>
Test Description: This test checks that the appearance of classic
scrollbars will cause a resize event to be fired at window.visualViewport in iframe.
</h4>
<iframe srcdoc="<p>Hello, world!</p>"></iframe>
<script>
async_test(t => {
window.onload = () => {
const iframe = document.querySelector("iframe");
let resize_event_count = 0;
iframe.contentWindow.visualViewport.addEventListener("resize", () => {
resize_event_count++;
});
const originalVisualViewportWidth = iframe.contentWindow.visualViewport.width;
iframe.contentDocument.body.style.height = "10000px";
// Force layout to queue a resize event at this moment.
iframe.contentDocument.body.clientWidth;
requestAnimationFrame(t.step_func_done(() => {
// it's uncontrollable whether the test will run
// with classic or overlay scrollbars in the case of Mac,
// so the check has to be conditional.
const width_changed = iframe.contentWindow.visualViewport.width !== originalVisualViewportWidth;
assert_equals(resize_event_count, width_changed ? 1 : 0);
}));
}
}, "the appearance of classic scrollbars will fire a resize event" +
"at window.visualViewport in iframe");
</script>
<div id="log"></div>