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..e9b23d960b1456f0a1b6a83dfdadc30970e48d99 |
| --- /dev/null |
| +++ b/LayoutTests/virtual/threaded/animations/compositor-transform-with-rotate.html |
| @@ -0,0 +1,69 @@ |
| +<!DOCTYPE html> |
| +<script src="../../../resources/testharness.js"></script> |
| +<script src="../../../resources/testharnessreport.js"></script> |
| +<style> |
| +.box { |
| + backface-visibility: visible; |
| + height: 100px; |
| + width: 100px; |
| +} |
| + |
| +#transformOnly { |
| + background-color: blue; |
| +} |
| + |
| +#rotateOnly { |
| + background-color: red; |
| +} |
| + |
| +#mixed { |
| + background-color: purple; |
| +} |
|
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
|
| +</style> |
| +<div id="human"> |
| + <p>Tests that composited animation happens when only transform or only rotate is present.</p> |
| +</div> |
| +<div id="transformOnly" class="box">Transform Only</div> |
| +<div id="rotateOnly" class="box">Rotate Only</div> |
| +<div id="mixed" class="box">Transform + Rotate</div> |
| +<script> |
| +var transformOnlyAnimation = transformOnly.animate([ |
| + {transform: 'rotate3d(1, 1, 0, 0deg)'}, |
| + {transform: 'rotate3d(1, 1, 0, 720deg)'} |
| +], { |
| + duration: 4000, |
| + iterations: Infinity |
| +}); |
| + |
| +var rotateOnlyAnimation = rotateOnly.animate([ |
| + {rotate: '0deg 1 1 0'}, |
| + {rotate: '720deg 1 1 0'} |
| +], { |
| + duration: 4000, |
| + iterations: Infinity |
| +}); |
| + |
| +var mixedAnimation = mixed.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) { |
| + [].forEach.call(document.querySelectorAll('#human,.box'), function(element) { |
| + element.textContent = ''; |
| + }) |
| +} |
| + |
| +var asyncHandle = async_test("Compositor Test with Rotate"); |
| +requestAnimationFrame(function() { |
| + requestAnimationFrame(function() { |
| + assert_true(internals.isCompositedAnimation(transformOnlyAnimation), 'Only Transform 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
|
| + assert_true(internals.isCompositedAnimation(rotateOnlyAnimation), 'Only Rotate should be composited'); |
| + assert_false(internals.isCompositedAnimation(mixedAnimation), 'Mixed should not be composited'); |
| + asyncHandle.done(); |
| + }); |
| +}); |
| +</script> |
