blob: b7c29228a8e572504d04e5c4d57ee7822ffbca23 [file] [log] [blame]
<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<svg width="1" height="1" visibility="hidden">
</svg>
<script>
var svgElement = document.querySelector("svg");
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
var EPSILON = Math.pow(2, -8);
function viewportWidthPercent()
{
return (viewportWidth / 100);
}
function viewportHeightPercent()
{
return (viewportHeight / 100);
}
function viewportMinPercent()
{
return (Math.min(viewportWidth, viewportHeight) / 100);
}
function viewportMaxPercent()
{
return (Math.max(viewportWidth, viewportHeight) / 100);
}
test(function() {
svgElement.setAttribute("width", "10vw");
assert_approx_equals(svgElement.width.baseVal.value, 10 * viewportWidthPercent(), EPSILON);
assert_equals(svgElement.width.baseVal.valueInSpecifiedUnits, 10);
assert_throws(null, function() {svgElement.width.baseVal.valueAsString = '2vw'});
svgElement.width.baseVal.valueInSpecifiedUnits = 2;
assert_approx_equals(svgElement.width.baseVal.value, 2 * viewportWidthPercent(), EPSILON);
assert_equals(svgElement.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
}, "Tests vw unit");
test(function() {
svgElement.setAttribute("width", "10vh");
assert_approx_equals(svgElement.width.baseVal.value, 10 * viewportHeightPercent(), EPSILON);
assert_equals(svgElement.width.baseVal.valueInSpecifiedUnits, 10);
assert_throws(null, function() {svgElement.width.baseVal.valueAsString = '2vh'});
svgElement.width.baseVal.valueInSpecifiedUnits = 2;
assert_approx_equals(svgElement.width.baseVal.value, 2 * viewportHeightPercent(), EPSILON);
assert_equals(svgElement.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
}, "Tests vh unit");
test(function() {
svgElement.setAttribute("width", "10vmin");
assert_approx_equals(svgElement.width.baseVal.value, 10 * viewportMinPercent(), EPSILON);
assert_equals(svgElement.width.baseVal.valueInSpecifiedUnits, 10);
assert_throws(null, function() {svgElement.width.baseVal.valueAsString = '2vmin'});
svgElement.width.baseVal.valueInSpecifiedUnits = 2;
assert_approx_equals(svgElement.width.baseVal.value, 2 * viewportMinPercent(), EPSILON);
assert_equals(svgElement.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
}, "Tests vmin unit");
test(function() {
svgElement.setAttribute("width", "10vmax");
assert_approx_equals(svgElement.width.baseVal.value, 10 * viewportMaxPercent(), EPSILON);
assert_equals(svgElement.width.baseVal.valueInSpecifiedUnits, 10);
assert_throws(null, function() {svgElement.width.baseVal.valueAsString = '2vmax'});
svgElement.width.baseVal.valueInSpecifiedUnits = 2;
assert_approx_equals(svgElement.width.baseVal.value, 2 * viewportMaxPercent(), EPSILON);
assert_equals(svgElement.width.baseVal.unitType, SVGLength.SVG_LENGTHTYPE_UNKNOWN);
}, "Tests vmax unit");
</script>