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

Chrome behavior is almost certainly a bug. What would happen if the span was both on the first and second line due to wrapping? Chrome uses two different sets of values for the same span, which doesn't look the spirit of the css-cascade spec to me:
![image](https://cloud.githubusercontent.com/assets/364405/24068712/3a61d9a2-0b53-11e7-8e18-4adec355a0e2.png)

FireFox and Edge behavior is not what you think it is, though. All values of the span inherit from the div element (try ```alert(getComputedStyle(document.querySelector('span')).color)```). 

What actually happens is that Edge has the concept of "render styles" (first-line, selection, etc...) that apply on text runs during linebox building (a text run being a run of text that shares the same formatting and does not break to the next line). 

Drawing backgrounds at the text run level would be ugly since some letters might be bigger or use a different font, so that is the only thing that is being drawn at the ::first-line level. 

```html
<div>
    <div::first-line line-backround has-own-style />
    <span inherits-from="div">
        <::text-run inherits-from="::first-line, span">ABC...</...>
        <::text-run inherits-from="span">STU...</...>
```
The ::text-run inherits its style from the first-line of its block container, the div... but only inheritable properties, not background!. 

We have a similar behavior for the "high-contrast backplate" we draw when users enable a high-contrast theme on Windows, though we also draw it on inline elements to override local inline backgrounds; then there is the case of selections which are drawn only at the text run level; but that means those text backgrounds are not one rectangle but the unions of a lot of rectangles while the spec mandates the ::first-line background to behave like an inline which encompasses its text children and draws one background).

Btw here I added some image on the line and here is what the render is in Firefox:
![image](https://cloud.githubusercontent.com/assets/364405/24068650/9f18bc14-0b51-11e7-9e01-20441cb6921c.png)

You can see the background of the line being drawn under the backround of the span.

-- 
GitHub Notification of comment by FremyCompany
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1097#issuecomment-287515476 using your GitHub account

Received on Saturday, 18 March 2017 04:25:18 UTC