src/third_party/WebKit/LayoutTests/transforms/3d/hit-testing/hit-preserves-3d-2.html

   1 <html>
   2 <head>
   3   <title>Hit testing on preserves-3d element</title>
   4   <style type="text/css" media="screen">
   5     .container {
   6       -webkit-perspective: 500px;
   7     }
   8     .set {
   9       position: absolute;
  10       top: 8px;
  11     }
  12     .box {
  13       height: 100px;
  14       width: 100px;
  15     }
  16
  17     .should-be-visible { background-color: green !important; }
  18     .composited {
  19       transform: rotate3d(0, 0, 1, 45deg);
  20     }
  21
  22     .intermediate {
  23       transform: rotate3d(0, 0, 1, -45deg);
  24       -webkit-transform-style: preserve-3d;
  25       background-color: red;
  26     }
  27
  28     #results {
  29       position: absolute;
  30       top: 200;
  31     }
  32   </style>
  33   <script type="text/javascript" charset="utf-8">
  34     if (window.testRunner)
  35       testRunner.dumpAsText();
  36
  37     function runTest()
  38     {
  39       var hit = document.elementFromPoint(100, 100);
  40       var results = document.getElementById('results');
  41       if (hit == document.getElementById('target'))
  42         results.innerHTML = 'Hit target without crashing: PASSED';
  43       else
  44         results.innerHTML = 'Did not crash but failed to find target: FAIL';
  45     }
  46   </script>
  47 </head>
  48 <body onload="runTest()">
  49
  50 <div class="set">
  51  <div class="container">
  52   <div class="intermediate">
  53    <div id="target" class="composited box should-be-visible"></div>
  54   </div>
  55  </div>
  56 </div>
  57
  58 <div id="results"></div>
  59 </body>
  60 </html>