src/third_party/WebKit/LayoutTests/transforms/3d/hit-testing/composited-hit-test.html

   1 <html>
   2 <head>
   3   <style>
   4    body {
   5      margin: 0;
   6    }
   7
   8    #canvas {
   9      width: 200px;
  10      height: 200px;
  11      position: relative;
  12      background-color: silver;
  13      transform: translateZ(0px);
  14    }
  15
  16    #container {
  17      left: 0px;
  18      top: 0px;
  19      z-index: 1;
  20      border: 2px solid green;
  21      transform: translateZ(0px);
  22    }
  23
  24    .box {
  25      position: absolute;
  26      height: 100px;
  27      width: 100px;
  28    }
  29
  30    #target {
  31      left: 50px;
  32      top: 50px;
  33      background-color: blue;
  34      cursor: pointer;
  35    }
  36
  37    .box:hover {
  38      background-color: orange !important;
  39    }
  40    #results {
  41      margin: 10px;
  42    }
  43   </style>
  44   <script src="resources/hit-test-utils.js"></script>
  45   <script>
  46     const hitTestData = [
  47       { 'point': [48, 48], 'target' : 'container' },
  48       { 'point': [75, 75], 'target' : 'target' },
  49       { 'point': [100, 100], 'target' : 'target' },
  50       { 'point': [125, 125], 'target' : 'target' },
  51     ];
  52     window.addEventListener('load', runTest, false);
  53   </script>
  54 </head>
  55 <body>
  56   <div id="canvas">
  57     <div id="container" class="box">
  58       <div id="target" class="box">
  59       </div>
  60     </div>
  61   </div>
  62   <div id="results"></div>
  63 </body>
  64 </html>