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

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