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| Index: LayoutTests/animations/api/element-animate-list-of-keyframes.html |
| diff --git a/LayoutTests/animations/api/element-animate-list-of-keyframes.html b/LayoutTests/animations/api/element-animate-list-of-keyframes.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..0e246e6a94f3c57fc86a417ea681cb9c941c0be7 |
| --- /dev/null |
| +++ b/LayoutTests/animations/api/element-animate-list-of-keyframes.html |
| @@ -0,0 +1,94 @@ |
| +<!DOCTYPE html> |
| +<script src="../../resources/testharness.js"></script> |
| +<script src="../../resources/testharnessreport.js"></script> |
| + |
| +<style> |
| +.anim { |
| + position: absolute; |
| + left: 10px; |
| + height: 90px; |
| + width: 100px; |
| + background-color: black; |
| +} |
| +</style> |
| + |
| +<div id='e1' class='anim'></div> |
|
Steve Block
2013/12/09 23:48:04
You should write a valid html page, with html and
rjwright
2013/12/10 03:05:40
Done.
|
| +<div id='e2' class='anim'></div> |
| +<div id='e3' class='anim'></div> |
| +<div id='e4' class='anim'></div> |
| +<div id='e5' class='anim'></div> |
| + |
| +<script> |
| +var e1 = document.getElementById('e1'); |
| +var e2 = document.getElementById('e2'); |
| +var e3 = document.getElementById('e3'); |
| +var e4 = document.getElementById('e4'); |
| +var e5 = document.getElementById('e5'); |
| + |
| +var e1Style = window.getComputedStyle(e1); |
|
Steve Block
2013/12/09 23:48:04
No need to explicitly use 'window'.
rjwright
2013/12/10 03:05:40
Done.
|
| +var e2Style = window.getComputedStyle(e2); |
| +var e3Style = window.getComputedStyle(e3); |
| +var e4Style = window.getComputedStyle(e4); |
| +var e5Style = window.getComputedStyle(e5); |
| + |
| + |
| +test(function() { |
| + e1.animate([ |
| + {left: '10px', opacity: '1', offset: 0}, |
| + {left: '100px', opacity: '0', offset: 1} |
| + ]); |
| + window.setTimeout( function () { |
| + assert_equals(e1Style.left, '100px'); |
| + assert_equals(e1Style.opacity, '0'); |
| + }, 1010); |
|
Steve Block
2013/12/09 23:48:04
Using setTimeout() like this will be flaky. You sh
rjwright
2013/12/10 03:05:40
Done.
|
| +}, 'Calling animate() should start an animation.'); |
| + |
| +test(function() { |
| + e2.animate([ |
| + {backgroundColor: 'green', offset: 0}, |
| + {backgroundColor: 'purple', offset: 1} |
| + ]); |
| + window.setTimeout( function () { |
| + assert_equals(e2Style.backgroundColor, 'purple'); |
| + }, 1010); |
| +}, 'Calling animate() should start an animation. CamelCase property names should be parsed.'); |
| + |
| +test(function() { |
| + e3.animate([ |
| + {'background-color': 'green', offset: 0}, |
| + {'background-color': 'purple', offset: 1} |
| + ]); |
| + window.setTimeout( function () { |
| + assert_equals(e3Style.backgroundColor, 'purple'); |
| + }, 1010); |
| +}, 'Calling animate() should start an animation. Dashed property names should be parsed.'); |
| + |
| + |
| +var keyframes = [ |
| + {width: '0px', offset: 0.2}, |
| + {width: '100px', offset: 0.8}, |
| + {width: '1000px', offset: 1} |
| + ]; |
| + |
| +test(function() { |
| + e4.animate(keyframes); |
| + window.setTimeout( function () { |
| + assert_equals(e4Style.width, '1000px'); |
| + }, 1010); |
| +}, 'Calling animate() with a pre-constructed keyframes list should start an animation.'); |
|
Steve Block
2013/12/09 23:48:04
I don't think this test adds anything. You're effe
rjwright
2013/12/10 03:05:40
Done. Yeah, I mostly added it for my own curiosity
|
| + |
| + |
| +var keyframesWithInvalid = [ |
| + {offset: 0.1}, |
| + {width: '0px', backgroundColor: 'octarine', offset: 0.2}, |
| + {width: '1000px', foo: 'bar', offset: 1} |
| + ]; |
| + |
| +test(function() { |
| + e5.animate(keyframesWithInvalid); |
| + window.setTimeout( function () { |
| + assert_equals(e5Style.width, '1000px'); |
| + assert_equals(e5Style.backgroundColor, 'black'); |
|
Steve Block
2013/12/09 23:48:04
You should also check that e5style.foo is undefine
rjwright
2013/12/10 03:05:40
Done.
|
| + }, 1010); |
| +}, 'Calling animate() with a pre-constructed keyframes list should start an animation. Invalid style declarations should be ignored.'); |
| +</script> |
