third_party/WebKit/LayoutTests/transforms/3d/hit-testing/rotated-hit-test-with-child.html

   1 <html>
   2 <head>
   3   <style type="text/css" media="screen">
   4
   5   div:hover {
   6     outline: 2px solid orange;
   7   }
   8     #container {
   9       width: 200px;
  10       height: 200px;
  11       border: 1px solid black;
  12       -webkit-perspective: 500px;
  13     }
  14
  15     .box {
  16       width: 200px;
  17       height: 200px;
  18       position: absolute;
  19       background-color: gray;
  20     }
  21
  22     .middle {
  23       -webkit-transform-origin: 10% 50%;
  24       transform: rotateY(40deg);
  25     }
  26
  27     .box:hover {
  28       background-color: orange !important;
  29     }
  30
  31     .child {
  32       position: absolute;
  33       top: 100px;
  34       left: 100px;
  35       background-color: blue;
  36       transform: translateZ(1px);
  37     }
  38
  39     #results {
  40       margin-top: 100px;
  41     }
  42   </style>
  43   <script src="resources/hit-test-utils.js"></script>
  44   <script>
  45     const hitTestData = [
  46       { 'point': [30, 30], 'target' : 'box1' },
  47       { 'point': [80, 100], 'target' : 'box1' },
  48       { 'point': [100, 120], 'target' : 'box2' },
  49       { 'point': [200, 250], 'target' : 'box2' },
  50     ];
  51     window.addEventListener('load', runTest, false);
  52   </script>
  53 </head>
  54 <body>
  55
  56 <div id="container">
  57   <div class="middle box" id="box1">
  58     <div class="child box" id="box2"></div>
  59   </div>
  60 </div>
  61
  62 <div id="results"></div>
  63 </body>
  64 </html>