src/third_party/WebKit/LayoutTests/inspector/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>
   9
  10 function test()
  11 {
  12     WebInspector.showPanel("elements");
  13
  14     test_styles();
  15
  16     var bodyId;
  17     function test_styles(node)
  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             test_forcedState();
  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()
  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"], test_textNodeComputedStyles);
 107         }
 108     }
 109
 110     function test_textNodeComputedStyles()
 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             test_tableStyles();
 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()
 139     {
 140         function callback(error, inlineStyle, attributesStyle)
 141         {
 142             if (error) {
 143                 InspectorTest.addResult("error: " + error);
 144                 return;
 145             }
 146             InspectorTest.addResult("");
 147             InspectorTest.addResult("=== Attributes style for table ===");
 148             InspectorTest.dumpStyle(attributesStyle);
 149             test_inlineStyleSheetModification(inlineStyle);
 150         }
 151
 152         function nodeCallback(node)
 153         {
 154             CSSAgent.getInlineStylesForNode(node.id, callback);
 155         }
 156         InspectorTest.nodeWithId("thetable", nodeCallback);
 157     }
 158
 159     function test_inlineStyleSheetModification(inlineStyle)
 160     {
 161         CSSAgent.getStyleSheetText(inlineStyle.styleId.styleSheetId, textCallback);
 162
 163         function textCallback(error, result)
 164         {
 165             InspectorTest.addResult("");
 166             InspectorTest.addResult("=== Stylesheet-for-inline-style text ===");
 167             InspectorTest.addResult(result);
 168             CSSAgent.setStyleSheetText(inlineStyle.styleId.styleSheetId, "", setTextCallback);
 169         }
 170
 171         function setTextCallback(error, result)
 172         {
 173             InspectorTest.addResult("");
 174             InspectorTest.addResult("=== Stylesheet-for-inline-style modification result ===");
 175             InspectorTest.addResult(error);
 176             test_styleSheets();
 177         }
 178     }
 179
 180     function test_styleSheets()
 181     {
 182         var newStyleSheetText =
 183             "body.mainpage {" +
 184             "    text-decoration: strikethrough;" +
 185             "    badproperty: 2badvalue2;" +
 186             "}" +
 187             "body {" +
 188             "    text-align: justify;" +
 189             "}";
 190
 191         function patchStyleSheet(styleSheet)
 192         {
 193             InspectorTest.addResult("");
 194             InspectorTest.addResult("=== Last stylesheet patched ===");
 195             CSSAgent.setStyleSheetText(styleSheet.styleSheetId, newStyleSheetText,
 196                 loadAndDumpStyleSheet.bind(null, styleSheet.styleSheetId, test_changeSelector));
 197         }
 198
 199         function styleSheetInfosLoaded(error, infos)
 200         {
 201             if (error) {
 202                 InspectorTest.addResult("error: " + error);
 203                 return;
 204             }
 205             InspectorTest.addResult("");
 206             InspectorTest.addResult("=== All stylesheets ===");
 207             for (var i = 0; i < infos.length; ++i)
 208                 loadAndDumpStyleSheet(infos[i].styleSheetId, (i < infos.length - 1) ? null : patchStyleSheet);
 209         }
 210         CSSAgent.getAllStyleSheets(styleSheetInfosLoaded);
 211     }
 212
 213     function test_changeSelector(styleSheet)
 214     {
 215         function didSetSelector(error, rule)
 216         {
 217             if (error) {
 218                 InspectorTest.addResult("error: " + error);
 219                 return;
 220             }
 221             InspectorTest.addResult("");
 222             InspectorTest.addResult("=== After selector set ===");
 223             loadAndDumpStyleSheet(rule.ruleId.styleSheetId, test_setStyleText);
 224         }
 225
 226         CSSAgent.setRuleSelector(styleSheet.rules[0].ruleId, "html *, body[foo=\"bar\"]", didSetSelector);
 227     }
 228
 229     function test_setStyleText(styleSheet)
 230     {
 231         function didSetStyleText(error, style)
 232         {
 233             if (error) {
 234                 InspectorTest.addResult("error: " + error);
 235                 return;
 236             }
 237             InspectorTest.addResult("");
 238             InspectorTest.addResult("=== After style text set ===");
 239             loadAndDumpStyleSheet(style.styleId.styleSheetId, test_addRule);
 240         }
 241
 242         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true);
 243         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true);
 244
 245         // This operation should not update the style as the new property text is not parsable.
 246         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "zzz;", false);
 247         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "color: white; background: black;", false, didSetStyleText);
 248     }
 249
 250     function test_addRule()
 251     {
 252         function didGetStyles(error, matchedCSSRules)
 253         {
 254             if (error) {
 255                 InspectorTest.addResult("error: " + error);
 256                 return;
 257             }
 258             InspectorTest.addResult("");
 259             InspectorTest.addResult("=== Matched rules after rule added ===");
 260             InspectorTest.dumpRuleMatchesArray(matchedCSSRules);
 261             test_disableProperty();
 262         }
 263
 264         function didSetStyleText(error, style)
 265         {
 266             if (error) {
 267                 InspectorTest.addResult("error: " + error);
 268                 return;
 269             }
 270             CSSAgent.getMatchedStylesForNode(bodyId, false, false, didGetStyles);
 271         }
 272
 273         function ruleAdded(error, rule)
 274         {
 275             if (error) {
 276                 InspectorTest.addResult("error: " + error);
 277                 return;
 278             }
 279             CSSAgent.setPropertyText(rule.style.styleId, 0, "font-family: serif;", false, didSetStyleText);
 280         }
 281
 282         CSSAgent.addRule(bodyId, "body", ruleAdded);
 283     }
 284
 285     function test_disableProperty()
 286     {
 287         function didDisableProperty(error, style)
 288         {
 289             if (error) {
 290                 InspectorTest.addResult("error: " + error);
 291                 return;
 292             }
 293             InspectorTest.addResult("");
 294             InspectorTest.addResult("=== After property manipulations ===");
 295             InspectorTest.dumpStyle(style);
 296             test_enableProperty(style.styleId);
 297         }
 298
 299         function stylesCallback(error, matchedCSSRules)
 300         {
 301             if (error) {
 302                 InspectorTest.addResult("error: " + error);
 303                 return;
 304             }
 305             // height : 100% ;
 306             // border: 1px solid;
 307             // border-width: 2px;
 308             // background-color : #33FF33;
 309             // googles: abra;
 310             // foo: .bar;
 311             // -moz-goog: 1***;
 312             // border-width: 0px;
 313
 314             var styleId = matchedCSSRules[1].rule.style.styleId;
 315             CSSAgent.toggleProperty(styleId, 0, true); // height: 100%
 316             CSSAgent.toggleProperty(styleId, 7, true); // border-width: 0px
 317             CSSAgent.setPropertyText(styleId, 7, "font-size: 12px;", false);
 318             CSSAgent.setPropertyText(styleId, 9, "font-size: 14px;", false);
 319             CSSAgent.toggleProperty(styleId, 9, true); // font-size: 14px
 320             CSSAgent.setPropertyText(styleId, 8, "border-width: 1px;", true);
 321             CSSAgent.toggleProperty(styleId, 8, false); // border-width: 1px
 322             // height : 100% ; [d]
 323             // border: 1px solid;
 324             // border-width: 2px;
 325             // background-color : #33FF33;
 326             // googles: abra;
 327             // foo: .bar;
 328             // -moz-goog: 1***;
 329             // font-size: 12px;
 330             // border-width: 1px;
 331             // font-size: 14px; [d]
 332
 333             CSSAgent.setPropertyText(styleId, 3, "", true, didDisableProperty);
 334         }
 335
 336         function nodeCallback(node)
 337         {
 338             CSSAgent.getMatchedStylesForNode(node.id, false, false, stylesCallback);
 339         }
 340         InspectorTest.nodeWithId("toggle", nodeCallback);
 341     }
 342
 343     function test_enableProperty(styleId)
 344     {
 345         function didEnableProperty(error, style)
 346         {
 347             if (error) {
 348                 InspectorTest.addResult("error: " + error);
 349                 return;
 350             }
 351             InspectorTest.addResult("");
 352             InspectorTest.addResult("=== After property enabled ===");
 353             InspectorTest.dumpStyle(style);
 354             InspectorTest.completeTest();
 355         }
 356
 357         CSSAgent.toggleProperty(styleId, 6, false);
 358         CSSAgent.toggleProperty(styleId, 8, false, didEnableProperty);
 359     }
 360
 361     function loadAndDumpStyleSheet(styleSheetId, continuation, error)
 362     {
 363         if (error) {
 364             InspectorTest.addResult("error: " + error);
 365             return;
 366         }
 367
 368         function styleSheetLoaded(error, styleSheet)
 369         {
 370             if (error) {
 371                 InspectorTest.addResult("error: " + error);
 372                 return;
 373             }
 374             InspectorTest.addResult("");
 375             InspectorTest.addResult("StyleSheet: '" + styleSheet.text + "'");
 376             InspectorTest.dumpRulesArray(styleSheet.rules);
 377             if (continuation)
 378                 continuation(styleSheet);
 379         }
 380
 381         CSSAgent.getStyleSheet(styleSheetId, styleSheetLoaded);
 382     }
 383 }
 384
 385 </script>
 386
 387 <style>
 388
 389 /* An inline stylesheet */
 390 body.mainpage {
 391     text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
 392     ;badproperty: 1badvalue1;
 393 }
 394
 395 body.mainpage {
 396     prop1: val1;
 397     prop2: val2;
 398 }
 399
 400 body:hover {
 401   color: #CDE;
 402 }
 403 </style>
 404 </head>
 405
 406 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
 407 <p>
 408 Tests that InspectorCSSAgent API methods work as expected.
 409 </p>
 410 <table width="50%" id="thetable">
 411 </table>
 412 <h1 id="toggle">H1</h1>
 413 </body>
 414 </html>