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.inspectorView.setCurrentPanel(WebInspector.panels.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             dumpRulesArray(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                 dumpRulesArray(styles.pseudoElements[i].rules);
  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                 dumpRuleOrStyle(styles.inherited[i].inlineStyle);
  42                 dumpRulesArray(styles.inherited[i].matchedCSSRules);
  43             }
  44
  45             InspectorTest.addResult("");
  46             InspectorTest.addResult("=== Inline style for body ===");
  47             dumpRuleOrStyle(styles.inlineStyle);
  48             test_tableStyles();
  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_tableStyles()
  98     {
  99         function callback(error, inlineStyle, attributesStyle)
 100         {
 101             if (error) {
 102                 InspectorTest.addResult("error: " + error);
 103                 return;
 104             }
 105             InspectorTest.addResult("");
 106             InspectorTest.addResult("=== Attributes style for table ===");
 107             dumpRuleOrStyle(attributesStyle);
 108             test_styleSheets();
 109         }
 110
 111         function nodeCallback(node)
 112         {
 113             CSSAgent.getInlineStylesForNode(node.id, callback);
 114         }
 115         InspectorTest.nodeWithId("thetable", nodeCallback);
 116     }
 117
 118     function test_styleSheets()
 119     {
 120         var newStyleSheetText =
 121             "body.mainpage {" +
 122             "    text-decoration: strikethrough;" +
 123             "    badproperty: 2badvalue2;" +
 124             "}" +
 125             "body {" +
 126             "    text-align: justify;" +
 127             "}";
 128
 129         function patchStyleSheet(styleSheet)
 130         {
 131             InspectorTest.addResult("");
 132             InspectorTest.addResult("=== Last stylesheet patched ===");
 133             CSSAgent.setStyleSheetText(styleSheet.styleSheetId, newStyleSheetText,
 134                 loadAndDumpStyleSheet.bind(null, styleSheet.styleSheetId, test_changeSelector));
 135         }
 136
 137         function styleSheetInfosLoaded(error, infos)
 138         {
 139             if (error) {
 140                 InspectorTest.addResult("error: " + error);
 141                 return;
 142             }
 143             InspectorTest.addResult("");
 144             InspectorTest.addResult("=== All stylesheets ===");
 145             for (var i = 0; i < infos.length; ++i)
 146                 loadAndDumpStyleSheet(infos[i].styleSheetId, (i < infos.length - 1) ? null : patchStyleSheet);
 147         }
 148         CSSAgent.getAllStyleSheets(styleSheetInfosLoaded);
 149     }
 150
 151     function test_changeSelector(styleSheet)
 152     {
 153         function didSetSelector(error, rule)
 154         {
 155             if (error) {
 156                 InspectorTest.addResult("error: " + error);
 157                 return;
 158             }
 159             InspectorTest.addResult("");
 160             InspectorTest.addResult("=== After selector set ===");
 161             loadAndDumpStyleSheet(rule.ruleId.styleSheetId, test_setStyleText);
 162         }
 163
 164         CSSAgent.setRuleSelector(styleSheet.rules[0].ruleId, "html *, body[foo=\"bar\"]", didSetSelector);
 165     }
 166
 167     function test_setStyleText(styleSheet)
 168     {
 169         function didSetStyleText(error, style)
 170         {
 171             if (error) {
 172                 InspectorTest.addResult("error: " + error);
 173                 return;
 174             }
 175             InspectorTest.addResult("");
 176             InspectorTest.addResult("=== After style text set ===");
 177             loadAndDumpStyleSheet(style.styleId.styleSheetId, test_addRule);
 178         }
 179
 180         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true);
 181         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true);
 182
 183         // This operation should not update the style as the new property text is not parsable.
 184         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "zzz;", false);
 185         CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "color: white; background: black;", false, didSetStyleText);
 186     }
 187
 188     function test_addRule()
 189     {
 190         function didGetStyles(error, matchedCSSRules)
 191         {
 192             if (error) {
 193                 InspectorTest.addResult("error: " + error);
 194                 return;
 195             }
 196             InspectorTest.addResult("");
 197             InspectorTest.addResult("=== Matched rules after rule added ===");
 198             dumpRulesArray(matchedCSSRules);
 199             test_disableProperty();
 200         }
 201
 202         function didSetStyleText(error, style)
 203         {
 204             if (error) {
 205                 InspectorTest.addResult("error: " + error);
 206                 return;
 207             }
 208             CSSAgent.getMatchedStylesForNode(bodyId, [], false, false, didGetStyles);
 209         }
 210
 211         function ruleAdded(error, rule)
 212         {
 213             if (error) {
 214                 InspectorTest.addResult("error: " + error);
 215                 return;
 216             }
 217             CSSAgent.setPropertyText(rule.style.styleId, 0, "font-family: serif;", false, didSetStyleText);
 218         }
 219
 220         CSSAgent.addRule(bodyId, "body", ruleAdded);
 221     }
 222
 223     function test_disableProperty()
 224     {
 225         function didDisableProperty(error, style)
 226         {
 227             if (error) {
 228                 InspectorTest.addResult("error: " + error);
 229                 return;
 230             }
 231             InspectorTest.addResult("");
 232             InspectorTest.addResult("=== After property manipulations ===");
 233             dumpRuleOrStyle(style);
 234             test_enableProperty(style.styleId);
 235         }
 236
 237         function stylesCallback(error, matchedCSSRules)
 238         {
 239             if (error) {
 240                 InspectorTest.addResult("error: " + error);
 241                 return;
 242             }
 243             // height : 100% ;
 244             // border: 1px solid;
 245             // border-width: 2px;
 246             // background-color : #33FF33;
 247             // googles: abra;
 248             // foo: .bar;
 249             // -moz-goog: 1***;
 250             // border-width: 0px;
 251
 252             var styleId = matchedCSSRules[1].style.styleId;
 253             CSSAgent.toggleProperty(styleId, 0, true); // height: 100%
 254             CSSAgent.toggleProperty(styleId, 7, true); // border-width: 0px
 255             CSSAgent.setPropertyText(styleId, 7, "font-size: 12px;", false);
 256             CSSAgent.setPropertyText(styleId, 9, "font-size: 14px;", false);
 257             CSSAgent.toggleProperty(styleId, 9, true); // font-size: 14px
 258             CSSAgent.setPropertyText(styleId, 8, "border-width: 1px;", true);
 259             CSSAgent.toggleProperty(styleId, 8, false); // border-width: 1px
 260             // height : 100% ; [d]
 261             // border: 1px solid;
 262             // border-width: 2px;
 263             // background-color : #33FF33;
 264             // googles: abra;
 265             // foo: .bar;
 266             // -moz-goog: 1***;
 267             // font-size: 12px;
 268             // border-width: 1px;
 269             // font-size: 14px; [d]
 270
 271             CSSAgent.setPropertyText(styleId, 3, "", true, didDisableProperty);
 272         }
 273
 274         function nodeCallback(node)
 275         {
 276             CSSAgent.getMatchedStylesForNode(node.id, [], false, false, stylesCallback);
 277         }
 278         InspectorTest.nodeWithId("toggle", nodeCallback);
 279     }
 280
 281     function test_enableProperty(styleId)
 282     {
 283         function didEnableProperty(error, style)
 284         {
 285             if (error) {
 286                 InspectorTest.addResult("error: " + error);
 287                 return;
 288             }
 289             InspectorTest.addResult("");
 290             InspectorTest.addResult("=== After property enabled ===");
 291             dumpRuleOrStyle(style);
 292             InspectorTest.completeTest();
 293         }
 294
 295         CSSAgent.toggleProperty(styleId, 6, false);
 296         CSSAgent.toggleProperty(styleId, 8, false, didEnableProperty);
 297     }
 298
 299     // Data dumping
 300
 301     function dumpRulesArray(rules)
 302     {
 303         if (!rules)
 304             return;
 305         for (var i = 0; i < rules.length; ++i)
 306             dumpRuleOrStyle(rules[i]);
 307     }
 308
 309     function dumpRuleOrStyle(ruleOrStyle)
 310     {
 311         if (!ruleOrStyle)
 312             return;
 313         var isRule = !!(ruleOrStyle.style);
 314         var style = isRule ? ruleOrStyle.style : ruleOrStyle;
 315         InspectorTest.addResult("");
 316         InspectorTest.addResult(isRule ? "rule" : "style");
 317         InspectorTest.addResult((isRule ? (ruleOrStyle.selectorText + ": [" + ruleOrStyle.origin + "]") : "raw style"));
 318         for (var i = 0; i < style.cssProperties.length; ++i) {
 319             var property = style.cssProperties[i];
 320             if (property.status !== "disabled")
 321                 InspectorTest.addResult("['" + property.name + "':'" + property.value + "'" + (property.priority === "important" ? " is-important" : "") + (("parsedOk" in property) ? " non-parsed" : "") +"] @" + InspectorTest.rangeText(property.range) + " " + (property.status || "style"));
 322             else
 323                 InspectorTest.addResult("[text='" + property.text + "'] " + property.status);
 324         }
 325     }
 326
 327
 328     function loadAndDumpStyleSheet(styleSheetId, continuation, error)
 329     {
 330         if (error) {
 331             InspectorTest.addResult("error: " + error);
 332             return;
 333         }
 334
 335         function styleSheetLoaded(error, styleSheet)
 336         {
 337             if (error) {
 338                 InspectorTest.addResult("error: " + error);
 339                 return;
 340             }
 341             InspectorTest.addResult("");
 342             InspectorTest.addResult("StyleSheet: '" + styleSheet.text + "'");
 343             for (var i = 0; i < styleSheet.rules.length; ++i)
 344                 dumpRuleOrStyle(styleSheet.rules[i]);
 345             if (continuation)
 346                 continuation(styleSheet);
 347         }
 348
 349         CSSAgent.getStyleSheet(styleSheetId, styleSheetLoaded);
 350     }
 351 }
 352
 353 /*
 354 Covered API methods:
 355  - getStylesForNode
 356  - getAllStyleSheets
 357  - getStyleSheet
 358  - setStyleSheetText
 359  - setStyleData
 360  - setRuleSelector
 361  - addRule
 362 */
 363
 364 </script>
 365
 366 <style>
 367
 368 /* An inline stylesheet */
 369 body.mainpage {
 370     text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
 371     ;badproperty: 1badvalue1;
 372 }
 373
 374 body.mainpage {
 375     prop1: val1;
 376     prop2: val2;
 377 }
 378
 379 </style>
 380 </head>
 381
 382 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
 383 <p>
 384 Tests that InspectorCSSAgent API methods work as expected.
 385 </p>
 386 <table width="50%" id="thetable">
 387 </table>
 388 <h1 id="toggle">H1</h1>
 389 </body>
 390 </html>