blob: 5e53fbdd244dbd7f5b6da908a9d7da3bb93828d9 [file] [log] [blame]
<html>
<head>
<style type="text/css">
body {
margin: 0;
}
#container {
width: 200px;
height: 200px;
margin: 50px;
border: 1px solid black;
-webkit-perspective: 500px;
}
.box {
position: absolute;
width: 200px;
height: 200px;
background-color: gray;
opacity: 0.75;
}
#left {
-webkit-transform-origin: 10% 50%;
-webkit-transform: rotateY(90deg);
}
#top {
-webkit-transform-origin: 50% 10%;
-webkit-transform: rotateX(-90deg);
}
#right {
-webkit-transform-origin: 90% 50%;
-webkit-transform: rotateY(-90deg);
}
#bottom {
-webkit-transform-origin: 50% 90%;
-webkit-transform: rotateX(90deg);
}
.box:hover {
background-color: orange;
}
</style>
<script src="resources/hit-test-utils.js"></script>
<script>
var hitTestData = [
{ 'point': [85, 100], 'target' : 'left' },
{ 'point': [155, 80], 'target' : 'top' },
{ 'point': [230, 80], 'target' : 'right' },
{ 'point': [155, 220], 'target' : 'bottom' },
{ 'point': [60, 60], 'target' : 'container' },
{ 'point': [100, 100], 'target' : 'container' },
{ 'point': [240, 240], 'target' : 'container' },
{ 'point': [200, 200], 'target' : 'container' },
];
window.addEventListener('load', runTest, false);
</script>
</head>
<body>
<div id="container">
<div class="box" id="left"></div>
<div class="box" id="top"></div>
<div class="box" id="right"></div>
<div class="box" id="bottom"></div>
</div>
<div id="results"></div>
</body>
</html>