Chromium Code Reviews Chromium Code Reviews
Issue 1218943002:
Compositor animations for Independent CSS Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/virtual/threaded/animations/composited-animation-independent-transform-cancel.html |
| diff --git a/LayoutTests/virtual/threaded/animations/composited-animation-independent-transform-cancel.html b/LayoutTests/virtual/threaded/animations/composited-animation-independent-transform-cancel.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..621f81c1518e9d7b4cf20d2bf8bba78acb3afe7d |
| --- /dev/null |
| +++ b/LayoutTests/virtual/threaded/animations/composited-animation-independent-transform-cancel.html |
| @@ -0,0 +1,84 @@ |
| +<!DOCTYPE html> |
| +<script src="../../../resources/testharness.js"></script> |
| +<script src="../../../resources/testharnessreport.js"></script> |
| + |
| +<div id="parent"></div> |
| + |
| +<script> |
| +/* Test that animation on compositableProperty on compositor is cancelled when |
| + cancelProperty is animated on the element */ |
|
alancutter (OOO until 2018)
2015/07/06 04:36:14
This documentation should be next to the function
soonm
2015/07/06 04:49:56
Done - Moved down to assertAnimationComposited
|
| +var varMap = { |
|
alancutter (OOO until 2018)
2015/07/06 04:36:14
keyframeValueMap?
soonm
2015/07/06 04:49:56
Changed - Yep that's a better name
|
| + translate: '10px 10px 10px', |
| + scale: '1 2 3', |
| + rotate: '45deg', |
| + transform: 'translate(10px, 20px)'}; |
| + |
| +function assertAnimationComposited(compositableProperty, cancelProperty, isStillComposited) { |
| + var element = document.createElement('div'); |
| + document.getElementById('parent').appendChild(element); |
| + |
| + var keyframe = {}; |
| + keyframe[compositableProperty] = 'initial'; |
| + |
| + 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] = 'initial'; |
| + 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', 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('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> |
