-
Notifications
You must be signed in to change notification settings - Fork 756
Description
The ::first-line of a block container is supposed to be nested inside the innermost enclosing block box.
CSS Pseudo only excludes
The first line of a table-cell or inline-block cannot be the first formatted line of an ancestor element.
presumably because in CSS 2.1 these were the only block containers that do not participate in a BFC. (Now that we have others, like flex items and grid items, I think the spec should be generalized, see #1174)
But there is another interesting kind of block container: table-caption. The table caption is inside the table wrapper box, which according to CSS 2.1 and CSS Tables 3,
The table wrapper box establishes a block formatting context.
So table-caption is in fact a block container which participates in a BFC, and thus it seems reasonable that CSS 2.1 did not exclude table-caption for ::first-line propagation.
However, the two implementations which nest ::first-line inside inner blocks (Chrome and Edge) do not do this for table-caption.
Consider this example: https://jsfiddle.net/Lwf9h6Lm/
div::first-line { color: red }
span { display: table-caption; color: green }<div><span>Foo</span></div>Foo is green on both Chrome and Edge, unaffected by div::first-line.
In fact I think a table wrapper box should establish a table formatting context, and thus the table-caption would participate in that TFC instead of in a BFC (see #1189). Then Foo would be expected to be green.
But if table-caption remains block-level, what should happen with ::first-line? Should browsers change in order to make Foo be red, or should table-caption be added as an exception for ::first-line, to let Foo remain green? And if div::first-line is expected to be nested inside the table-caption, should this still be the case with caption-side:bottom?