src/third_party/WebKit/LayoutTests/css3/viewport-percentage-lengths/viewport-percentage-lengths-resize.html

   1 <!DOCTYPE html>
   2 <style>
   3 #test {
   4     font-size: 5vh;
   5     width: 50vw;
   6 }
   7 #testpseudo:after {
   8     margin-left: 20vmin;
   9     content: '';
  10 }
  11 </style>
  12 <script src="../../resources/js-test.js"></script>
  13
  14 This test of viewport units and resizing depends on window.resizeTo.
  15
  16 <div id="test"></div>
  17 <div id="testpseudo"></div>
  18 <div id="host"></div>
  19
  20 <script>
  21 if (window.testRunner) {
  22     testRunner.useUnfortunateSynchronousResizeMode();
  23     testRunner.dumpAsText();
  24 }
  25
  26 var sizes = [[800, 600], [900, 600], [900, 640], [500, 640], [800, 600]]
  27 var root = host.createShadowRoot();
  28 testshadow = document.createElement("div");
  29 testshadow.id = "testshadow";
  30 root.innerHTML = "<style> #testshadow { border: 10vmax solid green; } </style>";
  31 root.appendChild(testshadow);
  32
  33 for (var i = 0; i < sizes.length; ++i) {
  34     var width = sizes[i][0];
  35     var height = sizes[i][1];
  36     var min = Math.min(width, height);
  37     var max = Math.max(width, height);
  38     window.resizeTo(width, height);
  39     shouldBe("window.innerWidth", "" + width);
  40     shouldBe("window.innerHeight", "" + height);
  41     shouldBe("getComputedStyle(test).fontSize", "'" + height/20 + "px'");
  42     shouldBe("getComputedStyle(test).width", "'" + width/2 + "px'");
  43     shouldBe("getComputedStyle(testpseudo, ':after').marginLeft", "'" + min/5 + "px'");
  44     shouldBe("getComputedStyle(testshadow).borderRightWidth", "'" + max/10 + "px'");
  45 }
  46 </script>