<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
#calc {
    border: 2px solid;
    width: 100px;
    height: 100px;
    font-size: 10px;
    border-top-left-radius: calc(10px + 25%) calc(20px + 25%);
    border-top-right-radius: calc(1em + 25%);
    border-bottom-right-radius: calc(25%);
    border-bottom-left-radius: calc(25px);
}
</style>
<div id="calc"></div>
<script>
function test(prop, expected) {
    shouldBeEqualToString("getComputedStyle(document.getElementById('calc'), null).getPropertyValue('" + prop + "')", expected);
}

description("Tests calling getPropertyValue on computed border radii involving CSS calc");

test('border-top-left-radius', 'calc(10px + 25%) calc(20px + 25%)');
test('border-top-right-radius', 'calc(10px + 25%)');
test('border-bottom-right-radius', '25%');
test('border-bottom-left-radius', '25px');
test('border-radius', 'calc(10px + 25%) calc(10px + 25%) 25% 25px / calc(20px + 25%) calc(10px + 25%) 25% 25px');
</script>