2009-03-09 Simon Fraser <simon.fraser@apple.com>
[WebKit-https.git] / LayoutTests / transforms / 3d / hit-testing / backface-no-transform-hit-test.html
1 <html>
2 <head>
3   <title>Hit testing on backface</title>
4   <style type="text/css" media="screen">
5   
6   div:hover {
7     outline: 4px solid orange;
8   }
9     #container {
10       width: 400px;
11       height: 200px;
12       background-color: #EEE;
13       border: 1px solid black;
14       -webkit-transform-style: preserve-3d;
15       -webkit-transform: translateZ(1px) rotateY(180deg);
16     }
17     
18     .box {
19       position: relative;
20       display: inline-block;
21       width: 160px;
22       height: 160px;
23       background-color: gray;
24       margin: 18px;
25       font-size: 200%;
26       text-align: center;
27     }
28     
29   </style>
30   <script type="text/javascript" charset="utf-8">
31     function log(s)
32     {
33       var results = document.getElementById('results');
34       results.innerHTML += s + '<br>';
35     }
36
37     function runTest()
38     {
39       var firstHit = document.elementFromPoint(120, 150);
40       var secondHit = document.elementFromPoint(300, 150);
41       
42       var box1 = document.getElementById('box1');
43       var box2 = document.getElementById('box1');
44       var container = document.getElementById('container');
45
46       if (firstHit == container)
47         log('Found container on left: PASS');
48       else
49         log('Found ' + firstHit.id + ' on left: FAIL');
50
51         if (secondHit == box1)
52           log('Found box1 on right: PASS');
53         else
54           log('Found ' + secondHit.id + ' on right: FAIL');
55     }
56     
57   </script>
58 </head>
59 <body onload="runTest()">
60
61 <p>There are two boxes inside a container that is rotated 180&deg; in Y. box2 has backface-visibility: hidden, so you can't see it.</p>
62 <div id="container">
63   <div class="box" id="box1">box1</div>
64   <div class="box" id="box2" style="-webkit-backface-visibility: hidden;">box2</div>
65 </div>
66
67 <div id="results">
68 </div>
69
70 </body>
71 </html>