| OLD | NEW |
| 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 Loading... |
| 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 Loading... |
| 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> |
| OLD | NEW |