<!doctype html> <meta charset="utf-8"> <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> <link rel="author" title="Mozilla" href="https://mozilla.org"> <link rel="help" href="https://drafts.csswg.org/css-values/#viewport-relative-lengths"> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <body style="display: none"> <script> promise_test(async function() { let frame = document.createElement("iframe"); let load = new Promise(resolve => { frame.addEventListener("load", resolve); }); frame.setAttribute("scrolling", "no"); frame.setAttribute("frameborder", "0"); frame.style.width = "100px"; frame.style.height = "100px"; frame.srcdoc = ` <!doctype html> <style> body { margin: 0 } #parent, #child { width: 100vw; height: 100vh; } </style> <div id="parent"> <div id="child"></div> </div> `; document.body.appendChild(frame); await load; { let resize = new Promise(resolve => { frame.contentWindow.addEventListener("resize", resolve); }); document.body.style.display = ""; await resize; } let doc = frame.contentDocument; function assertDimensions(expected, description) { for (let id of ["parent", "child"]) { let element = doc.getElementById(id); let rect = element.getBoundingClientRect(); assert_equals(rect.width, expected, `${description}: ${id} width`); assert_equals(rect.height, expected, `${description}: ${id} height`); } } assertDimensions(100, "before resize"); let resize = new Promise(resolve => { frame.contentWindow.addEventListener("resize", resolve); }); frame.style.width = "200px"; frame.style.height = "200px"; await resize; assertDimensions(200, "after resize"); }) </script>