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.styleId.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.styleId.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.styleId.styleSheetId, next);
 196             }
 197
 198             function setStyleText(rule)
 199             {
 200                 CSSAgent.setPropertyText(rule.style.styleId, 0, "", true);
 201                 CSSAgent.setPropertyText(rule.style.styleId, 0, "", true);
 202
 203                 // This operation should not update the style as the new property text is not parsable.
 204                 CSSAgent.setPropertyText(rule.style.styleId, 0, "zzz;", false);
 205                 CSSAgent.setPropertyText(rule.style.styleId, 0, "color: white; background: black;", false, didSetStyleText);
 206             }
 207
 208             function didSetSelector(error, rule)
 209             {
 210                 if (error) {
 211                     InspectorTest.addResult("error: " + error);
 212                     InspectorTest.completeTest();
 213                     return;
 214                 }
 215                 InspectorTest.addResult("");
 216                 InspectorTest.addResult("=== After selector set ===");
 217                 loadAndDumpStyleSheet(rule.ruleId.styleSheetId, setStyleText.bind(this, rule));
 218             }
 219
 220             function setRuleSelector(rule)
 221             {
 222                 CSSAgent.setRuleSelector(rule.ruleId, "html *, body[foo=\"bar\"]", didSetSelector);
 223             }
 224
 225             function onMatchedStylesForNode(error, matchedStyles)
 226             {
 227                 if (error) {
 228                     InspectorTest.addResult("error: " + error);
 229                     InspectorTest.completeTest();
 230                     return;
 231                 }
 232                 for (var i = 0; i < matchedStyles.length; ++i) {
 233                     var rule = matchedStyles[i].rule;
 234                     if (rule.selectorList.text !== "body.mainpage") {
 235                         continue;
 236                     }
 237                     setRuleSelector(rule);
 238                     return;
 239                 }
 240                 InspectorTest.addResult("Error: rule with selector body.mainpage is not found");
 241                 InspectorTest.completeTest();
 242             }
 243
 244             function didPatchStyleSheet(styleSheetId)
 245             {
 246                 CSSAgent.getMatchedStylesForNode(bodyId, false, false, onMatchedStylesForNode);
 247             }
 248
 249             function patchStyleSheet(styleSheetId)
 250             {
 251                 InspectorTest.addResult("");
 252                 InspectorTest.addResult("=== Last stylesheet patched ===");
 253                 CSSAgent.setStyleSheetText(styleSheetId, newStyleSheetText,
 254                     loadAndDumpStyleSheet.bind(null, styleSheetId, didPatchStyleSheet));
 255             }
 256
 257             function styleSheetInfosLoaded(styleSheets)
 258             {
 259                 InspectorTest.addResult("");
 260                 InspectorTest.addResult("=== All stylesheets ===");
 261                 for (var i = 0; i < styleSheets.length; ++i)
 262                     loadAndDumpStyleSheet(styleSheets[i].id, (i < styleSheets.length - 1) ? null : patchStyleSheet);
 263             }
 264             InspectorTest.waitForStylesheetsOnFrontend(4, styleSheetInfosLoaded);
 265         },
 266
 267         function test_addRule(next)
 268         {
 269             function didGetStyles(error, matchedCSSRules)
 270             {
 271                 if (error) {
 272                     InspectorTest.addResult("error: " + error);
 273                     return;
 274                 }
 275                 InspectorTest.addResult("");
 276                 InspectorTest.addResult("=== Matched rules after rule added ===");
 277                 InspectorTest.dumpRuleMatchesArray(matchedCSSRules);
 278                 next();
 279             }
 280
 281             function didSetStyleText(error, style)
 282             {
 283                 if (error) {
 284                     InspectorTest.addResult("error: " + error);
 285                     return;
 286                 }
 287                 CSSAgent.getMatchedStylesForNode(bodyId, false, false, didGetStyles);
 288             }
 289
 290             function ruleAdded(error, rule)
 291             {
 292                 if (error) {
 293                     InspectorTest.addResult("error: " + error);
 294                     return;
 295                 }
 296                 CSSAgent.setPropertyText(rule.style.styleId, 0, "font-family: serif;", false, didSetStyleText);
 297             }
 298
 299             function viaInspectorStyleSheetCreated(error, styleSheetId)
 300             {
 301                 if (error) {
 302                     InspectorTest.addResult("error: " + error);
 303                     InspectorTest.completeTest();
 304                     return;
 305                 }
 306                 CSSAgent.addRule(styleSheetId, "body", ruleAdded);
 307             }
 308
 309             var frameId = WebInspector.resourceTreeModel.mainFrame.id;
 310             CSSAgent.createStyleSheet(frameId, viaInspectorStyleSheetCreated.bind(this));
 311         },
 312
 313         function test_disableProperty(next)
 314         {
 315             function didEnableProperty(style)
 316             {
 317                 InspectorTest.addResult("");
 318                 InspectorTest.addResult("=== After property enabled ===");
 319                 InspectorTest.dumpCSSStyleDeclaration(style);
 320                 next();
 321             }
 322
 323             function step(style)
 324             {
 325                 style.propertyAt(8).setDisabled(false, didEnableProperty);
 326             }
 327
 328             function didDisableProperty(style)
 329             {
 330                 InspectorTest.addResult("");
 331                 InspectorTest.addResult("=== After property manipulations ===");
 332                 InspectorTest.dumpCSSStyleDeclaration(style);
 333                 style.propertyAt(6).setDisabled(false, step);
 334             }
 335
 336             function parseStylePayload(callback, error, payload)
 337             {
 338                 if (error) {
 339                     InspectorTest.addResult(error);
 340                     InspectorTest.completeTest();
 341                     return;
 342                 }
 343                 callback(WebInspector.CSSStyleDeclaration.parsePayload(payload));
 344             }
 345
 346             function stylesCallback(error, matchedCSSRules)
 347             {
 348                 if (error) {
 349                     InspectorTest.addResult("error: " + error);
 350                     return;
 351                 }
 352                 // height : 100% ;
 353                 // border: 1px solid;
 354                 // border-width: 2px;
 355                 // background-color : #33FF33;
 356                 // googles: abra;
 357                 // foo: .bar;
 358                 // -moz-goog: 1***;
 359                 // border-width: 0px;
 360                 // padding-top: 1px; [d]
 361
 362                 var styleId = matchedCSSRules[1].rule.style.styleId;
 363                 var orm = WebInspector.CSSStyleDeclaration.parsePayload(matchedCSSRules[1].rule.style);
 364                 orm.propertyAt(0).setDisabled(true, step1);
 365
 366                 function step1(orm)
 367                 {
 368                     orm.propertyAt(7).setDisabled(true, step2);
 369                 }
 370
 371                 function step2(orm)
 372                 {
 373                     CSSAgent.setPropertyText(orm.id, 7, "font-size: 12px;", false, parseStylePayload.bind(null, step3));
 374                 }
 375
 376                 function step3(orm)
 377                 {
 378                     CSSAgent.setPropertyText(orm.id, 9, "font-size: 14px;", false, parseStylePayload.bind(null, step4));
 379                 }
 380
 381                 function step4(orm)
 382                 {
 383                     orm.propertyAt(9).setDisabled(true, step5);
 384                 }
 385
 386                 function step5(orm)
 387                 {
 388                     CSSAgent.setPropertyText(orm.id, 8, "border-width: 1px;", true, parseStylePayload.bind(null, step6));
 389                 }
 390
 391                 function step6(orm)
 392                 {
 393                     orm.propertyAt(8).setDisabled(false, step7);
 394                 }
 395
 396                 function step7(orm)
 397                 {
 398                     CSSAgent.setPropertyText(orm.id, 3, "", true, parseStylePayload.bind(null, step8));
 399                 }
 400
 401                 function step8(orm)
 402                 {
 403                     orm.propertyAt(9).setDisabled(false, didDisableProperty);
 404                 }
 405
 406                 // height : 100% ; [d]
 407                 // border: 1px solid;
 408                 // border-width: 2px;
 409                 // googles: abra;
 410                 // foo: .bar;
 411                 // -moz-goog: 1***;
 412                 // font-size: 12px;
 413                 // border-width: 1px;
 414                 // font-size: 14px; [d]
 415                 // padding-top: 1px;
 416             }
 417
 418             function nodeCallback(node)
 419             {
 420                 CSSAgent.getMatchedStylesForNode(node.id, false, false, stylesCallback);
 421             }
 422             InspectorTest.nodeWithId("toggle", nodeCallback);
 423         },
 424     ]);
 425
 426     function loadAndDumpStyleSheet(styleSheetId, continuation, error)
 427     {
 428         if (error) {
 429             InspectorTest.addResult("error: " + error);
 430             InspectorTest.completeTest();
 431             return;
 432         }
 433
 434         function styleSheetLoaded(error, text)
 435         {
 436             if (error) {
 437                 InspectorTest.addResult("error: " + error);
 438                 return;
 439             }
 440             InspectorTest.addResult("");
 441             InspectorTest.addResult("StyleSheet: '" + text + "'");
 442             if (continuation)
 443                 continuation(styleSheetId);
 444         }
 445
 446         CSSAgent.getStyleSheetText(styleSheetId, styleSheetLoaded);
 447     }
 448 }
 449
 450 </script>
 451
 452 <style>
 453
 454 /* An inline stylesheet */
 455 body.mainpage {
 456     text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
 457     ;badproperty: 1badvalue1;
 458 }
 459
 460 body.mainpage {
 461     prop1: val1;
 462     prop2: val2;
 463 }
 464
 465 body:hover {
 466   color: #CDE;
 467 }
 468 </style>
 469 </head>
 470
 471 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
 472 <p>
 473 Tests that InspectorCSSAgent API methods work as expected.
 474 </p>
 475 <table width="50%" id="thetable">
 476 </table>
 477 <h1 id="toggle">H1</h1>
 478 </body>
 479 </html>