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

   1 <html>
   2 <head>
   3   <title>Point mapping through 3D transforms</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(69, 55, 'box2', 2, 2);
  12       dispatchEvent(165, 182, 'box2', 96, 96);
  13       dispatchEvent(333, 79, 'box7', 2, 2);
  14       dispatchEvent(87, 325, 'box10', 2, 2);
  15       dispatchEvent(196, 467, 'box10', 98, 98);
  16       dispatchEvent(333, 325, 'box13', 2, 2);
  17       dispatchEvent(353, 352, 'box14', 2, 2);
  18       dispatchEvent(472, 507, 'box14', 97, 97);
  19     }
  20
  21   </script>
  22   <style type="text/css" media="screen">
  23
  24     body {
  25       margin: 0;
  26       border: 1px solid black;
  27       cursor: crosshair;
  28     }
  29
  30         .one {
  31       top: 1px;
  32       left: 1px;
  33         }
  34         .two {
  35       top: 1px;
  36       left: 247px;
  37         }
  38         .three {
  39       top: 247px;
  40       left: 1px;
  41         }
  42         .four {
  43       top: 247;
  44       left: 247px;
  45         }
  46
  47     .test {
  48       position: absolute;
  49       height: 200px;
  50       width: 200px;
  51       border: 1px solid black;
  52       margin: 20px;
  53     }
  54
  55     .box {
  56       height: 100px;
  57       width: 100px;
  58       -webkit-box-sizing: border-box;
  59       background-color: #DDD;
  60       border: 1px solid black;
  61     }
  62
  63     .box:hover {
  64       outline: 3px solid orange;
  65     }
  66
  67     .container {
  68       height: 140px;
  69       width: 140px;
  70       margin: 20px;
  71       border: 1px solid black;
  72       -webkit-box-sizing: border-box;
  73       -webkit-perspective: 400;
  74     }
  75
  76     .transformed {
  77       position: relative;
  78       height: 100px;
  79       width: 100px;
  80       padding: 20px;
  81       margin: 20px;
  82       border: 1px solid black;
  83       background-color: #AAA;
  84       -webkit-box-sizing: border-box;
  85       transform: translateZ(100px) rotateY(-40deg);
  86     }
  87
  88     .layer {
  89       padding: 20px;
  90       background-color: #C0D69E;
  91     }
  92
  93     .inner {
  94       background-color: blue;
  95     }
  96
  97     #results {
  98       position: absolute;
  99       left: 30px;
 100       top: 500px;
 101     }
 102
 103     #mousepos {
 104       position: absolute;
 105       left: 30px;
 106       top: 700px;
 107       color: gray;
 108       font-size: smaller;
 109     }
 110   </style>
 111 </head>
 112 <body onclick="clicked(event)">
 113
 114 <div id="results"></div>
 115
 116 <div class="test one">
 117   <!-- Simple transformed div in perpsective -->
 118   <div class="container box" id="box1">
 119     <div class="transformed box" id="box2">
 120     </div>
 121   </div>
 122 </div>
 123
 124 <div class="test two">
 125   <!-- Transformed div in perpsective with non-layer child -->
 126   <div class="container box" id="box5">
 127     <div class="transformed box" id="box6">
 128       <div class="inner box" id="box7">
 129       </div>
 130     </div>
 131   </div>
 132 </div>
 133
 134 <div class="test three">
 135   <!-- Transformed div in perpsective with layer child -->
 136   <div class="container box" id="box8">
 137     <div class="transformed box" id="box9">
 138       <div class="inner box" style="position: relative" id="box10">
 139       </div>
 140     </div>
 141   </div>
 142 </div>
 143
 144 <div class="test four">
 145   <!-- Transformed div in perpsective with child having layer child -->
 146   <div class="container box" id="box11">
 147     <div class="transformed box" id="box12">
 148       <div class="layer box" id="box13">
 149         <div class="inner box" style="position: relative" id="box14">
 150         </div>
 151       </div>
 152     </div>
 153   </div>
 154 </div>
 155
 156 <div id="mousepos"></div>
 157
 158 </body>
 159 </html>