<!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>
