| Index: LayoutTests/web-animations-api/element-animate-list-of-keyframes.html
|
| diff --git a/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html b/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..41ac397714384017b0a349f4b082a8f264d5dbfb
|
| --- /dev/null
|
| +++ b/LayoutTests/web-animations-api/element-animate-list-of-keyframes.html
|
| @@ -0,0 +1,64 @@
|
| +<!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>
|
| +
|
| +<body>
|
| + <div id='e1' class='anim'></div>
|
| + <div id='e2' class='anim'></div>
|
| + <div id='e3' class='anim'></div>
|
| +</body>
|
| +
|
| +<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>
|
|
|
Chromium Code Reviews
Issue 96283002:
Web Animations API: Start implementation of Element.animate(). (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master