src/third_party/WebKit/LayoutTests/inspector/elements/styles/styles-new-API.html

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