The Tor Browser / annotate

layout/style/test/test_animations.html@7e26c7da4463 (annotated)

layout/style/test/test_animations.html

Wed, 31 Dec 2014 06:55:50 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Wed, 31 Dec 2014 06:55:50 +0100
changeset 2
7e26c7da4463
permissions
-rw-r--r--

Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2

michael@0 1 <!DOCTYPE HTML>
michael@0 2 <html>
michael@0 3 <!--
michael@0 4 https://bugzilla.mozilla.org/show_bug.cgi?id=435442
michael@0 5 -->
michael@0 6 <!--
michael@0 7
michael@0 8 ====== PLEASE KEEP THIS IN SYNC WITH test_animations_omta.html =======
michael@0 9
michael@0 10 test_animations_omta.html mimicks the content of this file but with
michael@0 11 extra machinery for testing animation values on the compositor thread.
michael@0 12
michael@0 13 If you are making changes to this file or to test_animations_omta.html, please
michael@0 14 try to keep them consistent where appropriate.
michael@0 15
michael@0 16 -->
michael@0 17 <head>
michael@0 18 <title>Test for css3-animations (Bug 435442)</title>
michael@0 19 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
michael@0 20 <script type="application/javascript" src="animation_utils.js"></script>
michael@0 21 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
michael@0 22 <style type="text/css">
michael@0 23 @keyframes anim1 {
michael@0 24 0% { margin-left: 0px }
michael@0 25 50% { margin-left: 80px }
michael@0 26 100% { margin-left: 100px }
michael@0 27 }
michael@0 28 @keyframes anim2 {
michael@0 29 from { margin-right: 0 } to { margin-right: 100px }
michael@0 30 }
michael@0 31 @keyframes anim3 {
michael@0 32 from { margin-top: 0 } to { margin-top: 100px }
michael@0 33 }
michael@0 34 @keyframes anim4 {
michael@0 35 from { margin-bottom: 0 } to { margin-bottom: 100px }
michael@0 36 }
michael@0 37 @keyframes anim5 {
michael@0 38 from { margin-left: 0 } to { margin-left: 100px }
michael@0 39 }
michael@0 40
michael@0 41 @keyframes kf1 {
michael@0 42 50% { margin-top: 50px }
michael@0 43 to { margin-top: 150px }
michael@0 44 }
michael@0 45 @keyframes kf2 {
michael@0 46 from { margin-top: 150px }
michael@0 47 50% { margin-top: 50px }
michael@0 48 }
michael@0 49 @keyframes kf3 {
michael@0 50 25% { margin-top: 100px }
michael@0 51 }
michael@0 52 @keyframes kf4 {
michael@0 53 to, from { display: inline; margin-top: 37px }
michael@0 54 }
michael@0 55 @keyframes kf_cascade1 {
michael@0 56 from { padding-top: 50px }
michael@0 57 50%, from { padding-top: 30px } /* wins: 0% */
michael@0 58 75%, 85%, 50% { padding-top: 20px } /* wins: 75%, 50% */
michael@0 59 100%, 85% { padding-top: 70px } /* wins: 100% */
michael@0 60 85.1% { padding-top: 60px } /* wins: 85.1% */
michael@0 61 85% { padding-top: 30px } /* wins: 85% */
michael@0 62 }
michael@0 63 @keyframes kf_cascade2 { from, to { margin-top: 100px } }
michael@0 64 @keyframes kf_cascade2 { from, to { margin-left: 200px } }
michael@0 65 @keyframes kf_cascade2 { from, to { margin-left: 300px } }
michael@0 66 @keyframes kf_tf1 {
michael@0 67 0% { padding-bottom: 20px; animation-timing-function: ease }
michael@0 68 25% { padding-bottom: 60px; }
michael@0 69 50% { padding-bottom: 160px; animation-timing-function: steps(5) }
michael@0 70 75% { padding-bottom: 120px; animation-timing-function: linear }
michael@0 71 100% { padding-bottom: 20px; animation-timing-function: ease-out }
michael@0 72 }
michael@0 73
michael@0 74 @keyframes always_fifty {
michael@0 75 from, to { margin-left: 50px }
michael@0 76 }
michael@0 77
michael@0 78 #withbefore::before, #withafter::after {
michael@0 79 content: "";
michael@0 80 animation: anim2 1s linear alternate 3;
michael@0 81 }
michael@0 82
michael@0 83 @keyframes multiprop {
michael@0 84 0% {
michael@0 85 padding-top: 10px; padding-left: 30px;
michael@0 86 animation-timing-function: ease;
michael@0 87 }
michael@0 88 25% {
michael@0 89 padding-left: 50px;
michael@0 90 animation-timing-function: ease-out;
michael@0 91 }
michael@0 92 50% {
michael@0 93 padding-top: 40px;
michael@0 94 }
michael@0 95 75% {
michael@0 96 padding-top: 80px; padding-left: 60px;
michael@0 97 animation-timing-function: ease-in;
michael@0 98 }
michael@0 99 }
michael@0 100
michael@0 101 @keyframes uaoverride {
michael@0 102 0%, 100% { line-height: 3; margin-top: 20px }
michael@0 103 50% { margin-top: 120px }
michael@0 104 }
michael@0 105
michael@0 106 @keyframes cascade {
michael@0 107 0%, 25%, 100% { top: 0 }
michael@0 108 50%, 75% { top: 100px }
michael@0 109 0%, 75%, 100% { left: 0 }
michael@0 110 25%, 50% { left: 100px }
michael@0 111 }
michael@0 112 @keyframes cascade2 {
michael@0 113 0% { text-indent: 0 }
michael@0 114 25% { text-indent: 30px; animation-timing-function: ease-in } /* beaten by rule below */
michael@0 115 50% { text-indent: 0 }
michael@0 116 25% { text-indent: 50px }
michael@0 117 100% { text-indent: 100px }
michael@0 118 }
michael@0 119
michael@0 120 @keyframes primitives1 {
michael@0 121 from { -moz-transform: rotate(0deg) translateX(0px) scaleX(1)
michael@0 122 translate(0px) scale3d(1, 1, 1); }
michael@0 123 to { -moz-transform: rotate(270deg) translate3d(0px, 0px, 0px) scale(1)
michael@0 124 translateY(0px) scaleY(1); }
michael@0 125 }
michael@0 126
michael@0 127 @keyframes important1 {
michael@0 128 from { margin-top: 50px; }
michael@0 129 50% { margin-top: 150px !important; } /* ignored */
michael@0 130 to { margin-top: 100px; }
michael@0 131 }
michael@0 132
michael@0 133 @keyframes important2 {
michael@0 134 from { margin-top: 50px;
michael@0 135 margin-bottom: 100px; }
michael@0 136 to { margin-top: 150px !important; /* ignored */
michael@0 137 margin-bottom: 50px; }
michael@0 138 }
michael@0 139 </style>
michael@0 140 </head>
michael@0 141 <body>
michael@0 142 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435442">Mozilla Bug 435442</a>
michael@0 143 <div id="display"></div>
michael@0 144 <pre id="test">
michael@0 145 <script type="application/javascript">
michael@0 146 "use strict";
michael@0 147
michael@0 148 /** Test for css3-animations (Bug 435442) **/
michael@0 149
michael@0 150 var e = new AnimationEvent("foo",
michael@0 151 {
michael@0 152 bubbles: true,
michael@0 153 cancelable: true,
michael@0 154 animationName: "name",
michael@0 155 elapsedTime: 0.5,
michael@0 156 pseudoElement: "pseudo"
michael@0 157 });
michael@0 158 is(e.bubbles, true);
michael@0 159 is(e.cancelable, true);
michael@0 160 is(e.animationName, "name");
michael@0 161 is(e.elapsedTime, 0.5);
michael@0 162 is(e.pseudoElement, "pseudo");
michael@0 163 is(e.isTrusted, false)
michael@0 164
michael@0 165 function advance_clock(milliseconds) {
michael@0 166 SpecialPowers.DOMWindowUtils.advanceTimeAndRefresh(milliseconds);
michael@0 167 }
michael@0 168
michael@0 169 var display = document.getElementById("display");
michael@0 170 var div = null;
michael@0 171 var cs = null;
michael@0 172 var events_received = [];
michael@0 173 function new_div(style) {
michael@0 174 return new_element("div", style);
michael@0 175 }
michael@0 176 function new_element(tagname, style) {
michael@0 177 if (div != null || cs != null) {
michael@0 178 ok(false, "test author forgot to call done_div");
michael@0 179 }
michael@0 180 if (typeof(style) != "string") {
michael@0 181 ok(false, "test author forgot to pass argument");
michael@0 182 }
michael@0 183 div = document.createElement(tagname);
michael@0 184 div.setAttribute("style", style);
michael@0 185 display.appendChild(div);
michael@0 186 cs = getComputedStyle(div, "");
michael@0 187 }
michael@0 188 function listen() {
michael@0 189 events_received = [];
michael@0 190 function listener(event) {
michael@0 191 events_received.push(event);
michael@0 192 }
michael@0 193 div.addEventListener("animationstart", listener, false);
michael@0 194 div.addEventListener("animationiteration", listener, false);
michael@0 195 div.addEventListener("animationend", listener, false);
michael@0 196 }
michael@0 197 function check_events(events_expected, desc) {
michael@0 198 // This function checks that the list of events_expected matches
michael@0 199 // the received events -- but it only checks the properties that
michael@0 200 // are present on events_expected.
michael@0 201 is(events_received.length, events_expected.length,
michael@0 202 "number of events received for " + desc);
michael@0 203 for (var i = 0,
michael@0 204 i_end = Math.min(events_expected.length, events_received.length);
michael@0 205 i != i_end; ++i) {
michael@0 206 var exp = events_expected[i];
michael@0 207 var rec = events_received[i];
michael@0 208 for (var prop in exp) {
michael@0 209 if (prop == "elapsedTime") {
michael@0 210 // Allow floating point error.
michael@0 211 ok(Math.abs(rec.elapsedTime - exp.elapsedTime) < 0.000002,
michael@0 212 "events[" + i + "]." + prop + " for " + desc +
michael@0 213 " received=" + rec.elapsedTime + " expected=" + exp.elapsedTime);
michael@0 214 } else {
michael@0 215 is(rec[prop], exp[prop], "events[" + i + "]." + prop + " for " + desc);
michael@0 216 }
michael@0 217 }
michael@0 218 }
michael@0 219 for (var i = events_expected.length; i < events_received.length; ++i) {
michael@0 220 ok(false, "unexpected " + events_received[i].type + " event for " + desc);
michael@0 221 }
michael@0 222 events_received = [];
michael@0 223 }
michael@0 224 function done_div() {
michael@0 225 display.removeChild(div);
michael@0 226 div = null;
michael@0 227 cs = null;
michael@0 228 if (events_received.length) {
michael@0 229 ok(false, "caller should have called check_events");
michael@0 230 }
michael@0 231 }
michael@0 232
michael@0 233 // take over the refresh driver right from the start.
michael@0 234 advance_clock(0);
michael@0 235
michael@0 236 /*
michael@0 237 * css3-animations: 2. Animations
michael@0 238 * http://dev.w3.org/csswg/css3-animations/#animations
michael@0 239 */
michael@0 240
michael@0 241 // Test that animations don't affect the computed value before the
michael@0 242 // start of the animation or after its end. Test without
michael@0 243 // animation-fill-mode, but then repeat the test with all the values of
michael@0 244 // animation-fill-mode.
michael@0 245 function test_fill_mode(fill_mode, fills_backwards, fills_forwards)
michael@0 246 {
michael@0 247 var style = "margin-left: 30px; animation: 10s 3s anim1 linear";
michael@0 248 var desc;
michael@0 249 if (fill_mode.length > 0) {
michael@0 250 style += " " + fill_mode;
michael@0 251 desc = "fill mode " + fill_mode + ": ";
michael@0 252 } else {
michael@0 253 desc = "default fill mode: ";
michael@0 254 }
michael@0 255 new_div(style);
michael@0 256 listen();
michael@0 257 if (fills_backwards)
michael@0 258 is(cs.marginLeft, "0px", desc + "does affect value during delay (0s)");
michael@0 259 else
michael@0 260 is(cs.marginLeft, "30px", desc + "doesn't affect value during delay (0s)");
michael@0 261 advance_clock(2000);
michael@0 262 if (fills_backwards)
michael@0 263 is(cs.marginLeft, "0px", desc + "does affect value during delay (2s)");
michael@0 264 else
michael@0 265 is(cs.marginLeft, "30px", desc + "doesn't affect value during delay (2s)");
michael@0 266 check_events([], "before start in test_fill_mode");
michael@0 267 advance_clock(1000);
michael@0 268 check_events([{ type: 'animationstart', target: div,
michael@0 269 bubbles: true, cancelable: false,
michael@0 270 animationName: 'anim1', elapsedTime: 0.0,
michael@0 271 pseudoElement: "" }],
michael@0 272 "right after start in test_fill_mode");
michael@0 273 if (fills_backwards)
michael@0 274 is(cs.marginLeft, "0px", desc + "affects value at start of animation");
michael@0 275 advance_clock(125);
michael@0 276 is(cs.marginLeft, "2px", desc + "affects value during animation");
michael@0 277 advance_clock(2375);
michael@0 278 is(cs.marginLeft, "40px", desc + "affects value during animation");
michael@0 279 advance_clock(2500);
michael@0 280 is(cs.marginLeft, "80px", desc + "affects value during animation");
michael@0 281 advance_clock(2500);
michael@0 282 is(cs.marginLeft, "90px", desc + "affects value during animation");
michael@0 283 advance_clock(2375);
michael@0 284 is(cs.marginLeft, "99.5px", desc + "affects value during animation");
michael@0 285 check_events([], "before end in test_fill_mode");
michael@0 286 advance_clock(125);
michael@0 287 check_events([{ type: 'animationend', target: div,
michael@0 288 bubbles: true, cancelable: false,
michael@0 289 animationName: 'anim1', elapsedTime: 10.0,
michael@0 290 pseudoElement: "" }],
michael@0 291 "right after end in test_fill_mode");
michael@0 292 if (fills_forwards)
michael@0 293 is(cs.marginLeft, "100px", desc + "affects value at end of animation");
michael@0 294 advance_clock(10);
michael@0 295 if (fills_forwards)
michael@0 296 is(cs.marginLeft, "100px", desc + "does affect value after animation");
michael@0 297 else
michael@0 298 is(cs.marginLeft, "30px", desc + "does not affect value after animation");
michael@0 299 done_div();
michael@0 300 }
michael@0 301 test_fill_mode("", false, false);
michael@0 302 test_fill_mode("none", false, false);
michael@0 303 test_fill_mode("forwards", false, true);
michael@0 304 test_fill_mode("backwards", true, false);
michael@0 305 test_fill_mode("both", true, true);
michael@0 306
michael@0 307 // Test that animations continue running when the animation name
michael@0 308 // list is changed.
michael@0 309 new_div("animation: anim1 linear 10s");
michael@0 310 is(cs.getPropertyValue("margin-top"), "0px",
michael@0 311 "just anim1, margin-top at start");
michael@0 312 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 313 "just anim1, margin-right at start");
michael@0 314 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 315 "just anim1, margin-bottom at start");
michael@0 316 is(cs.getPropertyValue("margin-left"), "0px",
michael@0 317 "just anim1, margin-left at start");
michael@0 318 advance_clock(1000);
michael@0 319 is(cs.getPropertyValue("margin-top"), "0px",
michael@0 320 "just anim1, margin-top at 1s");
michael@0 321 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 322 "just anim1, margin-right at 1s");
michael@0 323 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 324 "just anim1, margin-bottom at 1s");
michael@0 325 is(cs.getPropertyValue("margin-left"), "16px",
michael@0 326 "just anim1, margin-left at 1s");
michael@0 327 // append anim2
michael@0 328 div.style.animation = "anim1 linear 10s, anim2 linear 10s";
michael@0 329 is(cs.getPropertyValue("margin-top"), "0px",
michael@0 330 "anim1 + anim2, margin-top at 1s");
michael@0 331 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 332 "anim1 + anim2, margin-right at 1s");
michael@0 333 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 334 "anim1 + anim2, margin-bottom at 1s");
michael@0 335 is(cs.getPropertyValue("margin-left"), "16px",
michael@0 336 "anim1 + anim2, margin-left at 1s");
michael@0 337 advance_clock(1000);
michael@0 338 is(cs.getPropertyValue("margin-top"), "0px",
michael@0 339 "anim1 + anim2, margin-top at 2s");
michael@0 340 is(cs.getPropertyValue("margin-right"), "10px",
michael@0 341 "anim1 + anim2, margin-right at 2s");
michael@0 342 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 343 "anim1 + anim2, margin-bottom at 2s");
michael@0 344 is(cs.getPropertyValue("margin-left"), "32px",
michael@0 345 "anim1 + anim2, margin-left at 2s");
michael@0 346 // prepend anim3
michael@0 347 div.style.animation = "anim3 linear 10s, anim1 linear 10s, anim2 linear 10s";
michael@0 348 is(cs.getPropertyValue("margin-top"), "0px",
michael@0 349 "anim3 + anim1 + anim2, margin-top at 2s");
michael@0 350 is(cs.getPropertyValue("margin-right"), "10px",
michael@0 351 "anim3 + anim1 + anim2, margin-right at 2s");
michael@0 352 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 353 "anim3 + anim1 + anim2, margin-bottom at 2s");
michael@0 354 is(cs.getPropertyValue("margin-left"), "32px",
michael@0 355 "anim3 + anim1 + anim2, margin-left at 2s");
michael@0 356 advance_clock(1000);
michael@0 357 is(cs.getPropertyValue("margin-top"), "10px",
michael@0 358 "anim3 + anim1 + anim2, margin-top at 3s");
michael@0 359 is(cs.getPropertyValue("margin-right"), "20px",
michael@0 360 "anim3 + anim1 + anim2, margin-right at 3s");
michael@0 361 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 362 "anim3 + anim1 + anim2, margin-bottom at 3s");
michael@0 363 is(cs.getPropertyValue("margin-left"), "48px",
michael@0 364 "anim3 + anim1 + anim2, margin-left at 3s");
michael@0 365 // remove anim2 from end
michael@0 366 div.style.animation = "anim3 linear 10s, anim1 linear 10s";
michael@0 367 is(cs.getPropertyValue("margin-top"), "10px",
michael@0 368 "anim3 + anim1, margin-top at 3s");
michael@0 369 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 370 "anim3 + anim1, margin-right at 3s");
michael@0 371 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 372 "anim3 + anim1, margin-bottom at 3s");
michael@0 373 is(cs.getPropertyValue("margin-left"), "48px",
michael@0 374 "anim3 + anim1, margin-left at 3s");
michael@0 375 advance_clock(1000);
michael@0 376 is(cs.getPropertyValue("margin-top"), "20px",
michael@0 377 "anim3 + anim1, margin-top at 4s");
michael@0 378 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 379 "anim3 + anim1, margin-right at 4s");
michael@0 380 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 381 "anim3 + anim1, margin-bottom at 4s");
michael@0 382 is(cs.getPropertyValue("margin-left"), "64px",
michael@0 383 "anim3 + anim1, margin-left at 4s");
michael@0 384 // swap anim1 and anim3, change duration of anim3
michael@0 385 div.style.animation = "anim1 linear 10s, anim3 linear 5s";
michael@0 386 is(cs.getPropertyValue("margin-top"), "40px",
michael@0 387 "anim1 + anim3, margin-top at 4s");
michael@0 388 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 389 "anim1 + anim3, margin-right at 4s");
michael@0 390 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 391 "anim1 + anim3, margin-bottom at 4s");
michael@0 392 is(cs.getPropertyValue("margin-left"), "64px",
michael@0 393 "anim1 + anim3, margin-left at 4s");
michael@0 394 advance_clock(1000);
michael@0 395 is(cs.getPropertyValue("margin-top"), "60px",
michael@0 396 "anim1 + anim3, margin-top at 5s");
michael@0 397 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 398 "anim1 + anim3, margin-right at 5s");
michael@0 399 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 400 "anim1 + anim3, margin-bottom at 5s");
michael@0 401 is(cs.getPropertyValue("margin-left"), "80px",
michael@0 402 "anim1 + anim3, margin-left at 5s");
michael@0 403 // list anim1 twice, last duration wins, original start time still applies
michael@0 404 div.style.animation = "anim1 linear 10s, anim3 linear 5s, anim1 linear 20s";
michael@0 405 is(cs.getPropertyValue("margin-top"), "60px",
michael@0 406 "anim1 + anim3 + anim1, margin-top at 5s");
michael@0 407 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 408 "anim1 + anim3 + anim1, margin-right at 5s");
michael@0 409 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 410 "anim1 + anim3 + anim1, margin-bottom at 5s");
michael@0 411 is(cs.getPropertyValue("margin-left"), "40px",
michael@0 412 "anim1 + anim3 + anim1, margin-left at 5s");
michael@0 413 // drop one of the anim1, and list anim5 as well, which animates
michael@0 414 // the same property as anim1
michael@0 415 div.style.animation = "anim3 linear 5s, anim1 linear 20s, anim5 linear 10s";
michael@0 416 is(cs.getPropertyValue("margin-top"), "60px",
michael@0 417 "anim3 + anim1 + anim5, margin-top at 5s");
michael@0 418 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 419 "anim3 + anim1 + anim5, margin-right at 5s");
michael@0 420 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 421 "anim3 + anim1 + anim5, margin-bottom at 5s");
michael@0 422 is(cs.getPropertyValue("margin-left"), "0px",
michael@0 423 "anim3 + anim1 + anim5, margin-left at 5s");
michael@0 424 advance_clock(1000);
michael@0 425 is(cs.getPropertyValue("margin-top"), "80px",
michael@0 426 "anim3 + anim1 + anim5, margin-top at 6s");
michael@0 427 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 428 "anim3 + anim1 + anim5, margin-right at 6s");
michael@0 429 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 430 "anim3 + anim1 + anim5, margin-bottom at 6s");
michael@0 431 is(cs.getPropertyValue("margin-left"), "10px",
michael@0 432 "anim3 + anim1 + anim5, margin-left at 6s");
michael@0 433 // now swap the anim5 and anim1 order
michael@0 434 div.style.animation = "anim3 linear 5s, anim5 linear 10s, anim1 linear 20s";
michael@0 435 is(cs.getPropertyValue("margin-top"), "80px",
michael@0 436 "anim3 + anim1 + anim5, margin-top at 6s");
michael@0 437 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 438 "anim3 + anim1 + anim5, margin-right at 6s");
michael@0 439 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 440 "anim3 + anim1 + anim5, margin-bottom at 6s");
michael@0 441 is(cs.getPropertyValue("margin-left"), "48px",
michael@0 442 "anim3 + anim1 + anim5, margin-left at 6s");
michael@0 443 advance_clock(1000);
michael@0 444 is(cs.getPropertyValue("margin-top"), "0px",
michael@0 445 "anim3 + anim1 + anim5, margin-top at 7s");
michael@0 446 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 447 "anim3 + anim1 + anim5, margin-right at 7s");
michael@0 448 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 449 "anim3 + anim1 + anim5, margin-bottom at 7s");
michael@0 450 is(cs.getPropertyValue("margin-left"), "56px",
michael@0 451 "anim3 + anim1 + anim5, margin-left at 7s");
michael@0 452 // swap anim1 and anim5 back
michael@0 453 div.style.animation = "anim3 linear 5s, anim1 linear 20s, anim5 linear 10s";
michael@0 454 is(cs.getPropertyValue("margin-top"), "0px",
michael@0 455 "anim3 + anim1 + anim5, margin-top at 7s");
michael@0 456 is(cs.getPropertyValue("margin-right"), "0px",
michael@0 457 "anim3 + anim1 + anim5, margin-right at 7s");
michael@0 458 is(cs.getPropertyValue("margin-bottom"), "0px",
michael@0 459 "anim3 + anim1 + anim5, margin-bottom at 7s");
michael@0 460 is(cs.getPropertyValue("margin-left"), "20px",
michael@0 461 "anim3 + anim1 + anim5, margin-left at 7s");
michael@0 462 advance_clock(100);
michael@0 463 is(cs.getPropertyValue("margin-top"), "0px",
michael@0 464 "anim3 + anim1 + anim5, margin-top at 7.1s");
michael@0 465 // Change the animation fill mode on the completed animation.
michael@0 466 div.style.animation = "anim3 linear 5s forwards, anim1 linear 20s, anim5 linear 10s";
michael@0 467 is(cs.getPropertyValue("margin-top"), "100px",
michael@0 468 "anim3 + anim1 + anim5, margin-top at 7.1s, with fill mode");
michael@0 469 advance_clock(900);
michael@0 470 is(cs.getPropertyValue("margin-top"), "100px",
michael@0 471 "anim3 + anim1 + anim5, margin-top at 8s, with fill mode");
michael@0 472 // Change the animation duration on the completed animation, so it is
michael@0 473 // no longer completed.
michael@0 474 div.style.animation = "anim3 linear 10s, anim1 linear 20s, anim5 linear 10s";
michael@0 475 is(cs.getPropertyValue("margin-top"), "60px",
michael@0 476 "anim3 + anim1 + anim5, margin-top at 8s, with fill mode");
michael@0 477 is(cs.getPropertyValue("margin-left"), "30px",
michael@0 478 "anim3 + anim1 + anim5, margin-left at 8s");
michael@0 479 done_div();
michael@0 480
michael@0 481 /*
michael@0 482 * css3-animations: 3. Keyframes
michael@0 483 * http://dev.w3.org/csswg/css3-animations/#keyframes
michael@0 484 *
michael@0 485 * Also see test_keyframes_rules.html .
michael@0 486 */
michael@0 487
michael@0 488 // Test the rules on keyframes that lack a 0% or 100% rule:
michael@0 489 // (simultaneously, test that reverse animations have their keyframes
michael@0 490 // run backwards)
michael@0 491
michael@0 492 // 100px at 0%, 50px at 50%, 150px at 100%
michael@0 493 new_div("margin-top: 100px; animation: kf1 ease 1s alternate infinite");
michael@0 494 is(cs.marginTop, "100px", "no-0% at 0.0s");
michael@0 495 advance_clock(100);
michael@0 496 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.2), 0.01,
michael@0 497 "no-0% at 0.1s");
michael@0 498 advance_clock(200);
michael@0 499 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.6), 0.01,
michael@0 500 "no-0% at 0.3s");
michael@0 501 advance_clock(200);
michael@0 502 is(cs.marginTop, "50px", "no-0% at 0.5s");
michael@0 503 advance_clock(200);
michael@0 504 is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.4), 0.01,
michael@0 505 "no-0% at 0.7s");
michael@0 506 advance_clock(200);
michael@0 507 is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.8), 0.01,
michael@0 508 "no-0% at 0.9s");
michael@0 509 advance_clock(100);
michael@0 510 is(cs.marginTop, "150px", "no-0% at 1.0s");
michael@0 511 advance_clock(100);
michael@0 512 is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.8), 0.01,
michael@0 513 "no-0% at 1.1s");
michael@0 514 advance_clock(300);
michael@0 515 is_approx(px_to_num(cs.marginTop), 50 + 100 * gTF.ease(0.2), 0.01,
michael@0 516 "no-0% at 1.4s");
michael@0 517 advance_clock(300);
michael@0 518 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.6), 0.01,
michael@0 519 "no-0% at 1.7s");
michael@0 520 advance_clock(200);
michael@0 521 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease(0.2), 0.01,
michael@0 522 "no-0% at 1.9s");
michael@0 523 advance_clock(100);
michael@0 524 is(cs.marginTop, "100px", "no-0% at 2.0s");
michael@0 525 done_div();
michael@0 526
michael@0 527 // 150px at 0%, 50px at 50%, 100px at 100%
michael@0 528 new_div("margin-top: 100px; animation: kf2 ease-in 1s alternate infinite");
michael@0 529 is(cs.marginTop, "150px", "no-100% at 0.0s");
michael@0 530 advance_clock(100);
michael@0 531 is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.2), 0.01,
michael@0 532 "no-100% at 0.1s");
michael@0 533 advance_clock(200);
michael@0 534 is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.6), 0.01,
michael@0 535 "no-100% at 0.3s");
michael@0 536 advance_clock(200);
michael@0 537 is(cs.marginTop, "50px", "no-100% at 0.5s");
michael@0 538 advance_clock(200);
michael@0 539 is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.4), 0.01,
michael@0 540 "no-100% at 0.7s");
michael@0 541 advance_clock(200);
michael@0 542 is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.8), 0.01,
michael@0 543 "no-100% at 0.9s");
michael@0 544 advance_clock(100);
michael@0 545 is(cs.marginTop, "100px", "no-100% at 1.0s");
michael@0 546 advance_clock(100);
michael@0 547 is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.8), 0.01,
michael@0 548 "no-100% at 1.1s");
michael@0 549 advance_clock(300);
michael@0 550 is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_in(0.2), 0.01,
michael@0 551 "no-100% at 1.4s");
michael@0 552 advance_clock(300);
michael@0 553 is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.6), 0.01,
michael@0 554 "no-100% at 1.7s");
michael@0 555 advance_clock(200);
michael@0 556 is_approx(px_to_num(cs.marginTop), 150 - 100 * gTF.ease_in(0.2), 0.01,
michael@0 557 "no-100% at 1.9s");
michael@0 558 advance_clock(100);
michael@0 559 is(cs.marginTop, "150px", "no-100% at 2.0s");
michael@0 560 done_div();
michael@0 561
michael@0 562
michael@0 563 // 50px at 0%, 100px at 25%, 50px at 100%
michael@0 564 new_div("margin-top: 50px; animation: kf3 ease-out 1s alternate infinite");
michael@0 565 is(cs.marginTop, "50px", "no-0%-no-100% at 0.0s");
michael@0 566 advance_clock(50);
michael@0 567 is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.2), 0.01,
michael@0 568 "no-0%-no-100% at 0.05s");
michael@0 569 advance_clock(100);
michael@0 570 is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.6), 0.01,
michael@0 571 "no-0%-no-100% at 0.15s");
michael@0 572 advance_clock(100);
michael@0 573 is(cs.marginTop, "100px", "no-0%-no-100% at 0.25s");
michael@0 574 advance_clock(300);
michael@0 575 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.4), 0.01,
michael@0 576 "no-0%-no-100% at 0.55s");
michael@0 577 advance_clock(300);
michael@0 578 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.8), 0.01,
michael@0 579 "no-0%-no-100% at 0.85s");
michael@0 580 advance_clock(150);
michael@0 581 is(cs.marginTop, "50px", "no-0%-no-100% at 1.0s");
michael@0 582 advance_clock(150);
michael@0 583 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.8), 0.01,
michael@0 584 "no-0%-no-100% at 1.15s");
michael@0 585 advance_clock(450);
michael@0 586 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_out(0.2), 0.01,
michael@0 587 "no-0%-no-100% at 1.6s");
michael@0 588 advance_clock(250);
michael@0 589 is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.6), 0.01,
michael@0 590 "no-0%-no-100% at 1.85s");
michael@0 591 advance_clock(100);
michael@0 592 is_approx(px_to_num(cs.marginTop), 50 + 50 * gTF.ease_out(0.2), 0.01,
michael@0 593 "no-0%-no-100% at 1.95s");
michael@0 594 advance_clock(50);
michael@0 595 is(cs.marginTop, "50px", "no-0%-no-100% at 2.0s");
michael@0 596 done_div();
michael@0 597
michael@0 598 // Test that non-animatable properties are ignored.
michael@0 599 // Simultaneously, test that the block is still honored, and that
michael@0 600 // we still override the value when two consecutive keyframes have
michael@0 601 // the same value.
michael@0 602 new_div("animation: kf4 ease 10s");
michael@0 603 is(cs.display, "block",
michael@0 604 "non-animatable properties should be ignored (linear, 0s)");
michael@0 605 is(cs.marginTop, "37px",
michael@0 606 "animatable properties should still apply (linear, 0s)");
michael@0 607 advance_clock(1000);
michael@0 608 is(cs.display, "block",
michael@0 609 "non-animatable properties should be ignored (linear, 1s)");
michael@0 610 is(cs.marginTop, "37px",
michael@0 611 "animatable properties should still apply (linear, 1s)");
michael@0 612 done_div();
michael@0 613 new_div("animation: kf4 step-start 10s");
michael@0 614 is(cs.display, "block",
michael@0 615 "non-animatable properties should be ignored (step-start, 0s)");
michael@0 616 is(cs.marginTop, "37px",
michael@0 617 "animatable properties should still apply (step-start, 0s)");
michael@0 618 advance_clock(1000);
michael@0 619 is(cs.display, "block",
michael@0 620 "non-animatable properties should be ignored (step-start, 1s)");
michael@0 621 is(cs.marginTop, "37px",
michael@0 622 "animatable properties should still apply (step-start, 1s)");
michael@0 623 done_div();
michael@0 624
michael@0 625 // Test cascading of the keyframes within an @keyframes rule.
michael@0 626 new_div("animation: kf_cascade1 linear 10s");
michael@0 627 // 0%: 30px
michael@0 628 // 50%: 20px
michael@0 629 // 75%: 20px
michael@0 630 // 85%: 30px
michael@0 631 // 85.1%: 60px
michael@0 632 // 100%: 70px
michael@0 633 is(cs.paddingTop, "30px", "kf_cascade1 at 0s");
michael@0 634 advance_clock(2500);
michael@0 635 is(cs.paddingTop, "25px", "kf_cascade1 at 2.5s");
michael@0 636 advance_clock(2500);
michael@0 637 is(cs.paddingTop, "20px", "kf_cascade1 at 5s");
michael@0 638 advance_clock(2000);
michael@0 639 is(cs.paddingTop, "20px", "kf_cascade1 at 7s");
michael@0 640 advance_clock(500);
michael@0 641 is(cs.paddingTop, "20px", "kf_cascade1 at 7.5s");
michael@0 642 advance_clock(500);
michael@0 643 is(cs.paddingTop, "25px", "kf_cascade1 at 8s");
michael@0 644 advance_clock(500);
michael@0 645 is(cs.paddingTop, "30px", "kf_cascade1 at 8.5s");
michael@0 646 advance_clock(10);
michael@0 647 is(cs.paddingTop, "60px", "kf_cascade1 at 8.51s");
michael@0 648 advance_clock(745);
michael@0 649 is(cs.paddingTop, "65px", "kf_cascade1 at 9.2505s");
michael@0 650 done_div();
michael@0 651
michael@0 652 // Test cascading of the @keyframes rules themselves.
michael@0 653 new_div("animation: kf_cascade2 linear 10s");
michael@0 654 is(cs.marginTop, "0px", "@keyframes rule with margin-top should be ignored");
michael@0 655 is(cs.marginLeft, "300px", "last @keyframes rule with margin-left should win");
michael@0 656 done_div();
michael@0 657
michael@0 658 /*
michael@0 659 * css3-animations: 3.1. Timing functions for keyframes
michael@0 660 * http://dev.w3.org/csswg/css3-animations/#timing-functions-for-keyframes-
michael@0 661 */
michael@0 662 new_div("animation: kf_tf1 ease-in 10s alternate infinite");
michael@0 663 is(cs.paddingBottom, "20px",
michael@0 664 "keyframe timing functions test at 0s (test needed for flush)");
michael@0 665 advance_clock(1000);
michael@0 666 is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
michael@0 667 "keyframe timing functions test at 1s");
michael@0 668 advance_clock(1000);
michael@0 669 is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.8), 0.01,
michael@0 670 "keyframe timing functions test at 2s");
michael@0 671 advance_clock(1000);
michael@0 672 is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.2), 0.01,
michael@0 673 "keyframe timing functions test at 3s");
michael@0 674 advance_clock(1000);
michael@0 675 is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
michael@0 676 "keyframe timing functions test at 4s");
michael@0 677 advance_clock(1000);
michael@0 678 is(cs.paddingBottom, "160px",
michael@0 679 "keyframe timing functions test at 5s");
michael@0 680 advance_clock(1010); // avoid floating point error
michael@0 681 is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
michael@0 682 "keyframe timing functions test at 6s");
michael@0 683 advance_clock(1000);
michael@0 684 is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.8), 0.01,
michael@0 685 "keyframe timing functions test at 7s");
michael@0 686 advance_clock(990);
michael@0 687 is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
michael@0 688 "keyframe timing functions test at 8s");
michael@0 689 advance_clock(1000);
michael@0 690 is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.6), 0.01,
michael@0 691 "keyframe timing functions test at 9s");
michael@0 692 advance_clock(1000);
michael@0 693 is(cs.paddingBottom, "20px",
michael@0 694 "keyframe timing functions test at 10s");
michael@0 695 advance_clock(20000);
michael@0 696 is(cs.paddingBottom, "20px",
michael@0 697 "keyframe timing functions test at 30s");
michael@0 698 advance_clock(1000);
michael@0 699 is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.6), 0.01,
michael@0 700 "keyframe timing functions test at 31s");
michael@0 701 advance_clock(1000);
michael@0 702 is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
michael@0 703 "keyframe timing functions test at 32s");
michael@0 704 advance_clock(1000);
michael@0 705 is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.8), 0.01,
michael@0 706 "keyframe timing functions test at 33s");
michael@0 707 advance_clock(1000);
michael@0 708 is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
michael@0 709 "keyframe timing functions test at 34s");
michael@0 710 advance_clock(1000);
michael@0 711 is(cs.paddingBottom, "160px",
michael@0 712 "keyframe timing functions test at 35s");
michael@0 713 advance_clock(1000);
michael@0 714 is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
michael@0 715 "keyframe timing functions test at 36s");
michael@0 716 advance_clock(1000);
michael@0 717 is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.2), 0.01,
michael@0 718 "keyframe timing functions test at 37s");
michael@0 719 advance_clock(1000);
michael@0 720 is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.8), 0.01,
michael@0 721 "keyframe timing functions test at 38s");
michael@0 722 advance_clock(1000);
michael@0 723 is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
michael@0 724 "keyframe timing functions test at 39s");
michael@0 725 advance_clock(1000);
michael@0 726 is(cs.paddingBottom, "20px",
michael@0 727 "keyframe timing functions test at 40s");
michael@0 728 done_div();
michael@0 729
michael@0 730 // spot-check the same thing without alternate
michael@0 731 new_div("animation: kf_tf1 ease-in 10s infinite");
michael@0 732 is(cs.paddingBottom, "20px",
michael@0 733 "keyframe timing functions test at 0s (test needed for flush)");
michael@0 734 advance_clock(11000);
michael@0 735 is_approx(px_to_num(cs.paddingBottom), 20 + 40 * gTF.ease(0.4), 0.01,
michael@0 736 "keyframe timing functions test at 11s");
michael@0 737 advance_clock(3000);
michael@0 738 is_approx(px_to_num(cs.paddingBottom), 60 + 100 * gTF.ease_in(0.6), 0.01,
michael@0 739 "keyframe timing functions test at 14s");
michael@0 740 advance_clock(2000);
michael@0 741 is_approx(px_to_num(cs.paddingBottom), 160 - 40 * step_end(5)(0.4), 0.01,
michael@0 742 "keyframe timing functions test at 16s");
michael@0 743 advance_clock(2000);
michael@0 744 is_approx(px_to_num(cs.paddingBottom), 120 - 100 * gTF.linear(0.2), 0.01,
michael@0 745 "keyframe timing functions test at 18s");
michael@0 746 done_div();
michael@0 747
michael@0 748 /*
michael@0 749 * css3-animations: 3.2. The 'animation-name' Property
michael@0 750 * http://dev.w3.org/csswg/css3-animations/#the-animation-name-property-
michael@0 751 */
michael@0 752
michael@0 753 // animation-name is reasonably well-tested up in the tests for Section
michael@0 754 // 2, particularly the tests that "Test that animations continue running
michael@0 755 // when the animation name list is changed."
michael@0 756
michael@0 757 // Test that 'animation-name: none' steps the animation, and setting
michael@0 758 // it again starts a new one.
michael@0 759
michael@0 760 new_div("");
michael@0 761 div.style.animation = "anim2 ease-in-out 10s";
michael@0 762 is(cs.marginRight, "0px", "after setting animation-name to anim2");
michael@0 763 advance_clock(1000);
michael@0 764 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in_out(0.1), 0.01,
michael@0 765 "before changing animation-name to none");
michael@0 766 div.style.animationName = "none";
michael@0 767 is(cs.marginRight, "0px", "after changing animation-name to none");
michael@0 768 advance_clock(1000);
michael@0 769 is(cs.marginRight, "0px", "after changing animation-name to none plus 1s");
michael@0 770 div.style.animationName = "anim2";
michael@0 771 is(cs.marginRight, "0px", "after changing animation-name to anim2");
michael@0 772 advance_clock(1000);
michael@0 773 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in_out(0.1), 0.01,
michael@0 774 "at 1s in animation when animation-name no longer none again");
michael@0 775 div.style.animationName = "none";
michael@0 776 is(cs.marginRight, "0px", "after changing animation-name to none");
michael@0 777 advance_clock(1000);
michael@0 778 is(cs.marginRight, "0px", "after changing animation-name to none plus 1s");
michael@0 779 done_div();
michael@0 780
michael@0 781 /*
michael@0 782 * css3-animations: 3.3. The 'animation-duration' Property
michael@0 783 * http://dev.w3.org/csswg/css3-animations/#the-animation-duration-property-
michael@0 784 */
michael@0 785
michael@0 786 // FIXME: test animation-duration of 0 (quite a bit, including interaction
michael@0 787 // with fill-mode, count, and reversing), once I know what the right
michael@0 788 // behavior is.
michael@0 789
michael@0 790 /*
michael@0 791 * css3-animations: 3.4. The 'animation-timing-function' Property
michael@0 792 * http://dev.w3.org/csswg/css3-animations/#animation-timing-function_tag
michael@0 793 */
michael@0 794
michael@0 795 // tested in tests for section 3.1
michael@0 796
michael@0 797 /*
michael@0 798 * css3-animations: 3.5. The 'animation-iteration-count' Property
michael@0 799 * http://dev.w3.org/csswg/css3-animations/#the-animation-iteration-count-property-
michael@0 800 */
michael@0 801 new_div("animation: anim2 ease-in 10s 0.3 forwards");
michael@0 802 is(cs.marginRight, "0px", "animation-iteration-count test 1 at 0s");
michael@0 803 advance_clock(2000);
michael@0 804 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 805 "animation-iteration-count test 1 at 2s");
michael@0 806 advance_clock(900);
michael@0 807 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.29), 0.01,
michael@0 808 "animation-iteration-count test 1 at 2.9s");
michael@0 809 advance_clock(100);
michael@0 810 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
michael@0 811 "animation-iteration-count test 1 at 3s");
michael@0 812 advance_clock(100);
michael@0 813 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
michael@0 814 "animation-iteration-count test 1 at 3.1s");
michael@0 815 advance_clock(5000);
michael@0 816 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
michael@0 817 "animation-iteration-count test 1 at 8.1s");
michael@0 818 done_div();
michael@0 819
michael@0 820 new_div("animation: anim2 ease-in 10s 0.3, anim3 ease-out 20s 1.2 alternate forwards, anim4 ease-in-out 5s 1.6 forwards");
michael@0 821 is(cs.marginRight, "0px", "animation-iteration-count test 2 at 0s");
michael@0 822 is(cs.marginTop, "0px", "animation-iteration-count test 3 at 0s");
michael@0 823 is(cs.marginBottom, "0px", "animation-iteration-count test 4 at 0s");
michael@0 824 advance_clock(2000);
michael@0 825 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 826 "animation-iteration-count test 2 at 2s");
michael@0 827 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.1), 0.01,
michael@0 828 "animation-iteration-count test 3 at 2s");
michael@0 829 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.4), 0.01,
michael@0 830 "animation-iteration-count test 4 at 2s");
michael@0 831 advance_clock(900);
michael@0 832 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.29), 0.01,
michael@0 833 "animation-iteration-count test 2 at 2.9s");
michael@0 834 advance_clock(200);
michael@0 835 is(cs.marginRight, "0px", "animation-iteration-count test 2 at 3.1s");
michael@0 836 advance_clock(1800);
michael@0 837 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.98), 0.01,
michael@0 838 "animation-iteration-count test 4 at 4.9s");
michael@0 839 advance_clock(200);
michael@0 840 is(cs.marginRight, "0px", "animation-iteration-count test 2 at 5.1s");
michael@0 841 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.02), 0.01,
michael@0 842 "animation-iteration-count test 4 at 5.1s");
michael@0 843 advance_clock(2800);
michael@0 844 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.58), 0.01,
michael@0 845 "animation-iteration-count test 4 at 7.9s");
michael@0 846 advance_clock(100);
michael@0 847 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
michael@0 848 "animation-iteration-count test 4 at 8s");
michael@0 849 advance_clock(100);
michael@0 850 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
michael@0 851 "animation-iteration-count test 4 at 8.1s");
michael@0 852 advance_clock(11700);
michael@0 853 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.99), 0.01,
michael@0 854 "animation-iteration-count test 3 at 19.8s");
michael@0 855 advance_clock(200);
michael@0 856 is(cs.marginTop, "100px", "animation-iteration-count test 3 at 20s");
michael@0 857 advance_clock(200);
michael@0 858 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.99), 0.01,
michael@0 859 "animation-iteration-count test 3 at 20.2s");
michael@0 860 advance_clock(3600);
michael@0 861 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.81), 0.01,
michael@0 862 "animation-iteration-count test 3 at 23.8s");
michael@0 863 advance_clock(200);
michael@0 864 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.8), 0.01,
michael@0 865 "animation-iteration-count test 3 at 24s");
michael@0 866 advance_clock(200);
michael@0 867 is(cs.marginRight, "0px", "animation-iteration-count test 2 at 25s");
michael@0 868 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_out(0.8), 0.01,
michael@0 869 "animation-iteration-count test 3 at 25s");
michael@0 870 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
michael@0 871 "animation-iteration-count test 4 at 25s");
michael@0 872 done_div();
michael@0 873
michael@0 874 /*
michael@0 875 * css3-animations: 3.6. The 'animation-direction' Property
michael@0 876 * http://dev.w3.org/csswg/css3-animations/#the-animation-direction-property-
michael@0 877 */
michael@0 878
michael@0 879 // Tested in tests for sections 3.1 and 3.5.
michael@0 880
michael@0 881 new_div("animation: anim2 ease-in 10s infinite");
michael@0 882 div.style.animationDirection = "normal";
michael@0 883 is(cs.marginRight, "0px", "animation-direction test 1 (normal) at 0s");
michael@0 884 div.style.animationDirection = "reverse";
michael@0 885 is(cs.marginRight, "100px", "animation-direction test 1 (reverse) at 0s");
michael@0 886 div.style.animationDirection = "alternate";
michael@0 887 is(cs.marginRight, "0px", "animation-direction test 1 (alternate) at 0s");
michael@0 888 div.style.animationDirection = "alternate-reverse";
michael@0 889 is(cs.marginRight, "100px", "animation-direction test 1 (alternate-reverse) at 0s");
michael@0 890 advance_clock(2000);
michael@0 891 div.style.animationDirection = "normal";
michael@0 892 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 893 "animation-direction test 1 (normal) at 2s");
michael@0 894 div.style.animationDirection = "reverse";
michael@0 895 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 896 "animation-direction test 1 (reverse) at 2s");
michael@0 897 div.style.animationDirection = "alternate";
michael@0 898 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 899 "animation-direction test 1 (alternate) at 2s");
michael@0 900 div.style.animationDirection = "alternate-reverse";
michael@0 901 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 902 "animation-direction test 1 (alternate-reverse) at 2s");
michael@0 903 advance_clock(5000);
michael@0 904 div.style.animationDirection = "normal";
michael@0 905 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.7), 0.01,
michael@0 906 "animation-direction test 1 (normal) at 7s");
michael@0 907 div.style.animationDirection = "reverse";
michael@0 908 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
michael@0 909 "animation-direction test 1 (reverse) at 7s");
michael@0 910 div.style.animationDirection = "alternate";
michael@0 911 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.7), 0.01,
michael@0 912 "animation-direction test 1 (alternate) at 7s");
michael@0 913 div.style.animationDirection = "alternate-reverse";
michael@0 914 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.3), 0.01,
michael@0 915 "animation-direction test 1 (alternate-reverse) at 7s");
michael@0 916 advance_clock(5000);
michael@0 917 div.style.animationDirection = "normal";
michael@0 918 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 919 "animation-direction test 1 (normal) at 12s");
michael@0 920 div.style.animationDirection = "reverse";
michael@0 921 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 922 "animation-direction test 1 (reverse) at 12s");
michael@0 923 div.style.animationDirection = "alternate";
michael@0 924 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 925 "animation-direction test 1 (alternate) at 12s");
michael@0 926 div.style.animationDirection = "alternate-reverse";
michael@0 927 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 928 "animation-direction test 1 (alternate-reverse) at 12s");
michael@0 929 advance_clock(10000);
michael@0 930 div.style.animationDirection = "normal";
michael@0 931 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 932 "animation-direction test 1 (normal) at 22s");
michael@0 933 div.style.animationDirection = "reverse";
michael@0 934 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 935 "animation-direction test 1 (reverse) at 22s");
michael@0 936 div.style.animationDirection = "alternate";
michael@0 937 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 938 "animation-direction test 1 (alternate) at 22s");
michael@0 939 div.style.animationDirection = "alternate-reverse";
michael@0 940 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 941 "animation-direction test 1 (alternate-reverse) at 22s");
michael@0 942 advance_clock(30000);
michael@0 943 div.style.animationDirection = "normal";
michael@0 944 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 945 "animation-direction test 1 (normal) at 52s");
michael@0 946 div.style.animationDirection = "reverse";
michael@0 947 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 948 "animation-direction test 1 (reverse) at 52s");
michael@0 949 div.style.animationDirection = "alternate";
michael@0 950 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 951 "animation-direction test 1 (alternate) at 52s");
michael@0 952 div.style.animationDirection = "alternate-reverse";
michael@0 953 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.2), 0.01,
michael@0 954 "animation-direction test 1 (alternate-reverse) at 52s");
michael@0 955 done_div();
michael@0 956
michael@0 957 /*
michael@0 958 * css3-animations: 3.7. The 'animation-play-state' Property
michael@0 959 * http://dev.w3.org/csswg/css3-animations/#the-animation-play-state-property-
michael@0 960 */
michael@0 961
michael@0 962 // simple test with just one animation
michael@0 963 new_div("");
michael@0 964 div.style.animationTimingFunction = "ease";
michael@0 965 div.style.animationName = "anim1";
michael@0 966 div.style.animationDuration = "1s";
michael@0 967 div.style.animationDirection = "alternate";
michael@0 968 div.style.animationIterationCount = "2";
michael@0 969 is(cs.marginLeft, "0px", "animation-play-state test 1, at 0s");
michael@0 970 advance_clock(250);
michael@0 971 is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
michael@0 972 "animation-play-state test 1 at 250ms");
michael@0 973 div.style.animationPlayState = "paused";
michael@0 974 is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
michael@0 975 "animation-play-state test 1 at 250ms");
michael@0 976 advance_clock(250);
michael@0 977 is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
michael@0 978 "animation-play-state test 1 still at 500ms");
michael@0 979 div.style.animationPlayState = "running";
michael@0 980 is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
michael@0 981 "animation-play-state test 1 still at 500ms");
michael@0 982 advance_clock(500);
michael@0 983 is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
michael@0 984 "animation-play-state test 1 at 1000ms");
michael@0 985 advance_clock(250);
michael@0 986 is(cs.marginLeft, "100px", "animation-play-state test 1 at 1250ms");
michael@0 987 advance_clock(250);
michael@0 988 is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
michael@0 989 "animation-play-state test 1 at 1500ms");
michael@0 990 div.style.animationPlayState = "paused";
michael@0 991 is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
michael@0 992 "animation-play-state test 1 at 1500ms");
michael@0 993 advance_clock(2000);
michael@0 994 is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
michael@0 995 "animation-play-state test 1 at 3500ms");
michael@0 996 advance_clock(500);
michael@0 997 is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
michael@0 998 "animation-play-state test 1 at 4000ms");
michael@0 999 div.style.animationPlayState = "";
michael@0 1000 is_approx(px_to_num(cs.marginLeft), 80 + 20 * gTF.ease(0.5), 0.01,
michael@0 1001 "animation-play-state test 1 at 4000ms");
michael@0 1002 advance_clock(500);
michael@0 1003 is_approx(px_to_num(cs.marginLeft), 80 * gTF.ease(0.5), 0.01,
michael@0 1004 "animation-play-state test 1 at 4500ms");
michael@0 1005 advance_clock(250);
michael@0 1006 is(cs.marginLeft, "0px", "animation-play-state test 1, at 4750ms");
michael@0 1007 advance_clock(250);
michael@0 1008 is(cs.marginLeft, "0px", "animation-play-state test 1, at 5000ms");
michael@0 1009 done_div();
michael@0 1010
michael@0 1011 // more complicated test with multiple animations (and different directions
michael@0 1012 // and iteration counts)
michael@0 1013 new_div("");
michael@0 1014 div.style.animationTimingFunction = "ease-out, ease-in, ease-in-out";
michael@0 1015 div.style.animationName = "anim2, anim3, anim4";
michael@0 1016 div.style.animationDuration = "1s, 2s, 1s";
michael@0 1017 div.style.animationDirection = "alternate, normal, normal";
michael@0 1018 div.style.animationIterationCount = "4, 2, infinite";
michael@0 1019 is(cs.marginRight, "0px", "animation-play-state test 2, at 0s");
michael@0 1020 is(cs.marginTop, "0px", "animation-play-state test 3, at 0s");
michael@0 1021 is(cs.marginBottom, "0px", "animation-play-state test 4, at 0s");
michael@0 1022 advance_clock(250);
michael@0 1023 div.style.animationPlayState = "paused, running"; // pause 1 and 3
michael@0 1024 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
michael@0 1025 "animation-play-state test 2 at 250ms");
michael@0 1026 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.125), 0.01,
michael@0 1027 "animation-play-state test 3 at 250ms");
michael@0 1028 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
michael@0 1029 "animation-play-state test 4 at 250ms");
michael@0 1030 advance_clock(250);
michael@0 1031 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
michael@0 1032 "animation-play-state test 2 at 500ms");
michael@0 1033 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.25), 0.01,
michael@0 1034 "animation-play-state test 3 at 500ms");
michael@0 1035 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
michael@0 1036 "animation-play-state test 4 at 500ms");
michael@0 1037 div.style.animationPlayState = "paused, running, running"; // unpause 3
michael@0 1038 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
michael@0 1039 "animation-play-state test 2 at 500ms");
michael@0 1040 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.25), 0.01,
michael@0 1041 "animation-play-state test 3 at 500ms");
michael@0 1042 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.25), 0.01,
michael@0 1043 "animation-play-state test 4 at 500ms");
michael@0 1044 advance_clock(250);
michael@0 1045 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.25), 0.01,
michael@0 1046 "animation-play-state test 2 at 750ms");
michael@0 1047 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
michael@0 1048 "animation-play-state test 3 at 750ms");
michael@0 1049 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.5), 0.01,
michael@0 1050 "animation-play-state test 4 at 750ms");
michael@0 1051 div.style.animationPlayState = "running, paused"; // unpause 1, pause 2
michael@0 1052 advance_clock(0); // notify refresh observers
michael@0 1053 advance_clock(250);
michael@0 1054 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.5), 0.01,
michael@0 1055 "animation-play-state test 2 at 1000ms");
michael@0 1056 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
michael@0 1057 "animation-play-state test 3 at 1000ms");
michael@0 1058 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.75), 0.01,
michael@0 1059 "animation-play-state test 4 at 1000ms");
michael@0 1060 div.style.animationPlayState = "paused"; // pause all
michael@0 1061 advance_clock(0); // notify refresh observers
michael@0 1062 advance_clock(3000);
michael@0 1063 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.5), 0.01,
michael@0 1064 "animation-play-state test 2 at 4000ms");
michael@0 1065 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
michael@0 1066 "animation-play-state test 3 at 4000ms");
michael@0 1067 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.75), 0.01,
michael@0 1068 "animation-play-state test 4 at 4000ms");
michael@0 1069 div.style.animationPlayState = "running, paused"; // pause 2
michael@0 1070 advance_clock(0); // notify refresh observers
michael@0 1071 advance_clock(850);
michael@0 1072 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.65), 0.01,
michael@0 1073 "animation-play-state test 2 at 4850ms");
michael@0 1074 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
michael@0 1075 "animation-play-state test 3 at 4850ms");
michael@0 1076 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.6), 0.01,
michael@0 1077 "animation-play-state test 4 at 4850ms");
michael@0 1078 advance_clock(300);
michael@0 1079 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.35), 0.01,
michael@0 1080 "animation-play-state test 2 at 5150ms");
michael@0 1081 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
michael@0 1082 "animation-play-state test 3 at 5150ms");
michael@0 1083 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.9), 0.01,
michael@0 1084 "animation-play-state test 4 at 5150ms");
michael@0 1085 advance_clock(2300);
michael@0 1086 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.05), 0.01,
michael@0 1087 "animation-play-state test 2 at 7450ms");
michael@0 1088 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
michael@0 1089 "animation-play-state test 3 at 7450ms");
michael@0 1090 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.2), 0.01,
michael@0 1091 "animation-play-state test 4 at 7450ms");
michael@0 1092 advance_clock(100);
michael@0 1093 is(cs.marginRight, "0px", "animation-play-state test 2 at 7550ms");
michael@0 1094 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.375), 0.01,
michael@0 1095 "animation-play-state test 3 at 7550ms");
michael@0 1096 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
michael@0 1097 "animation-play-state test 4 at 7550ms");
michael@0 1098 div.style.animationPlayState = "running"; // unpause 2
michael@0 1099 advance_clock(0); // notify refresh observers
michael@0 1100 advance_clock(1000);
michael@0 1101 is(cs.marginRight, "0px", "animation-play-state test 2 at 7550ms");
michael@0 1102 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.875), 0.01,
michael@0 1103 "animation-play-state test 3 at 7550ms");
michael@0 1104 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
michael@0 1105 "animation-play-state test 4 at 7550ms");
michael@0 1106 advance_clock(500);
michael@0 1107 is(cs.marginRight, "0px", "animation-play-state test 2 at 8050ms");
michael@0 1108 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.125), 0.01,
michael@0 1109 "animation-play-state test 3 at 8050ms");
michael@0 1110 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
michael@0 1111 "animation-play-state test 4 at 8050ms");
michael@0 1112 advance_clock(1000);
michael@0 1113 is(cs.marginRight, "0px", "animation-play-state test 2 at 9050ms");
michael@0 1114 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.625), 0.01,
michael@0 1115 "animation-play-state test 3 at 9050ms");
michael@0 1116 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
michael@0 1117 "animation-play-state test 4 at 9050ms");
michael@0 1118 advance_clock(500);
michael@0 1119 is(cs.marginRight, "0px", "animation-play-state test 2 at 9550ms");
michael@0 1120 is_approx(px_to_num(cs.marginTop), 100 * gTF.ease_in(0.875), 0.01,
michael@0 1121 "animation-play-state test 3 at 9550ms");
michael@0 1122 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.3), 0.01,
michael@0 1123 "animation-play-state test 4 at 9550ms");
michael@0 1124 advance_clock(500);
michael@0 1125 is(cs.marginRight, "0px", "animation-play-state test 2 at 10050ms");
michael@0 1126 is(cs.marginTop, "0px", "animation-play-state test 3 at 10050ms");
michael@0 1127 is_approx(px_to_num(cs.marginBottom), 100 * gTF.ease_in_out(0.8), 0.01,
michael@0 1128 "animation-play-state test 4 at 10050ms");
michael@0 1129 done_div();
michael@0 1130
michael@0 1131 /*
michael@0 1132 * css3-animations: 3.8. The 'animation-delay' Property
michael@0 1133 * http://dev.w3.org/csswg/css3-animations/#the-animation-delay-property-
michael@0 1134 */
michael@0 1135
michael@0 1136 // test positive delay
michael@0 1137 new_div("animation: anim2 1s 0.5s ease-out");
michael@0 1138 is(cs.marginRight, "0px", "positive delay test at 0ms");
michael@0 1139 advance_clock(400);
michael@0 1140 is(cs.marginRight, "0px", "positive delay test at 400ms");
michael@0 1141 advance_clock(100);
michael@0 1142 is(cs.marginRight, "0px", "positive delay test at 500ms");
michael@0 1143 advance_clock(100);
michael@0 1144 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
michael@0 1145 "positive delay test at 500ms");
michael@0 1146 done_div();
michael@0 1147
michael@0 1148 // test dynamic changes to delay (i.e., that we preserve the start time
michael@0 1149 // that's before the delay)
michael@0 1150 new_div("animation: anim2 1s 0.5s ease-out both");
michael@0 1151 is(cs.marginRight, "0px", "dynamic delay delay test at 0ms");
michael@0 1152 advance_clock(400);
michael@0 1153 is(cs.marginRight, "0px", "dynamic delay delay test at 400ms (1)");
michael@0 1154 div.style.animationDelay = "0.2s";
michael@0 1155 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.2), 0.01,
michael@0 1156 "dynamic delay delay test at 400ms (2)");
michael@0 1157 div.style.animationDelay = "0.6s";
michael@0 1158 advance_clock(0);
michael@0 1159 advance_clock(200);
michael@0 1160 is(cs.marginRight, "0px", "dynamic delay delay test at 600ms");
michael@0 1161 advance_clock(200);
michael@0 1162 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.2), 0.01,
michael@0 1163 "dynamic delay delay test at 800ms");
michael@0 1164 advance_clock(1000);
michael@0 1165 is(cs.marginRight, "100px", "dynamic delay delay test at 1800ms (1)");
michael@0 1166 div.style.animationDelay = "1.5s";
michael@0 1167 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.3), 0.01,
michael@0 1168 "dynamic delay delay test at 1800ms (2)");
michael@0 1169 div.style.animationDelay = "2s";
michael@0 1170 is(cs.marginRight, "0px", "dynamic delay delay test at 1800ms (3)");
michael@0 1171 done_div();
michael@0 1172
michael@0 1173 // test delay and play-state interaction
michael@0 1174 new_div("animation: anim2 1s 0.5s ease-out");
michael@0 1175 is(cs.marginRight, "0px", "delay and play-state delay test at 0ms");
michael@0 1176 advance_clock(400);
michael@0 1177 is(cs.marginRight, "0px", "delay and play-state delay test at 400ms");
michael@0 1178 div.style.animationPlayState = "paused";
michael@0 1179 advance_clock(0);
michael@0 1180 advance_clock(100);
michael@0 1181 is(cs.marginRight, "0px", "delay and play-state delay test at 500ms");
michael@0 1182 advance_clock(500);
michael@0 1183 is(cs.marginRight, "0px", "delay and play-state delay test at 1000ms");
michael@0 1184 div.style.animationPlayState = "running";
michael@0 1185 advance_clock(0);
michael@0 1186 advance_clock(100);
michael@0 1187 is(cs.marginRight, "0px", "delay and play-state delay test at 1100ms");
michael@0 1188 advance_clock(100);
michael@0 1189 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
michael@0 1190 "delay and play-state delay test at 1200ms");
michael@0 1191 div.style.animationPlayState = "paused";
michael@0 1192 advance_clock(0);
michael@0 1193 advance_clock(100);
michael@0 1194 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_out(0.1), 0.01,
michael@0 1195 "delay and play-state delay test at 1300ms");
michael@0 1196 done_div();
michael@0 1197
michael@0 1198 // test negative delay and implicit starting values
michael@0 1199 new_div("margin-top: 1000px");
michael@0 1200 advance_clock(300);
michael@0 1201 div.style.marginTop = "100px";
michael@0 1202 div.style.animation = "kf1 1s -0.1s ease-in";
michael@0 1203 is_approx(px_to_num(cs.marginTop), 100 - 50 * gTF.ease_in(0.2), 0.01,
michael@0 1204 "delay and implicit starting values test");
michael@0 1205 done_div();
michael@0 1206
michael@0 1207 // test large negative delay that causes the animation to start
michael@0 1208 // in the fourth iteration
michael@0 1209 new_div("animation: anim2 1s -3.6s ease-in 5 alternate forwards");
michael@0 1210 listen(); // rely on no flush having happened yet
michael@0 1211 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.4), 0.01,
michael@0 1212 "large negative delay test at 0ms");
michael@0 1213 check_events([{ type: 'animationstart', target: div,
michael@0 1214 animationName: 'anim2', elapsedTime: 3.6,
michael@0 1215 pseudoElement: "" }],
michael@0 1216 "right after start in large negative delay test");
michael@0 1217 advance_clock(380);
michael@0 1218 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.02), 0.01,
michael@0 1219 "large negative delay test at 380ms");
michael@0 1220 check_events([]);
michael@0 1221 advance_clock(20);
michael@0 1222 is(cs.marginRight, "0px", "large negative delay test at 400ms");
michael@0 1223 check_events([{ type: 'animationiteration', target: div,
michael@0 1224 animationName: 'anim2', elapsedTime: 4.0,
michael@0 1225 pseudoElement: "" }],
michael@0 1226 "right after start in large negative delay test");
michael@0 1227 advance_clock(800);
michael@0 1228 is_approx(px_to_num(cs.marginRight), 100 * gTF.ease_in(0.8), 0.01,
michael@0 1229 "large negative delay test at 1200ms");
michael@0 1230 check_events([]);
michael@0 1231 advance_clock(200);
michael@0 1232 is(cs.marginRight, "100px", "large negative delay test at 1400ms");
michael@0 1233 check_events([{ type: 'animationend', target: div,
michael@0 1234 animationName: 'anim2', elapsedTime: 5.0,
michael@0 1235 pseudoElement: "" }],
michael@0 1236 "right after start in large negative delay test");
michael@0 1237 done_div();
michael@0 1238
michael@0 1239 /*
michael@0 1240 * css3-animations: 3.9. The 'animation-fill-mode' Property
michael@0 1241 * http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
michael@0 1242 */
michael@0 1243
michael@0 1244 // animation-fill-mode is tested in the tests for section (2).
michael@0 1245
michael@0 1246 /*
michael@0 1247 * css3-animations: 3.10. The 'animation' Shorthand Property
michael@0 1248 * http://dev.w3.org/csswg/css3-animations/#the-animation-shorthand-property-
michael@0 1249 */
michael@0 1250
michael@0 1251 // shorthand vs. longhand is adequately tested by the
michael@0 1252 // property_database.js-based tests.
michael@0 1253
michael@0 1254 /**
michael@0 1255 * Basic tests of animations on pseudo-elements
michael@0 1256 */
michael@0 1257 new_div("");
michael@0 1258 listen();
michael@0 1259 div.id = "withbefore";
michael@0 1260 var cs_before = getComputedStyle(div, ":before");
michael@0 1261 is(cs_before.marginRight, "0px", ":before test at 0ms");
michael@0 1262 advance_clock(400);
michael@0 1263 is(cs_before.marginRight, "40px", ":before test at 400ms");
michael@0 1264 advance_clock(800);
michael@0 1265 is(cs_before.marginRight, "80px", ":before test at 1200ms");
michael@0 1266 is(cs.marginRight, "0px", ":before animation should not affect element");
michael@0 1267 advance_clock(800);
michael@0 1268 is(cs_before.marginRight, "0px", ":before test at 2000ms");
michael@0 1269 advance_clock(300);
michael@0 1270 is(cs_before.marginRight, "30px", ":before test at 2300ms");
michael@0 1271 advance_clock(700);
michael@0 1272 check_events([ { type: "animationstart", animationName: "anim2", elapsedTime: 0, pseudoElement: "::before" },
michael@0 1273 { type: "animationiteration", animationName: "anim2", elapsedTime: 1.2, pseudoElement: "::before" },
michael@0 1274 { type: "animationiteration", animationName: "anim2", elapsedTime: 2, pseudoElement: "::before" },
michael@0 1275 { type: "animationend", animationName: "anim2", elapsedTime: 3, pseudoElement: "::before" }]);
michael@0 1276 done_div();
michael@0 1277
michael@0 1278 new_div("");
michael@0 1279 listen();
michael@0 1280 div.id = "withafter";
michael@0 1281 var cs_after = getComputedStyle(div, ":after");
michael@0 1282 is(cs_after.marginRight, "0px", ":after test at 0ms");
michael@0 1283 advance_clock(400);
michael@0 1284 is(cs_after.marginRight, "40px", ":after test at 400ms");
michael@0 1285 advance_clock(800);
michael@0 1286 is(cs_after.marginRight, "80px", ":after test at 1200ms");
michael@0 1287 is(cs.marginRight, "0px", ":after animation should not affect element");
michael@0 1288 advance_clock(800);
michael@0 1289 is(cs_after.marginRight, "0px", ":after test at 2000ms");
michael@0 1290 advance_clock(300);
michael@0 1291 is(cs_after.marginRight, "30px", ":after test at 2300ms");
michael@0 1292 advance_clock(700);
michael@0 1293 check_events([ { type: "animationstart", animationName: "anim2", elapsedTime: 0, pseudoElement: "::after" },
michael@0 1294 { type: "animationiteration", animationName: "anim2", elapsedTime: 1.2, pseudoElement: "::after" },
michael@0 1295 { type: "animationiteration", animationName: "anim2", elapsedTime: 2, pseudoElement: "::after" },
michael@0 1296 { type: "animationend", animationName: "anim2", elapsedTime: 3, pseudoElement: "::after" }]);
michael@0 1297 done_div();
michael@0 1298
michael@0 1299 /**
michael@0 1300 * Test handling of properties that are present in only some of the
michael@0 1301 * keyframes.
michael@0 1302 */
michael@0 1303 new_div("animation: multiprop 1s ease-in-out alternate infinite");
michael@0 1304 is(cs.paddingTop, "10px", "multiprop top at 0ms");
michael@0 1305 is(cs.paddingLeft, "30px", "multiprop top at 0ms");
michael@0 1306 advance_clock(100);
michael@0 1307 is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.2), 0.01,
michael@0 1308 "multiprop top at 100ms");
michael@0 1309 is_approx(px_to_num(cs.paddingLeft), 30 + 20 * gTF.ease(0.4), 0.01,
michael@0 1310 "multiprop left at 100ms");
michael@0 1311 advance_clock(200);
michael@0 1312 is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.6), 0.01,
michael@0 1313 "multiprop top at 300ms");
michael@0 1314 is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.1), 0.01,
michael@0 1315 "multiprop left at 300ms");
michael@0 1316 advance_clock(300);
michael@0 1317 is_approx(px_to_num(cs.paddingTop), 40 + 40 * gTF.ease_in_out(0.4), 0.01,
michael@0 1318 "multiprop top at 600ms");
michael@0 1319 is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.7), 0.01,
michael@0 1320 "multiprop left at 600ms");
michael@0 1321 advance_clock(200);
michael@0 1322 is_approx(px_to_num(cs.paddingTop), 80 - 80 * gTF.ease_in(0.2), 0.01,
michael@0 1323 "multiprop top at 800ms");
michael@0 1324 is_approx(px_to_num(cs.paddingLeft), 60 - 60 * gTF.ease_in(0.2), 0.01,
michael@0 1325 "multiprop left at 800ms");
michael@0 1326 advance_clock(400);
michael@0 1327 is_approx(px_to_num(cs.paddingTop), 80 - 80 * gTF.ease_in(0.2), 0.01,
michael@0 1328 "multiprop top at 1200ms");
michael@0 1329 is_approx(px_to_num(cs.paddingLeft), 60 - 60 * gTF.ease_in(0.2), 0.01,
michael@0 1330 "multiprop left at 1200ms");
michael@0 1331 advance_clock(200);
michael@0 1332 is_approx(px_to_num(cs.paddingTop), 40 + 40 * gTF.ease_in_out(0.4), 0.01,
michael@0 1333 "multiprop top at 1400ms");
michael@0 1334 is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.7), 0.01,
michael@0 1335 "multiprop left at 1400ms");
michael@0 1336 advance_clock(300);
michael@0 1337 is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.6), 0.01,
michael@0 1338 "multiprop top at 1700ms");
michael@0 1339 is_approx(px_to_num(cs.paddingLeft), 50 + 10 * gTF.ease_out(0.1), 0.01,
michael@0 1340 "multiprop left at 1700ms");
michael@0 1341 advance_clock(200);
michael@0 1342 is_approx(px_to_num(cs.paddingTop), 10 + 30 * gTF.ease(0.2), 0.01,
michael@0 1343 "multiprop top at 1900ms");
michael@0 1344 is_approx(px_to_num(cs.paddingLeft), 30 + 20 * gTF.ease(0.4), 0.01,
michael@0 1345 "multiprop left at 1900ms");
michael@0 1346 done_div();
michael@0 1347
michael@0 1348 // Test for https://bugzilla.mozilla.org/show_bug.cgi?id=651456 -- make
michael@0 1349 // sure that refreshing of animations doesn't break when we get two
michael@0 1350 // refreshes with the same timestamp.
michael@0 1351 new_div("animation: anim2 1s linear");
michael@0 1352 is(cs.marginRight, "0px", "bug 651456 at 0ms");
michael@0 1353 advance_clock(100);
michael@0 1354 is(cs.marginRight, "10px", "bug 651456 at 100ms (1)");
michael@0 1355 advance_clock(0); // still forces a refresh
michael@0 1356 is(cs.marginRight, "10px", "bug 651456 at 100ms (2)");
michael@0 1357 advance_clock(100);
michael@0 1358 is(cs.marginRight, "20px", "bug 651456 at 200ms");
michael@0 1359 done_div();
michael@0 1360
michael@0 1361 // Test that UA !important rules override animations.
michael@0 1362 // This test depends on forms.css having a rule
michael@0 1363 // select { line-height: !important }
michael@0 1364 // If that rule changes, we should rewrite it to depend on a different rule.
michael@0 1365 new_element("select", "");
michael@0 1366 var default_line_height = cs.lineHeight;
michael@0 1367 done_div();
michael@0 1368 new_element("select", "animation: uaoverride 2s linear infinite");
michael@0 1369 is(cs.lineHeight, default_line_height,
michael@0 1370 "animations should not override UA !important at 0ms");
michael@0 1371 is(cs.marginTop, "20px",
michael@0 1372 "rest of animation should still work when UA !important present at 0ms");
michael@0 1373 advance_clock(200);
michael@0 1374 is(cs.lineHeight, default_line_height,
michael@0 1375 "animations should not override UA !important at 200ms");
michael@0 1376 is(cs.marginTop, "40px",
michael@0 1377 "rest of animation should still work when UA !important present at 200ms");
michael@0 1378 done_div();
michael@0 1379
michael@0 1380 // Test that author !important rules override animations, but
michael@0 1381 // that animations override regular author rules.
michael@0 1382 new_div("animation: always_fifty 1s linear infinite; margin-left: 200px");
michael@0 1383 is(cs.marginLeft, "50px", "animations override regular author rules");
michael@0 1384 done_div();
michael@0 1385 new_div("animation: always_fifty 1s linear infinite; margin-left: 200px ! important;");
michael@0 1386 is(cs.marginLeft, "200px", "important author rules override animations");
michael@0 1387 done_div();
michael@0 1388
michael@0 1389 // Test interaction of animations and restyling (Bug 686656).
michael@0 1390 // This test depends on kf3 getting its 0% and 100% values from the
michael@0 1391 // rules below it in the cascade; we're checking that the animation
michael@0 1392 // isn't rebuilt when the restyles happen.
michael@0 1393 new_div("animation: kf3 1s linear forwards");
michael@0 1394 is(cs.marginTop, "0px", "bug 686656 test 1 at 0ms");
michael@0 1395 advance_clock(250);
michael@0 1396 display.style.color = "blue";
michael@0 1397 is(cs.marginTop, "100px", "bug 686656 test 1 at 250ms");
michael@0 1398 advance_clock(375);
michael@0 1399 is(cs.marginTop, "50px", "bug 686656 test 1 at 625ms");
michael@0 1400 advance_clock(375);
michael@0 1401 is(cs.marginTop, "0px", "bug 686656 test 1 at 1000ms");
michael@0 1402 done_div();
michael@0 1403 display.style.color = "";
michael@0 1404
michael@0 1405 // Test interaction of animations and restyling (Bug 686656),
michael@0 1406 // with reframing.
michael@0 1407 // This test depends on kf3 getting its 0% and 100% values from the
michael@0 1408 // rules below it in the cascade; we're checking that the animation
michael@0 1409 // isn't rebuilt when the restyles happen.
michael@0 1410 new_div("animation: kf3 1s linear forwards");
michael@0 1411 is(cs.marginTop, "0px", "bug 686656 test 2 at 0ms");
michael@0 1412 advance_clock(250);
michael@0 1413 display.style.overflow = "scroll";
michael@0 1414 is(cs.marginTop, "100px", "bug 686656 test 2 at 250ms");
michael@0 1415 advance_clock(375);
michael@0 1416 is(cs.marginTop, "50px", "bug 686656 test 2 at 625ms");
michael@0 1417 advance_clock(375);
michael@0 1418 is(cs.marginTop, "0px", "bug 686656 test 2 at 1000ms");
michael@0 1419 done_div();
michael@0 1420 display.style.overflow = "";
michael@0 1421
michael@0 1422 // Test that cascading between keyframes rules is per-property rather
michael@0 1423 // than per-rule (bug ), and that the timing function isn't taken from a
michael@0 1424 // rule that's skipped. (Bug 738003)
michael@0 1425 new_div("animation: cascade 1s linear forwards; position: relative");
michael@0 1426 is(cs.top, "0px", "cascade test (top) at 0ms");
michael@0 1427 is(cs.left, "0px", "cascade test (top) at 0ms");
michael@0 1428 advance_clock(125);
michael@0 1429 is(cs.top, "0px", "cascade test (top) at 125ms");
michael@0 1430 is(cs.left, "50px", "cascade test (top) at 125ms");
michael@0 1431 advance_clock(125);
michael@0 1432 is(cs.top, "0px", "cascade test (top) at 250ms");
michael@0 1433 is(cs.left, "100px", "cascade test (top) at 250ms");
michael@0 1434 advance_clock(125);
michael@0 1435 is(cs.top, "50px", "cascade test (top) at 375ms");
michael@0 1436 is(cs.left, "100px", "cascade test (top) at 375ms");
michael@0 1437 advance_clock(125);
michael@0 1438 is(cs.top, "100px", "cascade test (top) at 500ms");
michael@0 1439 is(cs.left, "100px", "cascade test (top) at 500ms");
michael@0 1440 advance_clock(125);
michael@0 1441 is(cs.top, "100px", "cascade test (top) at 625ms");
michael@0 1442 is(cs.left, "50px", "cascade test (top) at 625ms");
michael@0 1443 advance_clock(125);
michael@0 1444 is(cs.top, "100px", "cascade test (top) at 750ms");
michael@0 1445 is(cs.left, "0px", "cascade test (top) at 750ms");
michael@0 1446 advance_clock(125);
michael@0 1447 is(cs.top, "50px", "cascade test (top) at 875ms");
michael@0 1448 is(cs.left, "0px", "cascade test (top) at 875ms");
michael@0 1449 advance_clock(125);
michael@0 1450 is(cs.top, "0px", "cascade test (top) at 1000ms");
michael@0 1451 is(cs.left, "0px", "cascade test (top) at 1000ms");
michael@0 1452 done_div();
michael@0 1453
michael@0 1454 new_div("animation: cascade2 8s linear forwards");
michael@0 1455 is(cs.textIndent, "0px", "cascade2 test at 0s");
michael@0 1456 advance_clock(1000);
michael@0 1457 is(cs.textIndent, "25px", "cascade2 test at 1s");
michael@0 1458 advance_clock(1000);
michael@0 1459 is(cs.textIndent, "50px", "cascade2 test at 2s");
michael@0 1460 advance_clock(1000);
michael@0 1461 is(cs.textIndent, "25px", "cascade2 test at 3s");
michael@0 1462 advance_clock(1000);
michael@0 1463 is(cs.textIndent, "0px", "cascade2 test at 4s");
michael@0 1464 advance_clock(3000);
michael@0 1465 is(cs.textIndent, "75px", "cascade2 test at 7s");
michael@0 1466 advance_clock(1000);
michael@0 1467 is(cs.textIndent, "100px", "cascade2 test at 8s");
michael@0 1468 done_div();
michael@0 1469
michael@0 1470 new_div("-moz-animation: primitives1 2s linear forwards");
michael@0 1471 is(cs.getPropertyValue("-moz-transform"), "matrix(1, 0, 0, 1, 0, 0)",
michael@0 1472 "primitives1 at 0s");
michael@0 1473 advance_clock(1000);
michael@0 1474 is(cs.getPropertyValue("-moz-transform"),
michael@0 1475 "matrix(-0.707107, 0.707107, -0.707107, -0.707107, 0, 0)",
michael@0 1476 "primitives1 at 1s");
michael@0 1477 advance_clock(1000);
michael@0 1478 is(cs.getPropertyValue("-moz-transform"), "matrix(0, -1, 1, 0, 0, 0)",
michael@0 1479 "primitives1 at 0s");
michael@0 1480 done_div();
michael@0 1481
michael@0 1482 new_div("animation: important1 1s linear forwards");
michael@0 1483 is(cs.marginTop, "50px", "important1 test at 0s");
michael@0 1484 advance_clock(500);
michael@0 1485 is(cs.marginTop, "75px", "important1 test at 0.5s");
michael@0 1486 advance_clock(500);
michael@0 1487 is(cs.marginTop, "100px", "important1 test at 1s");
michael@0 1488 done_div();
michael@0 1489
michael@0 1490 new_div("animation: important2 1s linear forwards");
michael@0 1491 is(cs.marginTop, "50px", "important2 (margin-top) test at 0s");
michael@0 1492 is(cs.marginBottom, "100px", "important2 (margin-bottom) test at 0s");
michael@0 1493 advance_clock(1000);
michael@0 1494 is(cs.marginTop, "0px", "important2 (margin-top) test at 1s");
michael@0 1495 is(cs.marginBottom, "50px", "important2 (margin-bottom) test at 1s");
michael@0 1496 done_div();
michael@0 1497
michael@0 1498 // Test that it's the length of the 'animation-name' list that's used to
michael@0 1499 // start animations.
michael@0 1500 // note: anim2 animates margin-right from 0 to 100px
michael@0 1501 // note: anim3 animates margin-top from 0 to 100px
michael@0 1502 new_div("animation-name: anim2, anim3; animation-duration: 1s; animation-timing-function: linear; animation-delay: -250ms, -250ms, -750ms, -500ms;");
michael@0 1503 is(cs.marginRight, "25px", "animation-name list length is the length that matters");
michael@0 1504 is(cs.marginTop, "25px", "animation-name list length is the length that matters");
michael@0 1505 done_div();
michael@0 1506 new_div("animation-name: anim2, anim3, anim2; animation-duration: 1s; animation-timing-function: linear; animation-delay: -250ms, -250ms, -750ms, -500ms;");
michael@0 1507 is(cs.marginRight, "75px", "animation-name list length is the length that matters, and the last occurrence of a name wins");
michael@0 1508 is(cs.marginTop, "25px", "animation-name list length is the length that matters");
michael@0 1509 done_div();
michael@0 1510
michael@0 1511 var dyn_sheet_elt = document.createElement("style");
michael@0 1512 document.head.appendChild(dyn_sheet_elt);
michael@0 1513 var dyn_sheet = dyn_sheet_elt.sheet;
michael@0 1514 dyn_sheet.insertRule("@keyframes dyn1 { from { margin-left: 0 } 50% { margin-left: 50px } to { margin-left: 100px } }", 0);
michael@0 1515 dyn_sheet.insertRule("@keyframes dyn2 { from { margin-left: 100px } to { margin-left: 200px } }", 1);
michael@0 1516 var dyn1 = dyn_sheet.cssRules[0];
michael@0 1517 var dyn2 = dyn_sheet.cssRules[1];
michael@0 1518 new_div("animation: dyn1 1s linear");
michael@0 1519 is(cs.marginLeft, "0px", "dynamic rule change test, initial state");
michael@0 1520 advance_clock(250);
michael@0 1521 is(cs.marginLeft, "25px", "dynamic rule change test, 250ms");
michael@0 1522 dyn2.name = "dyn1";
michael@0 1523 is(cs.marginLeft, "125px", "dynamic rule change test, change in @keyframes name applies");
michael@0 1524 dyn2.appendRule("50% { margin-left: 0px }");
michael@0 1525 is(cs.marginLeft, "50px", "dynamic rule change test, @keyframes appendRule");
michael@0 1526 var dyn2_kf1 = dyn2.cssRules[0]; // currently 0% { margin-left: 100px }
michael@0 1527 dyn2_kf1.style.marginLeft = "-100px";
michael@0 1528 // FIXME: Bug 978833 (keyframe rules used as nsIStyleRule but doesn't follow immutability contract)
michael@0 1529 todo_is(cs.marginLeft, "-50px", "dynamic rule change test, keyframe style set");
michael@0 1530 dyn2.name = "dyn2";
michael@0 1531 is(cs.marginLeft, "25px", "dynamic rule change test, change in @keyframes name applies (second time)");
michael@0 1532 var dyn1_kf2 = dyn1.cssRules[1]; // currently 50% { margin-left: 50px }
michael@0 1533 dyn1_kf2.keyText = "25%";
michael@0 1534 is(cs.marginLeft, "50px", "dynamic rule change test, change in keyframe keyText");
michael@0 1535 dyn1.deleteRule("25%");
michael@0 1536 is(cs.marginLeft, "25px", "dynamic rule change test, @keyframes deleteRule");
michael@0 1537 done_div();
michael@0 1538 dyn_sheet_elt.parentNode.removeChild(dyn_sheet_elt);
michael@0 1539 dyn_sheet_elt = null;
michael@0 1540 dyn_sheet = null;
michael@0 1541
michael@0 1542 SpecialPowers.DOMWindowUtils.restoreNormalRefresh();
michael@0 1543
michael@0 1544 </script>
michael@0 1545 </pre>
michael@0 1546 </body>
michael@0 1547 </html>

Mercurial Repository: The Tor Browser

Europalab SCM Repository Server

mercurial