| 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 |