Chromium Code Reviews Chromium Code Reviews
Issue 96283002:
Web Animations API: Start implementation of Element.animate(). (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| 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 <html> | |
|
dstockwell
2013/12/11 00:04:28
This seems like an odd place for the <html> elemen
rjwright
2013/12/11 02:16:38
Yeah I have no idea how to structure a web code TB
| |
| 16 <body> | |
| 17 <div id='e1' class='anim'></div> | |
| 18 <div id='e2' class='anim'></div> | |
| 19 <div id='e3' class='anim'></div> | |
| 20 </body> | |
| 21 </html> | |
| 22 | |
| 23 <script> | |
| 24 var e1 = document.getElementById('e1'); | |
| 25 var e2 = document.getElementById('e2'); | |
| 26 var e3 = document.getElementById('e3'); | |
| 27 | |
| 28 var e1Style = getComputedStyle(e1); | |
| 29 var e2Style = getComputedStyle(e2); | |
| 30 var e3Style = getComputedStyle(e3); | |
| 31 | |
| 32 var duration = 1; | |
| 33 | |
| 34 test(function() { | |
| 35 e1.animate([ | |
| 36 {left: '10px', opacity: '1', offset: 0}, | |
| 37 {left: '100px', opacity: '0', offset: 1} | |
| 38 ]); | |
| 39 internals.pauseAnimations(duration / 2); | |
| 40 assert_equals(e1Style.left, '55px'); | |
| 41 assert_equals(e1Style.opacity, '0.5'); | |
| 42 }, 'Calling animate() should start an animation.'); | |
| 43 | |
| 44 test(function() { | |
| 45 e2.animate([ | |
| 46 {backgroundColor: 'green', offset: 0}, | |
| 47 {backgroundColor: 'purple', offset: 1} | |
| 48 ]); | |
| 49 internals.pauseAnimations(duration / 2); | |
| 50 assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)'); | |
| 51 }, 'Calling animate() should start an animation. CamelCase property names should be parsed.'); | |
| 52 | |
| 53 var keyframesWithInvalid = [ | |
| 54 {offset: 0.1}, | |
| 55 {width: '0px', backgroundColor: 'octarine', offset: 0.2}, | |
| 56 {width: '1000px', foo: 'bar', offset: 1} | |
| 57 ]; | |
| 58 | |
| 59 test(function() { | |
| 60 e3.animate(keyframesWithInvalid); | |
| 61 internals.pauseAnimations(duration); | |
| 62 assert_equals(e3Style.width, '1000px'); | |
| 63 assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); | |
| 64 assert_equals(e3Style.foo, undefined); | |
| 65 }, 'Calling animate() with a pre-constructed keyframes list should start an anim ation. Invalid style declarations should be ignored.'); | |
| 66 </script> | |
| OLD | NEW |
