LayoutTests/inspector/elements/highlight-regions-flow-transform.html - WebKit - Git at Google

 <!doctype html>
 <html>
 <head>

 <style>

 body {
     margin: 0;
 }
 #flow {
     -webkit-flow-into: flow;
 }
 #container {
     width: 400px;
     height: 400px;
     background-color: grey;
 }
 #inspectedElement {
     width: 100%;
     height: 1000px;
     background-color: green;
     -webkit-transform: rotate(20deg);
     transform: rotate(20deg);
 }
 .region {
     margin: 5px;
     border: solid 10px aqua;
     padding: 15px;
     width: 200px;
     height: 200px;
     background-color: blue;
     float: left;
     -webkit-flow-from: flow;
 }
 .small {
     width: 100px;
 }
 .zero-height {
     border: none;
     height: 0px;
     padding: 0;
 }
 .zero-size {
     border: none;
     width: 0px;
     height: 0px;
     padding: 0;
 }
 .hidden {
     display: none;
 }
 #description {
     clear: both;
 }

 </style>

 <script src="../../http/tests/inspector/inspector-test.js"></script>
 <script src="../../http/tests/inspector/elements-test.js"></script>
 <script>

 function test()
 {
     function nodeSelected(node)
     {
         RuntimeAgent.evaluate("dumpInspectorHighlightedNode()", InspectorTest.completeTest);
     }

     InspectorTest.selectNodeWithId("inspectedElement", nodeSelected);
 }

 </script>
 </head>

 <body onload="runTest()">

 <div id="flow">
     <div id="inspectedElement"></div>
 </div>

 <div class="region"></div>
 <div class="region small"></div>
 <div class="region zero-height"></div>
 <div class="region zero-size"></div>
 <div class="region hidden"></div>
 <p id="description">This test verifies the position and size of the highlighted node inside CSS Regions.</p>

 </body>
 </html>
	<!doctype html>
	<html>
	<head>

	<style>

	body {
	margin: 0;
	}
	#flow {
	-webkit-flow-into: flow;
	}
	#container {
	width: 400px;
	height: 400px;
	background-color: grey;
	}
	#inspectedElement {
	width: 100%;
	height: 1000px;
	background-color: green;
	-webkit-transform: rotate(20deg);
	transform: rotate(20deg);
	}
	.region {
	margin: 5px;
	border: solid 10px aqua;
	padding: 15px;
	width: 200px;
	height: 200px;
	background-color: blue;
	float: left;
	-webkit-flow-from: flow;
	}
	.small {
	width: 100px;
	}
	.zero-height {
	border: none;
	height: 0px;
	padding: 0;
	}
	.zero-size {
	border: none;
	width: 0px;
	height: 0px;
	padding: 0;
	}
	.hidden {
	display: none;
	}
	#description {
	clear: both;
	}

	</style>

	<script src="../../http/tests/inspector/inspector-test.js"></script>
	<script src="../../http/tests/inspector/elements-test.js"></script>
	<script>

	function test()
	{
	function nodeSelected(node)
	{
	RuntimeAgent.evaluate("dumpInspectorHighlightedNode()", InspectorTest.completeTest);
	}

	InspectorTest.selectNodeWithId("inspectedElement", nodeSelected);
	}

	</script>
	</head>

	<body onload="runTest()">

	<div id="flow">
	<div id="inspectedElement"></div>
	</div>

	<div class="region"></div>
	<div class="region small"></div>
	<div class="region zero-height"></div>
	<div class="region zero-size"></div>
	<div class="region hidden"></div>
	<p id="description">This test verifies the position and size of the highlighted node inside CSS Regions.</p>

	</body>
	</html>