2014-03-21 14:59:57 -07:00
|
|
|
<!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>
|
2014-04-03 00:55:44 -07:00
|
|
|
<script type="application/javascript" src="animation_utils.js"></script>
|
2014-03-21 14:59:57 -07:00
|
|
|
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
|
|
|
<style type="text/css">
|
2014-03-21 14:59:57 -07:00
|
|
|
@keyframes anim-opacity {
|
2014-03-21 14:59:57 -07:00
|
|
|
0% { opacity: 0.5 }
|
|
|
|
100% { opacity: 0.5 }
|
|
|
|
}
|
2014-03-21 14:59:57 -07:00
|
|
|
@keyframes anim-transform {
|
|
|
|
0% { transform: translate(50px); }
|
|
|
|
100% { transform: translate(50px); }
|
|
|
|
}
|
2014-03-21 14:59:58 -07:00
|
|
|
@keyframes anim-transform-2 {
|
|
|
|
0% { transform: translate(0px); }
|
|
|
|
100% { transform: translate(100px); }
|
|
|
|
}
|
2014-03-21 14:59:57 -07:00
|
|
|
.target {
|
2014-03-21 14:59:57 -07:00
|
|
|
/* 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. */
|
2014-03-21 14:59:57 -07:00
|
|
|
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>
|
2014-03-21 14:59:58 -07:00
|
|
|
<div id="display"></div>
|
2014-03-21 14:59:57 -07:00
|
|
|
<pre id="test">
|
|
|
|
<script type="application/javascript">
|
|
|
|
"use strict";
|
|
|
|
|
2014-03-21 14:59:58 -07:00
|
|
|
var gUtils = SpecialPowers.DOMWindowUtils;
|
2014-03-21 14:59:57 -07:00
|
|
|
|
2014-04-03 00:55:44 -07:00
|
|
|
SimpleTest.waitForExplicitFinish();
|
|
|
|
runOMTATest(testDelay, SimpleTest.finish);
|
2014-03-21 14:59:57 -07:00
|
|
|
|
2014-03-21 14:59:58 -07:00
|
|
|
function newTarget() {
|
|
|
|
var target = document.createElement("div");
|
|
|
|
target.classList.add("target");
|
|
|
|
document.getElementById("display").appendChild(target);
|
|
|
|
return target;
|
|
|
|
}
|
|
|
|
|
2014-03-21 14:59:57 -07:00
|
|
|
function testDelay() {
|
2014-03-21 14:59:58 -07:00
|
|
|
gUtils.advanceTimeAndRefresh(0);
|
2014-03-21 14:59:57 -07:00
|
|
|
|
2014-03-21 14:59:58 -07:00
|
|
|
var target = newTarget();
|
|
|
|
target.setAttribute("style", "animation: 10s 10s anim-opacity linear");
|
|
|
|
gUtils.advanceTimeAndRefresh(0);
|
2014-03-21 14:59:57 -07:00
|
|
|
|
2014-03-21 14:59:57 -07:00
|
|
|
waitForAllPaints(function() {
|
2014-03-21 14:59:58 -07:00
|
|
|
gUtils.advanceTimeAndRefresh(10100);
|
2014-03-21 14:59:57 -07:00
|
|
|
waitForAllPaints(function() {
|
2014-03-21 14:59:58 -07:00
|
|
|
var opacity = gUtils.getOMTAStyle(target, "opacity");
|
2014-03-21 14:59:57 -07:00
|
|
|
is(opacity, 0.5,
|
|
|
|
"opacity is set on compositor thread after delayed start");
|
2014-03-21 14:59:58 -07:00
|
|
|
target.removeAttribute("style");
|
|
|
|
gUtils.restoreNormalRefresh();
|
2014-03-21 14:59:57 -07:00
|
|
|
testTransform();
|
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
function testTransform() {
|
2014-03-21 14:59:58 -07:00
|
|
|
gUtils.advanceTimeAndRefresh(0);
|
2014-03-21 14:59:57 -07:00
|
|
|
|
2014-03-21 14:59:58 -07:00
|
|
|
var target = newTarget();
|
|
|
|
target.setAttribute("style", "animation: 10s 10s anim-transform linear");
|
|
|
|
gUtils.advanceTimeAndRefresh(0);
|
2014-03-21 14:59:57 -07:00
|
|
|
|
|
|
|
waitForAllPaints(function() {
|
2014-03-21 14:59:58 -07:00
|
|
|
gUtils.advanceTimeAndRefresh(10100);
|
2014-03-21 14:59:57 -07:00
|
|
|
waitForAllPaints(function() {
|
2014-03-21 14:59:58 -07:00
|
|
|
var transform = gUtils.getOMTAStyle(target, "transform");
|
2014-03-21 14:59:57 -07:00
|
|
|
is(transform, "matrix(1, 0, 0, 1, 50, 0)",
|
|
|
|
"transform is set on compositor thread after delayed start");
|
2014-03-21 14:59:58 -07:00
|
|
|
target.removeAttribute("style");
|
|
|
|
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");
|
2014-03-21 14:59:58 -07:00
|
|
|
is(transform, "matrix(1, 0, 0, 1, 1, 0)",
|
|
|
|
"transform is set on compositor thread after delayed start " +
|
|
|
|
"with backwards fill");
|
2014-03-21 14:59:58 -07:00
|
|
|
target.removeAttribute("style");
|
|
|
|
gUtils.restoreNormalRefresh();
|
|
|
|
SimpleTest.finish();
|
|
|
|
});
|
2014-03-21 14:59:57 -07:00
|
|
|
});
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
|
|
|
</script>
|
|
|
|
</pre>
|
|
|
|
</body>
|
|
|
|
</html>
|