third_party/WebKit/LayoutTests/animations/keyframes-cssom-unprefixed-02.html

   1 <!DOCTYPE html>
   2 <html lang="en">
   3 <head>
   4   <script src="../resources/js-test.js"></script>
   5   <style type="text/css" media="screen">
   6     #test {
   7         position: absolute;
   8         left: 0;
   9         top: 100px;
  10         height: 100px;
  11         width: 100px;
  12         background-color: blue;
  13         animation-duration: 1s;
  14         animation-timing-function: linear;
  15         animation-name: anim;
  16         animation-fill-mode: forwards;
  17     }
  18     </style>
  19 </head>
  20 <body>
  21 <script>
  22 description("Test the CSSOM of @keyframes.")
  23
  24 var testContainer = document.createElement("div");
  25 document.body.appendChild(testContainer);
  26
  27 testContainer.innerHTML = '<div style="width:500px;height:500px"><div id="test">hello</div></div>';
  28
  29 e = document.getElementById('test');
  30 var lastSheet = document.styleSheets[document.styleSheets.length - 1];
  31 lastSheet.insertRule("@keyframes anim { from { left: 200px; } to { left: 300px;} }", lastSheet.cssRules.length);
  32
  33 var keyframeRule = lastSheet.cssRules[lastSheet.cssRules.length - 1];
  34 shouldBeEqualToString("keyframeRule.toString()", "[object CSSKeyframesRule]");
  35 shouldBe("keyframeRule.type", "7");
  36 shouldBeEqualToString("keyframeRule.name", "anim");
  37 shouldBeEqualToString("keyframeRule.findRule('from').cssText", "0% { left: 200px; }");
  38 shouldBeEqualToString("keyframeRule.findRule('to').cssText", "100% { left: 300px; }");
  39 keyframeRule.deleteRule("from");
  40 shouldBeNull("keyframeRule.findRule('from')");
  41 keyframeRule.appendRule("from { left: 200px; }");
  42 shouldBeEqualToString("keyframeRule.findRule('from').cssText", "0% { left: 200px; }");
  43 shouldBeEqualToString("keyframeRule.cssRules[0].toString()", "[object CSSKeyframeRule]");
  44 shouldBeEqualToString("keyframeRule.cssRules[0].cssText", "100% { left: 300px; }");
  45 shouldBeEqualToString("keyframeRule.cssRules[0].keyText", "100%");
  46 shouldBeEqualToString("keyframeRule.cssRules[0].style.cssText", "left: 300px;");
  47 shouldBeEqualToString("keyframeRule.cssRules[1].toString()", "[object CSSKeyframeRule]");
  48 shouldBeEqualToString("keyframeRule.cssRules[1].cssText", "0% { left: 200px; }");
  49 shouldBeEqualToString("keyframeRule.cssRules[1].keyText", "0%");
  50 shouldBeEqualToString("keyframeRule.cssRules[1].style.cssText", "left: 200px;");
  51
  52 shouldThrow("new CSSKeyframesRule().name", "'TypeError: Illegal constructor'");
  53
  54 document.body.removeChild(testContainer);
  55 </script>
  56 </body>
  57 </html>