Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- Manifest: layout/style/test/mochitest.toml
<!DOCTYPE HTML>
<html>
<!--
-->
<head>
<meta charset="utf-8">
<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"
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");
// 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>