| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../resources/testharness.js"></script> |
| 3 <script src="../resources/testharnessreport.js"></script> |
| 4 |
| 5 <style> |
| 6 .anim { |
| 7 position: absolute; |
| 8 left: 10px; |
| 9 height: 90px; |
| 10 width: 100px; |
| 11 background-color: black; |
| 12 } |
| 13 </style> |
| 14 |
| 15 <body> |
| 16 <div id='e1' class='anim'></div> |
| 17 <div id='e2' class='anim'></div> |
| 18 <div id='e3' class='anim'></div> |
| 19 </body> |
| 20 |
| 21 <script> |
| 22 var e1 = document.getElementById('e1'); |
| 23 var e2 = document.getElementById('e2'); |
| 24 var e3 = document.getElementById('e3'); |
| 25 |
| 26 var e1Style = getComputedStyle(e1); |
| 27 var e2Style = getComputedStyle(e2); |
| 28 var e3Style = getComputedStyle(e3); |
| 29 |
| 30 var duration = 1; |
| 31 |
| 32 test(function() { |
| 33 e1.animate([ |
| 34 {left: '10px', opacity: '1', offset: 0}, |
| 35 {left: '100px', opacity: '0', offset: 1} |
| 36 ]); |
| 37 internals.pauseAnimations(duration / 2); |
| 38 assert_equals(e1Style.left, '55px'); |
| 39 assert_equals(e1Style.opacity, '0.5'); |
| 40 }, 'Calling animate() should start an animation.'); |
| 41 |
| 42 test(function() { |
| 43 e2.animate([ |
| 44 {backgroundColor: 'green', offset: 0}, |
| 45 {backgroundColor: 'purple', offset: 1} |
| 46 ]); |
| 47 internals.pauseAnimations(duration / 2); |
| 48 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)'); |
| 49 }, 'Calling animate() should start an animation. CamelCase property names should
be parsed.'); |
| 50 |
| 51 var keyframesWithInvalid = [ |
| 52 {offset: 0.1}, |
| 53 {width: '0px', backgroundColor: 'octarine', offset: 0.2}, |
| 54 {width: '1000px', foo: 'bar', offset: 1} |
| 55 ]; |
| 56 |
| 57 test(function() { |
| 58 e3.animate(keyframesWithInvalid); |
| 59 internals.pauseAnimations(duration); |
| 60 assert_equals(e3Style.width, '1000px'); |
| 61 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); |
| 62 assert_equals(e3Style.foo, undefined); |
| 63 }, 'Calling animate() with a pre-constructed keyframes list should start an anim
ation. Invalid style declarations should be ignored.'); |
| 64 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 96283002:
Web Animations API: Start implementation of Element.animate(). (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master