297 lines
11 KiB
HTML
297 lines
11 KiB
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-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 vw(x) {
|
|
return "'" + Math.floor(x * window.innerWidth / 100) + "px'";
|
|
}
|
|
|
|
function vh(x) {
|
|
return "'" + Math.floor(x * window.innerHeight / 100) + "px'";
|
|
}
|
|
|
|
function vmin(x) {
|
|
return "'" + Math.floor(x * Math.min(window.innerWidth, window.innerHeight) / 100) + "px'";
|
|
}
|
|
|
|
function vmax(x) {
|
|
return "'" + Math.floor(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);
|
|
var viewportWidth = window.innerWidth;
|
|
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>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|