third_party/WebKit/LayoutTests/transforms/3d/hit-testing/backface-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: 2px solid orange;
   8   }
   9     #container {
  10       width: 400px;
  11       height: 200px;
  12       border: 1px solid black;
  13     }
  14
  15     .box {
  16       display: inline-block;
  17       width: 160px;
  18       height: 160px;
  19       background-color: gray;
  20       margin: 18px;
  21       font-size: 200%;
  22       text-align: center;
  23     }
  24
  25   </style>
  26   <script type="text/javascript" charset="utf-8">
  27     function log(s)
  28     {
  29       var results = document.getElementById('results');
  30       results.innerHTML += s + '<br>';
  31     }
  32
  33     function runTest()
  34     {
  35       var firstHit = document.elementFromPoint(120, 150);
  36       var secondHit = document.elementFromPoint(300, 150);
  37
  38       var box1 = document.getElementById('box1');
  39       var box2 = document.getElementById('box1');
  40       var container = document.getElementById('container');
  41
  42       if (firstHit == box1)
  43         log('Found box1 on left: PASS');
  44       else
  45         log('Found ' + firstHit.id + ' on left: FAIL');
  46
  47         if (secondHit == container)
  48           log('Found container on right: PASS');
  49         else
  50           log('Found ' + secondHit.id + ' on right: FAIL');
  51     }
  52
  53   </script>
  54 </head>
  55 <body onload="runTest()">
  56
  57 <p>There are two boxes below, both rotated 180&deg; in Y. The rightmost one has backface-visibility: hidden, so you can't see it.</p>
  58 <div id="container">
  59   <div class="box" id="box1" style="transform: translateZ(1px) rotateY(180deg)"></div>
  60   <div class="box" id="box2" style="transform: translateZ(1px) rotateY(180deg); -webkit-backface-visibility: hidden;"></div>
  61 </div>
  62
  63 <div id="results">
  64 </div>
  65
  66 </body>
  67 </html>