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| 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 /* Test that animation on compositableProperty on compositor is cancelled when | |
| 9 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
| |
| 10 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
| |
| 11 translate: '10px 10px 10px', | |
| 12 scale: '1 2 3', | |
| 13 rotate: '45deg', | |
| 14 transform: 'translate(10px, 20px)'}; | |
| 15 | |
| 16 function assertAnimationComposited(compositableProperty, cancelProperty, isStill Composited) { | |
| 17 var element = document.createElement('div'); | |
| 18 document.getElementById('parent').appendChild(element); | |
| 19 | |
| 20 var keyframe = {}; | |
| 21 keyframe[compositableProperty] = 'initial'; | |
| 22 | |
| 23 var animation = element.animate([keyframe, keyframe], { | |
| 24 duration: 4000, | |
| 25 iterations: Infinity | |
| 26 }); | |
| 27 | |
| 28 var description = "Compositor Animation on " + compositableProperty + (isStill Composited ? " is not " : " is ") + "cancelled by " + cancelProperty; | |
| 29 var asyncHandle = async_test(description); | |
| 30 requestAnimationFrame(function() { | |
| 31 requestAnimationFrame(function() { | |
| 32 | |
| 33 asyncHandle.step(function() { | |
| 34 assert_true(internals.isCompositedAnimation(animation), compositableProp erty + " animation should be composited"); | |
| 35 }); | |
| 36 | |
| 37 var keyframe2 = {}; | |
| 38 keyframe2[cancelProperty] = 'initial'; | |
| 39 animation = element.animate([keyframe2, keyframe2], { | |
| 40 duration: 4000, | |
| 41 iterations: Infinity | |
| 42 }); | |
| 43 | |
| 44 requestAnimationFrame(function() { | |
| 45 requestAnimationFrame(function() { | |
| 46 | |
| 47 asyncHandle.step(function() { | |
| 48 assert_equals(internals.isCompositedAnimation(animation), isStillCom posited, description) | |
| 49 }); | |
| 50 | |
| 51 animation.cancel(); | |
| 52 asyncHandle.done(); | |
| 53 }); | |
| 54 }); | |
| 55 }); | |
| 56 }); | |
| 57 } | |
| 58 | |
| 59 assertAnimationComposited('transform', 'transform', true); | |
| 60 | |
| 61 assertAnimationComposited('transform', 'translate', false); | |
| 62 assertAnimationComposited('transform', 'rotate', false); | |
| 63 assertAnimationComposited('transform', 'scale', false); | |
| 64 | |
| 65 assertAnimationComposited('translate', 'transform', false); | |
| 66 assertAnimationComposited('translate', 'rotate', false); | |
| 67 assertAnimationComposited('translate', 'scale', false); | |
| 68 assertAnimationComposited('translate', 'translate', false); | |
| 69 | |
| 70 assertAnimationComposited('rotate', 'transform', false); | |
| 71 assertAnimationComposited('rotate', 'rotate', false); | |
| 72 assertAnimationComposited('rotate', 'scale', false); | |
| 73 assertAnimationComposited('rotate', 'translate', false); | |
| 74 | |
| 75 assertAnimationComposited('scale', 'transform', false); | |
| 76 assertAnimationComposited('scale', 'rotate', false); | |
| 77 assertAnimationComposited('scale', 'scale', false); | |
| 78 assertAnimationComposited('scale', 'translate', false); | |
| 79 | |
| 80 assertAnimationComposited('opacity', 'transform', true); | |
| 81 assertAnimationComposited('opacity', 'translate', true); | |
| 82 assertAnimationComposited('opacity', 'rotate', true); | |
| 83 assertAnimationComposited('opacity', 'scale', true); | |
| 84 </script> | |
| OLD | NEW |
