| 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..d6aa0b574bd13917483417f631a3865e65fa6d1e
|
| --- /dev/null
|
| +++ b/LayoutTests/virtual/threaded/animations/compositor-transform-with-translate.html
|
| @@ -0,0 +1,97 @@
|
| +<!DOCTYPE html>
|
| +<script src="../../../resources/testharness.js"></script>
|
| +<script src="../../../resources/testharnessreport.js"></script>
|
| +<style>
|
| +div {
|
| + position: absolute;
|
| + height: 100px;
|
| + width: 100px;
|
| +}
|
| +
|
| +#human-text{
|
| + width: 100%;
|
| +}
|
| +
|
| +#divBlue {
|
| + z-index: 3;
|
| + left: 200px;
|
| + top: 200px;
|
| + background-color: blue;
|
| +}
|
| +
|
| +#divRed {
|
| + z-index: 4;
|
| + left: 100px;
|
| + top: 200px;
|
| + background-color: red;
|
| +}
|
| +
|
| +#divPurple {
|
| + z-index: 2;
|
| + left: 300px;
|
| + top: 200px;
|
| + background-color: purple;
|
| +}
|
| +</style>
|
| +<span id="human-text">
|
| + <p>Tests that composited animation happens when only transform or only translate is present.</p>
|
| + <p>Blue = Only Transform, Red = Only Translate, Purple = Transform + Translate</p>
|
| + <p id="text"></p>
|
| +</span>
|
| +<div id="divBlue"></div>
|
| +<div id="divRed"></div>
|
| +<div id="divPurple"></div>
|
| +<script>
|
| +var blue = divBlue.animate([
|
| + {transform: 'translate(0px, 0px)'},
|
| + {transform: 'translate(400px, 400px)'}
|
| +], {
|
| + duration: 4000,
|
| + iterations: Infinity
|
| +});
|
| +
|
| +var red = divRed.animate([
|
| + {translate: '0px 0px'},
|
| + {translate: '400px 400px'}
|
| +], {
|
| + duration: 4000,
|
| + iterations: Infinity
|
| +});
|
| +
|
| +var purple = divPurple.animate([
|
| + {transform: 'translate(0px)', translate: '0px 0px'},
|
| + {transform: 'translate(400px)', translate: '0px 400px'}
|
| +], {
|
| + duration: 4000,
|
| + iterations: Infinity
|
| +});
|
| +
|
| +if (window.testRunner) {
|
| + window.testRunner.waitUntilDone();
|
| + document.getElementById('human-text').style.display = 'none';
|
| +}
|
| +
|
| +test(function() {
|
| + 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 Translate");
|
| +
|
| +</script>
|
|
|
Chromium Code Reviews
Issue 1218943002:
Compositor animations for Independent CSS Transform Properties (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master