borderRadius.html (1145B)
1 <!DOCTYPE html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <div id='element'></div> 5 <script> 6 7 var element = document.getElementById('element'); 8 9 test(function() { 10 var keyframes = [ 11 {borderTopLeftRadius: '8% 16%'}, 12 {borderTopLeftRadius: '12% 24%'} 13 ]; 14 15 element.style.width = '100'; 16 element.style.height = '200'; 17 var player = element.animate(keyframes, 10); 18 player.pause(); 19 player.currentTime = 5; 20 element.style.width = '300'; 21 element.style.height = '600'; 22 assert_equals(getComputedStyle(element).borderTopLeftRadius, '10% 20%'); 23 }, 'Border radius percentages are supported'); 24 25 test(function() { 26 var keyframes = [ 27 {borderTopLeftRadius: '8em 16em'}, 28 {borderTopLeftRadius: '12em 24em'} 29 ]; 30 31 element.style.fontSize = '10px'; 32 var player = element.animate(keyframes, 10); 33 player.pause(); 34 player.currentTime = 5; 35 element.style.fontSize = '20px'; 36 assert_equals(getComputedStyle(element).borderTopLeftRadius, '200px 400px'); 37 }, 'Border radius lengths respond to style changes'); 38 39 </script>