| OLD | NEW |
|---|
| (Empty) |
| 1 <html> | |
| 2 <head> | |
| 3 | |
| 4 <link rel="stylesheet" href="resources/styles-new-API.css"> | |
| 5 | |
| 6 <script src="../../../http/tests/inspector/inspector-test.js"></script> | |
| 7 <script src="../../../http/tests/inspector/elements-test.js"></script> | |
| 8 <script src="styles-test.js"></script> | |
| 9 <script> | |
| 10 | |
| 11 function test() | |
| 12 { | |
| 13 | |
| 14 var bodyId; | |
| 15 InspectorTest.runTestSuite([ | |
| 16 function test_styles(next) | |
| 17 { | |
| 18 function callback(styles) | |
| 19 { | |
| 20 InspectorTest.addResult(""); | |
| 21 InspectorTest.addResult("=== Computed style property count for b
ody ==="); | |
| 22 var propCount = styles.computedStyle.length; | |
| 23 InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + prop
Count + ")"); | |
| 24 | |
| 25 InspectorTest.addResult(""); | |
| 26 InspectorTest.addResult("=== Matched rules for body ==="); | |
| 27 InspectorTest.dumpRuleMatchesArray(styles.matchedCSSRules); | |
| 28 | |
| 29 InspectorTest.addResult(""); | |
| 30 InspectorTest.addResult("=== Pseudo rules for body ==="); | |
| 31 for (var i = 0; i < styles.pseudoElements.length; ++i) { | |
| 32 InspectorTest.addResult("PseudoId=" + styles.pseudoElements[
i].pseudoId); | |
| 33 InspectorTest.dumpRuleMatchesArray(styles.pseudoElements[i].
matches); | |
| 34 } | |
| 35 | |
| 36 InspectorTest.addResult(""); | |
| 37 InspectorTest.addResult("=== Inherited styles for body ==="); | |
| 38 for (var i = 0; i < styles.inherited.length; ++i) { | |
| 39 InspectorTest.addResult("Level=" + (i + 1)); | |
| 40 InspectorTest.dumpStyle(styles.inherited[i].inlineStyle); | |
| 41 InspectorTest.dumpRuleMatchesArray(styles.inherited[i].match
edCSSRules); | |
| 42 } | |
| 43 | |
| 44 InspectorTest.addResult(""); | |
| 45 InspectorTest.addResult("=== Inline style for body ==="); | |
| 46 InspectorTest.dumpStyle(styles.inlineStyle); | |
| 47 next(); | |
| 48 } | |
| 49 | |
| 50 var resultStyles = {}; | |
| 51 | |
| 52 function computedCallback(error, computedStyle) | |
| 53 { | |
| 54 if (error) { | |
| 55 InspectorTest.addResult("error: " + error); | |
| 56 InspectorTest.completeTest(); | |
| 57 return; | |
| 58 } | |
| 59 resultStyles.computedStyle = computedStyle; | |
| 60 } | |
| 61 | |
| 62 function inlineCallback(error, inlineStyle) | |
| 63 { | |
| 64 if (error) { | |
| 65 InspectorTest.addResult("error: " + error); | |
| 66 InspectorTest.completeTest(); | |
| 67 return; | |
| 68 } | |
| 69 resultStyles.inlineStyle = inlineStyle; | |
| 70 } | |
| 71 | |
| 72 function matchedCallback(error, matchedCSSRules, pseudoElements, inh
erited) | |
| 73 { | |
| 74 if (error) { | |
| 75 InspectorTest.addResult("error: " + error); | |
| 76 InspectorTest.completeTest(); | |
| 77 return; | |
| 78 } | |
| 79 | |
| 80 resultStyles.matchedCSSRules = matchedCSSRules; | |
| 81 resultStyles.pseudoElements = pseudoElements; | |
| 82 resultStyles.inherited = inherited; | |
| 83 callback(resultStyles); | |
| 84 } | |
| 85 | |
| 86 function nodeCallback(node) | |
| 87 { | |
| 88 bodyId = node.id; | |
| 89 InspectorTest.CSSAgent.getComputedStyleForNode(node.id, computed
Callback); | |
| 90 InspectorTest.CSSAgent.getInlineStylesForNode(node.id, inlineCal
lback); | |
| 91 InspectorTest.CSSAgent.getMatchedStylesForNode(node.id, false, f
alse, matchedCallback); | |
| 92 } | |
| 93 InspectorTest.selectNodeWithId("mainBody", nodeCallback); | |
| 94 }, | |
| 95 | |
| 96 function test_forcedState(next) | |
| 97 { | |
| 98 InspectorTest.CSSAgent.forcePseudoState(bodyId, ["hover"]); | |
| 99 InspectorTest.CSSAgent.getMatchedStylesForNode(bodyId, false, false,
matchedCallback); | |
| 100 | |
| 101 function matchedCallback(error, matchedRules) | |
| 102 { | |
| 103 InspectorTest.addResult("=== BODY with forced :hover ==="); | |
| 104 InspectorTest.dumpRuleMatchesArray(matchedRules); | |
| 105 InspectorTest.CSSAgent.forcePseudoState(bodyId, ["hover"], next)
; | |
| 106 } | |
| 107 }, | |
| 108 | |
| 109 function test_textNodeComputedStyles(next) | |
| 110 { | |
| 111 function callback(error, computedStyle) | |
| 112 { | |
| 113 if (error) { | |
| 114 InspectorTest.addResult("error: " + error); | |
| 115 return; | |
| 116 } | |
| 117 InspectorTest.addResult(""); | |
| 118 InspectorTest.addResult("=== Computed style property count for T
extNode ==="); | |
| 119 var propCount = computedStyle.length; | |
| 120 InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + prop
Count + ")"); | |
| 121 next(); | |
| 122 } | |
| 123 | |
| 124 function nodeCallback(node) | |
| 125 { | |
| 126 var textNode = node.children()[0]; | |
| 127 if (textNode.nodeType() !== Node.TEXT_NODE) { | |
| 128 InspectorTest.addResult("Failed to retrieve TextNode."); | |
| 129 InspectorTest.completeTest(); | |
| 130 return; | |
| 131 } | |
| 132 InspectorTest.CSSAgent.getComputedStyleForNode(textNode.id, call
back); | |
| 133 } | |
| 134 InspectorTest.nodeWithId("toggle", nodeCallback); | |
| 135 }, | |
| 136 | |
| 137 function test_tableStyles(next) | |
| 138 { | |
| 139 function setTextCallback(error, result) | |
| 140 { | |
| 141 InspectorTest.addResult(""); | |
| 142 InspectorTest.addResult("=== Stylesheet-for-inline-style modific
ation result ==="); | |
| 143 InspectorTest.addResult(error); | |
| 144 next(); | |
| 145 } | |
| 146 | |
| 147 function textCallback(inlineStyle, error, result) | |
| 148 { | |
| 149 InspectorTest.addResult(""); | |
| 150 InspectorTest.addResult("=== Stylesheet-for-inline-style text ==
="); | |
| 151 InspectorTest.addResult(result); | |
| 152 InspectorTest.CSSAgent.setStyleSheetText(inlineStyle.styleSheetI
d, "", setTextCallback); | |
| 153 } | |
| 154 | |
| 155 function callback(error, inlineStyle, attributesStyle) | |
| 156 { | |
| 157 if (error) { | |
| 158 InspectorTest.addResult("error: " + error); | |
| 159 return; | |
| 160 } | |
| 161 InspectorTest.addResult(""); | |
| 162 InspectorTest.addResult("=== Attributes style for table ==="); | |
| 163 InspectorTest.dumpStyle(attributesStyle); | |
| 164 InspectorTest.CSSAgent.getStyleSheetText(inlineStyle.styleSheetI
d, textCallback.bind(this, inlineStyle)); | |
| 165 } | |
| 166 | |
| 167 function nodeCallback(node) | |
| 168 { | |
| 169 InspectorTest.CSSAgent.getInlineStylesForNode(node.id, callback)
; | |
| 170 } | |
| 171 InspectorTest.nodeWithId("thetable", nodeCallback); | |
| 172 }, | |
| 173 | |
| 174 function test_styleSheets(next) | |
| 175 { | |
| 176 var newStyleSheetText = | |
| 177 "body.mainpage {" + | |
| 178 " text-decoration: strikethrough;" + | |
| 179 " badproperty: 2badvalue2;" + | |
| 180 "}" + | |
| 181 "body {" + | |
| 182 " text-align: justify;" + | |
| 183 "}"; | |
| 184 | |
| 185 function didSetStyleText(error, style) | |
| 186 { | |
| 187 if (error) { | |
| 188 InspectorTest.addResult("error: " + error); | |
| 189 InspectorTest.completeTest(); | |
| 190 return; | |
| 191 } | |
| 192 InspectorTest.addResult(""); | |
| 193 InspectorTest.addResult("=== After style text set ==="); | |
| 194 loadAndDumpStyleSheet(style.styleSheetId, next); | |
| 195 } | |
| 196 | |
| 197 function collapseToStart(range) | |
| 198 { | |
| 199 return { | |
| 200 startLine: range.startLine, | |
| 201 startColumn: range.startColumn, | |
| 202 endLine: range.startLine, | |
| 203 endColumn: range.startColumn, | |
| 204 }; | |
| 205 } | |
| 206 | |
| 207 function setStyleText(rule) | |
| 208 { | |
| 209 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId,
rule.style.cssProperties[1].range, ""); | |
| 210 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId,
rule.style.cssProperties[0].range, ""); | |
| 211 | |
| 212 // This operation should not update the style as the new propert
y text is not parsable. | |
| 213 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId,
collapseToStart(rule.style.range), "zzz;"); | |
| 214 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId,
collapseToStart(rule.style.range), "color: white; background: black;", didSetSty
leText); | |
| 215 } | |
| 216 | |
| 217 function didSetSelector(error, rule) | |
| 218 { | |
| 219 if (error) { | |
| 220 InspectorTest.addResult("error: " + error); | |
| 221 InspectorTest.completeTest(); | |
| 222 return; | |
| 223 } | |
| 224 InspectorTest.addResult(""); | |
| 225 InspectorTest.addResult("=== After selector set ==="); | |
| 226 loadAndDumpStyleSheet(rule.styleSheetId, setStyleText.bind(this,
rule)); | |
| 227 } | |
| 228 | |
| 229 function setRuleSelector(rule) | |
| 230 { | |
| 231 var orm = WebInspector.CSSRule.parsePayload(InspectorTest.cssMod
el, rule); | |
| 232 InspectorTest.CSSAgent.setRuleSelector(orm.styleSheetId, orm.sel
ectorRange, "html *, body[foo=\"bar\"]", didSetSelector); | |
| 233 } | |
| 234 | |
| 235 function onMatchedStylesForNode(error, matchedStyles) | |
| 236 { | |
| 237 if (error) { | |
| 238 InspectorTest.addResult("error: " + error); | |
| 239 InspectorTest.completeTest(); | |
| 240 return; | |
| 241 } | |
| 242 for (var i = 0; i < matchedStyles.length; ++i) { | |
| 243 var rule = matchedStyles[i].rule; | |
| 244 if (rule.selectorList.text !== "body.mainpage") { | |
| 245 continue; | |
| 246 } | |
| 247 setRuleSelector(rule); | |
| 248 return; | |
| 249 } | |
| 250 InspectorTest.addResult("Error: rule with selector body.mainpage
is not found"); | |
| 251 InspectorTest.completeTest(); | |
| 252 } | |
| 253 | |
| 254 function didPatchStyleSheet(styleSheetId) | |
| 255 { | |
| 256 InspectorTest.CSSAgent.getMatchedStylesForNode(bodyId, true, tru
e, onMatchedStylesForNode); | |
| 257 } | |
| 258 | |
| 259 function patchStyleSheet(styleSheetId) | |
| 260 { | |
| 261 InspectorTest.addResult(""); | |
| 262 InspectorTest.addResult("=== Last stylesheet patched ==="); | |
| 263 InspectorTest.CSSAgent.setStyleSheetText(styleSheetId, newStyleS
heetText, | |
| 264 loadAndDumpStyleSheet.bind(null, styleSheetId, didPatchStyle
Sheet)); | |
| 265 } | |
| 266 | |
| 267 function styleSheetInfosLoaded(styleSheets) | |
| 268 { | |
| 269 InspectorTest.addResult(""); | |
| 270 InspectorTest.addResult("=== All stylesheets ==="); | |
| 271 for (var i = 0; i < styleSheets.length; ++i) | |
| 272 loadAndDumpStyleSheet(styleSheets[i].id, (i < styleSheets.le
ngth - 1) ? null : patchStyleSheet); | |
| 273 } | |
| 274 InspectorTest.waitForStylesheetsOnFrontend(4, styleSheetInfosLoaded)
; | |
| 275 }, | |
| 276 | |
| 277 function test_addRule(next) | |
| 278 { | |
| 279 function didGetStyles(error, matchedCSSRules) | |
| 280 { | |
| 281 if (error) { | |
| 282 InspectorTest.addResult("error: " + error); | |
| 283 return; | |
| 284 } | |
| 285 InspectorTest.addResult(""); | |
| 286 InspectorTest.addResult("=== Matched rules after rule added ==="
); | |
| 287 InspectorTest.dumpRuleMatchesArray(matchedCSSRules); | |
| 288 next(); | |
| 289 } | |
| 290 | |
| 291 function didSetStyleText(error, style) | |
| 292 { | |
| 293 if (error) { | |
| 294 InspectorTest.addResult("error: " + error); | |
| 295 return; | |
| 296 } | |
| 297 InspectorTest.CSSAgent.getMatchedStylesForNode(bodyId, true, tru
e, didGetStyles); | |
| 298 } | |
| 299 | |
| 300 function ruleAdded(error, rule) | |
| 301 { | |
| 302 if (error) { | |
| 303 InspectorTest.addResult("error: " + error); | |
| 304 return; | |
| 305 } | |
| 306 InspectorTest.CSSAgent.setPropertyText(rule.style.styleSheetId,
{ | |
| 307 startLine: rule.style.range.startLine, | |
| 308 startColumn: rule.style.range.startColumn, | |
| 309 endLine: rule.style.range.startLine, | |
| 310 endColumn: rule.style.range.startColumn | |
| 311 }, "font-family: serif;", didSetStyleText); | |
| 312 } | |
| 313 | |
| 314 function viaInspectorStyleSheetCreated(error, styleSheetId) | |
| 315 { | |
| 316 if (error) { | |
| 317 InspectorTest.addResult("error: " + error); | |
| 318 InspectorTest.completeTest(); | |
| 319 return; | |
| 320 } | |
| 321 var range = { | |
| 322 startLine: 0, | |
| 323 startColumn: 0, | |
| 324 endLine: 0, | |
| 325 endColumn: 0 | |
| 326 }; | |
| 327 InspectorTest.CSSAgent.addRule(styleSheetId, "body {}", range, r
uleAdded); | |
| 328 } | |
| 329 | |
| 330 var frameId = InspectorTest.resourceTreeModel.mainFrame.id; | |
| 331 InspectorTest.CSSAgent.createStyleSheet(frameId, viaInspectorStyleSh
eetCreated.bind(this)); | |
| 332 }, | |
| 333 | |
| 334 function test_disableProperty(next) | |
| 335 { | |
| 336 function didEnableProperty(style) | |
| 337 { | |
| 338 InspectorTest.addResult(""); | |
| 339 InspectorTest.addResult("=== After property enabled ==="); | |
| 340 InspectorTest.dumpCSSStyleDeclaration(style); | |
| 341 next(); | |
| 342 } | |
| 343 | |
| 344 function step(style) | |
| 345 { | |
| 346 style.propertyAt(8).setDisabled(false, didEnableProperty); | |
| 347 } | |
| 348 | |
| 349 function didDisableProperty(style) | |
| 350 { | |
| 351 InspectorTest.addResult(""); | |
| 352 InspectorTest.addResult("=== After property manipulations ==="); | |
| 353 InspectorTest.dumpCSSStyleDeclaration(style); | |
| 354 style.propertyAt(6).setDisabled(false, step); | |
| 355 } | |
| 356 | |
| 357 function parseStylePayload(callback, error, payload) | |
| 358 { | |
| 359 if (error) { | |
| 360 InspectorTest.addResult(error); | |
| 361 InspectorTest.completeTest(); | |
| 362 return; | |
| 363 } | |
| 364 callback(WebInspector.CSSStyleDeclaration.parsePayload(Inspector
Test.cssModel, payload)); | |
| 365 } | |
| 366 | |
| 367 function stylesCallback(error, matchedCSSRules) | |
| 368 { | |
| 369 if (error) { | |
| 370 InspectorTest.addResult("error: " + error); | |
| 371 return; | |
| 372 } | |
| 373 // height : 100% ; | |
| 374 // border: 1px solid; | |
| 375 // border-width: 2px; | |
| 376 // background-color : #33FF33; | |
| 377 // googles: abra; | |
| 378 // foo: .bar; | |
| 379 // -moz-goog: 1***; | |
| 380 // border-width: 0px; | |
| 381 // padding-top: 1px; [d] | |
| 382 | |
| 383 var orm = WebInspector.CSSStyleDeclaration.parsePayload(Inspecto
rTest.cssModel, matchedCSSRules[1].rule.style); | |
| 384 orm.propertyAt(0).setDisabled(true, step1); | |
| 385 | |
| 386 function step1(orm) | |
| 387 { | |
| 388 orm.propertyAt(7).setDisabled(true, step2); | |
| 389 } | |
| 390 | |
| 391 function step2(orm) | |
| 392 { | |
| 393 InspectorTest.CSSAgent.setPropertyText(orm.styleSheetId, orm
.propertyAt(7).range.collapseToStart(), "font-size: 12px;", parseStylePayload.bi
nd(null, step3)); | |
| 394 } | |
| 395 | |
| 396 function step3(orm) | |
| 397 { | |
| 398 InspectorTest.CSSAgent.setPropertyText(orm.styleSheetId, orm
.propertyAt(9).range.collapseToStart(), "font-size: 14px;", parseStylePayload.bi
nd(null, step4)); | |
| 399 } | |
| 400 | |
| 401 function step4(orm) | |
| 402 { | |
| 403 orm.propertyAt(9).setDisabled(true, step5); | |
| 404 } | |
| 405 | |
| 406 function step5(orm) | |
| 407 { | |
| 408 InspectorTest.CSSAgent.setPropertyText(orm.styleSheetId, orm
.propertyAt(8).range, "border-width: 1px;", parseStylePayload.bind(null, step6))
; | |
| 409 } | |
| 410 | |
| 411 function step6(orm) | |
| 412 { | |
| 413 orm.propertyAt(8).setDisabled(false, step7); | |
| 414 } | |
| 415 | |
| 416 function step7(orm) | |
| 417 { | |
| 418 InspectorTest.CSSAgent.setPropertyText(orm.styleSheetId, orm
.propertyAt(3).range, "", parseStylePayload.bind(null, step8)); | |
| 419 } | |
| 420 | |
| 421 function step8(orm) | |
| 422 { | |
| 423 orm.propertyAt(9).setDisabled(false, didDisableProperty); | |
| 424 } | |
| 425 | |
| 426 // height : 100% ; [d] | |
| 427 // border: 1px solid; | |
| 428 // border-width: 2px; | |
| 429 // googles: abra; | |
| 430 // foo: .bar; | |
| 431 // -moz-goog: 1***; | |
| 432 // font-size: 12px; | |
| 433 // border-width: 1px; | |
| 434 // font-size: 14px; [d] | |
| 435 // padding-top: 1px; | |
| 436 } | |
| 437 | |
| 438 function nodeCallback(node) | |
| 439 { | |
| 440 InspectorTest.CSSAgent.getMatchedStylesForNode(node.id, true, tr
ue, stylesCallback); | |
| 441 } | |
| 442 InspectorTest.nodeWithId("toggle", nodeCallback); | |
| 443 }, | |
| 444 ]); | |
| 445 | |
| 446 function loadAndDumpStyleSheet(styleSheetId, continuation, error) | |
| 447 { | |
| 448 if (error) { | |
| 449 InspectorTest.addResult("error: " + error); | |
| 450 InspectorTest.completeTest(); | |
| 451 return; | |
| 452 } | |
| 453 | |
| 454 function styleSheetLoaded(error, text) | |
| 455 { | |
| 456 if (error) { | |
| 457 InspectorTest.addResult("error: " + error); | |
| 458 return; | |
| 459 } | |
| 460 InspectorTest.addResult(""); | |
| 461 InspectorTest.addResult("StyleSheet: '" + text + "'"); | |
| 462 if (continuation) | |
| 463 continuation(styleSheetId); | |
| 464 } | |
| 465 | |
| 466 InspectorTest.CSSAgent.getStyleSheetText(styleSheetId, styleSheetLoaded)
; | |
| 467 } | |
| 468 } | |
| 469 | |
| 470 </script> | |
| 471 | |
| 472 <style> | |
| 473 | |
| 474 /* An inline stylesheet */ | |
| 475 body.mainpage { | |
| 476 text-decoration: none; /* at least one valid property is necessary for WebCo
re to match a rule */ | |
| 477 ;badproperty: 1badvalue1; | |
| 478 } | |
| 479 | |
| 480 body.mainpage { | |
| 481 prop1: val1; | |
| 482 prop2: val2; | |
| 483 } | |
| 484 | |
| 485 body:hover { | |
| 486 color: #CDE; | |
| 487 } | |
| 488 </style> | |
| 489 </head> | |
| 490 | |
| 491 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-
weight: normal; width: 85%; background-image: url(bar.png)"> | |
| 492 <p> | |
| 493 Tests that InspectorCSSAgent API methods work as expected. | |
| 494 </p> | |
| 495 <table width="50%" id="thetable"> | |
| 496 </table> | |
| 497 <h1 id="toggle">H1</h1> | |
| 498 </body> | |
| 499 </html> | |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 1158883003:
DevTools: shard inspector/elements tests for faster execution. (Closed)
Base URL: svn://svn.chromium.org/blink/trunk