layout/style/test/test_animations_dynamic_changes.html

   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>