test_keyframes_rules.html (4800B)
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>