SVGLength-viewport-units.html | Explore in Territory

<!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);
    svgElement.width.baseVal.valueAsString = '2vw';
    assert_equals(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);
    svgElement.width.baseVal.valueAsString = '2vh';
    assert_equals(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);
    svgElement.width.baseVal.valueAsString = '2vmin';
    assert_equals(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);
    svgElement.width.baseVal.valueAsString = '2vmax';
    assert_equals(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>
chromium/third_party/blink/web_tests/svg/dom/SVGLength-viewport-units.html
