mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
1db86095cf
Since off-main thread animation (OMTA) is not available on all platforms we
define a common wrapper function that runs OMTA tests only when available. This
patch further performs an internal check of basic OMTA operation so that
only a single error is produced if OMTA is unexpectedly unavailable.
Typical usage is:
SimpleTest.waitForExplicitFinish();
runOMTATest(function() {
... test code ...
SimpleTest.finish();
},
SimpleTest.finish);
This can be easily wrapped with promises if needed but does not require using
promises.
The calls to waitForExplicitFinish and finish are not performed automatically
since this function may be integrated with test suites that do other work
outside the call to runOMTATest.
133 lines
3.7 KiB
HTML
133 lines
3.7 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-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");
|
|
is(transform, "matrix(1, 0, 0, 1, 50, 0)",
|
|
"transform is set on compositor thread after delayed start");
|
|
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");
|
|
is(transform, "matrix(1, 0, 0, 1, 1, 0)",
|
|
"transform is set on compositor thread after delayed start " +
|
|
"with backwards fill");
|
|
target.removeAttribute("style");
|
|
gUtils.restoreNormalRefresh();
|
|
SimpleTest.finish();
|
|
});
|
|
});
|
|
});
|
|
}
|
|
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|