third_party/WebKit/LayoutTests/web-animations-api/animations-responsive-borderRadius.html

   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>