src/cobalt/layout_tests/testdata/css-2-1/9-2-1-1-inline-level-boxes-should-be-broken-around-block-level-box.html - cobalt - Git at Google

 <!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>
	<!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>