third_party/WebKit/LayoutTests/transforms/3d/hit-testing/hover-rotated-with-children-negative-z.html

   1 <!DOCTYPE html>
   2 <html>
   3  <head>
   4  <style>
   5
   6  #transformed {
   7  transform: translateY(50px) rotateX(20deg) rotateZ(10deg);
   8  padding: 10px;
   9  margin: 15px;
  10  background-color: Yellow;
  11  }
  12  #transformed, #parent {
  13     width: 600px;
  14      height: 150px;
  15  }
  16  #child1 {
  17  transform: rotateX(45deg) rotateZ(45deg) translateZ(-500px) translateX(-300px) translateY(-180px);
  18  height: 30px;
  19  background-color: Lime;
  20  }
  21  #child2 {
  22  transform: translateZ(-500px) rotateX(-45deg) rotateZ(-45deg) translateX(50px) translateY(-130px);
  23  height: 30px;
  24  background-color: Cyan;
  25  }
  26  #description {
  27      margin-top: 210px;
  28  }
  29
  30  </style>
  31
  32  <script src="resources/hit-test-utils.js"></script>
  33  <script>
  34  const hitTestData = [
  35  { 'point': [70, 70], 'target' : 'transformed' },
  36  { 'point': [630, 130], 'target' : 'transformed' },
  37  { 'point': [40, 130], 'target' : 'transformed' },
  38  { 'point': [620, 270], 'target' : 'transformed' },
  39  { 'point': [130, 100], 'target' : 'child1' },
  40  { 'point': [200, 110], 'target' : 'child2' }
  41  ];
  42
  43  window.addEventListener('load', runTest, false);
  44  </script>
  45  </head>
  46  <body id="body">
  47
  48  <div id="parent">
  49  <div id="transformed">transformed
  50  <div id="child1">child 1</div>
  51  <div id="nonTransformedChild">non transformed child</div>
  52  <div id="child2">child 2</div>
  53  </div>
  54  </div>
  55
  56   <p id="description">Checks that hit testing is correct when a transformed element has childs with negative z-offset</p>
  57
  58  <div id="results"></div>
  59  </body>
  60 </html>