Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(73)

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/animations/keyframes-rule.html

Issue 18864008: Beef up keyframe animation LayoutTest (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Also remove some stale files related to this test Created 7 years, 5 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch | Annotate | Revision Log
« no previous file with comments | « no previous file | LayoutTests/animations/keyframes-rule-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <style type="text/css" media="screen"> 3 <style type="text/css" media="screen">
4 @-webkit-keyframes test1 { 4 @-webkit-keyframes test1 {
5 from { left: 10px; } 5 from { left: 10px; }
6 to { left: 20px; } 6 to { left: 20px; }
7 } 7 }
8 @-webkit-keyframes test2 { 8 @-webkit-keyframes test2 {
9 0% { left: 10px; } 9 0% { left: 10px; }
10 50% { left: 30px; } 10 50% , 60% { left: 30px; }
11 100% { left: 20px; } 11 -10% { left: 50px; }
12 90%, 100% { left: 20px; }
12 } 13 }
13 @-webkit-keyframes test-from-to { 14 @-webkit-keyframes test-from-to {
14 from { left: 10px; } 15 from { left: 10px; }
16 -10% { left: 50px; }
15 50% { left: 30px; } 17 50% { left: 30px; }
16 to { left: 20px; } 18 to { left: 20px; }
17 } 19 }
18 </style> 20 </style>
19 <script src="../fast/js/resources/js-test-pre.js"></script> 21 <script src="../fast/js/resources/js-test-pre.js"></script>
20 </head> 22 </head>
21 <body> 23 <body>
22 <script> 24 <script>
23 25
24 description("This tests the WebKitCSSKeyframeRule and WebKitCSSKeyframesRule int erfaces."); 26 description("This tests the WebKitCSSKeyframeRule and WebKitCSSKeyframesRule int erfaces.");
(...skipping 55 matching lines...) Expand 10 before | Expand all | Expand 10 after
80 shouldBe("keyframes2.name", "'test2'"); 82 shouldBe("keyframes2.name", "'test2'");
81 83
82 var rules2 = keyframes2.cssRules; 84 var rules2 = keyframes2.cssRules;
83 85
84 debug(""); 86 debug("");
85 87
86 shouldBe("rules2.length", "3"); 88 shouldBe("rules2.length", "3");
87 89
88 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 90 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
89 shouldBe("rules2.item(0).keyText", "'0%'"); 91 shouldBe("rules2.item(0).keyText", "'0%'");
90 shouldBe("rules2.item(1).keyText", "'50%'"); 92 shouldBe("rules2.item(1).keyText", "'50%,60%'");
91 shouldBe("rules2.item(2).keyText", "'100%'"); 93 shouldBe("rules2.item(2).keyText", "'90%,100%'");
92 94
93 shouldBe("rules2.item(0).cssText", "'0% { left: 10px; }'"); 95 shouldBe("rules2.item(0).cssText", "'0% { left: 10px; }'");
94 shouldBe("rules2.item(1).cssText", "'50% { left: 30px; }'"); 96 shouldBe("rules2.item(1).cssText", "'50%,60% { left: 30px; }'");
95 shouldBe("rules2.item(2).cssText", "'100% { left: 20px; }'"); 97 shouldBe("rules2.item(2).cssText", "'90%,100% { left: 20px; }'");
96 98
97 debug(""); 99 debug("");
98 100
99 shouldBeType("rules2.item(0).style", "CSSStyleDeclaration"); 101 shouldBeType("rules2.item(0).style", "CSSStyleDeclaration");
100 shouldBe("rules2.item(0).style.length", "1"); 102 shouldBe("rules2.item(0).style.length", "1");
101 103
102 debug(""); 104 debug("");
103 debug("Find a rule"); 105 debug("Find a rule");
104 106
105 var rule = keyframes2.findRule("50%"); 107 var rule = keyframes2.findRule("0%");
106 108
107 if (!rule) 109 if (!rule)
108 testFailed("Could not extract '50%' keyframe rule"); 110 testFailed("Could not extract '0%' keyframe rule");
109 111
110 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 112 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
111 shouldBe("rule.cssText", "'50% { left: 30px; }'"); 113 shouldBe("rule.cssText", "'0% { left: 10px; }'");
114
115 debug("");
116 debug("Find a rule with multiple key values");
117
118 var rule = keyframes2.findRule("50%,60%");
119
120 if (!rule)
121 testFailed("Could not extract '50%,60%' keyframe rule");
122
123 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
124 shouldBe("rule.cssText", "'50%,60% { left: 30px; }'");
112 125
113 debug(""); 126 debug("");
114 debug("Find a rule using from and to"); 127 debug("Find a rule using from and to");
115 128
116 var keyframesFromTo = document.styleSheets.item(0).cssRules.item(2); 129 var keyframesFromTo = document.styleSheets.item(0).cssRules.item(2);
117 shouldBe("keyframesFromTo.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE"); 130 shouldBe("keyframesFromTo.type", "window.CSSRule.WEBKIT_KEYFRAMES_RULE");
118 rule = keyframesFromTo.findRule("From"); 131 rule = keyframesFromTo.findRule("From");
119 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 132 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
120 shouldBe("rule.cssText", "'0% { left: 10px; }'"); 133 shouldBe("rule.cssText", "'0% { left: 10px; }'");
121 134
122 rule = keyframesFromTo.findRule("TO"); 135 rule = keyframesFromTo.findRule("TO");
123 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 136 shouldBe("rule.type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
124 shouldBe("rule.cssText", "'100% { left: 20px; }'"); 137 shouldBe("rule.cssText", "'100% { left: 20px; }'");
125 138
126 debug(""); 139 debug("");
127 debug("Try to find a rule that doesn't exist"); 140 debug("Try to find a rule that doesn't exist");
128 141
129 rule = keyframes2.findRule("70%"); 142 rule = keyframes2.findRule("70%");
130 143
131 if (rule) 144 if (rule)
132 testFailed("Was able to find the non-existent '70%' keyframe rule"); 145 testFailed("Was able to find the non-existent '70%' keyframe rule");
133 else 146 else
134 testPassed("Non-existent rule was not found"); 147 testPassed("Non-existent rule was not found");
135 148
136 debug(""); 149 debug("");
137 debug("Delete a rule"); 150 debug("Delete a rule");
138 151
139 keyframes2.deleteRule("50%"); 152 keyframes2.deleteRule("50%,60%");
140 shouldBe("rules2.length", "2"); 153 shouldBe("rules2.length", "2");
141 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 154 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
142 shouldBe("rules2.item(0).keyText", "'0%'"); 155 shouldBe("rules2.item(0).keyText", "'0%'");
143 shouldBe("rules2.item(1).keyText", "'100%'"); 156 shouldBe("rules2.item(1).keyText", "'90%,100%'");
144 157
145 debug(""); 158 debug("");
146 debug("Delete a from rule"); 159 debug("Delete a from rule");
147 keyframesFromTo.deleteRule("0%"); 160 keyframesFromTo.deleteRule("0%");
148 var rulesFromTo = keyframesFromTo.cssRules; 161 var rulesFromTo = keyframesFromTo.cssRules;
149 shouldBe("rulesFromTo.length", "2"); 162 shouldBe("rulesFromTo.length", "2");
150 shouldBe("rulesFromTo.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 163 shouldBe("rulesFromTo.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
151 shouldBe("rulesFromTo.item(0).keyText", "'50%'"); 164 shouldBe("rulesFromTo.item(0).keyText", "'50%'");
152 shouldBe("rulesFromTo.item(1).keyText", "'100%'"); 165 shouldBe("rulesFromTo.item(1).keyText", "'100%'");
153 166
154 167
155 debug(""); 168 debug("");
156 debug("Delete a rule that doesn't exist"); 169 debug("Delete a rule that doesn't exist");
157 170
158 keyframes2.deleteRule("70%"); 171 keyframes2.deleteRule("70%");
159 shouldBe("rules2.length", "2"); 172 shouldBe("rules2.length", "2");
160 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE"); 173 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
161 shouldBe("rules2.item(0).keyText", "'0%'"); 174 shouldBe("rules2.item(0).keyText", "'0%'");
162 shouldBe("rules2.item(1).keyText", "'100%'"); 175 shouldBe("rules2.item(1).keyText", "'90%,100%'");
163 176
164 debug(""); 177 debug("");
178 debug("Set a keyframe key");
179
180 rules2.item(0).keyText = "70%";
181 shouldBe("rules2.length", "2");
182 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
183 shouldBe("rules2.item(0).keyText", "'70%'");
184 shouldBe("rules2.item(1).keyText", "'90%,100%'");
185
186 debug("");
187 debug("Set a keyframe key with 'from'");
188
189 rules2.item(0).keyText = "from";
190 shouldBe("rules2.length", "2");
191 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
192 // FIXME: Should this be converted to '0px'?
193 shouldBe("rules2.item(0).keyText", "'from'");
194 shouldBe("rules2.item(1).keyText", "'90%,100%'");
195
196 debug("");
197 debug("Set a keyframe key with multiple values");
198
199 rules2.item(0).keyText = "10%, 20%, 30%";
200 shouldBe("rules2.length", "2");
201 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
202 // FIXME: Should we strip spaces to match the keyText parsed from a keyframe rul e?
203 shouldBe("rules2.item(0).keyText", "'10%, 20%, 30%'");
204 shouldBe("rules2.item(1).keyText", "'90%,100%'");
205
206 debug("");
207 debug("Set a keyframe key with an out-of-range value");
208
209 rules2.item(0).keyText = "40%, -50%, 60%";
210 shouldBe("rules2.length", "2");
211 shouldBe("rules2.item(0).type", "window.CSSRule.WEBKIT_KEYFRAME_RULE");
212 // FIXME: Should we leave keyText unchanged when attempting to set to an invalid string?
213 shouldBe("rules2.item(0).keyText", "'40%, -50%, 60%'");
214 shouldBe("rules2.item(1).keyText", "'90%,100%'");
165 215
166 </script> 216 </script>
167 <script src="../fast/js/resources/js-test-post.js"></script> 217 <script src="../fast/js/resources/js-test-post.js"></script>
168 </body> 218 </body>
169 </html> 219 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/animations/keyframes-rule-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698