| <!DOCTYPE html> |
| <style> |
| #test { |
| font-size: 5vh; |
| width: 50vw; |
| } |
| #testpseudo:after { |
| margin-left: 20vmin; |
| content: ''; |
| } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| |
| This test of viewport units and resizing depends on window.resizeTo. |
| |
| <div id="test"></div> |
| <div id="testpseudo"></div> |
| <div id="host"></div> |
| |
| <script> |
| if (window.testRunner) { |
| testRunner.useUnfortunateSynchronousResizeMode(); |
| testRunner.dumpAsText(); |
| } |
| |
| 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); |
| window.resizeTo(width, height); |
| shouldBe("window.innerWidth", "" + width); |
| shouldBe("window.innerHeight", "" + height); |
| shouldBe("getComputedStyle(test).fontSize", "'" + height/20 + "px'"); |
| shouldBe("getComputedStyle(test).width", "'" + width/2 + "px'"); |
| shouldBe("getComputedStyle(testpseudo, ':after').marginLeft", "'" + min/5 + "px'"); |
| shouldBe("getComputedStyle(testshadow).borderRightWidth", "'" + max/10 + "px'"); |
| } |
| </script> |
