| <!DOCTYPE> |
| <html> |
| <style> |
| #element-container-vw { |
| background:green; |
| height:30vw; |
| width:30vw; |
| font-size:3vw; |
| line-height:4vw; |
| text-indent:2vw; |
| margin-left:2vw; |
| margin-right:2vw; |
| margin-top:2vw; |
| margin-bottom:2vw; |
| border-top-left-radius:1vw; |
| border-top-right-radius:1vw; |
| border-bottom-left-radius:1vw; |
| border-bottom-right-radius:1vw; |
| min-height:10vw; |
| min-width:10vw; |
| max-height:60vw; |
| max-width:60vw; |
| } |
| |
| #element-container-absolute-vw { |
| background:green; |
| position:absolute; |
| top:10vw; |
| bottom:10vw; |
| left:10vw; |
| right:10vw; |
| padding-left:2vw; |
| padding-right:2vw; |
| padding-top:2vw; |
| padding-bottom:2vw; |
| } |
| |
| #element-container-vh { |
| background:green; |
| height:30vh; |
| width:30vh; |
| font-size:3vh; |
| line-height:4vh; |
| text-indent:2vh; |
| margin-left:2vh; |
| margin-right:2vh; |
| margin-top:2vh; |
| margin-bottom:2vh; |
| border-top-left-radius:1vh; |
| border-top-right-radius:1vh; |
| border-bottom-left-radius:1vh; |
| border-bottom-right-radius:1vh; |
| min-height:10vh; |
| min-width:10vh; |
| max-height:60vh; |
| max-width:60vh; |
| } |
| |
| #element-container-absolute-vh { |
| background:green; |
| position:absolute; |
| top:10vh; |
| bottom:10vh; |
| left:10vh; |
| right:10vh; |
| padding-left:2vh; |
| padding-right:2vh; |
| padding-top:2vh; |
| padding-bottom:2vh; |
| } |
| |
| #element-container-vmin { |
| background:green; |
| height:30vmin; |
| width:30vmin; |
| font-size:3vmin; |
| line-height:4vmin; |
| text-indent:2vmin; |
| margin-left:2vmin; |
| margin-right:2vmin; |
| margin-top:2vmin; |
| margin-bottom:2vmin; |
| border-top-left-radius:1vmin; |
| border-top-right-radius:1vmin; |
| border-bottom-left-radius:1vmin; |
| border-bottom-right-radius:1vmin; |
| min-height:10vmin; |
| min-width:10vmin; |
| max-height:60vmin; |
| max-width:60vmin; |
| } |
| |
| #element-container-absolute-vmin { |
| background:green; |
| position:absolute; |
| top:10vmin; |
| bottom:10vmin; |
| left:10vmin; |
| right:10vmin; |
| padding-left:2vmin; |
| padding-right:2vmin; |
| padding-top:2vmin; |
| padding-bottom:2vmin; |
| } |
| |
| #element-container-vmax { |
| background:green; |
| height:30vmax; |
| width:30vmax; |
| font-size:3vmax; |
| line-height:4vmax; |
| text-indent:2vmax; |
| margin-left:2vmax; |
| margin-right:2vmax; |
| margin-top:2vmax; |
| margin-bottom:2vmax; |
| border-top-left-radius:1vmax; |
| border-top-right-radius:1vmax; |
| border-bottom-left-radius:1vmax; |
| border-bottom-right-radius:1vmax; |
| min-height:10vmax; |
| min-width:10vmax; |
| max-height:60vmax; |
| max-width:60vmax; |
| } |
| |
| #element-container-absolute-vmax { |
| background:green; |
| position:absolute; |
| top:10vmax; |
| bottom:10vmax; |
| left:10vmax; |
| right:10vmax; |
| padding-left:2vmax; |
| padding-right:2vmax; |
| padding-top:2vmax; |
| padding-bottom:2vmax; |
| } |
| |
| </style> |
| <div id="element-container-vw"></div> |
| <script src="../../resources/js-test-pre.js"></script> |
| <script> |
| if (window.testRunner) |
| testRunner.dumpAsText(); |
| |
| description("Test for Bug: 27160/91440 - Implement vw/vh/vmin/vmax (viewport sizes) from CSS 3 Values and Units"); |
| |
| // These have to be global for the test helpers to see them. |
| var element, style; |
| |
| function getTheStyle() { |
| debug("Test for vw") |
| element = document.getElementById("element-container-vw"); |
| style = window.getComputedStyle(element,null); |
| var viewportWidth = window.innerWidth; |
| shouldBe('style.getPropertyValue("height")', "'" + Math.floor(30 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("width")', "'" + Math.floor(30 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("font-size")', "'" + Math.floor(3 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("line-height")', "'" + Math.floor(4 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("text-indent")', "'2vw'"); |
| shouldBe('style.getPropertyValue("margin-left")', "'" + Math.floor(2 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-right")', "'" + Math.floor(2 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-top")', "'" + Math.floor(2 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-bottom")', "'" + Math.floor(2 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-top-left-radius")', "'" + Math.floor(1 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-top-right-radius")', "'" + Math.floor(1 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-bottom-left-radius")', "'" + Math.floor(1 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-bottom-right-radius")', "'" + Math.floor(1 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("min-height")', "'10vw'"); |
| shouldBe('style.getPropertyValue("min-width")', "'10vw'"); |
| shouldBe('style.getPropertyValue("max-height")', "'60vw'"); |
| shouldBe('style.getPropertyValue("max-width")', "'60vw'"); |
| element.id = "element-container-absolute-vw"; |
| shouldBe('style.getPropertyValue("top")', "'" + Math.floor(10 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("bottom")', "'" + Math.floor(10 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("left")', "'" + Math.floor(10 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("right")', "'" + Math.floor(10 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-left")', "'" + Math.floor(2 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-right")', "'" + Math.floor(2 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-top")', "'" + Math.floor(2 * viewportWidth / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-bottom")', "'" + Math.floor(2 * viewportWidth / 100) + "px'"); |
| |
| debug("\nTest for vh") |
| element.id = "element-container-vh"; |
| style = window.getComputedStyle(element,null); |
| var viewportHeight = window.innerHeight; |
| shouldBe('style.getPropertyValue("height")', "'" + Math.floor(30 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("width")', "'" + Math.floor(30 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("font-size")', "'" + Math.floor(3 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("line-height")', "'" + Math.floor(4 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("text-indent")', "'2vh'"); |
| shouldBe('style.getPropertyValue("margin-left")', "'" + Math.floor(2 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-right")', "'" + Math.floor(2 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-top")', "'" + Math.floor(2 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-bottom")', "'" + Math.floor(2 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-top-left-radius")', "'" + Math.floor(1 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-top-right-radius")', "'" + Math.floor(1 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-bottom-left-radius")', "'" + Math.floor(1 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-bottom-right-radius")', "'" + Math.floor(1 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("min-height")', "'10vh'"); |
| shouldBe('style.getPropertyValue("min-width")', "'10vh'"); |
| shouldBe('style.getPropertyValue("max-height")', "'60vh'"); |
| shouldBe('style.getPropertyValue("max-width")', "'60vh'"); |
| element.id = "element-container-absolute-vh"; |
| shouldBe('style.getPropertyValue("top")', "'" + Math.floor(10 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("bottom")', "'" + Math.floor(10 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("left")', "'" + Math.floor(10 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("right")', "'" + Math.floor(10 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-left")', "'" + Math.floor(2 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-right")', "'" + Math.floor(2 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-top")', "'" + Math.floor(2 * viewportHeight / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-bottom")', "'" + Math.floor(2 * viewportHeight / 100) + "px'"); |
| |
| debug("\nTest for vmin") |
| element.id = "element-container-vmin"; |
| style = window.getComputedStyle(element,null); |
| var viewportMinLength = Math.min(window.innerWidth, window.innerHeight); |
| shouldBe('style.getPropertyValue("height")', "'" + Math.floor(30 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("width")', "'" + Math.floor(30 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("font-size")', "'" + Math.floor(3 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("line-height")', "'" + Math.floor(4 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("text-indent")', "'2vmin'"); |
| shouldBe('style.getPropertyValue("margin-left")', "'" + Math.floor(2 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-right")', "'" + Math.floor(2 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-top")', "'" + Math.floor(2 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-bottom")', "'" + Math.floor(2 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-top-left-radius")', "'" + Math.floor(1 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-top-right-radius")', "'" + Math.floor(1 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-bottom-left-radius")', "'" + Math.floor(1 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-bottom-right-radius")', "'" + Math.floor(1 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("min-height")', "'10vmin'"); |
| shouldBe('style.getPropertyValue("min-width")', "'10vmin'"); |
| shouldBe('style.getPropertyValue("max-height")', "'60vmin'"); |
| shouldBe('style.getPropertyValue("max-width")', "'60vmin'"); |
| element.id = "element-container-absolute-vmin"; |
| shouldBe('style.getPropertyValue("top")', "'" + Math.floor(10 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("bottom")', "'" + Math.floor(10 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("left")', "'" + Math.floor(10 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("right")', "'" + Math.floor(10 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-left")', "'" + Math.floor(2 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-right")', "'" + Math.floor(2 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-top")', "'" + Math.floor(2 * viewportMinLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-bottom")', "'" + Math.floor(2 * viewportMinLength / 100) + "px'"); |
| |
| debug("\nTest for vmax") |
| element.id = "element-container-vmax"; |
| style = window.getComputedStyle(element,null); |
| var viewportMaxLength = Math.max(window.innerWidth, window.innerHeight); |
| shouldBe('style.getPropertyValue("height")', "'" + Math.floor(30 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("width")', "'" + Math.floor(30 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("font-size")', "'" + Math.floor(3 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("line-height")', "'" + Math.floor(4 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("text-indent")', "'2vmax'"); |
| shouldBe('style.getPropertyValue("margin-left")', "'" + Math.floor(2 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-right")', "'" + Math.floor(2 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-top")', "'" + Math.floor(2 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("margin-bottom")', "'" + Math.floor(2 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-top-left-radius")', "'" + Math.floor(1 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-top-right-radius")', "'" + Math.floor(1 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-bottom-left-radius")', "'" + Math.floor(1 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("border-bottom-right-radius")', "'" + Math.floor(1 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("min-height")', "'10vmax'"); |
| shouldBe('style.getPropertyValue("min-width")', "'10vmax'"); |
| shouldBe('style.getPropertyValue("max-height")', "'60vmax'"); |
| shouldBe('style.getPropertyValue("max-width")', "'60vmax'"); |
| element.id = "element-container-absolute-vmax"; |
| shouldBe('style.getPropertyValue("top")', "'" + Math.floor(10 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("bottom")', "'" + Math.floor(10 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("left")', "'" + Math.floor(10 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("right")', "'" + Math.floor(10 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-left")', "'" + Math.floor(2 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-right")', "'" + Math.floor(2 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-top")', "'" + Math.floor(2 * viewportMaxLength / 100) + "px'"); |
| shouldBe('style.getPropertyValue("padding-bottom")', "'" + Math.floor(2 * viewportMaxLength / 100) + "px'"); |
| } |
| getTheStyle(); |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
