third_party/WebKit/LayoutTests/transforms/3d/point-mapping/3d-point-mapping-coplanar.html

   1 <html>
   2 <head>
   3   <title>Hit test coplanar elements</title>
   4   <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script>
   5
   6   <script type="text/javascript" charset="utf-8">
   7
   8     function test()
   9     {
  10       dispatchEvent(44, 44, 'box1', 2, 2);
  11       dispatchEvent(70, 59, 'box2', 2, 2);
  12       dispatchEvent(70, 101, 'box3', 2, 2);
  13       dispatchEvent(70, 144, 'box4', 2, 2);
  14     }
  15
  16   </script>
  17   <style type="text/css" media="screen">
  18
  19     body {
  20       margin: 0;
  21       border: 1px solid black;
  22       cursor: crosshair;
  23     }
  24
  25     .test {
  26       display: inline-block;
  27       height: 300px;
  28       width: 300px;
  29       border: 1px solid black;
  30       margin: 20px;
  31     }
  32
  33     .box {
  34       height: 200px;
  35       width: 200px;
  36       -webkit-box-sizing: border-box;
  37       background-color: #DDD;
  38       border: 1px solid black;
  39     }
  40
  41     .box:hover {
  42       outline: 3px solid orange;
  43     }
  44
  45     .container {
  46       position: relative;
  47       height: 260px;
  48       width: 260px;
  49       margin: 20px;
  50       border: 1px solid black;
  51       -webkit-box-sizing: border-box;
  52       -webkit-perspective: 400;
  53     }
  54
  55     .transformed {
  56       position: absolute;
  57       top: 20px;
  58       left: 30px;
  59       height: 100px;
  60       width: 200px;
  61       border: 1px solid black;
  62       background-color: #AAA;
  63       -webkit-box-sizing: border-box;
  64       transform: translateZ(20px);
  65     }
  66
  67     #results {
  68       position: absolute;
  69       left: 30px;
  70       top: 400px;
  71     }
  72
  73     #mousepos {
  74       position: absolute;
  75       left: 30px;
  76       top: 700px;
  77       color: gray;
  78       font-size: smaller;
  79     }
  80   </style>
  81 </head>
  82 <body onclick="clicked(event)">
  83
  84 <div id="results"></div>
  85 <div class="test">
  86   <!-- Simple transformed div in perpsective -->
  87   <div class="container box" id="box1">
  88     <div class="transformed box" id="box2"></div>
  89     <div class="transformed box" id="box3" style="top: 60px;"></div>
  90     <div class="transformed box" id="box4" style="top: 100px;"></div>
  91   </div>
  92 </div>
  93 <p>When hit-testing coplanar elements, document order wins.</p>
  94
  95 <div id="mousepos"></div>
  96
  97 </body>
  98 </html>