[csswg-drafts] [css-display] How does block inside inline affect the box tree, exactly?

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

== [css-display] How does block inside inline affect the box tree, exactly? ==
[CSS 2.1](https://www.w3.org/TR/CSS21/visuren.html#img-anon-block) says

> When an inline box contains an in-flow block-level box, the inline box (and its inline ancestors within the same line box) are broken around the block-level box [...], splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es). The line boxes before the break and after the break are enclosed in anonymous block boxes

According to [CSS Display Introduction](https://drafts.csswg.org/css-display-3/#intro), I guess now we would say the inline box is split into two box fragments.

But how does this affect the box tree? Is the parent node (in the box tree) of the block-level box still the inline box? Is the so-called "box tree" really a tree, or a more complex structure? Should we be talking about a fragment tree instead? Are box tree nodes in fact box fragments instead of boxes? Do these anonymous block boxes (the ones that enclose the line boxes before and after the break) really exist in the box tree, or do they only generate fragments in the fragment tree? Should this be explained in CSS Break?

For example, I think

```html
<span>A<br />B<div>C</div>D</span>
```

generates fragments somewhat like

```html
<fragment of="#3" first last>
  <line><fragment of="#6" first><fragment of="#1" first>A</fragment></fragment></line>
  <line><fragment of="#6" last><fragment of="#1">B</fragment></fragment></line>
</line>
</fragment>
<fragment of="#2" first last>
  <line><fragment of="#5" first last>C</fragment></line>
</fragment>
<fragment of="#4" first last>
  <line><fragment of="#7" first last><fragment of="#1" last>D</fragment></fragment></line>
</fragment>
```

where

 - `#1` is the inline box generated by the `<span>` element
 - `#2` is the block box generated by the `<div>` element
 - `#3` is an anonymous block box
 - `#4` is another anonymous block box
 - `#5` is the root inline box generated by `#2`
 - `#6` is the root inline box generated by `#3`
 - `#7` is the root inline box generated by `#4`

But how are `#1`,...,`#7` themselves (not their fragments) structured in the box tree?

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

Received on Monday, 29 May 2017 20:40:35 UTC