third_party/WebKit/LayoutTests/inspector/elements/styles-4/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/styles-test.js"></script>
   9 <script>
  10
  11 function test()
  12 {
  13     var bodyId;
  14     InspectorTest.runTestSuite([
  15         function test_styles(next)
  16         {
  17             function callback(styles)
  18             {
  19                 InspectorTest.addResult("");
  20                 InspectorTest.addResult("=== Computed style property count for body ===");
  21                 var propCount = styles.computedStyle.length;
  22                 InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + propCount + ")");
  23
  24                 InspectorTest.addResult("");
  25                 InspectorTest.addResult("=== Matched rules for body ===");
  26                 InspectorTest.dumpRuleMatchesArray(styles.matchedCSSRules);
  27
  28                 InspectorTest.addResult("");
  29                 InspectorTest.addResult("=== Pseudo rules for body ===");
  30                 for (var i = 0; i < styles.pseudoElements.length; ++i) {
  31                     InspectorTest.addResult("PseudoId=" + styles.pseudoElements[i].pseudoId);
  32                     InspectorTest.dumpRuleMatchesArray(styles.pseudoElements[i].matches);
  33                 }
  34
  35                 InspectorTest.addResult("");
  36                 InspectorTest.addResult("=== Inherited styles for body ===");
  37                 for (var i = 0; i < styles.inherited.length; ++i) {
  38                     InspectorTest.addResult("Level=" + (i + 1));
  39                     InspectorTest.dumpStyle(styles.inherited[i].inlineStyle);
  40                     InspectorTest.dumpRuleMatchesArray(styles.inherited[i].matchedCSSRules);
  41                 }
  42
  43                 InspectorTest.addResult("");
  44                 InspectorTest.addResult("=== Inline style for body ===");
  45                 InspectorTest.dumpStyle(styles.inlineStyle);
  46                 next();
  47             }
  48
  49             var resultStyles = {};
  50
  51             function computedCallback(error, computedStyle)
  52             {
  53                 if (error) {
  54                     InspectorTest.addResult("error: " + error);
  55                     InspectorTest.completeTest();
  56                     return;
  57                 }
  58                 resultStyles.computedStyle = computedStyle;
  59             }
  60
  61             function matchedCallback(error, inlineStyle, attributeStyle, matchedCSSRules, pseudoElements, inherited)
  62             {
  63                 if (error) {
  64                     InspectorTest.addResult("error: " + error);
  65                     InspectorTest.completeTest();
  66                     return;
  67                 }
  68
  69                 resultStyles.inlineStyle = inlineStyle;
  70                 resultStyles.matchedCSSRules = matchedCSSRules;
  71                 resultStyles.pseudoElements = pseudoElements;
  72                 resultStyles.inherited = inherited;
  73             }
  74
  75             function nodeCallback(node)
  76             {
  77                 bodyId = node.id;
  78                 var promises = [
  79                     InspectorTest.CSSAgent.getComputedStyleForNode(node.id, computedCallback),
  80                     InspectorTest.CSSAgent.getMatchedStylesForNode(node.id, matchedCallback)
  81                 ];
  82                 Promise.all(promises).then(callback.bind(null, resultStyles));
  83             }
  84             InspectorTest.selectNodeWithId("mainBody", nodeCallback);
  85         },
  86
  87         function test_forcedState(next)
  88         {
  89             InspectorTest.CSSAgent.forcePseudoState(bodyId, ["hover"]);
  90             InspectorTest.CSSAgent.getMatchedStylesForNode(bodyId, matchedCallback);
  91
  92             function matchedCallback(error, inlineStyle, attributeStyle, matchedRules)
  93             {
  94                 InspectorTest.addResult("=== BODY with forced :hover ===");
  95                 InspectorTest.dumpRuleMatchesArray(matchedRules);
  96                 InspectorTest.CSSAgent.forcePseudoState(bodyId, ["hover"], next);
  97             }
  98         },
  99
 100         function test_textNodeComputedStyles(next)
 101         {
 102             function callback(error, computedStyle)
 103             {
 104                 if (error) {
 105                     InspectorTest.addResult("error: " + error);
 106                     return;
 107                 }
 108                 InspectorTest.addResult("");
 109                 InspectorTest.addResult("=== Computed style property count for TextNode ===");
 110                 var propCount = computedStyle.length;
 111                 InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + propCount + ")");
 112                 next();
 113             }
 114
 115             function nodeCallback(node)
 116             {
 117                 var textNode = node.children()[0];
 118                 if (textNode.nodeType() !== Node.TEXT_NODE) {
 119                     InspectorTest.addResult("Failed to retrieve TextNode.");
 120                     InspectorTest.completeTest();
 121                     return;
 122                 }
 123                 InspectorTest.CSSAgent.getComputedStyleForNode(textNode.id, callback);
 124             }
 125             InspectorTest.nodeWithId("toggle", nodeCallback);
 126         },
 127
 128         function test_tableStyles(next)
 129         {
 130             function setTextCallback(error, result)
 131             {
 132                 InspectorTest.addResult("");
 133                 InspectorTest.addResult("=== Stylesheet-for-inline-style modification result ===");
 134                 InspectorTest.addResult(error || null);
 135                 next();
 136             }
 137
 138             function textCallback(inlineStyle, error, result)
 139             {
 140                 InspectorTest.addResult("");
 141                 InspectorTest.addResult("=== Stylesheet-for-inline-style text ===");
 142                 InspectorTest.addResult(result);
 143                 InspectorTest.CSSAgent.setStyleSheetText(inlineStyle.styleSheetId, "").then(setTextCallback);
 144             }
 145
 146             function callback(error, inlineStyle, attributesStyle)
 147             {
 148                 if (error) {
 149                     InspectorTest.addResult("error: " + error);
 150                     return;
 151                 }
 152                 InspectorTest.addResult("");
 153                 InspectorTest.addResult("=== Attributes style for table ===");
 154                 InspectorTest.dumpStyle(attributesStyle);
 155                 InspectorTest.CSSAgent.getStyleSheetText(inlineStyle.styleSheetId, textCallback.bind(this, inlineStyle));
 156             }
 157
 158             function nodeCallback(node)
 159             {
 160                 InspectorTest.CSSAgent.getInlineStylesForNode(node.id, callback);
 161             }
 162             InspectorTest.nodeWithId("thetable", nodeCallback);
 163         },
 164
 165         function test_addRule(next)
 166         {
 167             function didGetStyles(error, inlineStyle, attributeStyle, matchedCSSRules)
 168             {
 169                 if (error) {
 170                     InspectorTest.addResult("error: " + error);
 171                     return;
 172                 }
 173                 InspectorTest.addResult("");
 174                 InspectorTest.addResult("=== Matched rules after rule added ===");
 175                 InspectorTest.dumpRuleMatchesArray(matchedCSSRules);
 176                 next();
 177             }
 178
 179             function didSetStyleText(error, style)
 180             {
 181                 if (error) {
 182                     InspectorTest.addResult("error: " + error);
 183                     return;
 184                 }
 185                 InspectorTest.CSSAgent.getMatchedStylesForNode(bodyId, didGetStyles);
 186             }
 187
 188             function ruleAdded(error, rule)
 189             {
 190                 if (error) {
 191                     InspectorTest.addResult("error: " + error);
 192                     return;
 193                 }
 194                 InspectorTest.CSSAgent.setStyleText(rule.style.styleSheetId, {
 195                     startLine: rule.style.range.startLine,
 196                     startColumn: rule.style.range.startColumn,
 197                     endLine: rule.style.range.startLine,
 198                     endColumn: rule.style.range.startColumn
 199                 }, "font-family: serif;", didSetStyleText);
 200             }
 201
 202             function viaInspectorStyleSheetCreated(error, styleSheetId)
 203             {
 204                 if (error) {
 205                     InspectorTest.addResult("error: " + error);
 206                     InspectorTest.completeTest();
 207                     return;
 208                 }
 209                 var range = {
 210                     startLine: 0,
 211                     startColumn: 0,
 212                     endLine: 0,
 213                     endColumn: 0
 214                 };
 215                 InspectorTest.CSSAgent.addRule(styleSheetId, "body {}", range, ruleAdded);
 216             }
 217
 218             var frameId = InspectorTest.resourceTreeModel.mainFrame.id;
 219             InspectorTest.CSSAgent.createStyleSheet(frameId, viaInspectorStyleSheetCreated.bind(this));
 220         },
 221     ]);
 222
 223     function loadAndDumpStyleSheet(styleSheetId, continuation, error)
 224     {
 225         if (error) {
 226             InspectorTest.addResult("error: " + error);
 227             InspectorTest.completeTest();
 228             return;
 229         }
 230
 231         function styleSheetLoaded(error, text)
 232         {
 233             if (error) {
 234                 InspectorTest.addResult("error: " + error);
 235                 return;
 236             }
 237             InspectorTest.addResult("");
 238             InspectorTest.addResult("StyleSheet: '" + text + "'");
 239             if (continuation)
 240                 continuation(styleSheetId);
 241         }
 242
 243         InspectorTest.CSSAgent.getStyleSheetText(styleSheetId, styleSheetLoaded);
 244     }
 245 }
 246
 247 </script>
 248
 249 <style>
 250
 251 /* An inline stylesheet */
 252 body.mainpage {
 253     text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */
 254     ;badproperty: 1badvalue1;
 255 }
 256
 257 body.mainpage {
 258     prop1: val1;
 259     prop2: val2;
 260 }
 261
 262 body:hover {
 263   color: #CDE;
 264 }
 265 </style>
 266 </head>
 267
 268 <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)">
 269 <p>
 270 Tests that InspectorCSSAgent API methods work as expected.
 271 </p>
 272 <table width="50%" id="thetable">
 273 </table>
 274 <h1 id="toggle">H1</h1>
 275 </body>
 276 </html>