[css-display] Interaction of run-in and block inside inline (original) (raw)

How is this supposed to behave?

A B

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 likeA B C D	Renders likeA B C D

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 likeA B C D