blob: 7f5119aa8efdfeca6e4513f87345aa3090b160dc [file] [log] [blame]
<!DOCTYPE html>
| 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). The line boxes before the break
| and after the break are enclosed in anonymous block boxes, and
| the block-level box becomes a sibling of those anonymous boxes.
body {
color: #fff;
font-family: Roboto;
font-size: 100px;
font-weight: bold;
.level-1 {
background-color: #40c4ff;
.level-2 {
background-color: #00b0ff;
/* TODO: When such an inline box is affected by relative positioning, any
* resulting translation also affects the block-level box contained
* in the inline box.
* left: 300px;
* position: relative;
.level-3 {
background-color: #0091ea;
<span class="level-1">
<span class="level-2">
<div class="level-3">III</div>