| <!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.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 vw(x) { |
| return "'" + (x * window.innerWidth / 100) + "px'"; |
| } |
| |
| function vh(x) { |
| return "'" + (x * window.innerHeight / 100) + "px'"; |
| } |
| |
| function vmin(x) { |
| return "'" + (x * Math.min(window.innerWidth, window.innerHeight) / 100) + "px'"; |
| } |
| |
| function vmax(x) { |
| return "'" + (x * Math.max(window.innerWidth, window.innerHeight) / 100) + "px'"; |
| } |
| |
| function getTheStyle() { |
| debug("Test for vw") |
| element = document.getElementById("element-container-vw"); |
| style = window.getComputedStyle(element,null); |
| shouldBe('style.getPropertyValue("height")', vw(30)); |
| shouldBe('style.getPropertyValue("width")', vw(30)); |
| shouldBe('style.getPropertyValue("font-size")', vw(3)); |
| shouldBe('style.getPropertyValue("line-height")', vw(4)); |
| shouldBe('style.getPropertyValue("text-indent")', vw(2)); |
| shouldBe('style.getPropertyValue("margin-left")', vw(2)); |
| shouldBe('style.getPropertyValue("margin-right")', vw(2)); |
| shouldBe('style.getPropertyValue("margin-top")', vw(2)); |
| shouldBe('style.getPropertyValue("margin-bottom")', vw(2)); |
| shouldBe('style.getPropertyValue("border-top-left-radius")', vw(1)); |
| shouldBe('style.getPropertyValue("border-top-right-radius")', vw(1)); |
| shouldBe('style.getPropertyValue("border-bottom-left-radius")', vw(1)); |
| shouldBe('style.getPropertyValue("border-bottom-right-radius")', vw(1)); |
| shouldBe('style.getPropertyValue("min-height")', vw(10)); |
| shouldBe('style.getPropertyValue("min-width")', vw(10)); |
| shouldBe('style.getPropertyValue("max-height")', vw(60)); |
| shouldBe('style.getPropertyValue("max-width")', vw(60)); |
| element.id = "element-container-absolute-vw"; |
| shouldBe('style.getPropertyValue("top")', vw(10)); |
| shouldBe('style.getPropertyValue("bottom")', vw(10)); |
| shouldBe('style.getPropertyValue("left")', vw(10)); |
| shouldBe('style.getPropertyValue("right")', vw(10)); |
| shouldBe('style.getPropertyValue("padding-left")', vw(2)); |
| shouldBe('style.getPropertyValue("padding-right")', vw(2)); |
| shouldBe('style.getPropertyValue("padding-top")', vw(2)); |
| shouldBe('style.getPropertyValue("padding-bottom")', vw(2)); |
| |
| debug("\nTest for vh") |
| element.id = "element-container-vh"; |
| style = window.getComputedStyle(element,null); |
| var viewportHeight = window.innerHeight; |
| shouldBe('style.getPropertyValue("height")', vh(30)); |
| shouldBe('style.getPropertyValue("width")', vh(30)); |
| shouldBe('style.getPropertyValue("font-size")', vh(3)); |
| shouldBe('style.getPropertyValue("line-height")', vh(4)); |
| shouldBe('style.getPropertyValue("text-indent")', vh(2)); |
| shouldBe('style.getPropertyValue("margin-left")', vh(2)); |
| shouldBe('style.getPropertyValue("margin-right")', vh(2)); |
| shouldBe('style.getPropertyValue("margin-top")', vh(2)); |
| shouldBe('style.getPropertyValue("margin-bottom")', vh(2)); |
| shouldBe('style.getPropertyValue("border-top-left-radius")', vh(1)); |
| shouldBe('style.getPropertyValue("border-top-right-radius")', vh(1)); |
| shouldBe('style.getPropertyValue("border-bottom-left-radius")', vh(1)); |
| shouldBe('style.getPropertyValue("border-bottom-right-radius")', vh(1)); |
| shouldBe('style.getPropertyValue("min-height")', vh(10)); |
| shouldBe('style.getPropertyValue("min-width")', vh(10)); |
| shouldBe('style.getPropertyValue("max-height")', vh(60)); |
| shouldBe('style.getPropertyValue("max-width")', vh(60)); |
| element.id = "element-container-absolute-vh"; |
| shouldBe('style.getPropertyValue("top")', vh(10)); |
| shouldBe('style.getPropertyValue("bottom")', vh(10)); |
| shouldBe('style.getPropertyValue("left")', vh(10)); |
| shouldBe('style.getPropertyValue("right")', vh(10)); |
| shouldBe('style.getPropertyValue("padding-left")', vh(2)); |
| shouldBe('style.getPropertyValue("padding-right")', vh(2)); |
| shouldBe('style.getPropertyValue("padding-top")', vh(2)); |
| shouldBe('style.getPropertyValue("padding-bottom")', vh(2)); |
| |
| 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")', vmin(30)); |
| shouldBe('style.getPropertyValue("width")', vmin(30)); |
| shouldBe('style.getPropertyValue("font-size")', vmin(3)); |
| shouldBe('style.getPropertyValue("line-height")', vmin(4)); |
| shouldBe('style.getPropertyValue("text-indent")', vmin(2)); |
| shouldBe('style.getPropertyValue("margin-left")', vmin(2)); |
| shouldBe('style.getPropertyValue("margin-right")', vmin(2)); |
| shouldBe('style.getPropertyValue("margin-top")', vmin(2)); |
| shouldBe('style.getPropertyValue("margin-bottom")', vmin(2)); |
| shouldBe('style.getPropertyValue("border-top-left-radius")', vmin(1)); |
| shouldBe('style.getPropertyValue("border-top-right-radius")', vmin(1)); |
| shouldBe('style.getPropertyValue("border-bottom-left-radius")', vmin(1)); |
| shouldBe('style.getPropertyValue("border-bottom-right-radius")', vmin(1)); |
| shouldBe('style.getPropertyValue("min-height")', vmin(10)); |
| shouldBe('style.getPropertyValue("min-width")', vmin(10)); |
| shouldBe('style.getPropertyValue("max-height")', vmin(60)); |
| shouldBe('style.getPropertyValue("max-width")', vmin(60)); |
| element.id = "element-container-absolute-vmin"; |
| shouldBe('style.getPropertyValue("top")', vmin(10)); |
| shouldBe('style.getPropertyValue("bottom")', vmin(10)); |
| shouldBe('style.getPropertyValue("left")', vmin(10)); |
| shouldBe('style.getPropertyValue("right")', vmin(10)); |
| shouldBe('style.getPropertyValue("padding-left")', vmin(2)); |
| shouldBe('style.getPropertyValue("padding-right")', vmin(2)); |
| shouldBe('style.getPropertyValue("padding-top")', vmin(2)); |
| shouldBe('style.getPropertyValue("padding-bottom")', vmin(2)); |
| |
| 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")', vmax(30)); |
| shouldBe('style.getPropertyValue("width")', vmax(30)); |
| shouldBe('style.getPropertyValue("font-size")', vmax(3)); |
| shouldBe('style.getPropertyValue("line-height")', vmax(4)); |
| shouldBe('style.getPropertyValue("text-indent")', vmax(2)); |
| shouldBe('style.getPropertyValue("margin-left")', vmax(2)); |
| shouldBe('style.getPropertyValue("margin-right")', vmax(2)); |
| shouldBe('style.getPropertyValue("margin-top")', vmax(2)); |
| shouldBe('style.getPropertyValue("margin-bottom")', vmax(2)); |
| shouldBe('style.getPropertyValue("border-top-left-radius")', vmax(1)); |
| shouldBe('style.getPropertyValue("border-top-right-radius")', vmax(1)); |
| shouldBe('style.getPropertyValue("border-bottom-left-radius")', vmax(1)); |
| shouldBe('style.getPropertyValue("border-bottom-right-radius")', vmax(1)); |
| shouldBe('style.getPropertyValue("min-height")', vmax(10)); |
| shouldBe('style.getPropertyValue("min-width")', vmax(10)); |
| shouldBe('style.getPropertyValue("max-height")', vmax(60)); |
| shouldBe('style.getPropertyValue("max-width")', vmax(60)); |
| element.id = "element-container-absolute-vmax"; |
| shouldBe('style.getPropertyValue("top")', vmax(10)); |
| shouldBe('style.getPropertyValue("bottom")', vmax(10)); |
| shouldBe('style.getPropertyValue("left")', vmax(10)); |
| shouldBe('style.getPropertyValue("right")', vmax(10)); |
| shouldBe('style.getPropertyValue("padding-left")', vmax(2)); |
| shouldBe('style.getPropertyValue("padding-right")', vmax(2)); |
| shouldBe('style.getPropertyValue("padding-top")', vmax(2)); |
| shouldBe('style.getPropertyValue("padding-bottom")', vmax(2)); |
| } |
| getTheStyle(); |
| </script> |
| </html> |
