OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <style> | 2 <style> |
3 .box { | 3 .box { |
4 position: absolute; | 4 position: absolute; |
5 height: 100px; | 5 height: 100px; |
6 width: 100px; | 6 width: 100px; |
7 background-color: blue; | 7 background-color: blue; |
8 animation-duration: 1s; | 8 animation-duration: 1s; |
9 } | 9 } |
10 #multipleUsesFirst { | 10 #multipleUsesFirst { |
(...skipping 15 matching lines...) Expand all Loading... |
26 100% { left: 400px; } | 26 100% { left: 400px; } |
27 } | 27 } |
28 @keyframes inheritUsesParent { | 28 @keyframes inheritUsesParent { |
29 0% { | 29 0% { |
30 left: 0px; | 30 left: 0px; |
31 animation-timing-function: inherit; | 31 animation-timing-function: inherit; |
32 } | 32 } |
33 100% { left: 400px; } | 33 100% { left: 400px; } |
34 } | 34 } |
35 </style> | 35 </style> |
36 <script src="resources/animation-test-helpers.js"></script> | 36 <script src="../resources/animation-test-helpers.js"></script> |
37 <script> | 37 <script> |
38 const expectedValues = [ | 38 const expectedValues = [ |
39 // [time, element-id, property, expected-value, tolerance] | 39 // [time, element-id, property, expected-value, tolerance] |
40 [0.2, "multipleUsesFirst", "left", 0, 0], | 40 [0.2, "multipleUsesFirst", "left", 0, 0], |
41 [0.2, "inheritUsesParent", "left", 0, 0], | 41 [0.2, "inheritUsesParent", "left", 0, 0], |
42 ]; | 42 ]; |
43 runAnimationTest(expectedValues); | 43 runAnimationTest(expectedValues); |
44 </script> | 44 </script> |
45 Tests whether timing functions inside keyframes are respected. | 45 Tests whether timing functions inside keyframes are respected. |
46 <div class="box" id="multipleUsesFirst"></div> | 46 <div class="box" id="multipleUsesFirst"></div> |
47 <div id="parent"> | 47 <div id="parent"> |
48 <div class="box" id="inheritUsesParent"></div> | 48 <div class="box" id="inheritUsesParent"></div> |
49 </div> | 49 </div> |
50 <div id="result"></div> | 50 <div id="result"></div> |
OLD | NEW |