Skip to content

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

Open
@Loirooriol

Description

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

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions