src/third_party/WebKit/LayoutTests/transforms/3d/hit-testing/rotated-hit-test2.html

   1 <html>
   2 <head>
   3   <style>
   4     body {
   5       margin: 0;
   6     }
   7
   8     #container {
   9       width: 400px;
  10       height: 400px;
  11       margin: 50px;
  12       border: 1px solid black;
  13       -webkit-perspective: 500px;
  14     }
  15
  16     .box {
  17       position: absolute;
  18       width: 200px;
  19       height: 200px;
  20       background-color: gray;
  21       opacity: 0.75;
  22     }
  23
  24     #left {
  25       transform: rotateY(-75deg);
  26       left: 20px;
  27       top: 100px;
  28     }
  29
  30     #top {
  31       transform: rotateX(75deg);
  32       top: 20px;
  33       left: 100px;
  34     }
  35
  36     #right {
  37       transform: rotateY(75deg);
  38       left: 180px;
  39       top: 100px;
  40     }
  41
  42     #bottom {
  43       transform: rotateX(-75deg);
  44       top: 180px;
  45       left: 100px;
  46     }
  47
  48     .box:hover {
  49       background-color: orange;
  50     }
  51   </style>
  52   <script src="resources/hit-test-utils.js"></script>
  53   <script>
  54       const hitTestData = [
  55         { 'point': [170, 250], 'target' : 'left' },
  56         { 'point': [260, 170], 'target' : 'top' },
  57         { 'point': [330, 250], 'target' : 'right' },
  58         { 'point': [260, 330], 'target' : 'bottom' },
  59         { 'point': [60, 60], 'target' : 'container' },
  60         { 'point': [160, 160], 'target' : 'container' },
  61         { 'point': [190, 190], 'target' : 'container' },
  62         { 'point': [310, 310], 'target' : 'container' },
  63       ];
  64       window.addEventListener('load', runTest, false);
  65   </script>
  66 </head>
  67 <body>
  68
  69 <div id="container">
  70   <div class="box" id="left"></div>
  71   <div class="box" id="top"></div>
  72   <div class="box" id="right"></div>
  73   <div class="box" id="bottom"></div>
  74 </div>
  75
  76 <div id="results"></div>
  77
  78 </body>
  79 </html>