[csswg-drafts] [css-display][css-pseudo] Interaction of display:contents and ::first-line

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

== [css-display][css-pseudo] Interaction of display:contents and ::first-line ==
Typically, inheritance follows the element tree. However, the [`::first-line`](https://drafts.csswg.org/css-pseudo-4/#first-line-inheritance) 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](https://jsfiddle.net/78wz9gee/). [Bug 1305951](https://bugzilla.mozilla.org/show_bug.cgi?id=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](https://jsfiddle.net/91r5336d/). [Bug 706316](https://bugs.chromium.org/p/chromium/issues/detail?id=706316)

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

```css
main::first-line { color: blue; text-decoration: underline; }
div { display: contents; color: green; letter-spacing: 10px; }
span { display: contents; color: red; }
```
```html
<main>
  <div>aaa <span>bbb</span> <p>ccc</p></div>
</main>
```

I will attempt to represent the inheritance using a [fictional tag sequence](https://drafts.csswg.org/css-pseudo-4/#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:

    ```html
    <main>
      <main::first-line>
        <div no-box>aaa <span no-box>bbb</span></div>
      </main::first-line>
      <div><p>ccc</p></div>
    </main>
    ```

    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:

    ```html
    <main>
      <div no-box>
        <main::first-line>aaa</main::first-line>
        <span no-box><main::first-line>bbb</main::first-line></span>
        <p>ccc</p>
      </div>
    </main>
    ```

    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 only have some block-level.

    ```html
    <main>
      <div no-box>
        <main::first-line>aaa <span no-box>bbb</span></main::first-line>
        <p>ccc</p>
      </div>
    </main>
    ```

    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.

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

Received on Saturday, 29 April 2017 17:05:26 UTC