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

   1 <html>
   2 <head>
   3   <title>Point mapping through deeply nested 3D transforms</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       // Scroll so that frame view offsets are non-zero
  10       // window.scrollTo(20, 100);
  11
  12       // document.getElementById('overflow').scrollLeft = 80;
  13       // document.getElementById('overflow').scrollTop = 60;
  14
  15       // In non-test mode, show the mouse coords for testing
  16       if (!window.testRunner)
  17         document.body.addEventListener('mousemove', mousemoved, false);
  18
  19       dispatchEvent(45, 45, 'box1', 3, 3);
  20       dispatchEvent(54, 44, 'box2', 2, 2);
  21       dispatchEvent(104, 93, 'box3', 2, 2);
  22
  23       dispatchEvent(175, 137, 'box4', 2, 2);
  24       dispatchEvent(167, 528, 'box4', 2, 296);
  25
  26       dispatchEvent(227, 197, 'box5', 2, 2);
  27
  28       dispatchEvent(539, 569, 'box7', 296, 296);
  29
  30       dispatchEvent(431, 441, 'box8', 85, 85);
  31     }
  32   </script>
  33   <style type="text/css" media="screen">
  34
  35     body {
  36       margin: 0;
  37       border: 1px solid black;
  38       cursor: crosshair;
  39     }
  40
  41     .test {
  42       display: inline-block;
  43       height: 400px;
  44       width: 400px;
  45       border: 1px solid black;
  46       margin: 20px;
  47     }
  48
  49     .box {
  50       height: 300px;
  51       width: 300px;
  52       -webkit-box-sizing: border-box;
  53       background-color: #DDD;
  54       border: 1px solid black;
  55     }
  56
  57     .box:hover {
  58       outline: 3px solid orange;
  59     }
  60
  61     .container {
  62       height: 340px;
  63       width: 340px;
  64       margin: 20px;
  65       border: 1px solid black;
  66       -webkit-box-sizing: border-box;
  67       -webkit-perspective: 400;
  68     }
  69
  70     .transformed-3d {
  71       height: 300px;
  72       width: 300px;
  73       padding: 20px;
  74       margin: 20px;
  75       border: 1px solid black;
  76       background-color: #81AA8A;
  77       -webkit-transform-style: preserve-3d;
  78       -webkit-box-sizing: border-box;
  79       transform: rotateY(20deg);
  80     }
  81
  82     .transformed-flat {
  83       height: 300px;
  84       width: 300px;
  85       padding: 20px;
  86       margin: 20px;
  87       border: 1px solid black;
  88       background-color: #AA7994;
  89       -webkit-transform-style: flat;
  90       -webkit-box-sizing: border-box;
  91     }
  92
  93     .inner {
  94       background-color: blue;
  95       height: 90px;
  96       width: 90px;
  97       margin: 40px;
  98     }
  99
 100     #results {
 101       position: absolute;
 102       left: 30px;
 103       top: 650px;
 104     }
 105
 106     #mousepos {
 107       position: absolute;
 108       left: 30px;
 109       top: 600px;
 110       color: gray;
 111       font-size: smaller;
 112     }
 113   </style>
 114 </head>
 115 <body onclick="clicked(event)">
 116
 117 <!-- <div id="filler" style="position: absolute; top: 0; width: 100%; height: 100%"></div> -->
 118
 119 <div class="test">
 120   <!-- Flatten in the middle of 3d -->
 121   <div class="container box" id="box1">
 122     <div class="transformed-3d box" id="box2">
 123       <div class="transformed-3d box" style="transform: translateZ(40px) rotateX(10deg)" id="box3">
 124         <div class="transformed-flat box" style="transform: translate3d(0, 20px, 40px) rotateX(-15deg)" id="box4">
 125           <div class="transformed-flat box" style="-webkit-perspective: 500" id="box5">
 126             <div class="transformed-3d box" style="-webkit-transform-origin: top left; transform: rotateY(-15deg);" id="box6">
 127               <div class="transformed-3d box" style="-webkit-transform-origin: top left; transform: translateZ(20px)" id="box7">
 128                 <div class="inner" id="box8">
 129                 </div>
 130               </div>
 131             </div>
 132           </div>
 133         </div>
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139 <div id="results"></div>
 140 <div id="mousepos"></div>
 141
 142 </body>
 143 </html>