OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <style> | |
3 .box { | |
4 position: absolute; | |
5 height: 100px; | |
6 width: 100px; | |
7 background-color: blue; | |
8 animation-duration: 1s; | |
9 } | |
10 #multipleUsesFirst { | |
11 animation-name: multipleUsesFirst; | |
12 } | |
13 #inheritUsesParent { | |
14 animation-name: inheritUsesParent; | |
15 animation-timing-function: linear; | |
16 top: 110px; | |
17 } | |
18 #parent { | |
19 animation-timing-function: step-end; | |
20 } | |
21 @keyframes multipleUsesFirst { | |
22 0% { | |
23 left: 0px; | |
24 animation-timing-function: step-end, ease; | |
25 } | |
26 100% { left: 400px; } | |
27 } | |
28 @keyframes inheritUsesParent { | |
29 0% { | |
30 left: 0px; | |
31 animation-timing-function: inherit; | |
32 } | |
33 100% { left: 400px; } | |
34 } | |
35 </style> | |
36 <script src="resources/animation-test-helpers.js"></script> | |
37 <script> | |
38 const expectedValues = [ | |
39 // [time, element-id, property, expected-value, tolerance] | |
40 [0.2, "multipleUsesFirst", "left", 0, 0], | |
41 [0.2, "inheritUsesParent", "left", 0, 0], | |
42 ]; | |
43 runAnimationTest(expectedValues); | |
44 </script> | |
45 Tests whether timing functions inside keyframes are respected. | |
46 <div class="box" id="multipleUsesFirst"></div> | |
47 <div id="parent"> | |
48 <div class="box" id="inheritUsesParent"></div> | |
49 </div> | |
50 <div id="result"></div> | |
OLD | NEW |