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

   1 <html>
   2 <head>
   3   <title>Point mapping through 3D transform hierarchies</title>
   4   <script src="point-mapping-helpers.js" type="text/javascript" charset="utf-8"></script>
   5   <script type="text/javascript" charset="utf-8">
   6
   7     function test()
   8     {
   9       // In non-test mode, show the mouse coords for testing
  10       if (!window.testRunner)
  11         document.body.addEventListener('mousemove', mousemoved, false);
  12
  13       dispatchEvent(44, 44, 'box1', 2, 2);
  14       dispatchEvent(74, 68, 'box2', 2, 2);
  15       dispatchEvent(157, 164, 'box2', 98, 98);
  16
  17       dispatchEvent(320, 68, 'box4', 2, 2);
  18       dispatchEvent(336, 87, 'box5', 2, 2);
  19
  20       dispatchEvent(582, 87, 'box8', 2, 2);
  21       dispatchEvent(658, 174, 'box8', 86, 86);
  22
  23       dispatchEvent(74, 314, 'box10', 2, 2);
  24       dispatchEvent(91, 351, 'box11', 2, 2);
  25
  26       dispatchEvent(320, 314, 'box13', 2, 2);
  27       dispatchEvent(343, 351, 'box14', 2, 2);
  28       dispatchEvent(365, 375, 'box15', 2, 2);
  29
  30       dispatchEvent(566, 314, 'box17', 2, 2);
  31       dispatchEvent(587, 352, 'box18', 2, 2);
  32       dispatchEvent(629, 401, 'box19', 2, 2);
  33       dispatchEvent(653, 422, 'box20', 2, 2);
  34       dispatchEvent(745, 505, 'box20', 86, 87);
  35     }
  36   </script>
  37   <style type="text/css" media="screen">
  38
  39     body {
  40       margin: 0;
  41       border: 1px solid black;
  42       cursor: crosshair;
  43     }
  44
  45     .test {
  46       position: absolute;
  47       height: 200px;
  48       width: 200px;
  49       border: 1px solid black;
  50       margin: 20px;
  51     }
  52
  53         .one {
  54       top: 1px;
  55           left: 1px;
  56         }
  57         .two {
  58           top: 1px;
  59           left: 247px;
  60         }
  61         .three {
  62           top: 1px;
  63           left: 493px;
  64         }
  65         .four {
  66           top: 247px;
  67           left: 1px;
  68         }
  69         .five {
  70           top: 247px;
  71           left: 247px;
  72         }
  73         .six {
  74           top: 247px;
  75           left: 493px;
  76         }
  77
  78     .box {
  79       height: 100px;
  80       width: 100px;
  81       -webkit-box-sizing: border-box;
  82       background-color: #DDD;
  83       border: 1px solid black;
  84     }
  85
  86     .box:hover {
  87       outline: 3px solid orange;
  88     }
  89
  90     .container {
  91       height: 140px;
  92       width: 140px;
  93       margin: 20px;
  94       border: 1px solid black;
  95       -webkit-box-sizing: border-box;
  96       -webkit-perspective: 400;
  97     }
  98
  99     .transformed-3d {
 100       position: relative;
 101       height: 100px;
 102       width: 100px;
 103       padding: 20px;
 104       margin: 20px;
 105       border: 1px solid black;
 106       background-color: #81AA8A;
 107       -webkit-transform-style: preserve-3d;
 108       -webkit-box-sizing: border-box;
 109       transform: rotateY(-30deg);
 110     }
 111
 112     .transformed-flat {
 113       position: relative;
 114       height: 100px;
 115       width: 100px;
 116       padding: 20px;
 117       margin: 20px;
 118       border: 1px solid black;
 119       background-color: #AA7994;
 120       -webkit-transform-style: flat;
 121       -webkit-box-sizing: border-box;
 122       transform: rotateY(-30deg);
 123     }
 124
 125     .inner {
 126       background-color: blue;
 127       height: 90px;
 128       width: 90px;
 129     }
 130
 131     #results {
 132       position: absolute;
 133       left: 30px;
 134       top: 500px;
 135     }
 136
 137     #mousepos {
 138       position: absolute;
 139       left: 430px;
 140       top: 550px;
 141       color: gray;
 142       font-size: smaller;
 143     }
 144   </style>
 145 </head>
 146 <body onclick="clicked(event)">
 147
 148 <div id="results"></div>
 149
 150 <div class="test one">
 151   <!-- Simple transformed div in perpsective; preserve-3d on leaf -->
 152   <div class="container box" id="box1">
 153     <div class="transformed-3d box" id="box2">
 154     </div>
 155   </div>
 156 </div>
 157
 158 <div class="test two">
 159   <!-- Transformed, preserve-3d div in perpsective with non-layer child -->
 160   <div class="container box" id="box3">
 161     <div class="transformed-3d box" id="box4">
 162       <div class="inner box" id="box5">
 163       </div>
 164     </div>
 165   </div>
 166 </div>
 167
 168 <div class="test three">
 169   <!-- Transformed, preserve-3d div in perpsective with layer child -->
 170   <div class="container box" id="box6">
 171     <div class="transformed-3d box" id="box7">
 172       <div class="inner box" style="position: relative" id="box8">
 173       </div>
 174     </div>
 175   </div>
 176 </div>
 177 <div class="test four">
 178   <!-- Nested transformed, preserve-3d divs in perpsective -->
 179   <div class="container box" id="box9">
 180     <div class="transformed-3d box" id="box10">
 181       <div class="transformed-3d box" style="transform: translateZ(20px) rotateY(50deg)" id="box11">
 182       </div>
 183     </div>
 184   </div>
 185 </div>
 186 <div class="test five">
 187   <!-- Transformed, preserve-3d div in perpsective with non-layer child -->
 188   <div class="container box" id="box12">
 189     <div class="transformed-3d box" id="box13">
 190       <div class="transformed-3d box" style="transform: translateZ(10px) rotateY(50deg)" id="box14">
 191         <div class="inner box" id="box15">
 192         </div>
 193       </div>
 194     </div>
 195   </div>
 196 </div>
 197 <div class="test six">
 198   <!-- Flatten in the middle of 3d -->
 199   <div class="container box" id="box16">
 200     <div class="transformed-3d box" id="box17">
 201       <div class="transformed-3d box" style="transform: translateZ(10px) rotateY(20deg)" id="box18">
 202         <div class="transformed-flat box" style="-webkit-transform-style: flat; transform: rotateX(-20deg)" id="box19">
 203           <div class="inner box" id="box20">
 204           </div>
 205         </div>
 206       </div>
 207     </div>
 208   </div>
 209 </div>
 210
 211 <div id="mousepos"></div>
 212
 213 </body>
 214 </html>