mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-01 06:35:42 +00:00
b7a521a812
This affects the correctness of transitions that take over from a running animation. (In the current code this can happen on a single element; once the cascading changes in bug 960465 are complete it can only happen via inheritance.) This version of the patch changes to do the test using opacity rather than transform, since testing using transforms encountered issues related to bug 1031688: the presence of phantom transitions due to the interaction of the computed value rules for transforms distinguishing between values that the interpolation rules consider identical. (These problems only appear after patch 24 in this bug changes the coalescing order between a parent with animations and a child with transitions so that the parent is handled before the child, instead of transitions being handled before animations.) The final two added tests fail without the patch and pass with the patch. (With the opacity version, the third to last test also fails without the patch, probably due to the value not having yet been sent to the layer. This was not an issue pre-patch with the original test using transform, though. I haven't tested that this happened with patch 0, though, so it might have been the issue patch 0 fixes.)
184 lines
5.5 KiB
HTML
184 lines
5.5 KiB
HTML
<!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 type="application/javascript"
|
|
src="/tests/SimpleTest/SimpleTest.js"></script>
|
|
<script type="application/javascript"
|
|
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");
|
|
gUtils.advanceTimeAndRefresh(0);
|
|
waitForAllPaints(function() {
|
|
var 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>
|