blob: e136746cca0e766eb2b1a201a351fd96d6870ce8 [file] [log] [blame]
<!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>