test_animations_dynamic_changes.html (1959B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=978833 5 --> 6 <head> 7 <title>Test for Bug 978833</title> 8 <script src="/tests/SimpleTest/SimpleTest.js"></script> 9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 10 <style id="style"> 11 @keyframes a { 12 from, to { 13 /* a non-inherited property, so it's cached in the rule tree */ 14 margin-left: 50px; 15 } 16 } 17 .alwaysa { 18 animation: a linear 1s infinite; 19 } 20 </style> 21 </head> 22 <body> 23 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=978833">Mozilla Bug 978833</a> 24 <p id="display"></p> 25 <pre id="test"> 26 <script type="application/javascript"> 27 28 var p = document.getElementById("display"); 29 var cs = getComputedStyle(p, ""); 30 var style = document.getElementById("style").sheet; 31 32 /** Test for Bug 978833 */ 33 function test_bug978833() { 34 var kfs = style.cssRules[0]; 35 var kf = kfs.cssRules[0]; 36 is(kf.style.marginLeft, "50px", "we found the right keyframe rule"); 37 38 p.classList.add("alwaysa"); 39 is(cs.marginLeft, "50px", "p margin-left should be 50px"); 40 41 // Temporarily remove the animation style, since we resolve keyframes 42 // on top of current animation styles (although maybe we shouldn't), 43 // so we need to remove those styles to hit the rule tree cache. 44 p.classList.remove("alwaysa"); 45 is(cs.marginLeft, "0px", "p margin-left should be 0px without animation"); 46 47 p.classList.add("alwaysa"); 48 kf.style.marginLeft = "100px"; 49 is(cs.marginLeft, "100px", "p margin-left should be 100px after change"); 50 51 // Try the same thing a second time, just to make sure it works again. 52 p.classList.remove("alwaysa"); 53 is(cs.marginLeft, "0px", "p margin-left should be 0px without animation"); 54 p.classList.add("alwaysa"); 55 kf.style.marginLeft = "150px"; 56 is(cs.marginLeft, "150px", "p margin-left should be 150px after second change"); 57 58 p.style.animation = ""; 59 } 60 test_bug978833(); 61 62 </script> 63 </pre> 64 </body> 65 </html>