1.1 --- /dev/null Thu Jan 01 00:00:00 1970 +0000
1.2 +++ b/layout/style/test/test_animations_omta_start.html Wed Dec 31 06:09:35 2014 +0100
1.3 @@ -0,0 +1,132 @@
1.4 +<!DOCTYPE HTML>
1.5 +<html>
1.6 +<!--
1.7 +https://bugzilla.mozilla.org/show_bug.cgi?id=975261
1.8 +-->
1.9 +<head>
1.10 + <meta charset="utf-8">
1.11 + <title>Test OMTA animations start correctly (Bug 975261)</title>
1.12 + <script type="application/javascript"
1.13 + src="/tests/SimpleTest/SimpleTest.js"></script>
1.14 + <script type="application/javascript"
1.15 + src="/tests/SimpleTest/paint_listener.js"></script>
1.16 + <script type="application/javascript" src="animation_utils.js"></script>
1.17 + <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
1.18 + <style type="text/css">
1.19 + @keyframes anim-opacity {
1.20 + 0% { opacity: 0.5 }
1.21 + 100% { opacity: 0.5 }
1.22 + }
1.23 + @keyframes anim-transform {
1.24 + 0% { transform: translate(50px); }
1.25 + 100% { transform: translate(50px); }
1.26 + }
1.27 + @keyframes anim-transform-2 {
1.28 + 0% { transform: translate(0px); }
1.29 + 100% { transform: translate(100px); }
1.30 + }
1.31 + .target {
1.32 + /* These two lines are needed so that an opacity/transform layer
1.33 + * already exists when the animation is applied. */
1.34 + opacity: 0.99;
1.35 + transform: translate(99px);
1.36 +
1.37 + /* Element needs geometry in order to be animated on the
1.38 + * compositor. */
1.39 + width: 100px;
1.40 + height: 100px;
1.41 + background-color: white;
1.42 + }
1.43 + </style>
1.44 +</head>
1.45 +<body>
1.46 +<a target="_blank"
1.47 + href="https://bugzilla.mozilla.org/show_bug.cgi?id=975261">Mozilla Bug
1.48 + 975261</a>
1.49 +<div id="display"></div>
1.50 +<pre id="test">
1.51 +<script type="application/javascript">
1.52 +"use strict";
1.53 +
1.54 +var gUtils = SpecialPowers.DOMWindowUtils;
1.55 +
1.56 +SimpleTest.waitForExplicitFinish();
1.57 +runOMTATest(testDelay, SimpleTest.finish);
1.58 +
1.59 +function newTarget() {
1.60 + var target = document.createElement("div");
1.61 + target.classList.add("target");
1.62 + document.getElementById("display").appendChild(target);
1.63 + return target;
1.64 +}
1.65 +
1.66 +function testDelay() {
1.67 + gUtils.advanceTimeAndRefresh(0);
1.68 +
1.69 + var target = newTarget();
1.70 + target.setAttribute("style", "animation: 10s 10s anim-opacity linear");
1.71 + gUtils.advanceTimeAndRefresh(0);
1.72 +
1.73 + waitForAllPaints(function() {
1.74 + gUtils.advanceTimeAndRefresh(10100);
1.75 + waitForAllPaints(function() {
1.76 + var opacity = gUtils.getOMTAStyle(target, "opacity");
1.77 + is(opacity, 0.5,
1.78 + "opacity is set on compositor thread after delayed start");
1.79 + target.removeAttribute("style");
1.80 + gUtils.restoreNormalRefresh();
1.81 + testTransform();
1.82 + });
1.83 + });
1.84 +}
1.85 +
1.86 +function testTransform() {
1.87 + gUtils.advanceTimeAndRefresh(0);
1.88 +
1.89 + var target = newTarget();
1.90 + target.setAttribute("style", "animation: 10s 10s anim-transform linear");
1.91 + gUtils.advanceTimeAndRefresh(0);
1.92 +
1.93 + waitForAllPaints(function() {
1.94 + gUtils.advanceTimeAndRefresh(10100);
1.95 + waitForAllPaints(function() {
1.96 + var transform = gUtils.getOMTAStyle(target, "transform");
1.97 + is(transform, "matrix(1, 0, 0, 1, 50, 0)",
1.98 + "transform is set on compositor thread after delayed start");
1.99 + target.removeAttribute("style");
1.100 + gUtils.restoreNormalRefresh();
1.101 + testBackwardsFill();
1.102 + });
1.103 + });
1.104 +}
1.105 +
1.106 +function testBackwardsFill() {
1.107 + gUtils.advanceTimeAndRefresh(0);
1.108 +
1.109 + var target = newTarget();
1.110 + target.setAttribute("style",
1.111 + "transform: translate(30px); " +
1.112 + "animation: 10s 10s anim-transform-2 linear backwards");
1.113 +
1.114 + gUtils.advanceTimeAndRefresh(0);
1.115 + waitForAllPaints(function() {
1.116 + gUtils.advanceTimeAndRefresh(10000);
1.117 + waitForAllPaints(function() {
1.118 + gUtils.advanceTimeAndRefresh(100);
1.119 + waitForAllPaints(function() {
1.120 + var transform = gUtils.getOMTAStyle(target, "transform");
1.121 + is(transform, "matrix(1, 0, 0, 1, 1, 0)",
1.122 + "transform is set on compositor thread after delayed start " +
1.123 + "with backwards fill");
1.124 + target.removeAttribute("style");
1.125 + gUtils.restoreNormalRefresh();
1.126 + SimpleTest.finish();
1.127 + });
1.128 + });
1.129 + });
1.130 +}
1.131 +
1.132 +</script>
1.133 +</pre>
1.134 +</body>
1.135 +</html>
