layout/style/test/test_keyframes_rules.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=577974
   5 -->
   6 <head>
   7   <title>Test for Bug 577974</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
  12   @keyframes bounce {
  13     from {
  14       margin-left: 0
  15     }
  16
  17     /*
  18      * These rules should get dropped due to syntax errors.  The script
  19      * below tests that the 25% rule following them is at cssRules[1].
  20      */
  21     from, { margin-left: 0 }
  22     from , { margin-left: 0 }
  23     , from { margin-left: 0 }
  24     ,from { margin-left: 0 }
  25     from from { margin-left: 0 }
  26     from, 1 { margin-left: 0 }
  27     1 { margin-left: 0 }
  28     1, from { margin-left: 0 }
  29     from, 1.0 { margin-left: 0 }
  30     1.0 { margin-left: 0 }
  31     1.0, from { margin-left: 0 }
  32
  33     25% {
  34       margin-left: 25px;
  35     }
  36
  37     75%, 85% {
  38       margin-left: 90px;
  39     }
  40
  41     100% {
  42       margin-left: 100px;
  43     }
  44   }
  45
  46   </style>
  47 </head>
  48 <body>
  49 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=577974">Mozilla Bug 577974</a>
  50 <p id="display"></p>
  51 <div id="content" style="display: none">
  52
  53 </div>
  54 <pre id="test">
  55 <script type="application/javascript">
  56
  57 /** Test for Bug 577974 **/
  58
  59 var sheet = document.getElementById("style").sheet;
  60
  61 var bounce = sheet.cssRules[0];
  62 is(bounce.type, CSSRule.KEYFRAMES_RULE, "bounce.type");
  63 is(bounce.type, 7, "bounce.type");
  64 is(bounce.name, "bounce", "bounce.name");
  65 bounce.name = "bouncier";
  66 is(bounce.name, "bouncier", "setting bounce.name");
  67
  68 is(bounce.cssRules[0].type, CSSRule.KEYFRAME_RULE, "keyframe rule type");
  69 is(bounce.cssRules[0].type, 8, "keyframe rule type");
  70 is(bounce.cssRules[0].keyText, "0%", "keyframe rule keyText");
  71 is(bounce.cssRules[1].keyText, "25%", "keyframe rule keyText");
  72 is(bounce.cssRules[2].keyText, "75%, 85%", "keyframe rule keyText");
  73 is(bounce.cssRules[3].keyText, "100%", "keyframe rule keyText");
  74 is(bounce.cssRules[0].style.marginLeft, "0px", "keyframe rule style");
  75 is(bounce.cssRules[1].style.marginLeft, "25px", "keyframe rule style");
  76
  77 is(bounce.cssRules[0].cssText, "0% { margin-left: 0px; }");
  78 is(bounce.cssText, "@keyframes bouncier {\n" +
  79                    "0% { margin-left: 0px; }\n" +
  80                    "25% { margin-left: 25px; }\n" +
  81                    "75%, 85% { margin-left: 90px; }\n" +
  82                    "100% { margin-left: 100px; }\n" +
  83                    "}");
  84
  85 bounce.cssRules[1].keyText = "from, 1"; // syntax error
  86 bounce.cssRules[1].keyText = "from, x"; // syntax error
  87 bounce.cssRules[1].keyText = "from,"; // syntax error
  88 bounce.cssRules[1].keyText = "from x"; // syntax error
  89 bounce.cssRules[1].keyText = "x"; // syntax error
  90 is(bounce.cssRules[1].keyText, "25%", "keyframe rule keyText parsing");
  91 bounce.cssRules[1].keyText = "from, 10%";
  92 is(bounce.cssRules[1].keyText, "0%, 10%", "keyframe rule keyText parsing");
  93 bounce.cssRules[1].keyText = "from, 0%";
  94 is(bounce.cssRules[1].keyText, "0%, 0%", "keyframe rule keyText parsing");
  95 bounce.cssRules[1].keyText = "from, from, from";
  96 is(bounce.cssRules[1].keyText, "0%, 0%, 0%", "keyframe rule keyText parsing");
  97
  98 is(bounce.findRule("75%"), null, "findRule should match all keys");
  99 is(bounce.findRule("85%, 75%"), null,
 100    "findRule should match all keys in order");
 101 is(bounce.findRule("75%,85%"), bounce.cssRules[2],
 102    "findRule should match all keys in order, parsed");
 103 is(bounce.findRule("to"), bounce.cssRules[3],
 104    "findRule should match keys as parsed");
 105 is(bounce.findRule("100%"), bounce.cssRules[3],
 106    "findRule should match keys as parsed");
 107 is(bounce.findRule("100%, 100%"), null,
 108    "findRule should match key list");
 109 is(bounce.findRule("100%,"), null,
 110    "findRule should fail when given bad selector");
 111 is(bounce.findRule(",100%"), null,
 112    "findRule should fail when given bad selector");
 113 is(bounce.cssRules.length, 4, "length of css rules");
 114 bounce.deleteRule("85%");
 115 is(bounce.cssRules.length, 4, "deleteRule should match all keys");
 116 bounce.deleteRule("85%, 75%");
 117 is(bounce.cssRules.length, 4, "deleteRule should match key list");
 118 bounce.deleteRule("75%  ,85%");
 119 is(bounce.cssRules.length, 3, "deleteRule should match keys in order, parsed");
 120 bounce.deleteRule("0%");
 121 is(bounce.cssRules.length, 2, "deleteRule should match keys in order, parsed");
 122 bounce.appendRule("from { color: blue }");
 123 is(bounce.cssRules.length, 3, "appendRule should append");
 124 is(bounce.cssRules[2].keyText, "0%", "appendRule should append");
 125 bounce.appendRule("from { color: blue }");
 126 is(bounce.cssRules.length, 4, "appendRule should append");
 127 is(bounce.cssRules[3].keyText, "0%", "appendRule should append");
 128 bounce.appendRule("from { color: blue } to { color: green }");
 129 is(bounce.cssRules.length, 4, "appendRule should ignore garbage at end");
 130
 131 </script>
 132 </pre>
 133 </body>
 134 </html>