[css-cascade][css-pseudo] How does 'inherit' keyword behave in a child of ::first-line? · Issue #1097 · w3c/csswg-drafts (original) (raw)

TL;DR - see proposal

CSS Cascade says

The inherited value of a property on an element is the computed value of the property on the element’s parent element. [...]
Note: Inheritance follows the document tree and is not intercepted by anonymous boxes

It says "parent element" and "document tree", but both CSS Selectors and CSS Pseudo-elements seem to override this for ::first-line:

During CSS inheritance, the portion of a child element that occurs on the first line only inherits properties applicable to the ::first-line pseudo-element from the ::first-line pseudo-element. For all other properties inheritance is from the non-pseudo-element parent of the first line pseudo element.

However, browsers do strange things (https://jsfiddle.net/0geoep6t/)

div { color: blue; background: yellow; border: 10px solid blue; } div::first-line { color: red; /* Applies and is inherited by default / background: cyan; / Applies and is not inherited by default / border: 10px solid red; / Does not apply to ::first-line / } span { color: inherit; / Firefox, Edge and Chrome inherit from ::first-line / background: inherit; / Firefox and Edge inherit from div, Chrome from ::first-line / border: inherit; / Firefox and Edge inherit from div, Chrome from ::first-line */ }

If I understand correctly, since background applies to ::first-line, background: inherit should inherit from the ::first-line, like Chrome does. And since border does not apply to ::first-line, border: inherit should inherit from the div, like Firefox and Edge do.

Am I right? Consider adding some note to the spec to clarify this.