LayoutTests/fast/regions/named-flow-content-order-3.html - WebKit - Git at Google

 <!doctype html>
 <html>
     <head>
         <style>
             .content { -webkit-flow-into: content-flow; }

             .region {
                 -webkit-flow-from: content-flow;
                 height: 300px;
                 width: 500px;
                 border: 1px solid black;
             }

             p, div, body {
                 margin: 0px;
                 font-size: 20px;
             }

             p {
                 display: inline;
             }
         </style>
     </head>
     <body>
         <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=103501">Fix content node renderers ordering inside the named flow thread</a>.</p>
         <p>The test verifies the order of elements preserves when the text nodes have flow-into set because of style cloning.</p>
         <p>On success, you should see the first inline, the paragraph and the second inline.</p>
         <div class="content">
             First inline.
             <p id="para">A paragraph that can be block or inline.</p>
             Second inline.
         </div>
         <div class="region"></div>

         <script>
             document.body.offsetTop;
             var para = document.getElementById("para");
             para.style.display = "block";
             document.body.offsetTop;
             para.style.display = "inline";
         </script>
     </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<style>
	.content { -webkit-flow-into: content-flow; }

	.region {
	-webkit-flow-from: content-flow;
	height: 300px;
	width: 500px;
	border: 1px solid black;
	}

	p, div, body {
	margin: 0px;
	font-size: 20px;
	}

	p {
	display: inline;
	}
	</style>
	</head>
	<body>
	<p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=103501">Fix content node renderers ordering inside the named flow thread</a>.</p>
	<p>The test verifies the order of elements preserves when the text nodes have flow-into set because of style cloning.</p>
	<p>On success, you should see the first inline, the paragraph and the second inline.</p>
	<div class="content">
	First inline.
	<p id="para">A paragraph that can be block or inline.</p>
	Second inline.
	</div>
	<div class="region"></div>

	<script>
	document.body.offsetTop;
	var para = document.getElementById("para");
	para.style.display = "block";
	document.body.offsetTop;
	para.style.display = "inline";
	</script>
	</body>
	</html>