diff options
Diffstat (limited to 'layout/style/test/test_animations_omta_start.html')
| -rw-r--r-- | layout/style/test/test_animations_omta_start.html | 187 |
1 files changed, 187 insertions, 0 deletions
diff --git a/layout/style/test/test_animations_omta_start.html b/layout/style/test/test_animations_omta_start.html new file mode 100644 index 0000000000..92423bf67d --- /dev/null +++ b/layout/style/test/test_animations_omta_start.html @@ -0,0 +1,187 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=975261 +--> +<head> + <meta charset="utf-8"> + <title>Test OMTA animations start correctly (Bug 975261)</title> + <script src="/tests/SimpleTest/SimpleTest.js"></script> + <script src="/tests/SimpleTest/paint_listener.js"></script> + <script type="application/javascript" src="animation_utils.js"></script> + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> + <style type="text/css"> + @keyframes anim-opacity { + 0% { opacity: 0.5 } + 100% { opacity: 0.5 } + } + @keyframes anim-opacity-2 { + 0% { opacity: 0.0 } + 100% { opacity: 1.0 } + } + @keyframes anim-transform { + 0% { transform: translate(50px); } + 100% { transform: translate(50px); } + } + @keyframes anim-transform-2 { + 0% { transform: translate(0px); } + 100% { transform: translate(100px); } + } + .target { + /* These two lines are needed so that an opacity/transform layer + * already exists when the animation is applied. */ + opacity: 0.99; + transform: translate(99px); + + /* Element needs geometry in order to be animated on the + * compositor. */ + width: 100px; + height: 100px; + background-color: white; + } + </style> +</head> +<body> +<a target="_blank" + href="https://bugzilla.mozilla.org/show_bug.cgi?id=975261">Mozilla Bug + 975261</a> +<div id="display"></div> +<pre id="test"> +<script type="application/javascript"> +"use strict"; + +var gUtils = SpecialPowers.DOMWindowUtils; + +SimpleTest.waitForExplicitFinish(); +runOMTATest(testDelay, SimpleTest.finish); + +function newTarget() { + var target = document.createElement("div"); + target.classList.add("target"); + document.getElementById("display").appendChild(target); + return target; +} + +function testDelay() { + gUtils.advanceTimeAndRefresh(0); + + var target = newTarget(); + target.setAttribute("style", "animation: 10s 10s anim-opacity linear"); + gUtils.advanceTimeAndRefresh(0); + + waitForAllPaints(function() { + gUtils.advanceTimeAndRefresh(10100); + waitForAllPaints(function() { + var opacity = gUtils.getOMTAStyle(target, "opacity"); + is(opacity, "0.5", + "opacity is set on compositor thread after delayed start"); + target.removeAttribute("style"); + gUtils.restoreNormalRefresh(); + testTransform(); + }); + }); +} + +function testTransform() { + gUtils.advanceTimeAndRefresh(0); + + var target = newTarget(); + target.setAttribute("style", "animation: 10s 10s anim-transform linear"); + gUtils.advanceTimeAndRefresh(0); + + waitForAllPaints(function() { + gUtils.advanceTimeAndRefresh(10100); + waitForAllPaints(function() { + var transform = gUtils.getOMTAStyle(target, "transform"); + ok(matricesRoughlyEqual(convertTo3dMatrix(transform), + convertTo3dMatrix("matrix(1, 0, 0, 1, 50, 0)")), + "transform is set on compositor thread after delayed start"); + target.remove(); + gUtils.restoreNormalRefresh(); + testBackwardsFill(); + }); + }); +} + +function testBackwardsFill() { + gUtils.advanceTimeAndRefresh(0); + + var target = newTarget(); + target.setAttribute("style", + "transform: translate(30px); " + + "animation: 10s 10s anim-transform-2 linear backwards"); + + gUtils.advanceTimeAndRefresh(0); + waitForAllPaints(function() { + gUtils.advanceTimeAndRefresh(10000); + waitForAllPaints(function() { + gUtils.advanceTimeAndRefresh(100); + waitForAllPaints(function() { + var transform = gUtils.getOMTAStyle(target, "transform"); + ok(matricesRoughlyEqual(convertTo3dMatrix(transform), + convertTo3dMatrix("matrix(1, 0, 0, 1, 1, 0)")), + "transform is set on compositor thread after delayed start " + + "with backwards fill"); + target.remove(); + gUtils.restoreNormalRefresh(); + testTransitionTakingOver(); + }); + }); + }); +} + +function testTransitionTakingOver() { + gUtils.advanceTimeAndRefresh(0); + + var parent = newTarget(); + var child = newTarget(); + parent.appendChild(child); + parent.style.opacity = "0.0"; + parent.style.animation = "10s anim-opacity-2 linear"; + child.style.opacity = "inherit"; + child.style.transition = "10s opacity linear"; + + var childCS = getComputedStyle(child, ""); + + gUtils.advanceTimeAndRefresh(0); + waitForAllPaints(function() { + gUtils.advanceTimeAndRefresh(4000); + waitForAllPaints(function() { + child.style.opacity = "1.0"; + var opacity = gUtils.getOMTAStyle(child, "opacity"); + // FIXME Bug 1039799 (or lower priority followup): Animations + // inherited from an animating parent element don't get shipped to + // the compositor thread. + todo_is(opacity, "0.4", + "transition that interrupted animation is correct"); + + // Trigger to start the transition, without this the transition will + // be pending in advanceTimeAndRefresh(0) so the transition will not + // be sent to the compositor until we call advanceTimeAndRefresh with + // a positive time value. + getComputedStyle(child).opacity; + gUtils.advanceTimeAndRefresh(0); + waitForAllPaints(function() { + opacity = gUtils.getOMTAStyle(child, "opacity"); + is(opacity, "0.4", + "transition that interrupted animation is correct"); + gUtils.advanceTimeAndRefresh(5000); + waitForAllPaints(function() { + opacity = gUtils.getOMTAStyle(child, "opacity"); + is(opacity, "0.7", + "transition that interrupted animation is correct"); + is(childCS.opacity, "0.7", + "transition that interrupted animation is correct"); + parent.remove(); + gUtils.restoreNormalRefresh(); + SimpleTest.finish(); + }); + }); + }); + }); +} + +</script> +</pre> +</body> +</html> |