[csswg-drafts] [css-cascade][css-selectors][css-pseudo-elements] How does 'inherit' keyword behave in a child of ::first-line?

Loirooriol has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-cascade][css-selectors][css-pseudo-elements] How does 'inherit' keyword behave in a child of ::first-line? ==
[CSS Cascade](https://drafts.csswg.org/css-cascade-4/#inheriting) 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](https://drafts.csswg.org/css-pseudo-4/#first-line-inheritance) and [CSS Pseudo-elements](https://drafts.csswg.org/css-pseudo-4/#first-line-inheritance) 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/)

```html

<div>
  <span>ABCDEFGHIJKLMNOPQRSTUVWXYZ</span>
</div>

```
```css

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.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1097 using your GitHub account

Received on Sunday, 12 March 2017 19:26:16 UTC