Modified: trunk/LayoutTests/inspector/css/overridden-property-expected.txt (246222 => 246223)
--- trunk/LayoutTests/inspector/css/overridden-property-expected.txt 2019-06-07 22:52:34 UTC (rev 246222)
+++ trunk/LayoutTests/inspector/css/overridden-property-expected.txt 2019-06-07 23:18:39 UTC (rev 246223)
@@ -1,4 +1,4 @@
-Test that CSSProperty.prototype.overridden is cleared when the overriding (effective) property is removed.
+Test that CSSProperty.prototype.overridden is set correctly.
== Running test suite: OverriddenProperty
@@ -11,3 +11,19 @@
color: red;
+-- Running test case: OverriddenProperty.OverriddenByShorthand
+PASS: border-top-color is overridden.
+PASS: border-color is NOT overridden.
+
+-- Running test case: OverriddenProperty.OverriddenByImportantShorthand
+PASS: border-color is NOT overridden.
+PASS: border-top-color is overridden.
+
+-- Running test case: OverriddenProperty.NotOverriddenByImportantLonghand
+PASS: border-top-color is NOT overridden.
+PASS: border-color is NOT overridden.
+
+-- Running test case: OverriddenProperty.NotOverriddenByLonghand
+PASS: border-color is NOT overridden.
+PASS: border-top-color is NOT overridden.
+
Modified: trunk/LayoutTests/inspector/css/overridden-property.html (246222 => 246223)
--- trunk/LayoutTests/inspector/css/overridden-property.html 2019-06-07 22:52:34 UTC (rev 246222)
+++ trunk/LayoutTests/inspector/css/overridden-property.html 2019-06-07 23:18:39 UTC (rev 246223)
@@ -4,8 +4,6 @@
<script src=""
<script>
function test() {
- let nodeStyles = null;
-
let suite = InspectorTest.createAsyncSuite("OverriddenProperty");
function logProperty(property) {
@@ -15,65 +13,180 @@
InspectorTest.log(text);
}
+ function getNodeStyles(selector, callback) {
+ WI.domManager.requestDocument((documentNode) => {
+ WI.domManager.querySelector(documentNode.id, 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) {
- let inlineStyle = nodeStyles.inlineStyle;
- let styleRule = nodeStyles.matchedRules[0];
- let inlineStyleProperty = inlineStyle.enabledProperties[0];
- let styleRuleProperty = styleRule.style.enabledProperties[0];
+ 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("");
- }
+ function log() {
+ logProperty(inlineStyleProperty);
+ logProperty(styleRuleProperty);
+ InspectorTest.log("");
+ }
- log();
+ log();
- inlineStyleProperty.remove();
+ 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;
+ 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();
+ InspectorTest.log("OverriddenStatusChanged event fired.");
+ log();
+ resolve();
+ });
});
}
});
- WI.domManager.requestDocument((documentNode) => {
- WI.domManager.querySelector(documentNode.id, "div#x", (contentNodeId) => {
- if (!contentNodeId) {
- InspectorTest.fail("DOM node not found.");
- InspectorTest.completeTest();
- return;
- }
+ suite.addTestCase({
+ name: "OverriddenProperty.OverriddenByShorthand",
+ test(resolve, reject) {
+ getStyleDeclaration(".longhand-overridden-by-shorthand", (style) => {
+ const dontCreateIfMissing = true;
+ let borderTopColorProperty = style.propertyForName("border-top-color", dontCreateIfMissing);
+ InspectorTest.expectTrue(borderTopColorProperty.overridden, "border-top-color is overridden.");
- let domNode = WI.domManager.nodeForId(contentNodeId);
- nodeStyles = WI.cssManager.stylesForNode(domNode);
+ let borderColorProperty = style.propertyForName("border-color", dontCreateIfMissing);
+ InspectorTest.expectFalse(borderColorProperty.overridden, "border-color is NOT overridden.");
- if (nodeStyles.needsRefresh) {
- nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
- suite.runTestCasesAndFinish();
- });
- } else
- suite.runTestCasesAndFinish();
- });
+ resolve();
+ }, reject);
+ }
});
+
+ suite.addTestCase({
+ name: "OverriddenProperty.OverriddenByImportantShorthand",
+ test(resolve, reject) {
+ getStyleDeclaration(".longhand-overridden-by-important-shorthand", (style) => {
+ const dontCreateIfMissing = true;
+ let borderColorProperty = style.propertyForName("border-color", dontCreateIfMissing);
+ InspectorTest.expectFalse(borderColorProperty.overridden, "border-color is NOT overridden.");
+
+ let borderTopColorProperty = style.propertyForName("border-top-color", dontCreateIfMissing);
+ 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) => {
+ const dontCreateIfMissing = true;
+ let borderTopColorProperty = style.propertyForName("border-top-color", dontCreateIfMissing);
+ InspectorTest.expectFalse(borderTopColorProperty.overridden, "border-top-color is NOT overridden.");
+
+ let borderColorProperty = style.propertyForName("border-color", dontCreateIfMissing);
+ 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) => {
+ const dontCreateIfMissing = true;
+ let borderColorProperty = style.propertyForName("border-color", dontCreateIfMissing);
+ InspectorTest.expectFalse(borderColorProperty.overridden, "border-color is NOT overridden.");
+
+ let borderTopColorProperty = style.propertyForName("border-top-color", dontCreateIfMissing);
+ InspectorTest.expectFalse(borderTopColorProperty.overridden, "border-top-color is NOT overridden.");
+
+ resolve();
+ }, reject);
+ }
+ });
+
+ suite.runTestCasesAndFinish();
}
</script>
</head>
<body _onload_="runTest()">
- <p>Test that CSSProperty.prototype.overridden is cleared when the overriding (effective) property is removed.</p>
+ <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;
+ }
</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>
</body>
</html>
Modified: trunk/Source/WebInspectorUI/ChangeLog (246222 => 246223)
--- trunk/Source/WebInspectorUI/ChangeLog 2019-06-07 22:52:34 UTC (rev 246222)
+++ trunk/Source/WebInspectorUI/ChangeLog 2019-06-07 23:18:39 UTC (rev 246223)
@@ -1,3 +1,26 @@
+2019-06-07 Nikita Vasilyev <nvasil...@apple.com>
+
+ Web Inspector: longhand CSS properties overridden by shorthands miss strikethrough
+ https://bugs.webkit.org/show_bug.cgi?id=198629
+ <rdar://problem/51504160>
+
+ Reviewed by Devin Rousso.
+
+ Longhand CSS properties (e.g. "font-size") overriden by shorthands (e.g. "font") now have strikethroughs.
+
+ * UserInterface/Models/CSSProperty.js:
+ (WI.CSSProperty.prototype.set overridingProperty):
+ (WI.CSSProperty):
+
+ * UserInterface/Models/DOMNodeStyles.js:
+ (WI.DOMNodeStyles.prototype._updateStyleCascade):
+ Call _associateRelatedProperties before _markOverriddenProperties because
+ _associateRelatedProperties sets relatedShorthandProperty property, which
+ is now used by _markOverriddenProperties.
+
+ (WI.DOMNodeStyles.prototype._markOverriddenProperties.isOverriddenBy):
+ (WI.DOMNodeStyles.prototype._markOverriddenProperties):
+
2019-06-06 Devin Rousso <drou...@apple.com>
Web Inspector: Timelines: remove always disabled details sidebar navigation item
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js (246222 => 246223)
--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2019-06-07 22:52:34 UTC (rev 246222)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSProperty.js 2019-06-07 23:18:39 UTC (rev 246223)
@@ -309,6 +309,7 @@
if (!WI.settings.experimentalEnableStylesJumpToEffective.value)
return;
+ console.assert(this !== effectiveProperty, `Property "${this.formattedText}" can't override itself.`, this);
this._overridingProperty = effectiveProperty || null;
}
Modified: trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js (246222 => 246223)
--- trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2019-06-07 22:52:34 UTC (rev 246222)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/DOMNodeStyles.js 2019-06-07 23:18:39 UTC (rev 246223)
@@ -795,13 +795,13 @@
this._propertyNameToEffectivePropertyMap = {};
+ this._associateRelatedProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
this._markOverriddenProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
- this._associateRelatedProperties(cascadeOrderedStyleDeclarations, this._propertyNameToEffectivePropertyMap);
for (let pseudoElementInfo of this._pseudoElements.values()) {
pseudoElementInfo.orderedStyles = this._collectStylesInCascadeOrder(pseudoElementInfo.matchedRules, null, null);
+ this._associateRelatedProperties(pseudoElementInfo.orderedStyles);
this._markOverriddenProperties(pseudoElementInfo.orderedStyles);
- this._associateRelatedProperties(pseudoElementInfo.orderedStyles);
}
}
@@ -847,6 +847,25 @@
{
propertyNameToEffectiveProperty = propertyNameToEffectiveProperty || {};
+ function isOverriddenByRelatedShorthand(property) {
+ let shorthand = property.relatedShorthandProperty;
+ if (!shorthand)
+ return false;
+
+ if (property.important && !shorthand.important)
+ return false;
+
+ if (!property.important && shorthand.important)
+ return true;
+
+ if (property.ownerStyle === shorthand.ownerStyle)
+ return shorthand.index > property.index;
+
+ let propertyStyleIndex = styles.indexOf(property.ownerStyle);
+ let shorthandStyleIndex = styles.indexOf(shorthand.ownerStyle);
+ return shorthandStyleIndex > propertyStyleIndex;
+ }
+
for (var i = 0; i < styles.length; ++i) {
var style = styles[i];
var properties = style.enabledProperties;
@@ -885,7 +904,11 @@
}
}
- property.overridden = false;
+ if (isOverriddenByRelatedShorthand(property)) {
+ property.overridden = true;
+ property.overridingProperty = property.relatedShorthandProperty;
+ } else
+ property.overridden = false;
propertyNameToEffectiveProperty[canonicalName] = property;
}
