third_party/WebKit/LayoutTests/web-animations-api/animations-responsive-motionOffset.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         {motionOffset: '4%'},
  12         {motionOffset: '12%'}
  13     ];
  14
  15     element.style.width = '100';
  16     element.style.height = '200';
  17     var player = element.animate(keyframes, 20);
  18     player.pause();
  19     player.currentTime = 15;
  20     element.style.width = '300';
  21     element.style.height = '600';
  22     assert_equals(getComputedStyle(element).motionOffset, '10%');
  23 }, 'Motion position percentages are supported');
  24
  25 test(function() {
  26     var keyframes = [
  27         {motionOffset: '8em'},
  28         {motionOffset: '16em'}
  29     ];
  30
  31     element.style.fontSize = '10px';
  32     var player = element.animate(keyframes, 20);
  33     player.pause();
  34     player.currentTime = 5;
  35     element.style.fontSize = '20px';
  36     assert_equals(getComputedStyle(element).motionOffset, '200px');
  37 }, 'Motion position lengths respond to style changes');
  38
  39 </script>