LayoutTests/inspector/styles/get-set-stylesheet-text.html

   1 <html>
   2 <head>
   3
   4 <style>
   5
   6 /* An inline stylesheet */
   7 body.mainpage {
   8     text-decoration: none;
   9 }
  10 </style>
  11
  12 <link rel="stylesheet" href="resources/get-set-stylesheet-text.css">
  13
  14 <script src="../../http/tests/inspector/inspector-test.js"></script>
  15 <script src="../../http/tests/inspector/elements-test.js"></script>
  16 <script>
  17
  18 function test()
  19 {
  20     var foundStyleSheet;
  21
  22     CSSAgent.getAllStyleSheets(findStyleSheet);
  23
  24     function findStyleSheet(error, styleSheetInfos)
  25     {
  26         function callback(styleSheet)
  27         {
  28             foundStyleSheet = styleSheet;
  29             InspectorTest.runTestSuite([ testSetText, testNewElementStyles ]);
  30         }
  31
  32         for (var i = 0; i < styleSheetInfos.length; ++i) {
  33             if (styleSheetInfos[i].sourceURL.indexOf("get-set-stylesheet-text.css") >= 0) {
  34                 foundStyleSheetInfo = styleSheetInfos[i];
  35                 WebInspector.CSSStyleSheet.createForId(foundStyleSheetInfo.styleSheetId, callback);
  36             }
  37         }
  38     }
  39
  40     function testSetText(next)
  41     {
  42         function callback(error)
  43         {
  44             if (error) {
  45                 InspectorTest.addResult("Failed to set stylesheet text: " + error);
  46                 return;
  47             }
  48
  49             InspectorTest.runAfterPendingDispatches(next);
  50         }
  51
  52         InspectorTest.addResult("=== Original stylesheet text: ===");
  53         InspectorTest.addResult(foundStyleSheet.getText());
  54         foundStyleSheet.setText("h1 { COLOR: Red; }", true, callback);
  55     }
  56
  57     function testNewElementStyles()
  58     {
  59         function callback(error, matchedCSSRules)
  60         {
  61             if (error) {
  62                 InspectorTest.addResult("error: " + error);
  63                 return;
  64             }
  65
  66             InspectorTest.addResult("=== Matched rules for h1 after setText() ===");
  67             dumpRulesArray(matchedCSSRules);
  68             InspectorTest.completeTest();
  69         }
  70
  71         function nodeCallback(node)
  72         {
  73             CSSAgent.getMatchedStylesForNode(node.id, [], false, false, callback);
  74         }
  75
  76         InspectorTest.selectNodeWithId("inspected", nodeCallback);
  77     }
  78
  79
  80     // Data dumping
  81
  82     function dumpRulesArray(rules)
  83     {
  84         if (!rules)
  85             return;
  86         for (var i = 0; i < rules.length; ++i)
  87             dumpRuleOrStyle(rules[i]);
  88     }
  89
  90     function dumpRuleOrStyle(ruleOrStyle)
  91     {
  92         if (!ruleOrStyle)
  93             return;
  94         var isRule = !!(ruleOrStyle.style);
  95         var style = isRule ? ruleOrStyle.style : ruleOrStyle;
  96         InspectorTest.addResult("");
  97         InspectorTest.addResult(isRule ? "rule" : "style");
  98         InspectorTest.addResult((isRule ? (ruleOrStyle.selectorText + ": [" + ruleOrStyle.origin + "]") : "raw style"));
  99         for (var i = 0; i < style.cssProperties.length; ++i) {
 100             var property = style.cssProperties[i];
 101             if (property.status !== "disabled")
 102                 InspectorTest.addResult("['" + property.name + "':'" + property.value + "'" + (property.priority === "important" ? " is-important" : "") + (("parsedOk" in property) ? " non-parsed" : "") +"] @" + InspectorTest.rangeText(property.range) + " " + (property.status || "style"));
 103             else
 104                 InspectorTest.addResult("[text='" + property.text + "'] " + property.status);
 105         }
 106     }
 107 }
 108 </script>
 109 </head>
 110
 111 <body onload="runTest()">
 112 <p>
 113 Tests that WebInspector.CSSStyleSheet methods work as expected.
 114 </p>
 115 <h1 id="inspected">Inspect Me</h1>
 116 </body>
 117 </html>