LayoutTests/fast/regions/overflow/overflow-in-variable-width-regions-inline-continuation.html - WebKit - Git at Google

 <!doctype html>

  <style>
     html {
         -webkit-writing-mode: horizontal-tb;
     }

     #content {
         -webkit-flow-into: flow1;
         width: 200px;
         font: 16px Ahem;
         -webkit-font-smoothing: none;
     }

     #region1, #region2 {
         border: 1px solid black;
         margin: 50px;
         float: left;
         -webkit-flow-from: flow1;
     }

     #region1 {
         width: 200px;
         height: 90px;
     }

     #region2 {
         width: 250px;
         height: 100px;
     }

     #positioned {
         position: relative;
         top: 30px;
         left: 30px;
     }

     .split {
         height: 5px;
         width: 50px;
         background-color: green;
     }
 </style>

 <a href="https://bugs.webkit.org/show_bug.cgi?id=125291">[CSS Regions] Implement visual overflow computation for inline elements</a>
 <p>The paragraph inside the regions must be fragmented. Each fragment must be relatively positioned based on the fragment position.</p>

 <div id="content"><span id="positioned">AXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <span>Ne<span>sted<div class="split"></div><span>SPANS</br></span></span></span> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXB</span>
 </div>

 <div id="container">
     <div id="region1"></div>
     <div id="region2"></div>
 </div>
	<!doctype html>

	<style>
	html {
	-webkit-writing-mode: horizontal-tb;
	}

	#content {
	-webkit-flow-into: flow1;
	width: 200px;
	font: 16px Ahem;
	-webkit-font-smoothing: none;
	}

	#region1, #region2 {
	border: 1px solid black;
	margin: 50px;
	float: left;
	-webkit-flow-from: flow1;
	}

	#region1 {
	width: 200px;
	height: 90px;
	}

	#region2 {
	width: 250px;
	height: 100px;
	}

	#positioned {
	position: relative;
	top: 30px;
	left: 30px;
	}

	.split {
	height: 5px;
	width: 50px;
	background-color: green;
	}
	</style>

	<a href="https://bugs.webkit.org/show_bug.cgi?id=125291">[CSS Regions] Implement visual overflow computation for inline elements</a>
	<p>The paragraph inside the regions must be fragmented. Each fragment must be relatively positioned based on the fragment position.</p>

	<div id="content"><span id="positioned">AXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <span>Ne<span>sted<div class="split"></div><span>SPANS</br></span></span></span> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXX <div class="split"></div> XXXXB</span>
	</div>

	<div id="container">
	<div id="region1"></div>
	<div id="region2"></div>
	</div>