| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| |
| <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 animated on the element */ |
| function assertAnimationComposited(compositableProperty, cancelProperty, isStillComposited) { |
| var element = document.createElement('div'); |
| // The element must have some painted content in order to be |
| // composited when animated in SPv2. |
| element.innerText = 'x'; |
| 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"); |
| }); |
| |
| var keyframe2 = {}; |
| keyframe2[cancelProperty] = keyframeValueMap[cancelProperty]; |
| animation = element.animate([keyframe2, keyframe2], { |
| duration: 4000, |
| iterations: Infinity |
| }); |
| |
| requestAnimationFrame(function() { |
| requestAnimationFrame(function() { |
| |
| asyncHandle.step(function() { |
| assert_equals(internals.isCompositedAnimation(animation), isStillComposited, description) |
| }); |
| |
| animation.cancel(); |
| asyncHandle.done(); |
| }); |
| }); |
| }); |
| }); |
| } |
| |
| assertAnimationComposited('transform', 'transform', false); |
| |
| 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('translate', 'translate', false); |
| |
| assertAnimationComposited('rotate', 'transform', false); |
| assertAnimationComposited('rotate', 'rotate', false); |
| assertAnimationComposited('rotate', 'scale', false); |
| assertAnimationComposited('rotate', 'translate', false); |
| |
| assertAnimationComposited('scale', 'transform', false); |
| assertAnimationComposited('scale', 'rotate', false); |
| assertAnimationComposited('scale', 'scale', false); |
| assertAnimationComposited('scale', 'translate', false); |
| |
| assertAnimationComposited('opacity', 'transform', true); |
| assertAnimationComposited('opacity', 'translate', true); |
| assertAnimationComposited('opacity', 'rotate', true); |
| assertAnimationComposited('opacity', 'scale', true); |
| </script> |
