[css-display] Interaction of run-in and block inside inline

[Loirooriol]

How is this supposed to behave?

<span>
  A
  <b style="display: run-in">B</b>
  <div>C</div>
  D
</span>

I guess it's one of these options:

Option 1	Option 2
The block breaks the inline <anonymous-block> <span> A <b style="display: run-in">B</b> </span> </anonymous-block> <div>C</div> <anonymous-block> <span>D</span> </anonymous-block> The run-in generates an anonymous block wrapper <anonymous-block> <span> A <anonymous-block> <b style="display: run-in">B</b> </anonymous-block> </span> </anonymous-block> <div>C</div> <anonymous-block> <span>D</span> </anonymous-block> The anonymous block generated by the run-in breaks the inline <anonymous-block> <anonymous-block> <span>A</span> </anonymous-block> <anonymous-block> <b style="display: run-in">B</b> </anonymous-block> <anonymous-block> <span></span> </anonymous-block> </anonymous-block> <div>C</div> <anonymous-block> <span>D</span> </anonymous-block>	The run-in is inserted inside the block <span> A <div> <b style="display: run-in">B</b> C </div> D </span> The block breaks the inline <anonymous-block> <span>A</span> </anonymous-block> <div> <b style="display: run-in">B</b> C </div> <anonymous-block> <span>D</span> </anonymous-block>
Renders like A B C D	Renders like A B C D

[SelenIT]

I believe that, first of all, A and D themselves are wrapped in anonymous block boxes, since the container has at least one block box inside, so they all are in the block formatting context. Given that run-in is inserted inside the next block box, I suppose that Option 2, variant 1 is the closest to the answer:

<span>
  <anonymous-block>A</anonymous-block>
  <div>
    <b style="display: run-in">B</b>
    C
  </div>
  <anonymous-block>D</anonymous-block>
</span>

I don't think it's "splitting the span", because in DOM terms both div and run-in box are still nested in the span. But I'm not sure if my understanding is correct from the implementers' point of view.

[Loirooriol]

@SelenIT You are right I forgot to wrap the inline fragments inside anonymous block boxes, I have edited it.

When I said that the block splits the span I meant this:

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 (and any block-level siblings that are consecutive or separated only by collapsible whitespace and/or out-of-flow elements), splitting the inline box into two boxes (even if either side is empty), one on each side of the block-level box(es).

This does not affect the DOM, of course. I only tried to represent the various box fragments. It's not clear how this affects the box tree, though, so I filed #1477.

[SelenIT]

@Loirooriol I agree with your correction. Yes, the span box should be fragmented this way. Now I think that Option 2, variant 2 is exactly what should happen here.

[fantasai]

@tabatkins and I agree that this is the most sensible option. Should be fixed in 6f6913e.
Let us know if it needs further clarification.

[Loirooriol]

It's OK, thanks. But maybe I would restrict to CSS2§9.2.1.1, because CSS2§9.2 is so big.

[fantasai]

We wanted to include the full scope of flow layout anonymous box fixup there, so linked up to 9.2.

(The section in between those headings is relatively short and is a good introduction for understanding 9.2.1.1, so it's not a bad place to land anyway.)