third_party/WebKit/LayoutTests/web-animations-api/player-clip.html

   1 <!DOCTYPE html>
   2 <script src="../resources/testharness.js"></script>
   3 <script src="../resources/testharnessreport.js"></script>
   4
   5 <div id="element" style="width: 50px;"></div>
   6
   7 <script>
   8 var element = document.getElementById("element");
   9
  10 function runTests(paused, reversed)
  11 {
  12     function applyTestParameters(animation)
  13     {
  14         if (paused)
  15             animation.pause();
  16         if (reversed)
  17             animation.playbackRate = -1;
  18     }
  19
  20     function appendParametersToDescription(string)
  21     {
  22         if (paused)
  23             string += "; running with paused";
  24         if (reversed)
  25             string += "; running with reverse";
  26         return string;
  27     }
  28
  29     test(function() {
  30         var animation = element.animate([{ width: '100px' }, { width: '200px' }], 1000);
  31         applyTestParameters(animation);
  32         animation.startClip = 300;
  33         animation.currentTime = 100;
  34         assert_equals(getComputedStyle(element).width, '50px');
  35         animation.currentTime = 500;
  36         assert_equals(getComputedStyle(element).width, '150px');
  37         animation.cancel();
  38     }, appendParametersToDescription('startClip after start time'));
  39
  40     test(function() {
  41         var animation = element.animate([{ width: '100px' }, { width: '200px' }], 1000);
  42         applyTestParameters(animation);
  43         animation.endClip = -400;
  44         animation.currentTime = 500;
  45         assert_equals(getComputedStyle(element).width, '150px');
  46         animation.currentTime = 700;
  47         assert_equals(getComputedStyle(element).width, '50px');
  48         animation.cancel();
  49     }, appendParametersToDescription('endClip before end time'));
  50
  51     test(function() {
  52         var animation = element.animate([{ width: '100px' }, { width: '200px' }], { duration: 1000, fill: 'backwards' });
  53         applyTestParameters(animation);
  54         animation.startClip = -500;
  55         animation.currentTime = 500;
  56         assert_equals(getComputedStyle(element).width, '150px');
  57         animation.currentTime = -200;
  58         assert_equals(getComputedStyle(element).width, '100px');
  59         animation.currentTime = -500;
  60         assert_equals(getComputedStyle(element).width, '50px');
  61         animation.currentTime = -1000;
  62         assert_equals(getComputedStyle(element).width, '50px');
  63         animation.cancel();
  64     }, appendParametersToDescription('startClip, backwards fill'));
  65
  66     test(function() {
  67         var animation = element.animate([{ width: '100px' }, { width: '200px' }], { duration: 1000, fill: 'forwards' });
  68         applyTestParameters(animation);
  69         animation.startClip = 1500;
  70         animation.currentTime = 500;
  71         assert_equals(getComputedStyle(element).width, '50px');
  72         animation.currentTime = 1500;
  73         assert_equals(getComputedStyle(element).width, '50px');
  74         animation.currentTime = 2000;
  75         assert_equals(getComputedStyle(element).width, '200px');
  76         animation.cancel();
  77     }, appendParametersToDescription('startClip, forwards fill'));
  78
  79     test(function() {
  80         var animation = element.animate([{ width: '100px' }, { width: '200px' }], { duration: 1000, fill: 'forwards' });
  81         applyTestParameters(animation);
  82         animation.endClip = 500;
  83         animation.currentTime = 500;
  84         assert_equals(getComputedStyle(element).width, '150px');
  85         animation.currentTime = 1000;
  86         assert_equals(getComputedStyle(element).width, '200px');
  87         animation.currentTime = 1200;
  88         assert_equals(getComputedStyle(element).width, '200px');
  89         animation.currentTime = 1500;
  90         assert_equals(getComputedStyle(element).width, '200px');
  91         animation.currentTime = 2000;
  92         assert_equals(getComputedStyle(element).width, '50px');
  93         animation.cancel();
  94     }, appendParametersToDescription('endClip, forwards fill'));
  95
  96     test(function() {
  97         var animation = element.animate([{ width: '100px' }, { width: '200px' }], { duration: 1000, fill: 'backwards' });
  98         applyTestParameters(animation);
  99         animation.endClip = -1500;
 100         animation.currentTime = 500;
 101         assert_equals(getComputedStyle(element).width, '50px');
 102         animation.currentTime = -500;
 103         assert_equals(getComputedStyle(element).width, '100px');
 104         animation.currentTime = -1000;
 105         assert_equals(getComputedStyle(element).width, '100px');
 106         animation.cancel();
 107     }, appendParametersToDescription('endClip, backwards fill'));
 108 }
 109
 110 runTests(false, false);
 111 runTests(false, true);
 112 runTests(true, false);
 113 runTests(true, true);
 114
 115 </script>