LayoutTests/fast/regions/positioned-objects-inline-static-spanning-regions.html - WebKit - Git at Google

 <!doctype html>

  <style>
     #content {
        -webkit-flow-into: flow1;
     }

     #first-box {
         margin:10%;
         height:350px;
         background-color:#cccccc;
     }

     #second-box {
         position:absolute;
         top:0;
         height:450px;
         width:50%;
         background-color:#00a000;
         color:#00a000
     }

     #region1, #region2, #region3 {
         border: 1px solid black;
         -webkit-flow-from: flow1;
     }

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

     #region2 {
         width: 300px;
         height: 180px;
     }

     #region3 {
         width: 120px;
         height: 120px;
     }
 </style>

 <body>
 <p>The green positioned object should go through all three regions. Its left edge should have the
 same offset from the left side of the light grey boxes in each region.</p>

 <div id="content">
     <div id="first-box">
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span id="second-box">
             Some text.<br>
              Some text.<br>
               Some text.<br>
                Some text.<br>
                 Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br>      </span>
     </div>
 </div>

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

	<style>
	#content {
	-webkit-flow-into: flow1;
	}

	#first-box {
	margin:10%;
	height:350px;
	background-color:#cccccc;
	}

	#second-box {
	position:absolute;
	top:0;
	height:450px;
	width:50%;
	background-color:#00a000;
	color:#00a000
	}

	#region1, #region2, #region3 {
	border: 1px solid black;
	-webkit-flow-from: flow1;
	}

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

	#region2 {
	width: 300px;
	height: 180px;
	}

	#region3 {
	width: 120px;
	height: 120px;
	}
	</style>

	<body>
	<p>The green positioned object should go through all three regions. Its left edge should have the
	same offset from the left side of the light grey boxes in each region.</p>

	<div id="content">
	<div id="first-box">
	<span id="second-box">
	Some text.<br>
	Some text.<br>
	Some text.<br>
	Some text.<br>
	Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> Some text.<br> </span>
	</div>
	</div>

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