| Index: LayoutTests/virtual/threaded/animations/compositor-transform-with-translate.html
|
| diff --git a/LayoutTests/virtual/threaded/animations/compositor-transform-with-translate.html b/LayoutTests/virtual/threaded/animations/compositor-transform-with-translate.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..21ee9f40193011d134f1f1381caaefcca8a14ea2
|
| --- /dev/null
|
| +++ b/LayoutTests/virtual/threaded/animations/compositor-transform-with-translate.html
|
| @@ -0,0 +1,68 @@
|
| +<!DOCTYPE html>
|
| +<script src="../../../resources/testharness.js"></script>
|
| +<script src="../../../resources/testharnessreport.js"></script>
|
| +<style>
|
| +.box {
|
| + height: 100px;
|
| + width: 100px;
|
| +}
|
| +
|
| +#transformOnly {
|
| + background-color: blue;
|
| +}
|
| +
|
| +#translateOnly {
|
| + background-color: red;
|
| +}
|
| +
|
| +#mixed {
|
| + background-color: purple;
|
| +}
|
| +</style>
|
| +<div id="human">
|
| + <p>Tests that composited animation happens when only transform or only translate is present.</p>
|
| +</div>
|
| +<div id="transformOnly" class="box">Transform Only</div>
|
| +<div id="translateOnly" class="box">Translate Only</div>
|
| +<div id="mixed" class="box">Transform + Translate</div>
|
| +<script>
|
| +var transformOnlyAnimation = transformOnly.animate([
|
| + {transform: 'translate(0px, 0px)'},
|
| + {transform: 'translate(400px, 400px)'}
|
| +], {
|
| + duration: 4000,
|
| + iterations: Infinity
|
| +});
|
| +
|
| +var translateOnlyAnimation = translateOnly.animate([
|
| + {translate: '0px 0px'},
|
| + {translate: '400px 400px'}
|
| +], {
|
| + duration: 4000,
|
| + iterations: Infinity
|
| +});
|
| +
|
| +var mixedAnimation = mixed.animate([
|
| + {transform: 'translate(0px)', translate: '0px 0px'},
|
| + {transform: 'translate(400px)', translate: '0px 400px'}
|
| +], {
|
| + duration: 4000,
|
| + iterations: Infinity
|
| +});
|
| +
|
| +if (window.testRunner) {
|
| + [].forEach.call(document.querySelectorAll('#human,.box'), function(element) {
|
| + element.textContent = '';
|
| + })
|
| +}
|
| +
|
| +var asyncHandle = async_test("Compositor Test with Translate");
|
| +requestAnimationFrame(function() {
|
| + requestAnimationFrame(function() {
|
| + assert_true(internals.isCompositedAnimation(transformOnlyAnimation), 'Only Transform should be composited');
|
| + assert_true(internals.isCompositedAnimation(translateOnlyAnimation), 'Only Translate should be composited');
|
| + assert_false(internals.isCompositedAnimation(mixedAnimation), 'Mixed should not be composited');
|
| + asyncHandle.done();
|
| + });
|
| +});
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 1218943002:
Compositor animations for Independent CSS Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master