[csswg-drafts] [css-content][css-flexbox] Clarify box structure of content generating pseudo-elements with content: '<content-list>' (#6532)

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

== [css-content][css-flexbox] Clarify box structure of content generating pseudo-elements with content: '<content-list>' ==
# Overview

I’d like to clarify the desired structure of the boxes that are generated for the case where multiple values are specified in `content: <content-list>`, given that Gecko and Blink/WebKit implement this differently.

That internal structure is largely irrelevant in flow layout, but becomes important when a pseudo-element becomes a flex or grid container, and needs to identify the items it will be formatting.

[CSS 2](https://drafts.csswg.org/css2/#content①) doesn’t seem to say anything explicit about the *multiple values* case. But [CSS Content](https://drafts.csswg.org/css-content/#typedef-content-content-list) says that:
> Each value contributes an inline box to the element’s contents. For \<image\>, this is an inline anonymous replaced element; for the others, it’s an anonymous inline run of text.

My intuition would be to extrapolate from the examples provided in [CSS 2 12.1. The :before and :after pseudo-elements](https://drafts.csswg.org/css2/#before-after-content). So I’d expect the following two examples to render identically:

**Pseudo-element**
```html
<div></div>
```
```css
div::before {
  content: 'Just some' ' text ' url('https://picsum.photos/id/237/360/150') ' and more text after an image';
  display: flex;
}
```

**Regular element**
```html
<div>
  <span>
    Just some text
    <img src="https://picsum.photos/id/237/360/150" alt="Doggy" />
    and more text after an image
  </span>
</div>
```
```css
div > span {
  display: flex;
}
```

# Difference in implementations

To compare in different browsers, you can check out this example: [https://andyjakubowski.github.io/visual-explorations/189/](https://andyjakubowski.github.io/visual-explorations/189/)

Gecko implements this as seen above. But Blink and WebKit seem to only end up with one flex or grid item, which goes contrary to what you’d expect reading the instructions for [identifying flex items](https://drafts.csswg.org/css-flexbox/#flex-items).

In [Make display: contents work for ::before and ::after](https://bugzilla.mozilla.org/show_bug.cgi?id=1418138), @emilio indicated that WebKit wrapped the generated content in an anonymous inline box. That would confirm the seemingly unexpected behavior above.

# Need for clarification

I wasn’t able to find any related bugs for Blink or WebKit, and I wonder if they’re really even bugs. I found *Example 171* in [CSS 2](https://drafts.csswg.org/css2/#before-after-content) pretty helpful, and I wonder if we could use another example for the `'<content-list>'` case? That could provide clear guidance for new implementations given the different observed behavior in browsers.

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


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Friday, 20 August 2021 14:29:01 UTC