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 <style> | |
| 5 .box { | |
| 6 backface-visibility: visible; | |
| 7 height: 100px; | |
| 8 width: 100px; | |
| 9 } | |
| 10 | |
| 11 #transformOnly { | |
| 12 background-color: blue; | |
| 13 } | |
| 14 | |
| 15 #rotateOnly { | |
| 16 background-color: red; | |
| 17 } | |
| 18 | |
| 19 #mixed { | |
| 20 background-color: purple; | |
| 21 } | |
|
alancutter (OOO until 2018)
2015/07/02 01:34:15
Giving these boxes different colours seems unneces
soonm
2015/07/02 03:28:56
Change to using borders but kept the colors
| |
| 22 </style> | |
| 23 <div id="human"> | |
| 24 <p>Tests that composited animation happens when only transform or only rotate is present.</p> | |
| 25 </div> | |
| 26 <div id="transformOnly" class="box">Transform Only</div> | |
| 27 <div id="rotateOnly" class="box">Rotate Only</div> | |
| 28 <div id="mixed" class="box">Transform + Rotate</div> | |
| 29 <script> | |
| 30 var transformOnlyAnimation = transformOnly.animate([ | |
| 31 {transform: 'rotate3d(1, 1, 0, 0deg)'}, | |
| 32 {transform: 'rotate3d(1, 1, 0, 720deg)'} | |
| 33 ], { | |
| 34 duration: 4000, | |
| 35 iterations: Infinity | |
| 36 }); | |
| 37 | |
| 38 var rotateOnlyAnimation = rotateOnly.animate([ | |
| 39 {rotate: '0deg 1 1 0'}, | |
| 40 {rotate: '720deg 1 1 0'} | |
| 41 ], { | |
| 42 duration: 4000, | |
| 43 iterations: Infinity | |
| 44 }); | |
| 45 | |
| 46 var mixedAnimation = mixed.animate([ | |
| 47 {transform: 'rotate3d(1, 1, 0, 0deg)', rotate: '0deg 1 1 0'}, | |
| 48 {transform: 'rotate3d(1, 1, 0, 360deg)', rotate: '360deg 1 1 0'} | |
| 49 ], { | |
| 50 duration: 4000, | |
| 51 iterations: Infinity | |
| 52 }); | |
| 53 | |
| 54 if (window.testRunner) { | |
| 55 [].forEach.call(document.querySelectorAll('#human,.box'), function(element) { | |
| 56 element.textContent = ''; | |
| 57 }) | |
| 58 } | |
| 59 | |
| 60 var asyncHandle = async_test("Compositor Test with Rotate"); | |
| 61 requestAnimationFrame(function() { | |
| 62 requestAnimationFrame(function() { | |
| 63 assert_true(internals.isCompositedAnimation(transformOnlyAnimation), 'Only T ransform should be composited'); | |
|
alancutter (OOO until 2018)
2015/07/02 01:34:15
"Only X" sounds misleading, it should be "X only"
soonm
2015/07/02 03:28:56
Done
| |
| 64 assert_true(internals.isCompositedAnimation(rotateOnlyAnimation), 'Only Rota te should be composited'); | |
| 65 assert_false(internals.isCompositedAnimation(mixedAnimation), 'Mixed should not be composited'); | |
| 66 asyncHandle.done(); | |
| 67 }); | |
| 68 }); | |
| 69 </script> | |
| OLD | NEW |
