<!DOCTYPE html>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#calc {
    background-position: calc(10px + 20%) calc(30px + 40%);
    vertical-align: calc(50px + 60%);
    flex-basis: calc(70px + 80%);
}
</style>
<div id="calc"></div>
<script>
test(function() {
    assert_equals(getComputedStyle(calc).backgroundPositionX, "calc(20% + 10px)", "background-position-x");
    assert_equals(getComputedStyle(calc).backgroundPositionY, "calc(40% + 30px)", "background-position-y");
    assert_equals(getComputedStyle(calc).verticalAlign, "calc(60% + 50px)", "vertical-align");
    assert_equals(getComputedStyle(calc).flexBasis, "calc(80% + 70px)", "flex-basis");
}, "Tests getComputedStyle works with calc for various properties");
</script>