third_party/WebKit/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       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>