| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| |
| <body> |
| <div id="e" style="color: red;"></div> |
| </body> |
| |
| <script> |
| var element = document.getElementById('e'); |
| |
| test(function() { |
| const keyframes = [ |
| {color: 'red'}, |
| {color: 'blue'}, |
| ]; |
| var anim; |
| |
| for (const composite of [ 'replace', 'add', 'accumulate' ]) { |
| anim = element.animate(keyframes, {composite, fill: 'forwards'}); |
| assert_equals(getComputedStyle(element).color, 'rgb(0, 0, 255)'); |
| anim.cancel(); |
| } |
| }, 'Calling element.animate() with valid composite values should not throw, but should fallback to replace.'); |
| |
| test(function() { |
| var replaceReplaceKeyframes = [ |
| {color: 'blue', composite: 'replace'}, |
| {color: 'green', composite: 'replace'} |
| ]; |
| |
| assert_not_equals(element.animate(replaceReplaceKeyframes), undefined); |
| }, 'Calling element.animate() with a replace -> replace animation should create an animation.'); |
| |
| test(function() { |
| var addAddKeyframes = [ |
| {color: 'blue', composite: 'add'}, |
| {color: 'green', composite: 'add'} |
| ]; |
| |
| element.animate(addAddKeyframes, {fill: 'forwards'}); |
| assert_equals(getComputedStyle(element).color, 'rgb(0, 128, 0)'); |
| }, 'Calling element.animate() with an add -> add animation should result in a replace -> replace animation.'); |
| |
| test(function() { |
| var replaceAddKeyframes = [ |
| {color: 'blue', composite: 'replace'}, |
| {color: 'green', composite: 'add'} |
| ]; |
| |
| element.animate(replaceAddKeyframes, {fill: 'forwards'}); |
| assert_equals(getComputedStyle(element).color, 'rgb(0, 128, 0)'); |
| }, 'Calling element.animate() with a replace -> add animation should result in a replace -> replace animation.'); |
| |
| test(function() { |
| var addReplaceKeyframes = [ |
| {color: 'blue', composite: 'add'}, |
| {color: 'green', composite: 'replace'} |
| ]; |
| |
| const anim = element.animate(addReplaceKeyframes, {fill: 'backwards'}); |
| anim.reverse(); |
| assert_equals(getComputedStyle(element).color, 'rgb(0, 0, 255)'); |
| }, 'Calling element.animate() with an add -> replace animation should result in a replace -> replace animation.'); |
| </script> |
