<html>
<head>
	<style type="text/css">
		/* Make sure the console and the description don't interfere with the rest of the layout. */
		#description {
			position: absolute;
			top: 0px;
		}

		#console {
			position: absolute;
			top: 100px;
		}

		#divMain1 {
			border: 2px solid blue;
			width: 300px;
			height: 226px;
			-webkit-flow-into: flow1;
		}

		#divMain2 {
			border: 2px solid blue;
			width: 211px;
			height: 470px;
			padding-left: 5px;
			margin: 5px;
			margin-left: 10px;
			left: 40px;
			-webkit-flow-into: flow2;
		}

		.divText {
			border: 1px solid green;
			color: green;
		}

		#divText1 {
			width: 200px;
			height: 150px;
			position: relative;
			left: 30px;
			top: 10px;
		}

		#divText2_1 {
			border-color: #009999;
			color: #009999;
			margin: 10px;
			width: 180px;
			height: 140px;
		}

		#divText2_2 {
			width: 203px;
			height: 270px;
		}

		#divText2_3 {
			margin: 4px;
			width: 192px;
			height: 105px;
			position: relative;
			top: 115px;
			color: #777700;
			border-color: #777700;
		}

		#absoluteSpan {
			position: absolute;
		}

		#span {
			position: relative;
			top: 115px;
			left: 24;
			color: black;
			font-size: 12px;
			margin-left: 4px;
			padding: 1px;
			border: 1px solid black;
		}

		#image {
			border: 1px dashed red;
			width: 15px;
			position: relative;
			top: 124px;
			margin-left: 54px;
		}

		#dummy1 {
			width: 100px;
			height: 25px;
			border: 1px solid black;
			margin: 5px;
			margin-left: 20px;
		}

		.region1 {
			-webkit-flow-from: flow1;
			border: 1px solid red;
			position: relative;
			left: 59px;
			top: 429px;
			width: 304px;
			height: 230px;
		}

		.region2 {
			-webkit-flow-from: flow2;
			border: 1px solid red;
		}

		#first_region2 {
			position: relative;
			left: 464px;
			top: -140px;
			width: 500px;
			height: 160px;
		}

		#second_region2 {
			position: relative;
			left: 424px;
			top: -94px;
			width: 330px;
			height: 150px;
		}

		#third_region2 {
			position: relative;
			left: 569px;
			top: -66px;
			width: 282px;
			height: 195px;
		}

		.grid {
			position: absolute;
			top: 700px;
			width: 100px;
			height: 100px;
			border-right: 1px solid blue;
			text-align: right;
			font-size: 14px;
			color: blue;
		}

		.vgrid {
			position: absolute;
			left: 900px;
			width: 100px;
			height: 100px;
			border-bottom: 1px solid blue;
			text-align: bottom;
			font-size: 14px;
			color: blue;
		}

		#grid1 {
			left: 0px;
		}
		#grid2 {
			left: 100px;
		}
		#grid3 {
			left: 200px;
		}
		#grid4 {
			left: 300px;
		}
		#grid5 {
			left: 400px;
		}
		#grid6 {
			left: 500px;
		}
		#grid7 {
			left: 600px;
		}

		#vgrid1 {
			top: 0px;
		}
		#vgrid2 {
			top: 100px;
		}
		#vgrid3 {
			top: 200px;
		}
		#vgrid4 {
			top: 300px;
		}
		#vgrid5 {
			top: 400px;
		}
		#vgrid6 {
			top: 500px;
		}
		#vgrid7 {
			top: 600px;
		}
		#vgrid8 {
			top: 700px;
			border: none;
		}
	</style>

	<script src="../../../resources/js-test-pre.js"></script>
</head>

<body id="body">
	<div id="divMain1">
		<div class="divText" id="divText1"></div>
	</div>

	<div id="divMain2">
		<div class="dummy" id="dummy1"></div>
		<div class="divText" id="divText2_1"></div>
		<div class="divText" id="divText2_2">
			<div class="divText" id="divText2_3"></div>
			<img id="image" src="resources/transparent.png"></input>
		</div>		
	</div>

	<div class="region1"></div>

	<div class="region2" id="first_region2"></div>
	<div class="region2" id="second_region2"></div>
	<div class="region2" id="third_region2"></div>

	<div id="grid1" class="grid">100px</div>
	<div id="grid2" class="grid">200px</div>
	<div id="grid3" class="grid">300px</div>
	<div id="grid4" class="grid">400px</div>
	<div id="grid5" class="grid">500px</div>
	<div id="grid6" class="grid">600px</div>
	<div id="grid7" class="grid">700px</div>

	<div id="vgrid1" class="vgrid"></div>
	<div id="vgrid2" class="vgrid">100px</div>
	<div id="vgrid3" class="vgrid">200px</div>
	<div id="vgrid4" class="vgrid">300px</div>
	<div id="vgrid5" class="vgrid">400px</div>
	<div id="vgrid6" class="vgrid">500px</div>
	<div id="vgrid7" class="vgrid">600px</div>
	<div id="vgrid8" class="vgrid">700px</div>

	<script>
		description("Test offsetLeft and offsetTop in a named flow.")

		shouldBe("divText1.offsetParent", "document.body");
		shouldBe("divText1.offsetLeft", "100");
		shouldBe("divText1.offsetTop", "450");

		shouldBe("divText2_1.offsetParent", "document.body");
		shouldBe("divText2_1.offsetLeft", "500");
		shouldBe("divText2_1.offsetTop", "150");

		shouldBe("divText2_2.offsetParent", "document.body");
		shouldBe("divText2_2.offsetLeft", "450");
		shouldBe("divText2_2.offsetTop", "350");

		shouldBe("divText2_3.offsetParent", "document.body");
		shouldBe("divText2_3.offsetLeft", "600");
		shouldBe("divText2_3.offsetTop", "500");

		shouldBe("image.offsetParent", "document.body");
		shouldBe("image.offsetLeft", "650");
		shouldBe("image.offsetTop", "620");

		if (window.testRunner) {
			var allGraphicElements = document.querySelectorAll(".region1, .region2, .divText, .grid, .vgrid, .dummy, #span, #image");
			for (var i=0; i<allGraphicElements.length; i++)
				allGraphicElements[i].style.display = "none";
		}
		
	</script>
	<script src="../../../resources/js-test-post.js"></script>
</body>
</html>