| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <script src="../../../resources/testharness.js"></script> |
| 3 <script src="../../../resources/testharnessreport.js"></script> |
| 4 |
| 5 <div id="parent"></div> |
| 6 |
| 7 <script> |
| 8 var keyframeValueMap = { |
| 9 translate: '10px 10px 10px', |
| 10 scale: '1 2 3', |
| 11 rotate: '45deg', |
| 12 transform: 'translate(10px, 20px)', |
| 13 opacity: '1' |
| 14 }; |
| 15 |
| 16 /* Test that animation on compositableProperty on compositor is cancelled when |
| 17 cancelProperty is animated on the element */ |
| 18 function assertAnimationComposited(compositableProperty, cancelProperty, isStill
Composited) { |
| 19 var element = document.createElement('div'); |
| 20 document.getElementById('parent').appendChild(element); |
| 21 |
| 22 var keyframe = {}; |
| 23 keyframe[compositableProperty] = keyframeValueMap[compositableProperty]; |
| 24 |
| 25 var animation = element.animate([keyframe, keyframe], { |
| 26 duration: 4000, |
| 27 iterations: Infinity |
| 28 }); |
| 29 |
| 30 var description = "Compositor Animation on " + compositableProperty + (isStill
Composited ? " is not " : " is ") + "cancelled by " + cancelProperty; |
| 31 var asyncHandle = async_test(description); |
| 32 requestAnimationFrame(function() { |
| 33 requestAnimationFrame(function() { |
| 34 |
| 35 asyncHandle.step(function() { |
| 36 assert_true(internals.isCompositedAnimation(animation), compositableProp
erty + " animation should be composited"); |
| 37 }); |
| 38 |
| 39 var keyframe2 = {}; |
| 40 keyframe2[cancelProperty] = keyframeValueMap[cancelProperty]; |
| 41 animation = element.animate([keyframe2, keyframe2], { |
| 42 duration: 4000, |
| 43 iterations: Infinity |
| 44 }); |
| 45 |
| 46 requestAnimationFrame(function() { |
| 47 requestAnimationFrame(function() { |
| 48 |
| 49 asyncHandle.step(function() { |
| 50 assert_equals(internals.isCompositedAnimation(animation), isStillCom
posited, description) |
| 51 }); |
| 52 |
| 53 animation.cancel(); |
| 54 asyncHandle.done(); |
| 55 }); |
| 56 }); |
| 57 }); |
| 58 }); |
| 59 } |
| 60 |
| 61 assertAnimationComposited('transform', 'transform', false); |
| 62 |
| 63 assertAnimationComposited('transform', 'translate', false); |
| 64 assertAnimationComposited('transform', 'rotate', false); |
| 65 assertAnimationComposited('transform', 'scale', false); |
| 66 |
| 67 assertAnimationComposited('translate', 'transform', false); |
| 68 assertAnimationComposited('translate', 'rotate', false); |
| 69 assertAnimationComposited('translate', 'scale', false); |
| 70 assertAnimationComposited('translate', 'translate', false); |
| 71 |
| 72 assertAnimationComposited('rotate', 'transform', false); |
| 73 assertAnimationComposited('rotate', 'rotate', false); |
| 74 assertAnimationComposited('rotate', 'scale', false); |
| 75 assertAnimationComposited('rotate', 'translate', false); |
| 76 |
| 77 assertAnimationComposited('scale', 'transform', false); |
| 78 assertAnimationComposited('scale', 'rotate', false); |
| 79 assertAnimationComposited('scale', 'scale', false); |
| 80 assertAnimationComposited('scale', 'translate', false); |
| 81 |
| 82 assertAnimationComposited('opacity', 'transform', true); |
| 83 assertAnimationComposited('opacity', 'translate', true); |
| 84 assertAnimationComposited('opacity', 'rotate', true); |
| 85 assertAnimationComposited('opacity', 'scale', true); |
| 86 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1218943002:
Compositor animations for Independent CSS Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master