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