blob: 48aa033d11cfb6abee5d2f9a50ae69b261adb10c [file] [log] [blame]
<html>
<head>
<style type="text/css" media="screen">
div:hover {
outline: 2px solid orange;
}
#container {
width: 200px;
height: 200px;
border: 1px solid black;
-webkit-perspective: 500px;
}
.box {
width: 200px;
height: 200px;
position: absolute;
background-color: gray;
}
.middle {
-webkit-transform-origin: 10% 50%;
-webkit-transform: rotateY(40deg);
}
.box:hover {
background-color: orange !important;
}
.child {
position: absolute;
top: 100px;
left: 100px;
background-color: blue;
-webkit-transform: translateZ(1px);
}
#results {
margin-top: 100px;
}
</style>
<script src="resources/hit-test-utils.js"></script>
<script>
var hitTestData = [
{ 'point': [30, 30], 'target' : 'box1' },
{ 'point': [80, 100], 'target' : 'box1' },
{ 'point': [100, 120], 'target' : 'box2' },
{ 'point': [200, 250], 'target' : 'box2' },
];
window.addEventListener('load', runTest, false);
</script>
</head>
<body>
<div id="container">
<div class="middle box" id="box1">
<div class="child box" id="box2"></div>
</div>
</div>
<div id="results"></div>
</body>
</html>