blob: 756a06dc5fb4c49071a22d902ed99b98e3b2cb9b [file] [log] [blame]
<!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>