[Web Animations] Turn Web Animations with CSS integration on for test runners
[WebKit-https.git] / LayoutTests / imported / w3c / web-platform-tests / css-timing-1 / frames-timing-functions-output.html
1 <!DOCTYPE html><!-- webkit-test-runner [ enableWebAnimationsCSSIntegration=true ] -->
2 <meta charset=utf-8>
3 <meta name="assert"
4 content="This test checks the output of frame timing functions with different frame numbers" />
5 <title>Frames timing function output tests</title>
6 <link rel="help"
7 href="https://drafts.csswg.org/css-timing/#frames-timing-functions">
8 <script src="/resources/testharness.js"></script>
9 <script src="/resources/testharnessreport.js"></script>
10 <script src="testcommon.js"></script>
11 <style>
12 @keyframes anim {
13   from { left: 0px; }
14   to   { left: 100px; }
15 }
16 </style>
17 <body>
18 <div id="log"></div>
19 <script>
20 "use strict";
21
22 test(function(t) {
23   const div = createDiv(t);
24   div.style.animation = 'anim 10s frames(2) forwards';
25   assert_equals(getComputedStyle(div).left, '0px');
26 }, 'For an input progress of 0.0, the output of a frames timing function is ' +
27    'the first frame');
28
29 test(function(t) {
30   const div = createDiv(t);
31   div.style.animation = 'anim 10s frames(2) forwards';
32
33   div.style.animationDelay = '-4999ms';
34   assert_equals(getComputedStyle(div).left, '0px');
35   div.style.animationDelay = '-5000ms';
36   assert_equals(getComputedStyle(div).left, '100px');
37 }, 'At a frame boundary, the output of a frames timing function is the next ' +
38    'frame');
39
40 test(function(t) {
41   const div = createDiv(t);
42   div.style.animation = 'anim 10s frames(2) forwards';
43
44   div.style.animationDelay = '-10s';
45   assert_equals(getComputedStyle(div).left, '100px');
46 }, 'For an input progress of 1.0, the output of a frames timing function is ' +
47    'the final frame');
48
49 test(function(t) {
50   const div = createDiv(t);
51   div.style.animation = 'anim 11s frames(11) forwards';
52
53   // We have 11 frames in 11s, so the first step happens at 1.0.
54   div.style.animationDelay = '-999ms';
55   assert_equals(getComputedStyle(div).left, '0px');
56   div.style.animationDelay = '-1000ms';
57   assert_equals(getComputedStyle(div).left, '10px');
58 }, 'The number of frames is correctly reflected in the frames timing ' +
59    'function output');
60
61 test(function(t) {
62   const div = createDiv(t);
63   div.style.transition = 'left 11s frames(11)';
64
65   // We have 11 frames in 11s, so the first step happens at 1.0.
66   div.style.left = '0px';
67   div.style.transitionDelay = '-999ms';
68   getComputedStyle(div).left;
69   div.style.left = '100px';
70   assert_equals(getComputedStyle(div).left, '0px');
71
72   div.style.left = '0px';
73   div.style.transitionDelay = '-1000ms';
74   getComputedStyle(div).left;
75   div.style.left = '100px';
76   assert_equals(getComputedStyle(div).left, '10px');
77 }, 'The number of frames is correctly reflected in the frames timing ' +
78    'function output on CSS Transitions');
79
80 test(function(t) {
81   var target = createDiv(t);
82   target.style.position = 'absolute';
83   var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
84                               { left: '100px' } ],
85                             { duration: 1000,
86                               fill: 'forwards',
87                               easing: 'cubic-bezier(0, 1.5, 1, 1.5)' });
88
89   // The bezier function produces values between 0.5 and 1 in
90   // (~0.0442, 0.23368), and values between 1 and 2 in (0.23368794, 1).
91   anim.currentTime = 0;
92   assert_equals(getComputedStyle(target).left, '0px');
93   anim.currentTime = 45;
94   assert_equals(getComputedStyle(target).left, '100px');
95   anim.currentTime = 230;
96   assert_equals(getComputedStyle(target).left, '100px');
97   anim.currentTime = 250;
98   assert_equals(getComputedStyle(target).left, '200px');
99   anim.currentTime = 1000;
100   assert_equals(getComputedStyle(target).left, '100px');
101 }, 'frames easing with input progress greater than 1');
102
103 test(function(t) {
104   var target = createDiv(t);
105   target.style.position = 'absolute';
106   var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
107                               { left: '100px' } ],
108                             { duration: 1000,
109                               fill: 'forwards',
110                               easing: 'cubic-bezier(0, 3, 1, 3)' });
111
112   // The bezier funciton produces values:
113   // Input           ->  Output
114   // 0.0                 0.0
115   // 0.114 ~ 0.245       1.5~2.0, so frames(2) is 3.0
116   // 0.245 ~ 0.6         2.0~2.4, so frames(2) is 4.0
117   // 0.6   ~ 0.882       2.4~2.0, so frames(2) is 4.0
118   // 0.882 ~ 0.976       2.0~1.5, so frames(2) is 3.0
119   // 1.0                 1.0
120   anim.currentTime = 0;
121   assert_equals(getComputedStyle(target).left, '0px');
122   anim.currentTime = 114;
123   assert_equals(getComputedStyle(target).left, '300px');
124   anim.currentTime = 500;
125   assert_equals(getComputedStyle(target).left, '400px');
126   anim.currentTime = 900;
127   assert_equals(getComputedStyle(target).left, '300px');
128 }, 'frames easing with input progress greater than 1.5');
129
130 test(function(t) {
131   var target = createDiv(t);
132   target.style.position = 'absolute';
133   var anim = target.animate([ { left: '0px', easing: 'frames(2)' },
134                               { left: '100px' } ],
135                             { duration: 1000,
136                               fill: 'forwards',
137                               easing: 'cubic-bezier(0, -0.5, 1, -0.5)' });
138
139   // The bezier function produces negative values (but always greater than -0.5)
140   // in (0, 0.766312060).
141   anim.currentTime = 0;
142   assert_equals(getComputedStyle(target).left, '0px');
143   anim.currentTime = 750;
144   assert_equals(getComputedStyle(target).left, '-100px');
145   anim.currentTime = 800;
146   assert_equals(getComputedStyle(target).left, '0px');
147   anim.currentTime = 1000;
148   assert_equals(getComputedStyle(target).left, '100px');
149 }, 'frames easing with input progress less than 0');
150
151 </script>
152 </body>