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

   1 <html>
   2 <head>
   3   <title>Hit test overlapping 3d 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(285, 50, 'box2', 198, 2);
  11       dispatchEvent(174, 108, 'box3', 50, 2);
  12
  13       dispatchEvent(61, 50, 'overlay', 39, 28);
  14       dispatchEvent(119, 108, 'overlay', 97, 86);
  15     }
  16
  17   </script>
  18   <style type="text/css" media="screen">
  19
  20     body {
  21       margin: 0;
  22       border: 1px solid black;
  23       cursor: crosshair;
  24     }
  25
  26     .test {
  27       display: inline-block;
  28       position: relative;
  29       height: 300px;
  30       width: 300px;
  31       border: 1px solid black;
  32       margin: 20px;
  33     }
  34
  35     .box {
  36       height: 200px;
  37       width: 200px;
  38       -webkit-box-sizing: border-box;
  39       background-color: #DDD;
  40       border: 1px solid black;
  41     }
  42
  43     .box:hover {
  44       outline: 3px solid orange;
  45     }
  46
  47     .container {
  48       position: absolute;
  49       height: 260px;
  50       width: 260px;
  51       margin: 20px;
  52       border: 1px solid black;
  53       -webkit-box-sizing: border-box;
  54       -webkit-perspective: 400;
  55     }
  56
  57     .transformed {
  58       position: absolute;
  59       top: 20px;
  60       left: 30px;
  61       height: 200px;
  62       width: 200px;
  63       border: 1px solid black;
  64       background-color: #AAA;
  65       -webkit-box-sizing: border-box;
  66       transform: translateZ(50px);
  67     }
  68
  69     #overlay {
  70       position: absolute;
  71       height: 300px;
  72       width: 150px;
  73       background-color: rgba(0, 128, 0, 0.3);
  74       transform: translateZ(100px);
  75     }
  76
  77     .inner {
  78       position: relative;
  79       background-color: blue;
  80       height: 100px;
  81       width: 100px;
  82       margin: 50px;
  83     }
  84
  85     #results {
  86       position: absolute;
  87       left: 30px;
  88       top: 400px;
  89     }
  90
  91     #mousepos {
  92       position: absolute;
  93       left: 30px;
  94       top: 700px;
  95       color: gray;
  96       font-size: smaller;
  97     }
  98   </style>
  99 </head>
 100 <body onclick="clicked(event)">
 101
 102 <div id="results"></div>
 103 <div class="test">
 104   <!-- Simple transformed div in perpsective -->
 105   <div class="container box" id="box1">
 106     <div class="transformed box" id="box2">
 107       <div class="inner" id="box3"></div>
 108     </div>
 109   </div>
 110   <div id="overlay"></div>
 111 </div>
 112 <p>The green overlay is translated in Z by 100px, so should hit test in front relative to the blue box.</p>
 113
 114 <div id="mousepos"></div>
 115
 116 </body>
 117 </html>