blob: de92352ca23302253c1cf9c7327a74f876f0f177 [file] [log] [blame]
<html>
<head>
<style>
body {
margin: 0;
}
#canvas {
width: 200px;
height: 200px;
position: relative;
background-color: silver;
-webkit-transform: translateZ(0px);
}
#container {
left: 0px;
top: 0px;
z-index: 1;
border: 2px solid green;
-webkit-transform: translateZ(0px);
}
.box {
position: absolute;
height: 100px;
width: 100px;
}
#target {
left: 50px;
top: 50px;
background-color: blue;
cursor: pointer;
}
.box:hover {
background-color: orange !important;
}
#results {
margin: 10px;
}
</style>
<script src="resources/hit-test-utils.js"></script>
<script>
var hitTestData = [
{ 'point': [48, 48], 'target' : 'container' },
{ 'point': [75, 75], 'target' : 'target' },
{ 'point': [100, 100], 'target' : 'target' },
{ 'point': [125, 125], 'target' : 'target' },
];
window.addEventListener('load', runTest, false);
</script>
</head>
<body>
<div id="canvas">
<div id="container" class="box">
<div id="target" class="box">
</div>
</div>
</div>
<div id="results"></div>
</body>
</html>