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

[Loirooriol]

CSS 2.1 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, 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

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

generates fragments somewhat like

<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?

[tabatkins]

This isn't a Display topic; it needs to be defined by the Flow Layout draft (currently Basic Box Model and severely unmaintained/outdated). But this is how the box tree should look:

<anon-block>
  <anon-root-inline><span-inline>A<br>B</span-inline></anon-root-inline>
</anon-block>
<div-block><anon-root-inline>C</anon-root-inline></div-block>
<anon-block>
  <anon-root-inline><span-inline>D</span-inline></anon-root-inline>
</anon-block>

[tabatkins]

(I've relabeled it to the currently-imaginary css-flow-1 draft, since Box isn't even in the labels system.)

[Loirooriol]

So, when CSS Display says

In the course of layout, boxes and text runs can be broken into multiple fragments.

it does not refer to this case? The inline box is broken into different boxes (and not fragments), just as CSS 2.1 says? I thought CSS Display Introduction replaced that part of CSS 2.1

[tabatkins]

No, that's just a generic statement of something that happens for a lot of reasons. For example, a block box can produce multiple fragments if broken across a multicol boundary; an inline box is broken into multiple fragments if broken across a line.

[SelenIT]

@tabatkins, how is this particular case different from an inline box fragmented between two line boxes belonging to different column/page/region boxes? Aren't these fragments still parts of the single inline box? If yes, why should parts of the inline box belonging to different line boxes separated by a block-level box, but otherwise behaving the same (e.g. having no padding/border at the edge where breaking occured), be treated differently?

I'm inclined to consider all these cases as similar (if not the same) cases of inline box fragmentation. Maybe they should be covered in the CSS Fragmentation spec after all? Currently that spec is a bit contradictory regarding inline box fragmentation: first it says that it doesn't cover it at all, but then it still describes the box-decoration-break behavior for inline box fragments as well. Maybe other aspects of inline box fragmentation (especially where other box types come into play) should be also covered there?

[tabatkins]

Agenda+ to ask a specific question. In the following scenario:

<span>inline <div>block</div> inline</span>

Is the div's block box a child of the span's inline box? (And then fragmentation causes the inline box to generate two inline fragments, one on either side of the block fragment.)

Or does block-splits-inline occur at the box-tree level, such that the span generates two inline boxes, siblings to the block box?

If the latter, which box is the span's principle box (or is it both)? This seems hard to observe, but I'm sure there are differences somewhere. More importantly, what matches browser internals most cleanly?

@fantasai and I think it's best if we go with the first option, where the span generates a single inline box (which generates two fragments), and the div generates a child block box. The other option seems... tricky.

[Loirooriol]

@fantasai and I think it's best if we go with the first option, where the span generates a single inline box

Yes! Move all the hand-waving into the fragment tree and let the box tree be sane. I wrote my proposal in #1706 (comment)