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

 <!doctype html>
 <html>
     <head>
         <style>
             .region {
                 -webkit-flow-from: content-flow;
                 height: 60px;
                 width: 120px;
                 border: 2px solid black;
             }

             .float {
                 float: left;
                 -webkit-flow-into: content-flow;
                 height: 60px;
                 width: 40px;
             }

             #red {
                 background-color: red;
             }

             #green {
                 background-color: green;
             }

             #blue {
                 background-color: blue;
             }
         </style>
     </head>
     <body onload="shuffle()">
         <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 adds three colored content nodes (blocks) to a flow and then modifies the flow-into properties to force renderers to shuffle.</p>
         <p>On success, you should see the blocks ordered: red, green, blue.</p>

         <div id="red" class="float">1</div>
         <div id="green"class="float">2</div>
         <div id="blue" class="float">3</div>
         <div class="region"></div>

         <script>
         function readd(content) {
             content.style.webkitFlowInto = "none";
             document.body.offsetTop;
             content.style.webkitFlowInto = "content-flow";
             document.body.offsetTop;
         }
         function shuffle() {
             var greenElement = document.getElementById("green");
             readd(greenElement);
             var redElement = document.getElementById("red");
             readd(redElement);
         }
         </script>
     </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<style>
	.region {
	-webkit-flow-from: content-flow;
	height: 60px;
	width: 120px;
	border: 2px solid black;
	}

	.float {
	float: left;
	-webkit-flow-into: content-flow;
	height: 60px;
	width: 40px;
	}

	#red {
	background-color: red;
	}

	#green {
	background-color: green;
	}

	#blue {
	background-color: blue;
	}
	</style>
	</head>
	<body onload="shuffle()">
	<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 adds three colored content nodes (blocks) to a flow and then modifies the flow-into properties to force renderers to shuffle.</p>
	<p>On success, you should see the blocks ordered: red, green, blue.</p>

	<div id="red" class="float">1</div>
	<div id="green"class="float">2</div>
	<div id="blue" class="float">3</div>
	<div class="region"></div>

	<script>
	function readd(content) {
	content.style.webkitFlowInto = "none";
	document.body.offsetTop;
	content.style.webkitFlowInto = "content-flow";
	document.body.offsetTop;
	}
	function shuffle() {
	var greenElement = document.getElementById("green");
	readd(greenElement);
	var redElement = document.getElementById("red");
	readd(redElement);
	}
	</script>
	</body>
	</html>