[css-display][css-pseudo] Interaction of display:contents and ::first-line (original) (raw)

Typically, inheritance follows the element tree. However, the ::first-line is able to "hijack" the inheritance of some properties:

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.

The problem is that the place in which ::first-line is generated depends on the box tree, and display: contents generates no boxes, so I'm not sure how they interact.

The implementations of display: contents (Firefox and Chrome) are not interoperable, and both seem undesirable:

• On Firefox, inline contents in the first line are not affected by ::first-line if they are inside an element with display: contents. They inherit directly from that element instead. Example. Bug 1305951
• On Chrome, the mere existence of ::first-line prevents inline contents in the first line from inheriting from a display: contents parent. They inherit first from ::first-line, and then from the nearest non-display: contents ancestor. Example. Bug 706316

For example, https://jsfiddle.net/0q8paowL/

main::first-line { color: blue; text-decoration: underline; } div { display: contents; color: green; letter-spacing: 10px; } span { display: contents; color: red; }

I will attempt to represent the inheritance using a fictional tag sequence, which I'm not sure is right because ::first-line only exists in the box tree and display: contents in the element tree.

I see three reasonable possibilities:

• Place the ::first-line as outermost as possible, breaking display: contents elements if necessary:
  aaa bbb

  ccc

  Then `aaa` would be green (from `div`) and `bbb` would be red (from `span`). Both would inherit `letter-spacing` (from `div`). This would be closer to what Firefox does, but they would also receive a blue underline from `::first-line`.
• Nest ::first-line inside display: contents elements, breaking it if necessary:
  aaa bbb

  ccc

  Then `aaa` would be blue (from `::first-line`) and `bbb` would be blue (from `::first-line`). Both would have blue underline (from `::first-line`). This would be closer to what Chrome does, but they would also inherit `letter-spacing` (from `div`).
• Let ::first-line enclose display: contents elements that only have inline contents, but nest it inside display: contents elements that have some block-level.
  aaa bbb

  ccc

  Then `aaa` would be blue (from `::first-line`) and `bbb` would be red (from `span`). Both would have blue underline (from `::first-line`) and `letter-spacing` (from `div`). This would be like a mix of the previous possibilities.