<html>
<head>
	<title>Test - Bug #124777: Fix hover area for divs with a hierarchy of css transformed and non-transformed elements</title>
	<style type="text/css">
		#container
		{
			position: absolute;
			height: 200px;
			width:200px;
			top: 0;
			left: 0;
			background-color: gray;
		}

		/* target contain points with negative z-offsets */
		#target
		{
			position: relative;
			height: 160px;
			width: 160px;
			margin: 20px;
			background-color: #DDD;
			-webkit-transform: rotate3d(0, 1, 0, -45deg);
			-webkit-transform-origin: right;
		}
		#results {
				margin-top: 210px;
		}
	</style>
	<script src="resources/hit-test-utils.js"></script>
	<script>
			var hitTestData = [
				{ 'point': [50, 50], 'target' : 'container' },
				{ 'point': [60, 60], 'target' : 'container' },
				{ 'point': [70, 70], 'target' : 'target' },
				{ 'point': [80, 80], 'target' : 'target' },
				{ 'point': [90, 90], 'target' : 'target' },
				{ 'point': [100, 100], 'target' : 'target' },
				{ 'point': [150, 150], 'target' : 'target' },
				{ 'point': [180, 180], 'target' : 'container' },
			];
			window.addEventListener('load', runTest, false);
	</script>
</head>
<body>

	<div id="container" class="container">
		<div id="target">
		</div>
	</div>
	<div id="results"></div>

</body>
</html>