OLD | NEW |
(Empty) | |
| 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.webkitCreateShadowRoot(); |
| 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> |
OLD | NEW |