LayoutTests/fast/regions/webkit-flow-inlines-dynamic.html - WebKit - Git at Google

 <!doctype html>

  <style>

     @font-face {
 	    font-family: webkit-ahem;
 	    font-style: normal;
 	    src: url(../../resources/Ahem.ttf);
     }

     #test-goals, #test, #test2{
 	    font-family: webkit-ahem;
     }

     #content {
         -webkit-flow-into: flow1;
         padding: 5px;
     }

     #first-box {
         border: 1px solid blue;
     }

     #second-box {
         margin:7px;
         border: 1px solid green;
     }

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

     #region1 {
         width: 15em;
         height: 55px;
     }

     #region2 {
         width: 35em;
         height: 45px;
     }

     #region3 {
         width: 10em;
         height: 55px;
     }
 </style>

 <div id="topLevel">
 	<span id="test-goals">Text should flow through all three regions and not spill outside of the border</span>
 </div>
 <div id="content">
     <div id="first-box">
         <div id="second-box">
             <span id="test">mnopq mnopq mnopq mnopq </span> <span id="test2"> mnopqmnopq mnopqmnopq mnopqmnopq mnopqmnopq mnopqmnopq mno mno mno mno mno mno mno mno</span>
         </div>
     </div>
 </div>

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

 <script>
 document.body.offsetWidth;
 document.getElementById('test').appendChild(document.createTextNode("qponmqponm "));
 </script>
	<!doctype html>

	<style>

	@font-face {
	font-family: webkit-ahem;
	font-style: normal;
	src: url(../../resources/Ahem.ttf);
	}

	#test-goals, #test, #test2{
	font-family: webkit-ahem;
	}

	#content {
	-webkit-flow-into: flow1;
	padding: 5px;
	}

	#first-box {
	border: 1px solid blue;
	}

	#second-box {
	margin:7px;
	border: 1px solid green;
	}

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

	#region1 {
	width: 15em;
	height: 55px;
	}

	#region2 {
	width: 35em;
	height: 45px;
	}

	#region3 {
	width: 10em;
	height: 55px;
	}
	</style>

	<div id="topLevel">
	<span id="test-goals">Text should flow through all three regions and not spill outside of the border</span>
	</div>
	<div id="content">
	<div id="first-box">
	<div id="second-box">
	<span id="test">mnopq mnopq mnopq mnopq </span> <span id="test2"> mnopqmnopq mnopqmnopq mnopqmnopq mnopqmnopq mnopqmnopq mno mno mno mno mno mno mno mno</span>
	</div>
	</div>
	</div>

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

	<script>
	document.body.offsetWidth;
	document.getElementById('test').appendChild(document.createTextNode("qponmqponm "));
	</script>