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/compositor-transform-with-rotate.html |
| diff --git a/LayoutTests/virtual/threaded/animations/compositor-transform-with-rotate.html b/LayoutTests/virtual/threaded/animations/compositor-transform-with-rotate.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..d6f3d77ab5d5cdcc548fc22b349f86c090f1c487 |
| --- /dev/null |
| +++ b/LayoutTests/virtual/threaded/animations/compositor-transform-with-rotate.html |
| @@ -0,0 +1,94 @@ |
| +<!DOCTYPE html> |
| +<script src="../../../resources/testharness.js"></script> |
| +<script src="../../../resources/testharnessreport.js"></script> |
| +<style> |
| +div { |
| + 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
|
| + backface-visibility: visible; |
| + height: 100px; |
| + width: 100px; |
| +} |
| + |
| +#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
|
| + width: 100%; |
| +} |
| + |
| +#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
|
| + left: 100px; |
| + top: 200px; |
| + background-color: blue; |
| +} |
| + |
| +#divRed { |
| + left: 200px; |
| + top: 200px; |
| + background-color: red; |
| +} |
| + |
| +#divPurple { |
| + left: 300px; |
| + top: 200px; |
| + background-color: purple; |
| +} |
| +</style> |
| +<span id="human-text"> |
| + <p>Tests that composited animation happens when only transform or only rotate is present.</p> |
| + <p>Blue = Only Transform, Red = Only Rotate, Purple = Transform + Rotate</p> |
| + <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.
|
| +</span> |
| +<div id="divBlue"></div> |
| +<div id="divRed"></div> |
| +<div id="divPurple"></div> |
| +<script> |
| +var blue = divBlue.animate([ |
| + {transform: 'rotate3d(1, 1, 0, 0deg)'}, |
| + {transform: 'rotate3d(1, 1, 0, 720deg)'} |
| +], { |
| + duration: 4000, |
| + iterations: Infinity |
| +}); |
| + |
| +var red = divRed.animate([ |
| + {rotate: '0deg 1 1 0'}, |
| + {rotate: '720deg 1 1 0'} |
| +], { |
| + duration: 4000, |
| + iterations: Infinity |
| +}); |
| + |
| +var purple = divPurple.animate([ |
| + {transform: 'rotate3d(1, 1, 0, 0deg)', rotate: '0deg 1 1 0'}, |
| + {transform: 'rotate3d(1, 1, 0, 360deg)', rotate: '360deg 1 1 0'} |
| +], { |
| + duration: 4000, |
| + iterations: Infinity |
| +}); |
| + |
| +if (window.testRunner) { |
| + 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.
|
| + document.getElementById('human-text').style.display = 'none'; |
| +} |
| + |
| +test(function() { |
|
alancutter (OOO until 2018)
2015/07/01 03:35:46
Use async_test().
soonm
2015/07/01 07:18:50
Done.
|
| + requestAnimationFrame(function() { |
| + requestAnimationFrame(function() { |
| + var compositedBlue = internals.isCompositedAnimation(blue); |
| + var compositedRed = internals.isCompositedAnimation(red); |
| + var compositedPurple = internals.isCompositedAnimation(purple); |
| + |
| + text.textContent = `Blue ${compositedBlue ? 'is' : 'is not'} running on the compositor.\n`; |
| + text.textContent += `Red ${compositedRed ? 'is' : 'is not'} running on the compositor.\n`; |
| + text.textContent += `Purple ${compositedPurple ? 'is' : 'is not'} running on the compositor.`; |
| + |
| + assert_true(compositedBlue, 'Only Transform should be composited'); |
| + assert_true(compositedRed, 'Only Translate should be composited'); |
| + assert_false(compositedPurple, 'Mixed should not be composited'); |
| + |
| + if (window.testRunner) { |
| + window.testRunner.dumpAsText(); |
| + window.testRunner.notifyDone(); |
| + } |
| + }); |
| + }); |
| +}, "Compositor Test with Rotate"); |
| +</script> |
