<!DOCTYPE html>
<style>
    body {
        width: 100vw;
        height: 100vh;
    }
    #target {
        width: calc(100vw - 50vw);
        height: calc(25vh + 50vh);
        margin-top: calc(25vh + 10px);
        margin-bottom: calc(25vw - 10px);
        margin-left: calc(25vw + 25%);
        margin-right: calc(50vw - 25%);
    }
</style>
<html>
    <div id="target"></div>
</html>
<script src="../../resources/js-test-pre.js"></script>
<script>
function vw(x) {
    return x * window.innerWidth / 100;
}

function vh(x) {
    return x * window.innerHeight / 100;
}

function px(n) {
    return "'" + n + "px'";
}

if (window.testRunner)
    testRunner.dumpAsText();

description("Test for calc support with viewport units.");

target = document.getElementById("target");
style = window.getComputedStyle(target,null);
shouldBe('style.getPropertyValue("width")', px(vw(100) - vw(50)));
shouldBe('style.getPropertyValue("height")', px(vh(25) + vh(50)));
shouldBe('style.getPropertyValue("margin-top")', px(vh(25) + 10));
shouldBe('style.getPropertyValue("margin-bottom")', px(vw(25) - 10));
shouldBe('style.getPropertyValue("margin-left")', px(vw(25) + vw(25)));
shouldBe('style.getPropertyValue("margin-right")', px(vw(50) - vw(25)));
</script>
<script src="../../resources/js-test-post.js"></script>