third_party/WebKit/LayoutTests/transforms/3d/hit-testing/negative-zoffset-hit-test.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style>
   5       #container {
   6         position: absolute;
   7         height: 200px;
   8         width:200px;
   9         top: 0;
  10         left: 0;
  11         background-color: gray;
  12       }
  13
  14       /* target contain points with negative z-offsets */
  15       #target {
  16         position: relative;
  17         height: 160px;
  18         width: 160px;
  19         margin: 20px;
  20         background-color: #DDD;
  21         transform: rotate3d(0, 1, 0, -45deg);
  22         -webkit-transform-origin: right;
  23       }
  24
  25       #description {
  26         margin-top: 210px;
  27       }
  28
  29   </style>
  30   <script src="resources/hit-test-utils.js"></script>
  31   <script>
  32       const hitTestData = [
  33         { 'point': [50, 50], 'target' : 'container' },
  34         { 'point': [60, 60], 'target' : 'container' },
  35         { 'point': [70, 70], 'target' : 'target' },
  36         { 'point': [80, 80], 'target' : 'target' },
  37         { 'point': [90, 90], 'target' : 'target' },
  38         { 'point': [100, 100], 'target' : 'target' },
  39         { 'point': [150, 150], 'target' : 'target' },
  40         { 'point': [180, 180], 'target' : 'container' },
  41       ];
  42       window.addEventListener('load', runTest, false);
  43   </script>
  44 </head>
  45 <body>
  46
  47   <div id="container">
  48     <div id="target">
  49     </div>
  50   </div>
  51
  52   <p id="description">Checks that hit testing is correct when a transformed element has negative z-offset</p>
  53
  54   <div id="results"></div>
  55
  56 </body>
  57 </html>