| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| #parent>div { |
| width: 100px; |
| height: 100px; |
| background-color: green; |
| } |
| </style> |
| |
| <div id="parent"></div> |
| <script> |
| var keyframeValueMap = { |
| translate: '10px 10px 10px', |
| scale: '1 2 3', |
| rotate: '45deg', |
| transform: 'translate(10px, 20px)', |
| opacity: '1', |
| }; |
| |
| /* Test that animation on compositableProperty on compositor is cancelled when |
| cancelProperty is applied (not animated) to the element */ |
| function assertAnimationComposited(compositableProperty, cancelProperty, isStillComposited) { |
| var element = document.createElement('div'); |
| document.getElementById('parent').appendChild(element); |
| |
| var keyframe = {}; |
| keyframe[compositableProperty] = keyframeValueMap[compositableProperty]; |
| |
| var animation = element.animate([keyframe, keyframe], { |
| duration: 4000, |
| iterations: Infinity |
| }); |
| |
| var description = "Compositor Animation on " + compositableProperty + (isStillComposited ? " is not " : " is ") + "cancelled by " + cancelProperty; |
| var asyncHandle = async_test(description); |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| |
| asyncHandle.step(function() { |
| assert_true(internals.isCompositedAnimation(animation), compositableProperty + " animation should be composited"); |
| }); |
| element.style[cancelProperty] = keyframeValueMap[cancelProperty]; |
| |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| |
| asyncHandle.step(function() { |
| assert_equals(internals.isCompositedAnimation(animation), isStillComposited, description) |
| }); |
| |
| animation.cancel(); |
| asyncHandle.done(); |
| }); |
| }); |
| }); |
| }); |
| } |
| |
| assertAnimationComposited('transform', 'transform', true); |
| assertAnimationComposited('translate', 'translate', true); |
| assertAnimationComposited('rotate', 'rotate', true); |
| assertAnimationComposited('scale', 'scale', true); |
| |
| assertAnimationComposited('transform', 'translate', false); |
| assertAnimationComposited('transform', 'rotate', false); |
| assertAnimationComposited('transform', 'scale', false); |
| |
| assertAnimationComposited('translate', 'transform', false); |
| assertAnimationComposited('translate', 'rotate', false); |
| assertAnimationComposited('translate', 'scale', false); |
| |
| assertAnimationComposited('rotate', 'transform', false); |
| assertAnimationComposited('rotate', 'scale', false); |
| assertAnimationComposited('rotate', 'translate', false); |
| |
| assertAnimationComposited('scale', 'transform', false); |
| assertAnimationComposited('scale', 'rotate', false); |
| assertAnimationComposited('scale', 'translate', false); |
| |
| assertAnimationComposited('opacity', 'transform', true); |
| assertAnimationComposited('opacity', 'translate', true); |
| assertAnimationComposited('opacity', 'rotate', true); |
| assertAnimationComposited('opacity', 'scale', true); |
| </script> |
