<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;
			background-color: gray;
		}

		.nopreserve {
			top: 0;
			left: 0;
		}

		.preserve {
			top: 250px;
			left: 0;
			-webkit-transform-style: preserve-3d;
			-moz-transform-style: preserve-3d;
		}

		.box {
				width: 100%;
				position: absolute;
				height: 100%;
				top: 0;
		}

		.red {
			background-color: red;
			-webkit-transform: perspective( 600px ) rotateY( 45deg );
			-moz-transform: perspective( 600px ) rotateY( 45deg );
			transform: perspective( 600px ) rotateY( 45deg );
		}

		.blue {
			background-color: blue;
			-webkit-transform: perspective( 600px ) rotateY( -45deg );
			-moz-transform: perspective( 600px ) rotateY( -45deg );
			transform: perspective( 600px ) rotateY( -45deg );
		}

		/* target1 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: 460px;
		}
	</style>
	<script src="resources/hit-test-utils.js"></script>
	<script>
		var hitTestData = [

			{ 'point': [10, 100], 'target' : 'container-nopreserve' },
			{ 'point': [20, 100], 'target' : 'target2' },
			{ 'point': [80, 100], 'target' : 'target1' },
			{ 'point': [100, 100], 'target' : 'target1' },
			{ 'point': [120, 100], 'target' : 'target1' },
			{ 'point': [180, 100], 'target' : 'target1' },
			{ 'point': [190, 100], 'target' : 'container-nopreserve' },

			{ 'point': [10, 250], 'target' : 'container-preserve' },
			{ 'point': [20, 250], 'target' : 'target4' },
			{ 'point': [80, 250], 'target' : 'target4' },
			{ 'point': [100, 250], 'target' : 'target4' },
			{ 'point': [120, 250], 'target' : 'target3' },
			{ 'point': [180, 250], 'target' : 'target3' },
			{ 'point': [190, 250], 'target' : 'container-preserve' },

		];

		window.addEventListener('load', runTest, false);
	</script>
</head>
<body>

	<div id="container-nopreserve" class="container nopreserve">
		<div id="target2" class="box red">
		</div>
		<div id="target1" class="box blue">
		</div>
	</div>

	<div id="container-preserve" class="container preserve">
		<div id="target3" class="box blue">
		</div>
		<div id="target4" class="box red">
		</div>
	</div>

	<div id="results"></div>

</body>
</html>