viewport-percentage-lengths-resize.html

<!DOCTYPE html>
<style>
#testdiv {
    font-size: 5vh;
    width: 50vw;
}
#testpseudo:after {
    margin-left: 20vmin;
    content: '';
}
</style>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

This test of viewport units and resizing depends on window.resizeTo.

<div id="testdiv"></div>
<div id="testpseudo"></div>
<div id="host"></div>

<script>
promise_test(async () => {
  var sizes = [[800, 600], [900, 600], [900, 640], [500, 640], [800, 600]]
  var root = host.attachShadow({mode: 'open'});
  testshadow = document.createElement("div");
  testshadow.id = "testshadow";
  root.innerHTML = "<style> #testshadow { border: 10vmax solid green; } </style>";
  root.appendChild(testshadow);

  for (var i = 0; i < sizes.length; ++i) {
      var width = sizes[i][0];
      var height = sizes[i][1];
      var min = Math.min(width, height);
      var max = Math.max(width, height);
      if (window.innerWidth != width || window.innerHeight != height) {
          var resizePromise = new Promise(resolve => window.onresize = resolve);
          window.resizeTo(width, height);
          await resizePromise;
      }
      assert_equals(window.innerWidth, width);
      assert_equals(window.innerHeight, height);
      assert_equals(getComputedStyle(testdiv).fontSize, "" + height/20 + "px");
      assert_equals(getComputedStyle(testdiv).width, "" + width/2 + "px");
      assert_equals(getComputedStyle(testpseudo, ':after').marginLeft, "" + min/5 + "px");
      assert_equals(getComputedStyle(testshadow).borderRightWidth, "" + max/10 + "px");
  }
});
</script>
chromium/third_party/blink/web_tests/css3/viewport-percentage-lengths/viewport-percentage-lengths-resize.html
