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

Side by Side Diff: LayoutTests/inspector/elements/styles-4/styles-new-API.html

Issue 1187193005: DevTools: migrate from CSS.setPropertyText to CSS.setStyleText (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: for landing Created 5 years, 6 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
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 3
4 <link rel="stylesheet" href="resources/styles-new-API.css"> 4 <link rel="stylesheet" href="resources/styles-new-API.css">
5 5
6 <script src="../../../http/tests/inspector/inspector-test.js"></script> 6 <script src="../../../http/tests/inspector/inspector-test.js"></script>
7 <script src="../../../http/tests/inspector/elements-test.js"></script> 7 <script src="../../../http/tests/inspector/elements-test.js"></script>
8 <script src="../styles/styles-test.js"></script> 8 <script src="../styles/styles-test.js"></script>
9 <script> 9 <script>
10 10
(...skipping 152 matching lines...) Expand 10 before | Expand all | Expand 10 after
163 InspectorTest.CSSAgent.getStyleSheetText(inlineStyle.styleSheetI d, textCallback.bind(this, inlineStyle)); 163 InspectorTest.CSSAgent.getStyleSheetText(inlineStyle.styleSheetI d, textCallback.bind(this, inlineStyle));
164 } 164 }
165 165
166 function nodeCallback(node) 166 function nodeCallback(node)
167 { 167 {
168 InspectorTest.CSSAgent.getInlineStylesForNode(node.id, callback) ; 168 InspectorTest.CSSAgent.getInlineStylesForNode(node.id, callback) ;
169 } 169 }
170 InspectorTest.nodeWithId("thetable", nodeCallback); 170 InspectorTest.nodeWithId("thetable", nodeCallback);
171 }, 171 },
172 172
173 function test_styleSheets(next)
174 {
175 var newStyleSheetText =
176 "body.mainpage {" +
177 " text-decoration: strikethrough;" +
178 " badproperty: 2badvalue2;" +
179 "}" +
180 "body {" +
181 " text-align: justify;" +
182 "}";
183
184 function didSetStyleText(error, style)
185 {
186 if (error) {
187 InspectorTest.addResult("error: " + error);
188 InspectorTest.completeTest();
189 return;
190 }
191 InspectorTest.addResult("");
192 InspectorTest.addResult("=== After style text set ===");
193 loadAndDumpStyleSheet(style.styleSheetId, next);
194 }
195
196 function collapseToStart(range)
197 {
198 return {
199 startLine: range.startLine,
200 startColumn: range.startColumn,
201 endLine: range.startLine,
202 endColumn: range.startColumn,
203 };
204 }
205
206 function setStyleText(rule)
207 {
208 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId, rule.style.cssProperties[1].range, "");
209 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId, rule.style.cssProperties[0].range, "");
210
211 // This operation should not update the style as the new propert y text is not parsable.
212 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId, collapseToStart(rule.style.range), "zzz;");
213 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId, collapseToStart(rule.style.range), "color: white; background: black;", didSetSty leText);
214 }
215
216 function didSetSelector(error, rule)
217 {
218 if (error) {
219 InspectorTest.addResult("error: " + error);
220 InspectorTest.completeTest();
221 return;
222 }
223 InspectorTest.addResult("");
224 InspectorTest.addResult("=== After selector set ===");
225 loadAndDumpStyleSheet(rule.styleSheetId, setStyleText.bind(this, rule));
226 }
227
228 function setRuleSelector(rule)
229 {
230 var orm = WebInspector.CSSRule.parsePayload(InspectorTest.cssMod el, rule);
231 InspectorTest.CSSAgent.setRuleSelector(orm.styleSheetId, orm.sel ectorRange, "html *, body[foo=\"bar\"]", didSetSelector);
232 }
233
234 function onMatchedStylesForNode(error, matchedStyles)
235 {
236 if (error) {
237 InspectorTest.addResult("error: " + error);
238 InspectorTest.completeTest();
239 return;
240 }
241 for (var i = 0; i < matchedStyles.length; ++i) {
242 var rule = matchedStyles[i].rule;
243 if (rule.selectorList.text !== "body.mainpage") {
244 continue;
245 }
246 setRuleSelector(rule);
247 return;
248 }
249 InspectorTest.addResult("Error: rule with selector body.mainpage is not found");
250 InspectorTest.completeTest();
251 }
252
253 function didPatchStyleSheet(styleSheetId)
254 {
255 InspectorTest.CSSAgent.getMatchedStylesForNode(bodyId, true, tru e, onMatchedStylesForNode);
256 }
257
258 function patchStyleSheet(styleSheetId)
259 {
260 InspectorTest.addResult("");
261 InspectorTest.addResult("=== Last stylesheet patched ===");
262 InspectorTest.CSSAgent.setStyleSheetText(styleSheetId, newStyleS heetText,
263 loadAndDumpStyleSheet.bind(null, styleSheetId, didPatchStyle Sheet));
264 }
265
266 function styleSheetInfosLoaded(styleSheets)
267 {
268 InspectorTest.addResult("");
269 InspectorTest.addResult("=== All stylesheets ===");
270 for (var i = 0; i < styleSheets.length; ++i)
271 loadAndDumpStyleSheet(styleSheets[i].id, (i < styleSheets.le ngth - 1) ? null : patchStyleSheet);
272 }
273 InspectorTest.waitForStylesheetsOnFrontend(4, styleSheetInfosLoaded) ;
274 },
275
276 function test_addRule(next) 173 function test_addRule(next)
277 { 174 {
278 function didGetStyles(error, matchedCSSRules) 175 function didGetStyles(error, matchedCSSRules)
279 { 176 {
280 if (error) { 177 if (error) {
281 InspectorTest.addResult("error: " + error); 178 InspectorTest.addResult("error: " + error);
282 return; 179 return;
283 } 180 }
284 InspectorTest.addResult(""); 181 InspectorTest.addResult("");
285 InspectorTest.addResult("=== Matched rules after rule added ===" ); 182 InspectorTest.addResult("=== Matched rules after rule added ===" );
286 InspectorTest.dumpRuleMatchesArray(matchedCSSRules); 183 InspectorTest.dumpRuleMatchesArray(matchedCSSRules);
287 next(); 184 next();
288 } 185 }
289 186
290 function didSetStyleText(error, style) 187 function didSetStyleText(error, style)
291 { 188 {
292 if (error) { 189 if (error) {
293 InspectorTest.addResult("error: " + error); 190 InspectorTest.addResult("error: " + error);
294 return; 191 return;
295 } 192 }
296 InspectorTest.CSSAgent.getMatchedStylesForNode(bodyId, true, tru e, didGetStyles); 193 InspectorTest.CSSAgent.getMatchedStylesForNode(bodyId, true, tru e, didGetStyles);
297 } 194 }
298 195
299 function ruleAdded(error, rule) 196 function ruleAdded(error, rule)
300 { 197 {
301 if (error) { 198 if (error) {
302 InspectorTest.addResult("error: " + error); 199 InspectorTest.addResult("error: " + error);
303 return; 200 return;
304 } 201 }
305 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId, { 202 InspectorTest.CSSAgent.setStyleText(rule.style.styleSheetId, {
306 startLine: rule.style.range.startLine, 203 startLine: rule.style.range.startLine,
307 startColumn: rule.style.range.startColumn, 204 startColumn: rule.style.range.startColumn,
308 endLine: rule.style.range.startLine, 205 endLine: rule.style.range.startLine,
309 endColumn: rule.style.range.startColumn 206 endColumn: rule.style.range.startColumn
310 }, "font-family: serif;", didSetStyleText); 207 }, "font-family: serif;", didSetStyleText);
311 } 208 }
312 209
313 function viaInspectorStyleSheetCreated(error, styleSheetId) 210 function viaInspectorStyleSheetCreated(error, styleSheetId)
314 { 211 {
315 if (error) { 212 if (error) {
316 InspectorTest.addResult("error: " + error); 213 InspectorTest.addResult("error: " + error);
317 InspectorTest.completeTest(); 214 InspectorTest.completeTest();
318 return; 215 return;
319 } 216 }
320 var range = { 217 var range = {
321 startLine: 0, 218 startLine: 0,
322 startColumn: 0, 219 startColumn: 0,
323 endLine: 0, 220 endLine: 0,
324 endColumn: 0 221 endColumn: 0
325 }; 222 };
326 InspectorTest.CSSAgent.addRule(styleSheetId, "body {}", range, r uleAdded); 223 InspectorTest.CSSAgent.addRule(styleSheetId, "body {}", range, r uleAdded);
327 } 224 }
328 225
329 var frameId = InspectorTest.resourceTreeModel.mainFrame.id; 226 var frameId = InspectorTest.resourceTreeModel.mainFrame.id;
330 InspectorTest.CSSAgent.createStyleSheet(frameId, viaInspectorStyleSh eetCreated.bind(this)); 227 InspectorTest.CSSAgent.createStyleSheet(frameId, viaInspectorStyleSh eetCreated.bind(this));
331 }, 228 },
332
333 function test_disableProperty(next)
334 {
335 function didEnableProperty(style)
336 {
337 InspectorTest.addResult("");
338 InspectorTest.addResult("=== After property enabled ===");
339 InspectorTest.dumpCSSStyleDeclaration(style);
340 next();
341 }
342
343 function step(style)
344 {
345 style.propertyAt(8).setDisabled(false, didEnableProperty);
346 }
347
348 function didDisableProperty(style)
349 {
350 InspectorTest.addResult("");
351 InspectorTest.addResult("=== After property manipulations ===");
352 InspectorTest.dumpCSSStyleDeclaration(style);
353 style.propertyAt(6).setDisabled(false, step);
354 }
355
356 function parseStylePayload(callback, error, payload)
357 {
358 if (error) {
359 InspectorTest.addResult(error);
360 InspectorTest.completeTest();
361 return;
362 }
363 callback(WebInspector.CSSStyleDeclaration.parsePayload(Inspector Test.cssModel, payload));
364 }
365
366 function stylesCallback(error, matchedCSSRules)
367 {
368 if (error) {
369 InspectorTest.addResult("error: " + error);
370 return;
371 }
372 // height : 100% ;
373 // border: 1px solid;
374 // border-width: 2px;
375 // background-color : #33FF33;
376 // googles: abra;
377 // foo: .bar;
378 // -moz-goog: 1***;
379 // border-width: 0px;
380 // padding-top: 1px; [d]
381
382 var orm = WebInspector.CSSStyleDeclaration.parsePayload(Inspecto rTest.cssModel, matchedCSSRules[1].rule.style);
383 orm.propertyAt(0).setDisabled(true, step1);
384
385 function step1(orm)
386 {
387 orm.propertyAt(7).setDisabled(true, step2);
388 }
389
390 function step2(orm)
391 {
392 InspectorTest.CSSAgent.setPropertyText(orm.styleSheetId, orm .propertyAt(7).range.collapseToStart(), "font-size: 12px;", parseStylePayload.bi nd(null, step3));
393 }
394
395 function step3(orm)
396 {
397 InspectorTest.CSSAgent.setPropertyText(orm.styleSheetId, orm .propertyAt(9).range.collapseToStart(), "font-size: 14px;", parseStylePayload.bi nd(null, step4));
398 }
399
400 function step4(orm)
401 {
402 orm.propertyAt(9).setDisabled(true, step5);
403 }
404
405 function step5(orm)
406 {
407 InspectorTest.CSSAgent.setPropertyText(orm.styleSheetId, orm .propertyAt(8).range, "border-width: 1px;", parseStylePayload.bind(null, step6)) ;
408 }
409
410 function step6(orm)
411 {
412 orm.propertyAt(8).setDisabled(false, step7);
413 }
414
415 function step7(orm)
416 {
417 InspectorTest.CSSAgent.setPropertyText(orm.styleSheetId, orm .propertyAt(3).range, "", parseStylePayload.bind(null, step8));
418 }
419
420 function step8(orm)
421 {
422 orm.propertyAt(9).setDisabled(false, didDisableProperty);
423 }
424
425 // height : 100% ; [d]
426 // border: 1px solid;
427 // border-width: 2px;
428 // googles: abra;
429 // foo: .bar;
430 // -moz-goog: 1***;
431 // font-size: 12px;
432 // border-width: 1px;
433 // font-size: 14px; [d]
434 // padding-top: 1px;
435 }
436
437 function nodeCallback(node)
438 {
439 InspectorTest.CSSAgent.getMatchedStylesForNode(node.id, true, tr ue, stylesCallback);
440 }
441 InspectorTest.nodeWithId("toggle", nodeCallback);
442 },
443 ]); 229 ]);
444 230
445 function loadAndDumpStyleSheet(styleSheetId, continuation, error) 231 function loadAndDumpStyleSheet(styleSheetId, continuation, error)
446 { 232 {
447 if (error) { 233 if (error) {
448 InspectorTest.addResult("error: " + error); 234 InspectorTest.addResult("error: " + error);
449 InspectorTest.completeTest(); 235 InspectorTest.completeTest();
450 return; 236 return;
451 } 237 }
452 238
(...skipping 36 matching lines...) Expand 10 before | Expand all | Expand 10 after
489 275
490 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font- weight: normal; width: 85%; background-image: url(bar.png)"> 276 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font- weight: normal; width: 85%; background-image: url(bar.png)">
491 <p> 277 <p>
492 Tests that InspectorCSSAgent API methods work as expected. 278 Tests that InspectorCSSAgent API methods work as expected.
493 </p> 279 </p>
494 <table width="50%" id="thetable"> 280 <table width="50%" id="thetable">
495 </table> 281 </table>
496 <h1 id="toggle">H1</h1> 282 <h1 id="toggle">H1</h1>
497 </body> 283 </body>
498 </html> 284 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698