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

 <!doctype html>

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

     .content {
         width: 200px;
         font: 16px Ahem;
         -webkit-font-smoothing: none;
     }

     #region1, #region2 {
         border: 1px solid black;
         margin: 50px;
         float: left;
     }

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

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

     .positioned {
         position: relative;
         top: 30px;
         left: 30px;
     }
 </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="container">
     <div id="region1"><div class="content"><span class="positioned">AXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX</span></div></div>
     <div id="region2"><div class="content"><span class="positioned">XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXB</span></div></div>
 </div>
	<!doctype html>

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

	.content {
	width: 200px;
	font: 16px Ahem;
	-webkit-font-smoothing: none;
	}

	#region1, #region2 {
	border: 1px solid black;
	margin: 50px;
	float: left;
	}

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

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

	.positioned {
	position: relative;
	top: 30px;
	left: 30px;
	}
	</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="container">
	<div id="region1"><div class="content"><span class="positioned">AXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX</span></div></div>
	<div id="region2"><div class="content"><span class="positioned">XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXX<br/>XXXXB</span></div></div>
	</div>