Codebase Browser
chromium
Go to App

chromium/third_party/blink/web_tests/css3/viewport-percentage-lengths/css3-viewport-percentage-lengths-getStyle.html 

<!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>