| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../http/tests/inspector/resources/inspector-test.js"></script> |
| <script> |
| function test() { |
| let suite = InspectorTest.createAsyncSuite("OverriddenProperty"); |
| |
| function logProperty(property) { |
| let text = property.formattedText || "REMOVED"; |
| if (property.overridden) |
| text += " overridden"; |
| InspectorTest.log(text); |
| } |
| |
| function getNodeStyles(selector, callback) { |
| WI.domManager.requestDocument((documentNode) => { |
| documentNode.querySelector(selector, (contentNodeId) => { |
| if (!contentNodeId) { |
| InspectorTest.fail("DOM node not found."); |
| InspectorTest.completeTest(); |
| return; |
| } |
| |
| let domNode = WI.domManager.nodeForId(contentNodeId); |
| let nodeStyles = WI.cssManager.stylesForNode(domNode); |
| |
| if (nodeStyles.needsRefresh) { |
| nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => { |
| callback(nodeStyles); |
| }); |
| } else |
| callback(nodeStyles); |
| }); |
| }); |
| } |
| |
| function getStyleDeclaration(selector, callback, resolve) { |
| getNodeStyles(selector, (nodeStyles) => { |
| let matchedRule = null; |
| for (let rule of nodeStyles.matchedRules) { |
| if (rule.selectorText === selector) { |
| matchedRule = rule; |
| break; |
| } |
| } |
| |
| if (!matchedRule) { |
| InspectorTest.fail(`Couldn't find ${selector}`); |
| resolve(); |
| return; |
| } |
| |
| callback(matchedRule.style) |
| }); |
| } |
| |
| suite.addTestCase({ |
| name: "OverriddenProperty.effectivePropertyRemoved", |
| description: "Test that CSSProperty.prototype.overridden is cleared when the overriding (effective) property is removed.", |
| test(resolve, reject) { |
| getNodeStyles("#x", (nodeStyles) => { |
| let inlineStyle = nodeStyles.inlineStyle; |
| let styleRule = nodeStyles.matchedRules[0]; |
| let inlineStyleProperty = inlineStyle.enabledProperties[0]; |
| let styleRuleProperty = styleRule.style.enabledProperties[0]; |
| |
| function log() { |
| logProperty(inlineStyleProperty); |
| logProperty(styleRuleProperty); |
| InspectorTest.log(""); |
| } |
| |
| log(); |
| |
| inlineStyleProperty.remove(); |
| |
| styleRuleProperty.addEventListener(WI.CSSProperty.Event.OverriddenStatusChanged, (event) => { |
| // FIXME: <https://webkit.org/b/195651> OverriddenStatusChanged may fire more than once. |
| if (styleRuleProperty.overridden) |
| return; |
| |
| InspectorTest.log("OverriddenStatusChanged event fired."); |
| log(); |
| resolve(); |
| }); |
| }); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "OverriddenProperty.OverriddenByShorthand", |
| test(resolve, reject) { |
| getStyleDeclaration(".longhand-overridden-by-shorthand", (style) => { |
| let borderTopColorProperty = style.propertyForName("border-top-color"); |
| InspectorTest.expectTrue(borderTopColorProperty.overridden, "border-top-color is overridden."); |
| |
| let borderColorProperty = style.propertyForName("border-color"); |
| InspectorTest.expectFalse(borderColorProperty.overridden, "border-color is NOT overridden."); |
| |
| resolve(); |
| }, reject); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "OverriddenProperty.OverriddenByImportantShorthand", |
| test(resolve, reject) { |
| getStyleDeclaration(".longhand-overridden-by-important-shorthand", (style) => { |
| let borderColorProperty = style.propertyForName("border-color"); |
| InspectorTest.expectFalse(borderColorProperty.overridden, "border-color is NOT overridden."); |
| |
| let borderTopColorProperty = style.propertyForName("border-top-color"); |
| InspectorTest.expectTrue(borderTopColorProperty.overridden, "border-top-color is overridden."); |
| |
| resolve(); |
| }, reject); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "OverriddenProperty.NotOverriddenByImportantLonghand", |
| test(resolve, reject) { |
| getStyleDeclaration(".shorthand-overridden-by-important-longhand", (style) => { |
| let borderTopColorProperty = style.propertyForName("border-top-color"); |
| InspectorTest.expectFalse(borderTopColorProperty.overridden, "border-top-color is NOT overridden."); |
| |
| let borderColorProperty = style.propertyForName("border-color"); |
| InspectorTest.expectFalse(borderColorProperty.overridden, "border-color is NOT overridden."); |
| |
| resolve(); |
| }, reject); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "OverriddenProperty.NotOverriddenByLonghand", |
| test(resolve, reject) { |
| getStyleDeclaration(".shorthand-not-overridden-by-longhand", (style) => { |
| let borderColorProperty = style.propertyForName("border-color"); |
| InspectorTest.expectFalse(borderColorProperty.overridden, "border-color is NOT overridden."); |
| |
| let borderTopColorProperty = style.propertyForName("border-top-color"); |
| InspectorTest.expectFalse(borderTopColorProperty.overridden, "border-top-color is NOT overridden."); |
| |
| resolve(); |
| }, reject); |
| } |
| }); |
| |
| suite.addTestCase({ |
| name: "OverriddenProperty.MixedCaseVariablesNotOverridden", |
| test(resolve, reject) { |
| getStyleDeclaration(".mixed-case-variables-not-overridden", (style) => { |
| let lowercaseVariableProperty = style.propertyForName("--foo"); |
| InspectorTest.expectFalse(lowercaseVariableProperty.overridden, "`--foo` is NOT overridden."); |
| |
| let uppercaseVariableProperty = style.propertyForName("--FOO"); |
| InspectorTest.expectFalse(uppercaseVariableProperty.overridden, "`--FOO` is NOT overridden."); |
| |
| resolve(); |
| }, reject); |
| } |
| }); |
| |
| suite.runTestCasesAndFinish(); |
| } |
| </script> |
| </head> |
| <body onload="runTest()"> |
| <p>Test that CSSProperty.prototype.overridden is set correctly.</p> |
| <style> |
| #x { |
| color: red; |
| } |
| |
| .longhand-overridden-by-shorthand { |
| border-top-color: red; |
| border-color: green; |
| } |
| |
| .longhand-overridden-by-important-shorthand { |
| border-color: green !important; |
| border-top-color: red; |
| } |
| |
| .shorthand-overridden-by-important-longhand { |
| border-top-color: red !important; |
| border-color: green; |
| } |
| |
| .shorthand-not-overridden-by-longhand { |
| border-color: green; |
| border-top-color: red; |
| } |
| |
| .mixed-case-variables-not-overridden { |
| --foo: green; |
| --FOO: red; |
| } |
| </style> |
| <div id="x" style="color: green"></div> |
| <div class="longhand-overridden-by-shorthand"></div> |
| <div class="longhand-overridden-by-important-shorthand"></div> |
| <div class="shorthand-overridden-by-important-longhand"></div> |
| <div class="shorthand-not-overridden-by-longhand"></div> |
| <div class="mixed-case-variables-not-overridden"></div> |
| </body> |
| </html> |
