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 div { | |
| 6 position: absolute; | |
|
alancutter (OOO until 2018)
2015/07/01 03:35:47
If you don't use position: absolute can you remove
soonm
2015/07/01 07:18:50
Done
| |
| 7 backface-visibility: visible; | |
| 8 height: 100px; | |
| 9 width: 100px; | |
| 10 } | |
| 11 | |
| 12 #human-text{ | |
|
alancutter (OOO until 2018)
2015/07/01 03:35:47
Use a div instead of span and remove this rule. Us
soonm
2015/07/01 07:18:50
Done
| |
| 13 width: 100%; | |
| 14 } | |
| 15 | |
| 16 #divBlue { | |
|
alancutter (OOO until 2018)
2015/07/01 03:35:46
Use test descriptions like transform property name
soonm
2015/07/01 07:18:50
Done
| |
| 17 left: 100px; | |
| 18 top: 200px; | |
| 19 background-color: blue; | |
| 20 } | |
| 21 | |
| 22 #divRed { | |
| 23 left: 200px; | |
| 24 top: 200px; | |
| 25 background-color: red; | |
| 26 } | |
| 27 | |
| 28 #divPurple { | |
| 29 left: 300px; | |
| 30 top: 200px; | |
| 31 background-color: purple; | |
| 32 } | |
| 33 </style> | |
| 34 <span id="human-text"> | |
| 35 <p>Tests that composited animation happens when only transform or only rotat e is present.</p> | |
| 36 <p>Blue = Only Transform, Red = Only Rotate, Purple = Transform + Rotate</p> | |
| 37 <p id="text"></p> | |
|
alancutter (OOO until 2018)
2015/07/01 03:35:46
Inconsistent indentation.
soonm
2015/07/01 07:18:50
Done - Fixed indentation.
| |
| 38 </span> | |
| 39 <div id="divBlue"></div> | |
| 40 <div id="divRed"></div> | |
| 41 <div id="divPurple"></div> | |
| 42 <script> | |
| 43 var blue = divBlue.animate([ | |
| 44 {transform: 'rotate3d(1, 1, 0, 0deg)'}, | |
| 45 {transform: 'rotate3d(1, 1, 0, 720deg)'} | |
| 46 ], { | |
| 47 duration: 4000, | |
| 48 iterations: Infinity | |
| 49 }); | |
| 50 | |
| 51 var red = divRed.animate([ | |
| 52 {rotate: '0deg 1 1 0'}, | |
| 53 {rotate: '720deg 1 1 0'} | |
| 54 ], { | |
| 55 duration: 4000, | |
| 56 iterations: Infinity | |
| 57 }); | |
| 58 | |
| 59 var purple = divPurple.animate([ | |
| 60 {transform: 'rotate3d(1, 1, 0, 0deg)', rotate: '0deg 1 1 0'}, | |
| 61 {transform: 'rotate3d(1, 1, 0, 360deg)', rotate: '360deg 1 1 0'} | |
| 62 ], { | |
| 63 duration: 4000, | |
| 64 iterations: Infinity | |
| 65 }); | |
| 66 | |
| 67 if (window.testRunner) { | |
| 68 window.testRunner.waitUntilDone(); | |
|
alancutter (OOO until 2018)
2015/07/01 03:35:47
No need to call window.testRunner methods if you'r
soonm
2015/07/01 07:18:50
Done - Removed.
| |
| 69 document.getElementById('human-text').style.display = 'none'; | |
| 70 } | |
| 71 | |
| 72 test(function() { | |
|
alancutter (OOO until 2018)
2015/07/01 03:35:46
Use async_test().
soonm
2015/07/01 07:18:50
Done.
| |
| 73 requestAnimationFrame(function() { | |
| 74 requestAnimationFrame(function() { | |
| 75 var compositedBlue = internals.isCompositedAnimation(blue); | |
| 76 var compositedRed = internals.isCompositedAnimation(red); | |
| 77 var compositedPurple = internals.isCompositedAnimation(purple); | |
| 78 | |
| 79 text.textContent = `Blue ${compositedBlue ? 'is' : 'is not'} running on th e compositor.\n`; | |
| 80 text.textContent += `Red ${compositedRed ? 'is' : 'is not'} running on the compositor.\n`; | |
| 81 text.textContent += `Purple ${compositedPurple ? 'is' : 'is not'} running on the compositor.`; | |
| 82 | |
| 83 assert_true(compositedBlue, 'Only Transform should be composited'); | |
| 84 assert_true(compositedRed, 'Only Translate should be composited'); | |
| 85 assert_false(compositedPurple, 'Mixed should not be composited'); | |
| 86 | |
| 87 if (window.testRunner) { | |
| 88 window.testRunner.dumpAsText(); | |
| 89 window.testRunner.notifyDone(); | |
| 90 } | |
| 91 }); | |
| 92 }); | |
| 93 }, "Compositor Test with Rotate"); | |
| 94 </script> | |
| OLD | NEW |
