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.
| https://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level
-->
<html>
<head>
<style>
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;
}
</style>
</head>
<body>
<span class="level-1">
I
<span class="level-2">
II
<div class="level-3">III</div>
II
</span>
I
</span>
</body>
</html>