mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
2d10b191d5
This implements my proposal in http://lists.w3.org/Archives/Public/www-style/2011Apr/0381.html and http://lists.w3.org/Archives/Public/www-style/2011Apr/0387.html . I think it was a serious mistake to implement what the spec says, and I'm fixing that mistake so that we have a chance to change the spec. In other words, when an @keyframes rule has two key selectors at the same time, the later one no longer overrides the entirety of the earlier one. The overriding is done for each property that's in the later rule. (And the -moz-animation-timing-function is taken only from the keyframe actually used for the given property; if there's no declaration there then the computed value of the property is used.) The test for @keyframes cascade fails without the patch; the test for @keyframes cascade2 tests behavior that works both before and after the patch.
1323 lines
53 KiB
HTML
1323 lines
53 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<!--
|
|
https://bugzilla.mozilla.org/show_bug.cgi?id=435442
|
|
-->
|
|
<head>
|
|
<title>Test for css3-animations (Bug 435442)</title>
|
|
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.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">
|
|
@-moz-keyframes anim1 {
|
|
0% { margin-left: 0px }
|
|
50% { margin-left: 80px }
|
|
100% { margin-left: 100px }
|
|
}
|
|
@-moz-keyframes anim2 {
|
|
from { margin-right: 0 } to { margin-right: 100px }
|
|
}
|
|
@-moz-keyframes anim3 {
|
|
from { margin-top: 0 } to { margin-top: 100px }
|
|
}
|
|
@-moz-keyframes anim4 {
|
|
from { margin-bottom: 0 } to { margin-bottom: 100px }
|
|
}
|
|
@-moz-keyframes anim5 {
|
|
from { margin-left: 0 } to { margin-left: 100px }
|
|
}
|
|
|
|
@-moz-keyframes kf1 {
|
|
50% { margin-top: 50px }
|
|
to { margin-top: 150px }
|
|
}
|
|
@-moz-keyframes kf2 {
|
|
from { margin-top: 150px }
|
|
50% { margin-top: 50px }
|
|
}
|
|
@-moz-keyframes kf3 {
|
|
25% { margin-top: 100px }
|
|
}
|
|
@-moz-keyframes kf4 {
|
|
to, from { display: inline; margin-top: 37px }
|
|
}
|
|
@-moz-keyframes kf_cascade1 {
|
|
from { padding-top: 50px }
|
|
50%, from { padding-top: 30px } /* wins: 0% */
|
|
75%, 85%, 50% { padding-top: 20px } /* wins: 75%, 50% */
|
|
100%, 85% { padding-top: 70px } /* wins: 100% */
|
|
85.1% { padding-top: 60px } /* wins: 85.1% */
|
|
85% { padding-top: 30px } /* wins: 85% */
|
|
}
|
|
@-moz-keyframes kf_cascade2 { from, to { margin-top: 100px } }
|
|
@-moz-keyframes kf_cascade2 { from, to { margin-left: 200px } }
|
|
@-moz-keyframes kf_cascade2 { from, to { margin-left: 300px } }
|
|
@-moz-keyframes kf_tf1 {
|
|
0% { padding-bottom: 20px; -moz-animation-timing-function: ease }
|
|
25% { padding-bottom: 60px; }
|
|
50% { padding-bottom: 160px; -moz-animation-timing-function: steps(5) }
|
|
75% { padding-bottom: 120px; -moz-animation-timing-function: linear }
|
|
100% { padding-bottom: 20px; -moz-animation-timing-function: ease-out }
|
|
}
|
|
|
|
#withbefore::before, #withafter::after {
|
|
content: "";
|
|
-moz-animation: anim2 1s linear alternate infinite;
|
|
}
|
|
|
|
@-moz-keyframes multiprop {
|
|
0% {
|
|
padding-top: 10px; padding-left: 30px;
|
|
-moz-animation-timing-function: ease;
|
|
}
|
|
25% {
|
|
padding-left: 50px;
|
|
-moz-animation-timing-function: ease-out;
|
|
}
|
|
50% {
|
|
padding-top: 40px;
|
|
}
|
|
75% {
|
|
padding-top: 80px; padding-left: 60px;
|
|
-moz-animation-timing-function: ease-in;
|
|
}
|
|
}
|
|
|
|
@-moz-keyframes uaoverride {
|
|
0%, 100% { line-height: 3; margin-top: 20px }
|
|
50% { margin-top: 120px }
|
|
}
|
|
|
|
@-moz-keyframes cascade {
|
|
0%, 25%, 100% { top: 0 }
|
|
50%, 75% { top: 100px }
|
|
0%, 75%, 100% { left: 0 }
|
|
25%, 50% { left: 100px }
|
|
}
|
|
@-moz-keyframes cascade2 {
|
|
0% { text-indent: 0 }
|
|
25% { text-indent: 30px; -moz-animation-timing-function: ease-in } /* beaten by rule below */
|
|
50% { text-indent: 0 }
|
|
25% { text-indent: 50px }
|
|
100% { text-indent: 100px }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435442">Mozilla Bug 435442</a>
|
|
<div id="display"></div>
|
|
<pre id="test">
|
|
<script type="application/javascript">
|
|
"use strict";
|
|
|
|
/** Test for css3-animations (Bug 435442) **/
|
|
|
|
function advance_clock(milliseconds) {
|
|
SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
|
|
}
|
|
|
|
var display = document.getElementById("display");
|
|
var div = null;
|
|
var cs = null;
|
|
var events_received = [];
|
|
function new_div(style) {
|
|
return new_element("div", style);
|
|
}
|
|
function new_element(tagname, style) {
|
|
if (div != null || cs != null) {
|
|
ok(false, "test author forgot to call done_div");
|
|
}
|
|
if (typeof(style) != "string") {
|
|
ok(false, "test author forgot to pass argument");
|
|
}
|
|
div = document.createElement(tagname);
|
|
div.setAttribute("style", style);
|
|
display.appendChild(div);
|
|
cs = getComputedStyle(div, "");
|
|
}
|
|
function listen() {
|
|
events_received = [];
|
|
function listener(event) {
|
|
events_received.push(event);
|
|
}
|
|
div.addEventListener("animationstart", listener, false);
|
|
div.addEventListener("animationiteration", listener, false);
|
|
div.addEventListener("animationend", listener, false);
|
|
}
|
|
function check_events(events_expected, desc) {
|
|
// This function checks that the list of events_expected matches
|
|
// the received events -- but it only checks the properties that
|
|
// are present on events_expected.
|
|
is(events_received.length, events_expected.length,
|
|
"number of events received for " + desc);
|
|
for (var i = 0,
|
|
i_end = Math.min(events_expected.length, events_received.length);
|
|
i != i_end; ++i) {
|
|
var exp = events_expected[i];
|
|
var rec = events_received[i];
|
|
for (var prop in exp) {
|
|
if (prop == "elapsedTime") {
|
|
// Allow floating point error.
|
|
ok(Math.abs(rec.elapsedTime - exp.elapsedTime) < 0.000002,
|
|
"events[" + i + "]." + prop + " for " + desc +
|
|
" received=" + rec.elapsedTime + " expected=" + exp.elapsedTime);
|
|
} else {
|
|
is(rec[prop], exp[prop], "events[" + i + "]." + prop + " for " + desc);
|
|
}
|
|
}
|
|
}
|
|
for (var i = events_expected.length; i < events_received.length; ++i) {
|
|
ok(false, "unexpected " + events_received[i].type + " event for " + desc);
|
|
}
|
|
events_received = [];
|
|
}
|
|
function done_div() {
|
|
display.removeChild(div);
|
|
div = null;
|
|
cs = null;
|
|
if (events_received.length) {
|
|
ok(false, "caller should have called check_events");
|
|
}
|
|
}
|
|
|
|
// take over the refresh driver right from the start.
|
|
advance_clock(0);
|
|
|
|
/*
|
|
* css3-animations: 2. Animations
|
|
* http://dev.w3.org/csswg/css3-animations/#animations
|
|
*/
|
|
|
|
// Test that animations don't affect the computed value before the
|
|
// start of the animation or after its end. Test without
|
|
// animation-fill-mode, but then repeat the test with all the values of
|
|
// animation-fill-mode.
|
|
function test_fill_mode(fill_mode, fills_backwards, fills_forwards)
|
|
{
|
|
var style = "margin-left: 30px; -moz-animation: 10s 3s anim1 linear";
|
|
var desc;
|
|
if (fill_mode.length > 0) {
|
|
style += " " + fill_mode;
|
|
desc = "fill mode " + fill_mode + ": ";
|
|
} else {
|
|
desc = "default fill mode: ";
|
|
}
|
|
new_div(style);
|
|
listen();
|
|
if (fills_backwards)
|
|
is(cs.marginLeft, "0px", desc + "does affect value during delay (0s)");
|
|
else
|
|
is(cs.marginLeft, "30px", desc + "doesn't affect value during delay (0s)");
|
|
advance_clock(2000);
|
|
if (fills_backwards)
|
|
is(cs.marginLeft, "0px", desc + "does affect value during delay (2s)");
|
|
else
|
|
is(cs.marginLeft, "30px", desc + "doesn't affect value during delay (2s)");
|
|
check_events([], "before start in test_fill_mode");
|
|
advance_clock(1000);
|
|
check_events([{ type: 'animationstart', target: div,
|
|
bubbles: true, cancelable: true,
|
|
animationName: 'anim1', elapsedTime: 0.0 }],
|
|
"right after start in test_fill_mode");
|
|
if (fills_backwards)
|
|
is(cs.marginLeft, "0px", desc + "affects value at start of animation");
|
|
advance_clock(125);
|
|
is(cs.marginLeft, "2px", desc + "affects value during animation");
|
|
advance_clock(2375);
|
|
is(cs.marginLeft, "40px", desc + "affects value during animation");
|
|
advance_clock(2500);
|
|
is(cs.marginLeft, "80px", desc + "affects value during animation");
|
|
advance_clock(2500);
|
|
is(cs.marginLeft, "90px", desc + "affects value during animation");
|
|
advance_clock(2375);
|
|
is(cs.marginLeft, "99.5px", desc + "affects value during animation");
|
|
check_events([], "before end in test_fill_mode");
|
|
advance_clock(125);
|
|
check_events([{ type: 'animationend', target: div,
|
|
bubbles: true, cancelable: true,
|
|
animationName: 'anim1', elapsedTime: 10.0 }],
|
|
"right after end in test_fill_mode");
|
|
if (fills_forwards)
|
|
is(cs.marginLeft, "100px", desc + "affects value at end of animation");
|
|
advance_clock(10);
|
|
if (fills_forwards)
|
|
is(cs.marginLeft, "100px", desc + "does affect value after animation");
|
|
else
|
|
is(cs.marginLeft, "30px", desc + "does not affect value after animation");
|
|
done_div();
|
|
}
|
|
test_fill_mode("", false, false);
|
|
test_fill_mode("none", false, false);
|
|
test_fill_mode("forwards", false, true);
|
|
test_fill_mode("backwards", true, false);
|
|
test_fill_mode("both", true, true);
|
|
|
|
// Test that animations continue running when the animation name
|
|
// list is changed.
|
|
new_div("-moz-animation: anim1 linear 10s");
|
|
is(cs.getPropertyValue("margin-top"), "0px",
|
|
"just anim1, margin-top at start");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"just anim1, margin-right at start");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"just anim1, margin-bottom at start");
|
|
is(cs.getPropertyValue("margin-left"), "0px",
|
|
"just anim1, margin-left at start");
|
|
advance_clock(1000);
|
|
is(cs.getPropertyValue("margin-top"), "0px",
|
|
"just anim1, margin-top at 1s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"just anim1, margin-right at 1s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"just anim1, margin-bottom at 1s");
|
|
is(cs.getPropertyValue("margin-left"), "16px",
|
|
"just anim1, margin-left at 1s");
|
|
// append anim2
|
|
div.style.MozAnimation = "anim1 linear 10s, anim2 linear 10s";
|
|
is(cs.getPropertyValue("margin-top"), "0px",
|
|
"anim1 + anim2, margin-top at 1s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim1 + anim2, margin-right at 1s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim1 + anim2, margin-bottom at 1s");
|
|
is(cs.getPropertyValue("margin-left"), "16px",
|
|
"anim1 + anim2, margin-left at 1s");
|
|
advance_clock(1000);
|
|
is(cs.getPropertyValue("margin-top"), "0px",
|
|
"anim1 + anim2, margin-top at 2s");
|
|
is(cs.getPropertyValue("margin-right"), "10px",
|
|
"anim1 + anim2, margin-right at 2s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim1 + anim2, margin-bottom at 2s");
|
|
is(cs.getPropertyValue("margin-left"), "32px",
|
|
"anim1 + anim2, margin-left at 2s");
|
|
// prepend anim3
|
|
div.style.MozAnimation = "anim3 linear 10s, anim1 linear 10s, anim2 linear 10s";
|
|
is(cs.getPropertyValue("margin-top"), "0px",
|
|
"anim3 + anim1 + anim2, margin-top at 2s");
|
|
is(cs.getPropertyValue("margin-right"), "10px",
|
|
"anim3 + anim1 + anim2, margin-right at 2s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1 + anim2, margin-bottom at 2s");
|
|
is(cs.getPropertyValue("margin-left"), "32px",
|
|
"anim3 + anim1 + anim2, margin-left at 2s");
|
|
advance_clock(1000);
|
|
is(cs.getPropertyValue("margin-top"), "10px",
|
|
"anim3 + anim1 + anim2, margin-top at 3s");
|
|
is(cs.getPropertyValue("margin-right"), "20px",
|
|
"anim3 + anim1 + anim2, margin-right at 3s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1 + anim2, margin-bottom at 3s");
|
|
is(cs.getPropertyValue("margin-left"), "48px",
|
|
"anim3 + anim1 + anim2, margin-left at 3s");
|
|
// remove anim2 from end
|
|
div.style.MozAnimation = "anim3 linear 10s, anim1 linear 10s";
|
|
is(cs.getPropertyValue("margin-top"), "10px",
|
|
"anim3 + anim1, margin-top at 3s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim3 + anim1, margin-right at 3s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1, margin-bottom at 3s");
|
|
is(cs.getPropertyValue("margin-left"), "48px",
|
|
"anim3 + anim1, margin-left at 3s");
|
|
advance_clock(1000);
|
|
is(cs.getPropertyValue("margin-top"), "20px",
|
|
"anim3 + anim1, margin-top at 4s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim3 + anim1, margin-right at 4s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1, margin-bottom at 4s");
|
|
is(cs.getPropertyValue("margin-left"), "64px",
|
|
"anim3 + anim1, margin-left at 4s");
|
|
// swap anim1 and anim3, change duration of anim3
|
|
div.style.MozAnimation = "anim1 linear 10s, anim3 linear 5s";
|
|
is(cs.getPropertyValue("margin-top"), "40px",
|
|
"anim1 + anim3, margin-top at 4s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim1 + anim3, margin-right at 4s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim1 + anim3, margin-bottom at 4s");
|
|
is(cs.getPropertyValue("margin-left"), "64px",
|
|
"anim1 + anim3, margin-left at 4s");
|
|
advance_clock(1000);
|
|
is(cs.getPropertyValue("margin-top"), "60px",
|
|
"anim1 + anim3, margin-top at 5s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim1 + anim3, margin-right at 5s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim1 + anim3, margin-bottom at 5s");
|
|
is(cs.getPropertyValue("margin-left"), "80px",
|
|
"anim1 + anim3, margin-left at 5s");
|
|
// list anim1 twice, last duration wins, original start time still applies
|
|
div.style.MozAnimation = "anim1 linear 10s, anim3 linear 5s, anim1 linear 20s";
|
|
is(cs.getPropertyValue("margin-top"), "60px",
|
|
"anim1 + anim3 + anim1, margin-top at 5s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim1 + anim3 + anim1, margin-right at 5s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim1 + anim3 + anim1, margin-bottom at 5s");
|
|
is(cs.getPropertyValue("margin-left"), "40px",
|
|
"anim1 + anim3 + anim1, margin-left at 5s");
|
|
// drop one of the anim1, and list anim5 as well, which animates
|
|
// the same property as anim1
|
|
div.style.MozAnimation = "anim3 linear 5s, anim1 linear 20s, anim5 linear 10s";
|
|
is(cs.getPropertyValue("margin-top"), "60px",
|
|
"anim3 + anim1 + anim5, margin-top at 5s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim3 + anim1 + anim5, margin-right at 5s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1 + anim5, margin-bottom at 5s");
|
|
is(cs.getPropertyValue("margin-left"), "0px",
|
|
"anim3 + anim1 + anim5, margin-left at 5s");
|
|
advance_clock(1000);
|
|
is(cs.getPropertyValue("margin-top"), "80px",
|
|
"anim3 + anim1 + anim5, margin-top at 6s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim3 + anim1 + anim5, margin-right at 6s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1 + anim5, margin-bottom at 6s");
|
|
is(cs.getPropertyValue("margin-left"), "10px",
|
|
"anim3 + anim1 + anim5, margin-left at 6s");
|
|
// now swap the anim5 and anim1 order
|
|
div.style.MozAnimation = "anim3 linear 5s, anim5 linear 10s, anim1 linear 20s";
|
|
is(cs.getPropertyValue("margin-top"), "80px",
|
|
"anim3 + anim1 + anim5, margin-top at 6s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim3 + anim1 + anim5, margin-right at 6s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1 + anim5, margin-bottom at 6s");
|
|
is(cs.getPropertyValue("margin-left"), "48px",
|
|
"anim3 + anim1 + anim5, margin-left at 6s");
|
|
advance_clock(1000);
|
|
is(cs.getPropertyValue("margin-top"), "0px",
|
|
"anim3 + anim1 + anim5, margin-top at 7s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim3 + anim1 + anim5, margin-right at 7s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1 + anim5, margin-bottom at 7s");
|
|
is(cs.getPropertyValue("margin-left"), "56px",
|
|
"anim3 + anim1 + anim5, margin-left at 7s");
|
|
// swap anim1 and anim5 back
|
|
div.style.MozAnimation = "anim3 linear 5s, anim1 linear 20s, anim5 linear 10s";
|
|
is(cs.getPropertyValue("margin-top"), "0px",
|
|
"anim3 + anim1 + anim5, margin-top at 7s");
|
|
is(cs.getPropertyValue("margin-right"), "0px",
|
|
"anim3 + anim1 + anim5, margin-right at 7s");
|
|
is(cs.getPropertyValue("margin-bottom"), "0px",
|
|
"anim3 + anim1 + anim5, margin-bottom at 7s");
|
|
is(cs.getPropertyValue("margin-left"), "20px",
|
|
"anim3 + anim1 + anim5, margin-left at 7s");
|
|
advance_clock(100);
|
|
is(cs.getPropertyValue("margin-top"), "0px",
|
|
"anim3 + anim1 + anim5, margin-top at 7.1s");
|
|
// Change the animation fill mode on the completed animation.
|
|
div.style.MozAnimation = "anim3 linear 5s forwards, anim1 linear 20s, anim5 linear 10s";
|
|
is(cs.getPropertyValue("margin-top"), "100px",
|
|
"anim3 + anim1 + anim5, margin-top at 7.1s, with fill mode");
|
|
advance_clock(900);
|
|
is(cs.getPropertyValue("margin-top"), "100px",
|
|
"anim3 + anim1 + anim5, margin-top at 8s, with fill mode");
|
|
// Change the animation duration on the completed animation, so it is
|
|
// no longer completed.
|
|
div.style.MozAnimation = "anim3 linear 10s, anim1 linear 20s, anim5 linear 10s";
|
|
is(cs.getPropertyValue("margin-top"), "60px",
|
|
"anim3 + anim1 + anim5, margin-top at 8s, with fill mode");
|
|
is(cs.getPropertyValue("margin-left"), "30px",
|
|
"anim3 + anim1 + anim5, margin-left at 8s");
|
|
done_div();
|
|
|
|
/*
|
|
* css3-animations: 3. Keyframes
|
|
* http://dev.w3.org/csswg/css3-animations/#keyframes
|
|
*
|
|
* Also see test_keyframes_rules.html .
|
|
*/
|
|
|
|
// Test the rules on keyframes that lack a 0% or 100% rule:
|
|
// (simultaneously, test that reverse animations have their keyframes
|
|
// run backwards)
|
|
|
|
// 100px at 0%, 50px at 50%, 150px at 100%
|
|
new_div("margin-top: 100px; -moz-animation: kf1 ease 1s alternate infinite");
|
|
is(cs.marginTop, "100px", "no-0% at 0.0s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.2), 0.01,
|
|
"no-0% at 0.1s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.6), 0.01,
|
|
"no-0% at 0.3s");
|
|
advance_clock(200);
|
|
is(cs.marginTop, "50px", "no-0% at 0.5s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.4), 0.01,
|
|
"no-0% at 0.7s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.8), 0.01,
|
|
"no-0% at 0.9s");
|
|
advance_clock(100);
|
|
is(cs.marginTop, "150px", "no-0% at 1.0s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.8), 0.01,
|
|
"no-0% at 1.1s");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.2), 0.01,
|
|
"no-0% at 1.4s");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.6), 0.01,
|
|
"no-0% at 1.7s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.2), 0.01,
|
|
"no-0% at 1.9s");
|
|
advance_clock(100);
|
|
is(cs.marginTop, "100px", "no-0% at 2.0s");
|
|
done_div();
|
|
|
|
// 150px at 0%, 50px at 50%, 100px at 100%
|
|
new_div("margin-top: 100px; -moz-animation: kf2 ease-in 1s alternate infinite");
|
|
is(cs.marginTop, "150px", "no-100% at 0.0s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.2), 0.01,
|
|
"no-100% at 0.1s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.6), 0.01,
|
|
"no-100% at 0.3s");
|
|
advance_clock(200);
|
|
is(cs.marginTop, "50px", "no-100% at 0.5s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.4), 0.01,
|
|
"no-100% at 0.7s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.8), 0.01,
|
|
"no-100% at 0.9s");
|
|
advance_clock(100);
|
|
is(cs.marginTop, "100px", "no-100% at 1.0s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.8), 0.01,
|
|
"no-100% at 1.1s");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.2), 0.01,
|
|
"no-100% at 1.4s");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.6), 0.01,
|
|
"no-100% at 1.7s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.2), 0.01,
|
|
"no-100% at 1.9s");
|
|
advance_clock(100);
|
|
is(cs.marginTop, "150px", "no-100% at 2.0s");
|
|
done_div();
|
|
|
|
|
|
// 50px at 0%, 100px at 25%, 50px at 100%
|
|
new_div("margin-top: 50px; -moz-animation: kf3 ease-out 1s alternate infinite");
|
|
is(cs.marginTop, "50px", "no-0%-no-100% at 0.0s");
|
|
advance_clock(50);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.2), 0.01,
|
|
"no-0%-no-100% at 0.05s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.6), 0.01,
|
|
"no-0%-no-100% at 0.15s");
|
|
advance_clock(100);
|
|
is(cs.marginTop, "100px", "no-0%-no-100% at 0.25s");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.4), 0.01,
|
|
"no-0%-no-100% at 0.55s");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.8), 0.01,
|
|
"no-0%-no-100% at 0.85s");
|
|
advance_clock(150);
|
|
is(cs.marginTop, "50px", "no-0%-no-100% at 1.0s");
|
|
advance_clock(150);
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.8), 0.01,
|
|
"no-0%-no-100% at 1.15s");
|
|
advance_clock(450);
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.2), 0.01,
|
|
"no-0%-no-100% at 1.6s");
|
|
advance_clock(250);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.6), 0.01,
|
|
"no-0%-no-100% at 1.85s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.2), 0.01,
|
|
"no-0%-no-100% at 1.95s");
|
|
advance_clock(50);
|
|
is(cs.marginTop, "50px", "no-0%-no-100% at 2.0s");
|
|
done_div();
|
|
|
|
// Test that non-animatable properties are ignored.
|
|
// Simultaneously, test that the block is still honored, and that
|
|
// we still override the value when two consecutive keyframes have
|
|
// the same value.
|
|
new_div("-moz-animation: kf4 ease 10s");
|
|
is(cs.display, "block",
|
|
"non-animatable properties should be ignored (linear, 0s)");
|
|
is(cs.marginTop, "37px",
|
|
"animatable properties should still apply (linear, 0s)");
|
|
advance_clock(1000);
|
|
is(cs.display, "block",
|
|
"non-animatable properties should be ignored (linear, 1s)");
|
|
is(cs.marginTop, "37px",
|
|
"animatable properties should still apply (linear, 1s)");
|
|
done_div();
|
|
new_div("-moz-animation: kf4 step-start 10s");
|
|
is(cs.display, "block",
|
|
"non-animatable properties should be ignored (step-start, 0s)");
|
|
is(cs.marginTop, "37px",
|
|
"animatable properties should still apply (step-start, 0s)");
|
|
advance_clock(1000);
|
|
is(cs.display, "block",
|
|
"non-animatable properties should be ignored (step-start, 1s)");
|
|
is(cs.marginTop, "37px",
|
|
"animatable properties should still apply (step-start, 1s)");
|
|
done_div();
|
|
|
|
// Test cascading of the keyframes within an @keyframes rule.
|
|
new_div("-moz-animation: kf_cascade1 linear 10s");
|
|
// 0%: 30px
|
|
// 50%: 20px
|
|
// 75%: 20px
|
|
// 85%: 30px
|
|
// 85.1%: 60px
|
|
// 100%: 70px
|
|
is(cs.paddingTop, "30px", "kf_cascade1 at 0s");
|
|
advance_clock(2500);
|
|
is(cs.paddingTop, "25px", "kf_cascade1 at 2.5s");
|
|
advance_clock(2500);
|
|
is(cs.paddingTop, "20px", "kf_cascade1 at 5s");
|
|
advance_clock(2000);
|
|
is(cs.paddingTop, "20px", "kf_cascade1 at 7s");
|
|
advance_clock(500);
|
|
is(cs.paddingTop, "20px", "kf_cascade1 at 7.5s");
|
|
advance_clock(500);
|
|
is(cs.paddingTop, "25px", "kf_cascade1 at 8s");
|
|
advance_clock(500);
|
|
is(cs.paddingTop, "30px", "kf_cascade1 at 8.5s");
|
|
advance_clock(10);
|
|
is(cs.paddingTop, "60px", "kf_cascade1 at 8.51s");
|
|
advance_clock(745);
|
|
is(cs.paddingTop, "65px", "kf_cascade1 at 9.2505s");
|
|
done_div();
|
|
|
|
// Test cascading of the @keyframes rules themselves.
|
|
new_div("-moz-animation: kf_cascade2 linear 10s");
|
|
is(cs.marginTop, "0px", "@keyframes rule with margin-top should be ignored");
|
|
is(cs.marginLeft, "300px", "last @keyframes rule with margin-left should win");
|
|
done_div();
|
|
|
|
/*
|
|
* css3-animations: 3.1. Timing functions for keyframes
|
|
* http://dev.w3.org/csswg/css3-animations/#timing-functions-for-keyframes-
|
|
*/
|
|
new_div("-moz-animation: kf_tf1 ease-in 10s alternate infinite");
|
|
is(cs.paddingBottom, "20px",
|
|
"keyframe timing functions test at 0s (test needed for flush)");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
|
|
"keyframe timing functions test at 1s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.8), 0.01,
|
|
"keyframe timing functions test at 2s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.2), 0.01,
|
|
"keyframe timing functions test at 3s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
|
|
"keyframe timing functions test at 4s");
|
|
advance_clock(1000);
|
|
is(cs.paddingBottom, "160px",
|
|
"keyframe timing functions test at 5s");
|
|
advance_clock(1010); // avoid floating point error
|
|
is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
|
|
"keyframe timing functions test at 6s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.8), 0.01,
|
|
"keyframe timing functions test at 7s");
|
|
advance_clock(990);
|
|
is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
|
|
"keyframe timing functions test at 8s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.6), 0.01,
|
|
"keyframe timing functions test at 9s");
|
|
advance_clock(1000);
|
|
is(cs.paddingBottom, "20px",
|
|
"keyframe timing functions test at 10s");
|
|
advance_clock(20000);
|
|
is(cs.paddingBottom, "20px",
|
|
"keyframe timing functions test at 30s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.6), 0.01,
|
|
"keyframe timing functions test at 31s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
|
|
"keyframe timing functions test at 32s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.8), 0.01,
|
|
"keyframe timing functions test at 33s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
|
|
"keyframe timing functions test at 34s");
|
|
advance_clock(1000);
|
|
is(cs.paddingBottom, "160px",
|
|
"keyframe timing functions test at 35s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
|
|
"keyframe timing functions test at 36s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.2), 0.01,
|
|
"keyframe timing functions test at 37s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.8), 0.01,
|
|
"keyframe timing functions test at 38s");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
|
|
"keyframe timing functions test at 39s");
|
|
advance_clock(1000);
|
|
is(cs.paddingBottom, "20px",
|
|
"keyframe timing functions test at 40s");
|
|
done_div();
|
|
|
|
// spot-check the same thing without alternate
|
|
new_div("-moz-animation: kf_tf1 ease-in 10s infinite");
|
|
is(cs.paddingBottom, "20px",
|
|
"keyframe timing functions test at 0s (test needed for flush)");
|
|
advance_clock(11000);
|
|
is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
|
|
"keyframe timing functions test at 11s");
|
|
advance_clock(3000);
|
|
is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
|
|
"keyframe timing functions test at 14s");
|
|
advance_clock(2000);
|
|
is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
|
|
"keyframe timing functions test at 16s");
|
|
advance_clock(2000);
|
|
is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
|
|
"keyframe timing functions test at 18s");
|
|
done_div();
|
|
|
|
/*
|
|
* css3-animations: 3.2. The 'animation-name' Property
|
|
* http://dev.w3.org/csswg/css3-animations/#the-animation-name-property-
|
|
*/
|
|
|
|
// animation-name is reasonably well-tested up in the tests for Section
|
|
// 2, particularly the tests that "Test that animations continue running
|
|
// when the animation name list is changed."
|
|
|
|
// Test that 'animation-name: none' steps the animation, and setting
|
|
// it again starts a new one.
|
|
|
|
new_div("");
|
|
div.style.MozAnimation = "anim2 ease-in-out 10s";
|
|
is(cs.marginRight, "0px", "after setting animation-name to anim2");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in_out(0.1), 0.01,
|
|
"before changing animation-name to none");
|
|
div.style.MozAnimationName = "none";
|
|
is(cs.marginRight, "0px", "after changing animation-name to none");
|
|
advance_clock(1000);
|
|
is(cs.marginRight, "0px", "after changing animation-name to none plus 1s");
|
|
div.style.MozAnimationName = "anim2";
|
|
is(cs.marginRight, "0px", "after changing animation-name to anim2");
|
|
advance_clock(1000);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in_out(0.1), 0.01,
|
|
"at 1s in animation when animation-name no longer none again");
|
|
div.style.MozAnimationName = "none";
|
|
is(cs.marginRight, "0px", "after changing animation-name to none");
|
|
advance_clock(1000);
|
|
is(cs.marginRight, "0px", "after changing animation-name to none plus 1s");
|
|
done_div();
|
|
|
|
/*
|
|
* css3-animations: 3.3. The 'animation-duration' Property
|
|
* http://dev.w3.org/csswg/css3-animations/#the-animation-duration-property-
|
|
*/
|
|
|
|
// FIXME: test animation-duration of 0 (quite a bit, including interaction
|
|
// with fill-mode, count, and reversing), once I know what the right
|
|
// behavior is.
|
|
|
|
/*
|
|
* css3-animations: 3.4. The 'animation-timing-function' Property
|
|
* http://dev.w3.org/csswg/css3-animations/#animation-timing-function_tag
|
|
*/
|
|
|
|
// tested in tests for section 3.1
|
|
|
|
/*
|
|
* css3-animations: 3.5. The 'animation-iteration-count' Property
|
|
* http://dev.w3.org/csswg/css3-animations/#the-animation-iteration-count-property-
|
|
*/
|
|
new_div("-moz-animation: anim2 ease-in 10s 0.3 forwards");
|
|
is(cs.marginRight, "0px", "animation-iteration-count test 1 at 0s");
|
|
advance_clock(2000);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
|
|
"animation-iteration-count test 1 at 2s");
|
|
advance_clock(900);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.29), 0.01,
|
|
"animation-iteration-count test 1 at 2.9s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
|
|
"animation-iteration-count test 1 at 3s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
|
|
"animation-iteration-count test 1 at 3.1s");
|
|
advance_clock(5000);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
|
|
"animation-iteration-count test 1 at 8.1s");
|
|
done_div();
|
|
|
|
new_div("-moz-animation: anim2 ease-in 10s 0.3, anim3 ease-out 20s 1.2 alternate forwards, anim4 ease-in-out 5s 1.6 forwards");
|
|
is(cs.marginRight, "0px", "animation-iteration-count test 2 at 0s");
|
|
is(cs.marginTop, "0px", "animation-iteration-count test 3 at 0s");
|
|
is(cs.marginBottom, "0px", "animation-iteration-count test 4 at 0s");
|
|
advance_clock(2000);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
|
|
"animation-iteration-count test 2 at 2s");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.1), 0.01,
|
|
"animation-iteration-count test 3 at 2s");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.4), 0.01,
|
|
"animation-iteration-count test 4 at 2s");
|
|
advance_clock(900);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.29), 0.01,
|
|
"animation-iteration-count test 2 at 2.9s");
|
|
advance_clock(200);
|
|
is(cs.marginRight, "0px", "animation-iteration-count test 2 at 3.1s");
|
|
advance_clock(1800);
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.98), 0.01,
|
|
"animation-iteration-count test 4 at 4.9s");
|
|
advance_clock(200);
|
|
is(cs.marginRight, "0px", "animation-iteration-count test 2 at 5.1s");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.02), 0.01,
|
|
"animation-iteration-count test 4 at 5.1s");
|
|
advance_clock(2800);
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.58), 0.01,
|
|
"animation-iteration-count test 4 at 7.9s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
|
|
"animation-iteration-count test 4 at 8s");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
|
|
"animation-iteration-count test 4 at 8.1s");
|
|
advance_clock(11700);
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.99), 0.01,
|
|
"animation-iteration-count test 3 at 19.8s");
|
|
advance_clock(200);
|
|
is(cs.marginTop, "100px", "animation-iteration-count test 3 at 20s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.99), 0.01,
|
|
"animation-iteration-count test 3 at 20.2s");
|
|
advance_clock(3600);
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.81), 0.01,
|
|
"animation-iteration-count test 3 at 23.8s");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.8), 0.01,
|
|
"animation-iteration-count test 3 at 24s");
|
|
advance_clock(200);
|
|
is(cs.marginRight, "0px", "animation-iteration-count test 2 at 25s");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.8), 0.01,
|
|
"animation-iteration-count test 3 at 25s");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
|
|
"animation-iteration-count test 4 at 25s");
|
|
done_div();
|
|
|
|
/*
|
|
* css3-animations: 3.6. The 'animation-direction' Property
|
|
* http://dev.w3.org/csswg/css3-animations/#the-animation-direction-property-
|
|
*/
|
|
|
|
// Tested in tests for sections 3.1 and 3.5.
|
|
|
|
/*
|
|
* css3-animations: 3.7. The 'animation-play-state' Property
|
|
* http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
|
|
*/
|
|
|
|
// simple test with just one animation
|
|
new_div("");
|
|
div.style.MozAnimationTimingFunction = "ease";
|
|
div.style.MozAnimationName = "anim1";
|
|
div.style.MozAnimationDuration = "1s";
|
|
div.style.MozAnimationDirection = "alternate";
|
|
div.style.MozAnimationIterationCount = "2";
|
|
is(cs.marginLeft, "0px", "animation-play-state test 1, at 0s");
|
|
advance_clock(250);
|
|
is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 250ms");
|
|
div.style.MozAnimationPlayState = "paused";
|
|
is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 250ms");
|
|
advance_clock(250);
|
|
is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 still at 500ms");
|
|
div.style.MozAnimationPlayState = "running";
|
|
is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 still at 500ms");
|
|
advance_clock(500);
|
|
is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 1000ms");
|
|
advance_clock(250);
|
|
is(cs.marginLeft, "100px", "animation-play-state test 1 at 1250ms");
|
|
advance_clock(250);
|
|
is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 1500ms");
|
|
div.style.MozAnimationPlayState = "paused";
|
|
is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 1500ms");
|
|
advance_clock(2000);
|
|
is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 3500ms");
|
|
advance_clock(500);
|
|
is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 4000ms");
|
|
div.style.MozAnimationPlayState = "";
|
|
is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 4000ms");
|
|
advance_clock(500);
|
|
is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
|
|
"animation-play-state test 1 at 4500ms");
|
|
advance_clock(250);
|
|
is(cs.marginLeft, "0px", "animation-play-state test 1, at 4750ms");
|
|
advance_clock(250);
|
|
is(cs.marginLeft, "0px", "animation-play-state test 1, at 5000ms");
|
|
done_div();
|
|
|
|
// more complicated test with multiple animations (and different directions
|
|
// and iteration counts)
|
|
new_div("");
|
|
div.style.MozAnimationTimingFunction = "ease-out, ease-in, ease-in-out";
|
|
div.style.MozAnimationName = "anim2, anim3, anim4";
|
|
div.style.MozAnimationDuration = "1s, 2s, 1s";
|
|
div.style.MozAnimationDirection = "alternate, normal, normal";
|
|
div.style.MozAnimationIterationCount = "4, 2, infinite";
|
|
is(cs.marginRight, "0px", "animation-play-state test 2, at 0s");
|
|
is(cs.marginTop, "0px", "animation-play-state test 3, at 0s");
|
|
is(cs.marginBottom, "0px", "animation-play-state test 4, at 0s");
|
|
advance_clock(250);
|
|
div.style.MozAnimationPlayState = "paused, running"; // pause 1 and 3
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
|
|
"animation-play-state test 2 at 250ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.125), 0.01,
|
|
"animation-play-state test 3 at 250ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
|
|
"animation-play-state test 4 at 250ms");
|
|
advance_clock(250);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
|
|
"animation-play-state test 2 at 500ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.25), 0.01,
|
|
"animation-play-state test 3 at 500ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
|
|
"animation-play-state test 4 at 500ms");
|
|
div.style.MozAnimationPlayState = "paused, running, running"; // unpause 3
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
|
|
"animation-play-state test 2 at 500ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.25), 0.01,
|
|
"animation-play-state test 3 at 500ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
|
|
"animation-play-state test 4 at 500ms");
|
|
advance_clock(250);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
|
|
"animation-play-state test 2 at 750ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
|
|
"animation-play-state test 3 at 750ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.5), 0.01,
|
|
"animation-play-state test 4 at 750ms");
|
|
div.style.MozAnimationPlayState = "running, paused"; // unpause 1, pause 2
|
|
advance_clock(0); // notify refresh observers
|
|
advance_clock(250);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.5), 0.01,
|
|
"animation-play-state test 2 at 1000ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
|
|
"animation-play-state test 3 at 1000ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.75), 0.01,
|
|
"animation-play-state test 4 at 1000ms");
|
|
div.style.MozAnimationPlayState = "paused"; // pause all
|
|
advance_clock(0); // notify refresh observers
|
|
advance_clock(3000);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.5), 0.01,
|
|
"animation-play-state test 2 at 4000ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
|
|
"animation-play-state test 3 at 4000ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.75), 0.01,
|
|
"animation-play-state test 4 at 4000ms");
|
|
div.style.MozAnimationPlayState = "running, paused"; // pause 2
|
|
advance_clock(0); // notify refresh observers
|
|
advance_clock(850);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.65), 0.01,
|
|
"animation-play-state test 2 at 4850ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
|
|
"animation-play-state test 3 at 4850ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
|
|
"animation-play-state test 4 at 4850ms");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.35), 0.01,
|
|
"animation-play-state test 2 at 5150ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
|
|
"animation-play-state test 3 at 5150ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.9), 0.01,
|
|
"animation-play-state test 4 at 5150ms");
|
|
advance_clock(2300);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.05), 0.01,
|
|
"animation-play-state test 2 at 7450ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
|
|
"animation-play-state test 3 at 7450ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.2), 0.01,
|
|
"animation-play-state test 4 at 7450ms");
|
|
advance_clock(100);
|
|
is(cs.marginRight, "0px", "animation-play-state test 2 at 7550ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
|
|
"animation-play-state test 3 at 7550ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
|
|
"animation-play-state test 4 at 7550ms");
|
|
div.style.MozAnimationPlayState = "running"; // unpause 2
|
|
advance_clock(0); // notify refresh observers
|
|
advance_clock(1000);
|
|
is(cs.marginRight, "0px", "animation-play-state test 2 at 7550ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.875), 0.01,
|
|
"animation-play-state test 3 at 7550ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
|
|
"animation-play-state test 4 at 7550ms");
|
|
advance_clock(500);
|
|
is(cs.marginRight, "0px", "animation-play-state test 2 at 8050ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.125), 0.01,
|
|
"animation-play-state test 3 at 8050ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
|
|
"animation-play-state test 4 at 8050ms");
|
|
advance_clock(1000);
|
|
is(cs.marginRight, "0px", "animation-play-state test 2 at 9050ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.625), 0.01,
|
|
"animation-play-state test 3 at 9050ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
|
|
"animation-play-state test 4 at 9050ms");
|
|
advance_clock(500);
|
|
is(cs.marginRight, "0px", "animation-play-state test 2 at 9550ms");
|
|
is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.875), 0.01,
|
|
"animation-play-state test 3 at 9550ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
|
|
"animation-play-state test 4 at 9550ms");
|
|
advance_clock(500);
|
|
is(cs.marginRight, "0px", "animation-play-state test 2 at 10050ms");
|
|
is(cs.marginTop, "0px", "animation-play-state test 3 at 10050ms");
|
|
is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
|
|
"animation-play-state test 4 at 10050ms");
|
|
done_div();
|
|
|
|
/*
|
|
* css3-animations: 3.8. The 'animation-delay' Property
|
|
* http://dev.w3.org/csswg/css3-animations/#the-animation-delay-property-
|
|
*/
|
|
|
|
// test positive delay
|
|
new_div("-moz-animation: anim2 1s 0.5s ease-out");
|
|
is(cs.marginRight, "0px", "positive delay test at 0ms");
|
|
advance_clock(400);
|
|
is(cs.marginRight, "0px", "positive delay test at 400ms");
|
|
advance_clock(100);
|
|
is(cs.marginRight, "0px", "positive delay test at 500ms");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
|
|
"positive delay test at 500ms");
|
|
done_div();
|
|
|
|
// test dynamic changes to delay (i.e., that we only check delay once,
|
|
// at the very start of the animation)
|
|
new_div("-moz-animation: anim2 1s 0.5s ease-out");
|
|
is(cs.marginRight, "0px", "dynamic delay delay test at 0ms");
|
|
advance_clock(400);
|
|
is(cs.marginRight, "0px", "dynamic delay delay test at 400ms");
|
|
div.style.MozAnimationDelay = "0.2s";
|
|
advance_clock(0);
|
|
advance_clock(100);
|
|
is(cs.marginRight, "0px", "dynamic delay delay test at 500ms");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
|
|
"dynamic delay delay test at 500ms");
|
|
div.style.MozAnimationDelay = "1s";
|
|
advance_clock(0);
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.2), 0.01,
|
|
"dynamic delay delay test at 500ms");
|
|
done_div();
|
|
|
|
// test delay and play-state interaction
|
|
new_div("-moz-animation: anim2 1s 0.5s ease-out");
|
|
is(cs.marginRight, "0px", "delay and play-state delay test at 0ms");
|
|
advance_clock(400);
|
|
is(cs.marginRight, "0px", "delay and play-state delay test at 400ms");
|
|
div.style.MozAnimationPlayState = "paused";
|
|
advance_clock(0);
|
|
advance_clock(100);
|
|
is(cs.marginRight, "0px", "delay and play-state delay test at 500ms");
|
|
advance_clock(500);
|
|
is(cs.marginRight, "0px", "delay and play-state delay test at 1000ms");
|
|
div.style.MozAnimationPlayState = "running";
|
|
advance_clock(0);
|
|
advance_clock(100);
|
|
is(cs.marginRight, "0px", "delay and play-state delay test at 1100ms");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
|
|
"delay and play-state delay test at 1200ms");
|
|
div.style.MozAnimationPlayState = "paused";
|
|
advance_clock(0);
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
|
|
"delay and play-state delay test at 1300ms");
|
|
done_div();
|
|
|
|
// test negative delay and implicit starting values
|
|
new_div("margin-top: 1000px");
|
|
advance_clock(300);
|
|
div.style.marginTop = "100px";
|
|
div.style.MozAnimation = "kf1 1s -0.1s ease-in";
|
|
is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_in(0.2), 0.01,
|
|
"delay and implicit starting values test");
|
|
done_div();
|
|
|
|
// test large negative delay that causes the animation to start
|
|
// in the fourth iteration
|
|
new_div("-moz-animation: anim2 1s -3.6s ease-in 5 alternate forwards");
|
|
listen(); // rely on no flush having happened yet
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.4), 0.01,
|
|
"large negative delay test at 0ms");
|
|
check_events([{ type: 'animationstart', target: div,
|
|
animationName: 'anim2', elapsedTime: 3.6 }],
|
|
"right after start in large negative delay test");
|
|
advance_clock(380);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.02), 0.01,
|
|
"large negative delay test at 380ms");
|
|
check_events([]);
|
|
advance_clock(20);
|
|
is(cs.marginRight, "0px", "large negative delay test at 400ms");
|
|
check_events([{ type: 'animationiteration', target: div,
|
|
animationName: 'anim2', elapsedTime: 4.0 }],
|
|
"right after start in large negative delay test");
|
|
advance_clock(800);
|
|
is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
|
|
"large negative delay test at 1200ms");
|
|
check_events([]);
|
|
advance_clock(200);
|
|
is(cs.marginRight, "100px", "large negative delay test at 1400ms");
|
|
check_events([{ type: 'animationend', target: div,
|
|
animationName: 'anim2', elapsedTime: 5.0 }],
|
|
"right after start in large negative delay test");
|
|
done_div();
|
|
|
|
/*
|
|
* css3-animations: 3.9. The 'animation-fill-mode' Property
|
|
* http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
|
|
*/
|
|
|
|
// animation-fill-mode is tested in the tests for section (2).
|
|
|
|
/*
|
|
* css3-animations: 3.10. The 'animation' Shorthand Property
|
|
* http://dev.w3.org/csswg/css3-animations/#the-animation-shorthand-property-
|
|
*/
|
|
|
|
// shorthand vs. longhand is adequately tested by the
|
|
// property_database.js-based tests.
|
|
|
|
/**
|
|
* Basic tests of animations on pseudo-elements
|
|
*/
|
|
new_div("");
|
|
listen();
|
|
div.id = "withbefore";
|
|
var cs_before = getComputedStyle(div, ":before");
|
|
is(cs_before.marginRight, "0px", ":before test at 0ms");
|
|
advance_clock(400);
|
|
is(cs_before.marginRight, "40px", ":before test at 400ms");
|
|
advance_clock(800);
|
|
is(cs_before.marginRight, "80px", ":before test at 1200ms");
|
|
is(cs.marginRight, "0px", ":before animation should not affect element");
|
|
advance_clock(800);
|
|
is(cs_before.marginRight, "0px", ":before test at 2000ms");
|
|
advance_clock(300);
|
|
is(cs_before.marginRight, "30px", ":before test at 2300ms");
|
|
check_events([], "no events should be fired for animations on :before");
|
|
done_div();
|
|
|
|
new_div("");
|
|
listen();
|
|
div.id = "withafter";
|
|
var cs_after = getComputedStyle(div, ":after");
|
|
is(cs_after.marginRight, "0px", ":after test at 0ms");
|
|
advance_clock(400);
|
|
is(cs_after.marginRight, "40px", ":after test at 400ms");
|
|
advance_clock(800);
|
|
is(cs_after.marginRight, "80px", ":after test at 1200ms");
|
|
is(cs.marginRight, "0px", ":after animation should not affect element");
|
|
advance_clock(800);
|
|
is(cs_after.marginRight, "0px", ":after test at 2000ms");
|
|
advance_clock(300);
|
|
is(cs_after.marginRight, "30px", ":after test at 2300ms");
|
|
check_events([], "no events should be fired for animations on :after");
|
|
done_div();
|
|
|
|
/**
|
|
* Test handling of properties that are present in only some of the
|
|
* keyframes.
|
|
*/
|
|
new_div("-moz-animation: multiprop 1s ease-in-out alternate infinite");
|
|
is(cs.paddingTop, "10px", "multiprop top at 0ms");
|
|
is(cs.paddingLeft, "30px", "multiprop top at 0ms");
|
|
advance_clock(100);
|
|
is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.2), 0.01,
|
|
"multiprop top at 100ms");
|
|
is_approx(px_to_num(cs.paddingLeft), 30 + 20 * gTF.ease(0.4), 0.01,
|
|
"multiprop left at 100ms");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.6), 0.01,
|
|
"multiprop top at 300ms");
|
|
is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.1), 0.01,
|
|
"multiprop left at 300ms");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.paddingTop), 40 + 40 * gTF.ease_in_out(0.4), 0.01,
|
|
"multiprop top at 600ms");
|
|
is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.7), 0.01,
|
|
"multiprop left at 600ms");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.paddingTop), 80 - 80 * gTF.ease_in(0.2), 0.01,
|
|
"multiprop top at 800ms");
|
|
is_approx(px_to_num(cs.paddingLeft), 60 - 60 * gTF.ease_in(0.2), 0.01,
|
|
"multiprop left at 800ms");
|
|
advance_clock(400);
|
|
is_approx(px_to_num(cs.paddingTop), 80 - 80 * gTF.ease_in(0.2), 0.01,
|
|
"multiprop top at 1200ms");
|
|
is_approx(px_to_num(cs.paddingLeft), 60 - 60 * gTF.ease_in(0.2), 0.01,
|
|
"multiprop left at 1200ms");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.paddingTop), 40 + 40 * gTF.ease_in_out(0.4), 0.01,
|
|
"multiprop top at 1400ms");
|
|
is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.7), 0.01,
|
|
"multiprop left at 1400ms");
|
|
advance_clock(300);
|
|
is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.6), 0.01,
|
|
"multiprop top at 1700ms");
|
|
is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.1), 0.01,
|
|
"multiprop left at 1700ms");
|
|
advance_clock(200);
|
|
is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.2), 0.01,
|
|
"multiprop top at 1900ms");
|
|
is_approx(px_to_num(cs.paddingLeft), 30 + 20 * gTF.ease(0.4), 0.01,
|
|
"multiprop left at 1900ms");
|
|
done_div();
|
|
|
|
// Test for https://bugzilla.mozilla.org/show_bug.cgi?id=651456 -- make
|
|
// sure that refreshing of animations doesn't break when we get two
|
|
// refreshes with the same timestamp.
|
|
new_div("-moz-animation: anim2 1s linear");
|
|
is(cs.marginRight, "0px", "bug 651456 at 0ms");
|
|
advance_clock(100);
|
|
is(cs.marginRight, "10px", "bug 651456 at 100ms (1)");
|
|
advance_clock(0); // still forces a refresh
|
|
is(cs.marginRight, "10px", "bug 651456 at 100ms (2)");
|
|
advance_clock(100);
|
|
is(cs.marginRight, "20px", "bug 651456 at 200ms");
|
|
done_div();
|
|
|
|
// Test that UA !important rules override animations.
|
|
// This test depends on forms.css having a rule
|
|
// select { line-height: !important }
|
|
// If that rule changes, we should rewrite it to depend on a different rule.
|
|
new_element("select", "");
|
|
var default_line_height = cs.lineHeight;
|
|
done_div();
|
|
new_element("select", "-moz-animation: uaoverride 2s linear infinite");
|
|
is(cs.lineHeight, default_line_height,
|
|
"animations should not override UA !important at 0ms");
|
|
is(cs.marginTop, "20px",
|
|
"rest of animation should still work when UA !important present at 0ms");
|
|
advance_clock(200);
|
|
is(cs.lineHeight, default_line_height,
|
|
"animations should not override UA !important at 200ms");
|
|
is(cs.marginTop, "40px",
|
|
"rest of animation should still work when UA !important present at 200ms");
|
|
done_div();
|
|
|
|
// Test interaction of animations and restyling (Bug 686656).
|
|
// This test depends on kf3 getting its 0% and 100% values from the
|
|
// rules below it in the cascade; we're checking that the animation
|
|
// isn't rebuilt when the restyles happen.
|
|
new_div("-moz-animation: kf3 1s linear forwards");
|
|
is(cs.marginTop, "0px", "bug 686656 test 1 at 0ms");
|
|
advance_clock(250);
|
|
display.style.color = "blue";
|
|
is(cs.marginTop, "100px", "bug 686656 test 1 at 250ms");
|
|
advance_clock(375);
|
|
is(cs.marginTop, "50px", "bug 686656 test 1 at 625ms");
|
|
advance_clock(375);
|
|
is(cs.marginTop, "0px", "bug 686656 test 1 at 1000ms");
|
|
done_div();
|
|
display.style.color = "";
|
|
|
|
// Test interaction of animations and restyling (Bug 686656),
|
|
// with reframing.
|
|
// This test depends on kf3 getting its 0% and 100% values from the
|
|
// rules below it in the cascade; we're checking that the animation
|
|
// isn't rebuilt when the restyles happen.
|
|
new_div("-moz-animation: kf3 1s linear forwards");
|
|
is(cs.marginTop, "0px", "bug 686656 test 2 at 0ms");
|
|
advance_clock(250);
|
|
display.style.overflow = "scroll";
|
|
is(cs.marginTop, "100px", "bug 686656 test 2 at 250ms");
|
|
advance_clock(375);
|
|
is(cs.marginTop, "50px", "bug 686656 test 2 at 625ms");
|
|
advance_clock(375);
|
|
is(cs.marginTop, "0px", "bug 686656 test 2 at 1000ms");
|
|
done_div();
|
|
display.style.overflow = "";
|
|
|
|
// Test that cascading between keyframes rules is per-property rather
|
|
// than per-rule (bug ), and that the timing function isn't taken from a
|
|
// rule that's skipped. (Bug 738003)
|
|
new_div("-moz-animation: cascade 1s linear forwards; position: relative");
|
|
is(cs.top, "0px", "cascade test (top) at 0ms");
|
|
is(cs.left, "0px", "cascade test (top) at 0ms");
|
|
advance_clock(125);
|
|
is(cs.top, "0px", "cascade test (top) at 125ms");
|
|
is(cs.left, "50px", "cascade test (top) at 125ms");
|
|
advance_clock(125);
|
|
is(cs.top, "0px", "cascade test (top) at 250ms");
|
|
is(cs.left, "100px", "cascade test (top) at 250ms");
|
|
advance_clock(125);
|
|
is(cs.top, "50px", "cascade test (top) at 375ms");
|
|
is(cs.left, "100px", "cascade test (top) at 375ms");
|
|
advance_clock(125);
|
|
is(cs.top, "100px", "cascade test (top) at 500ms");
|
|
is(cs.left, "100px", "cascade test (top) at 500ms");
|
|
advance_clock(125);
|
|
is(cs.top, "100px", "cascade test (top) at 625ms");
|
|
is(cs.left, "50px", "cascade test (top) at 625ms");
|
|
advance_clock(125);
|
|
is(cs.top, "100px", "cascade test (top) at 750ms");
|
|
is(cs.left, "0px", "cascade test (top) at 750ms");
|
|
advance_clock(125);
|
|
is(cs.top, "50px", "cascade test (top) at 875ms");
|
|
is(cs.left, "0px", "cascade test (top) at 875ms");
|
|
advance_clock(125);
|
|
is(cs.top, "0px", "cascade test (top) at 1000ms");
|
|
is(cs.left, "0px", "cascade test (top) at 1000ms");
|
|
done_div();
|
|
|
|
new_div("-moz-animation: cascade2 8s linear forwards");
|
|
is(cs.textIndent, "0px", "cascade2 test at 0s");
|
|
advance_clock(1000);
|
|
is(cs.textIndent, "25px", "cascade2 test at 1s");
|
|
advance_clock(1000);
|
|
is(cs.textIndent, "50px", "cascade2 test at 2s");
|
|
advance_clock(1000);
|
|
is(cs.textIndent, "25px", "cascade2 test at 3s");
|
|
advance_clock(1000);
|
|
is(cs.textIndent, "0px", "cascade2 test at 4s");
|
|
advance_clock(3000);
|
|
is(cs.textIndent, "75px", "cascade2 test at 7s");
|
|
advance_clock(1000);
|
|
is(cs.textIndent, "100px", "cascade2 test at 8s");
|
|
done_div();
|
|
|
|
SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
|
|
|
|
</script>
|
|
</pre>
|
|
</body>
|
|
</html>
|