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