| <html> |
| <head> |
| |
| <link rel="stylesheet" href="resources/styles-new-API.css"> |
| |
| <script src="../../http/tests/inspector/inspector-test.js"></script> |
| <script src="../../http/tests/inspector/elements-test.js"></script> |
| <script> |
| |
| function test() |
| { |
| WebInspector.showPanel("elements"); |
| |
| test_styles(); |
| |
| var bodyId; |
| function test_styles(node) |
| { |
| function callback(styles) |
| { |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Computed style property count for body ==="); |
| var propCount = styles.computedStyle.length; |
| InspectorTest.addResult(propCount > 200 ? "OK" : "FAIL (" + propCount + ")"); |
| |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Matched rules for body ==="); |
| InspectorTest.dumpRuleMatchesArray(styles.matchedCSSRules); |
| |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Pseudo rules for body ==="); |
| for (var i = 0; i < styles.pseudoElements.length; ++i) { |
| InspectorTest.addResult("PseudoId=" + styles.pseudoElements[i].pseudoId); |
| InspectorTest.dumpRuleMatchesArray(styles.pseudoElements[i].matches); |
| } |
| |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Inherited styles for body ==="); |
| for (var i = 0; i < styles.inherited.length; ++i) { |
| InspectorTest.addResult("Level=" + (i + 1)); |
| InspectorTest.dumpStyle(styles.inherited[i].inlineStyle); |
| InspectorTest.dumpRuleMatchesArray(styles.inherited[i].matchedCSSRules); |
| } |
| |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Inline style for body ==="); |
| InspectorTest.dumpStyle(styles.inlineStyle); |
| test_forcedState(); |
| } |
| |
| var resultStyles = {}; |
| |
| function computedCallback(error, computedStyle) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| InspectorTest.completeTest(); |
| return; |
| } |
| resultStyles.computedStyle = computedStyle; |
| } |
| |
| function inlineCallback(error, inlineStyle) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| InspectorTest.completeTest(); |
| return; |
| } |
| resultStyles.inlineStyle = inlineStyle; |
| } |
| |
| function matchedCallback(error, matchedCSSRules, pseudoElements, inherited) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| InspectorTest.completeTest(); |
| return; |
| } |
| |
| resultStyles.matchedCSSRules = matchedCSSRules; |
| resultStyles.pseudoElements = pseudoElements; |
| resultStyles.inherited = inherited; |
| callback(resultStyles); |
| } |
| |
| function nodeCallback(node) |
| { |
| bodyId = node.id; |
| CSSAgent.getComputedStyleForNode(node.id, computedCallback); |
| CSSAgent.getInlineStylesForNode(node.id, inlineCallback); |
| CSSAgent.getMatchedStylesForNode(node.id, true, true, matchedCallback); |
| } |
| InspectorTest.selectNodeWithId("mainBody", nodeCallback); |
| } |
| |
| function test_forcedState() |
| { |
| CSSAgent.forcePseudoState(bodyId, ["hover"]); |
| CSSAgent.getMatchedStylesForNode(bodyId, true, true, matchedCallback); |
| |
| function matchedCallback(error, matchedRules) |
| { |
| InspectorTest.addResult("=== BODY with forced :hover ==="); |
| InspectorTest.dumpRuleMatchesArray(matchedRules); |
| CSSAgent.forcePseudoState(bodyId, ["hover"], test_tableStyles); |
| } |
| } |
| |
| function test_tableStyles() |
| { |
| function callback(error, inlineStyle, attributesStyle) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Attributes style for table ==="); |
| InspectorTest.dumpStyle(attributesStyle); |
| test_inlineStyleSheetModification(inlineStyle); |
| } |
| |
| function nodeCallback(node) |
| { |
| CSSAgent.getInlineStylesForNode(node.id, callback); |
| } |
| InspectorTest.nodeWithId("thetable", nodeCallback); |
| } |
| |
| function test_inlineStyleSheetModification(inlineStyle) |
| { |
| CSSAgent.getStyleSheetText(inlineStyle.styleId.styleSheetId, textCallback); |
| |
| function textCallback(error, result) |
| { |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Stylesheet-for-inline-style text ==="); |
| InspectorTest.addResult(result); |
| CSSAgent.setStyleSheetText(inlineStyle.styleId.styleSheetId, "", setTextCallback); |
| } |
| |
| function setTextCallback(error, result) |
| { |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Stylesheet-for-inline-style modification result ==="); |
| InspectorTest.addResult(error); |
| test_styleSheets(); |
| } |
| } |
| |
| function test_styleSheets() |
| { |
| var newStyleSheetText = |
| "body.mainpage {" + |
| " text-decoration: strikethrough;" + |
| " badproperty: 2badvalue2;" + |
| "}" + |
| "body {" + |
| " text-align: justify;" + |
| "}"; |
| |
| function patchStyleSheet(styleSheet) |
| { |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Last stylesheet patched ==="); |
| CSSAgent.setStyleSheetText(styleSheet.styleSheetId, newStyleSheetText, |
| loadAndDumpStyleSheet.bind(null, styleSheet.styleSheetId, test_changeSelector)); |
| } |
| |
| function styleSheetInfosLoaded(error, infos) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== All stylesheets ==="); |
| for (var i = 0; i < infos.length; ++i) |
| loadAndDumpStyleSheet(infos[i].styleSheetId, (i < infos.length - 1) ? null : patchStyleSheet); |
| } |
| CSSAgent.getAllStyleSheets(styleSheetInfosLoaded); |
| } |
| |
| function test_changeSelector(styleSheet) |
| { |
| function didSetSelector(error, rule) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== After selector set ==="); |
| loadAndDumpStyleSheet(rule.ruleId.styleSheetId, test_setPropertyText); |
| } |
| |
| CSSAgent.setRuleSelector(styleSheet.rules[0].ruleId, "html *, body[foo=\"bar\"]", didSetSelector); |
| } |
| |
| function test_setPropertyText(styleSheet) |
| { |
| function didSetPropertyText(error, style) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== After property text set ==="); |
| loadAndDumpStyleSheet(style.styleId.styleSheetId, test_setStyleText1); |
| } |
| |
| CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true); |
| CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "", true); |
| |
| // This operation should not update the style as the new property text is not parsable. |
| CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "zzz;", false); |
| CSSAgent.setPropertyText(styleSheet.rules[0].style.styleId, 0, "color: white; background: black;", false, didSetPropertyText); |
| } |
| |
| function test_setStyleText1(styleSheet) |
| { |
| function didSetStyleText1(error, style) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== After first style text set ==="); |
| loadAndDumpStyleSheet(style.styleId.styleSheetId, test_setStyleText2); |
| } |
| |
| CSSAgent.setStyleText(styleSheet.rules[0].style.styleId, "", didSetStyleText1); |
| } |
| |
| function test_setStyleText2(styleSheet) |
| { |
| function didSetStyleText2(error, style) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== After second style text set ==="); |
| loadAndDumpStyleSheet(style.styleId.styleSheetId, test_addRule); |
| } |
| |
| CSSAgent.setStyleText(styleSheet.rules[0].style.styleId, "color: green; background: red; foo: bar; *baz: bar; /* Comment */ font-weight: bold !important", didSetStyleText2); |
| } |
| |
| function test_addRule() |
| { |
| function didGetStyles(error, matchedCSSRules) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== Matched rules after rule added ==="); |
| InspectorTest.dumpRuleMatchesArray(matchedCSSRules); |
| test_disableProperty(); |
| } |
| |
| function didSetStyleText(error, style) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| CSSAgent.getMatchedStylesForNode(bodyId, false, false, didGetStyles); |
| } |
| |
| function ruleAdded(error, rule) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| CSSAgent.setPropertyText(rule.style.styleId, 0, "font-family: serif;", false, didSetStyleText); |
| } |
| |
| CSSAgent.addRule(bodyId, "body", ruleAdded); |
| } |
| |
| function test_disableProperty() |
| { |
| function didDisableProperty(error, style) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== After property manipulations ==="); |
| InspectorTest.dumpStyle(style); |
| test_enableProperty(style.styleId); |
| } |
| |
| function stylesCallback(error, matchedCSSRules) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| // height : 100% ; |
| // border: 1px solid; |
| // border-width: 2px; |
| // background-color : #33FF33; |
| // googles: abra; |
| // foo: .bar; |
| // -moz-goog: 1***; |
| // border-width: 0px; |
| |
| var styleId = matchedCSSRules[1].rule.style.styleId; |
| CSSAgent.toggleProperty(styleId, 0, true); // height: 100% |
| CSSAgent.toggleProperty(styleId, 7, true); // border-width: 0px |
| CSSAgent.setPropertyText(styleId, 7, "font-size: 12px;", false); |
| CSSAgent.setPropertyText(styleId, 9, "font-size: 14px;", false); |
| CSSAgent.toggleProperty(styleId, 9, true); // font-size: 14px |
| CSSAgent.setPropertyText(styleId, 8, "border-width: 1px;", true); |
| CSSAgent.toggleProperty(styleId, 8, false); // border-width: 1px |
| // height : 100% ; [d] |
| // border: 1px solid; |
| // border-width: 2px; |
| // background-color : #33FF33; |
| // googles: abra; |
| // foo: .bar; |
| // -moz-goog: 1***; |
| // font-size: 12px; |
| // border-width: 1px; |
| // font-size: 14px; [d] |
| |
| CSSAgent.setPropertyText(styleId, 3, "", true, didDisableProperty); |
| } |
| |
| function nodeCallback(node) |
| { |
| CSSAgent.getMatchedStylesForNode(node.id, false, false, stylesCallback); |
| } |
| InspectorTest.nodeWithId("toggle", nodeCallback); |
| } |
| |
| function test_enableProperty(styleId) |
| { |
| function didEnableProperty(error, style) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("=== After property enabled ==="); |
| InspectorTest.dumpStyle(style); |
| InspectorTest.completeTest(); |
| } |
| |
| CSSAgent.toggleProperty(styleId, 6, false); |
| CSSAgent.toggleProperty(styleId, 8, false, didEnableProperty); |
| } |
| |
| function loadAndDumpStyleSheet(styleSheetId, continuation, error) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| |
| function styleSheetLoaded(error, styleSheet) |
| { |
| if (error) { |
| InspectorTest.addResult("error: " + error); |
| return; |
| } |
| InspectorTest.addResult(""); |
| InspectorTest.addResult("StyleSheet: '" + styleSheet.text + "'"); |
| InspectorTest.dumpRulesArray(styleSheet.rules); |
| if (continuation) |
| continuation(styleSheet); |
| } |
| |
| CSSAgent.getStyleSheet(styleSheetId, styleSheetLoaded); |
| } |
| } |
| |
| </script> |
| |
| <style> |
| |
| /* An inline stylesheet */ |
| body.mainpage { |
| text-decoration: none; /* at least one valid property is necessary for WebCore to match a rule */ |
| ;badproperty: 1badvalue1; |
| } |
| |
| body.mainpage { |
| prop1: val1; |
| prop2: val2; |
| } |
| |
| body:hover { |
| color: #CDE; |
| } |
| </style> |
| </head> |
| |
| <body id="mainBody" class="main1 main2 mainpage" onload="runTest()" style="font-weight: normal; width: 85%; background-image: url(bar.png)"> |
| <p> |
| Tests that InspectorCSSAgent API methods work as expected. |
| </p> |
| <table width="50%" id="thetable"> |
| </table> |
| <h1 id="toggle">H1</h1> |
| </body> |
| </html> |
