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/web-animations-api/element-animate-list-of-keyframes.html |
| diff --git a/LayoutTests/animations/web-animations-api/element-animate-list-of-keyframes.html b/LayoutTests/animations/web-animations-api/element-animate-list-of-keyframes.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..79de23b15a621ce4e78b5547dc5053a026b7fab3 |
| --- /dev/null |
| +++ b/LayoutTests/animations/web-animations-api/element-animate-list-of-keyframes.html |
| @@ -0,0 +1,66 @@ |
| +<!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> |
| + |
| +<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
|
| +<body> |
| + <div id='e1' class='anim'></div> |
| + <div id='e2' class='anim'></div> |
| + <div id='e3' class='anim'></div> |
| +</body> |
| +</html> |
| + |
| +<script> |
| +var e1 = document.getElementById('e1'); |
| +var e2 = document.getElementById('e2'); |
| +var e3 = document.getElementById('e3'); |
| + |
| +var e1Style = getComputedStyle(e1); |
| +var e2Style = getComputedStyle(e2); |
| +var e3Style = getComputedStyle(e3); |
| + |
| +var duration = 1; |
| + |
| +test(function() { |
| + e1.animate([ |
| + {left: '10px', opacity: '1', offset: 0}, |
| + {left: '100px', opacity: '0', offset: 1} |
| + ]); |
| + internals.pauseAnimations(duration / 2); |
| + assert_equals(e1Style.left, '55px'); |
| + assert_equals(e1Style.opacity, '0.5'); |
| +}, 'Calling animate() should start an animation.'); |
| + |
| +test(function() { |
| + e2.animate([ |
| + {backgroundColor: 'green', offset: 0}, |
| + {backgroundColor: 'purple', offset: 1} |
| + ]); |
| + internals.pauseAnimations(duration / 2); |
| + assert_equals(e2Style.backgroundColor, 'rgb(64, 64, 64)'); |
| +}, 'Calling animate() should start an animation. CamelCase property names should be parsed.'); |
| + |
| +var keyframesWithInvalid = [ |
| + {offset: 0.1}, |
| + {width: '0px', backgroundColor: 'octarine', offset: 0.2}, |
| + {width: '1000px', foo: 'bar', offset: 1} |
| + ]; |
| + |
| +test(function() { |
| + e3.animate(keyframesWithInvalid); |
| + internals.pauseAnimations(duration); |
| + assert_equals(e3Style.width, '1000px'); |
| + assert_equals(e3Style.backgroundColor, 'rgb(0, 0, 0)'); |
| + assert_equals(e3Style.foo, undefined); |
| +}, 'Calling animate() with a pre-constructed keyframes list should start an animation. Invalid style declarations should be ignored.'); |
| +</script> |
