| OLD | NEW |
|---|
| 1 <html> | 1 <html> |
| 2 <style> | 2 <style> |
| 3 div { | 3 div { |
| 4 position: relative; | 4 position: relative; |
| 5 height: 100px; | 5 height: 100px; |
| 6 width: 100px; | 6 width: 100px; |
| 7 background: blue; | 7 background: blue; |
| 8 } | 8 } |
| 9 </style> | 9 </style> |
| 10 <body> | 10 <body> |
| 11 <p> | 11 <p> |
| 12 Each section below has two boxes, the top runs on the main thread, the bottom | 12 Each section below has two boxes, the top runs on the main thread, the bottom |
| 13 on the compositor. | 13 on the compositor. |
| 14 </p><p> | 14 </p><p> |
| 15 This test is successful if the boxes are mostly in sync and all finish at the | 15 This test is successful if the boxes are mostly in sync and all finish at the |
| 16 same time. | 16 same time. |
| 17 </p> | 17 </p> |
| 18 <hr> | 18 <hr> |
| 19 | 19 |
| 20 Steps for easing timing function is set to 9 | 20 Steps for easing timing function is set to 9. |
| 21 <br> | 21 <br> |
| 22 <div id="test1a">MT</div> | 22 <div id="test1a">MT</div> |
| 23 <div id="test1b">CT</div> | 23 <div id="test1b">CT</div> |
| 24 <hr> | 24 <hr> |
| 25 | 25 |
| 26 Per-keyframe steps easing function | 26 Per-keyframe steps easing function (18 and 9 steps). |
| 27 <br> | 27 <br> |
| 28 <div id="test2a">MT</div> | 28 <div id="test2a">MT</div> |
| 29 <div id="test2b">CT</div> | 29 <div id="test2b">CT</div> |
| 30 | 30 |
| 31 Cubic-bezier easing function combined with a step keyframe | 31 Cubic-bezier easing function combined with a step keyframe. |
| 32 (FIXME: the combining of timing functions is not fully supported in CT) | |
| 33 <br> | 32 <br> |
| 34 <div id="test3a">MT</div> | 33 <div id="test3a">MT</div> |
| 35 <div id="test3b">CT</div> | 34 <div id="test3b">CT</div> |
| 36 | 35 |
| 37 Steps easing function combined with a cubic-bezier keyframe | 36 Steps easing function combined with a cubic-bezier keyframe. |
| 38 <br> | 37 <br> |
| 39 <div id="test4a">MT</div> | 38 <div id="test4a">MT</div> |
| 40 <div id="test4b">CT</div> | 39 <div id="test4b">CT</div> |
| 41 | 40 |
| 42 <script> | 41 <script> |
| 43 var transformKeyframes = [ | 42 var transformKeyframes = [ |
| 44 {transform: 'translateX(0px)'}, | 43 {transform: 'translateX(0px)'}, |
| 45 {transform: 'translateX(500px)'} | 44 {transform: 'translateX(500px)'} |
| 46 ]; | 45 ]; |
| 47 var leftKeyframes = [ | 46 var leftKeyframes = [ |
| (...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 111 easing: 'steps(9)' | 110 easing: 'steps(9)' |
| 112 }); | 111 }); |
| 113 var player4b = test4b.animate(transformKeyframesWithCubicKeyframe, { | 112 var player4b = test4b.animate(transformKeyframesWithCubicKeyframe, { |
| 114 duration: 6000, | 113 duration: 6000, |
| 115 iterations: Infinity, | 114 iterations: Infinity, |
| 116 easing: 'steps(9)' | 115 easing: 'steps(9)' |
| 117 }); | 116 }); |
| 118 </script> | 117 </script> |
| 119 </body> | 118 </body> |
| 120 </html> | 119 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 787353003:
Animation: Allow cubic-bezier timing inputs outside the range [0, 1] in CC (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@0