1556054 - Inspector Rules view should strike out logical/physical properties that are aliases & override each other

Status: NEW

(DevTools :: Inspector: Rules, defect, P2)

Description

[Daniel Holbert [:dholbert]]

STR:

1. Load https://jsfiddle.net/163qtry7/
2. Inspect the yellow div in CSS Rules view.

EXPECTED RESULTS:
We should show "padding-left" as being struck through (since it's overridden by the logical alias "padding-inline-start").

ACTUAL RESULTS:
We don't strike out any of the styles.

Similarly, in https://jsfiddle.net/fm4gjonk/ , if you inspect the input type="color" element (under "Overriding all logical padding subproperties"), we should show the padding shorthand being entirely struck out, but we don't right now. (We do strike it out for the analogous "Overriding all physical padding subproperties" chunk below, though.)

This bug was originally reported via twitter by Ana Tudor: https://twitter.com/anatudor/status/1133969187376914434?s=21

Comment 1

[Razvan Caliman [:rcaliman]]

Excellent suggestion!

There is at least one other case where properties may be overwritten by some other not of the same type: a font-variation-settings property with a value containing either "WGHT" or "WDTH" registered axes for variable fonts will always overwrite the font-weight or font-stretch, respectively. (no bug filed yet, but I'm mentioning it here for future reference when we attempt to fix this to have a general solution).

The logic to mark properties as overwritten in the Rules view is fairly simple at this point: it involves iterating all CSS declarations in ascending order of specificity, then marking them as overwritten when other declarations, higher in specificity, have a corresponding declarations. There's a check for computed values of sub-properties for handling shorthand notation.

One idea that comes to mind is to have a customizable set of conditions to check against when marking a declaration as overwritten. The existence of a prior identical property is one such condition. A dictionary of alternate conditions, for example padding-left overwritten by padding-inline-start is another. Likewise for font-variation-settings and perhaps others we haven't yet considered.