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

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