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

   1 <html>
   2 <head>
   3   <title>Point mapping through 3D transforms with origins</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       // Scroll so that frame view offsets are non-zero
  11       // window.scrollTo(20, 100);
  12
  13       // document.getElementById('overflow').scrollLeft = 80;
  14       // document.getElementById('overflow').scrollTop = 60;
  15
  16       // In non-test mode, show the mouse coords for testing
  17       if (!window.testRunner)
  18         document.body.addEventListener('mousemove', mousemoved, false);
  19
  20       dispatchEvent(48, 48, 'box1', 6, 6);
  21       dispatchEvent(70, 41, 'box2', 3, 3);
  22       dispatchEvent(185, 164, 'box2', 97, 97);
  23       dispatchEvent(338, 64, 'box7', 3, 3);
  24       dispatchEvent(92, 310, 'box10', 3, 3);
  25       dispatchEvent(217, 444, 'box10', 96, 96);
  26       dispatchEvent(337, 309, 'box13', 2, 2);
  27       dispatchEvent(360, 334, 'box14', 2, 2);
  28       dispatchEvent(500, 484, 'box14', 96, 96);
  29     }
  30   </script>
  31   <style type="text/css" media="screen">
  32
  33     body {
  34       margin: 0;
  35       border: 1px solid black;
  36       cursor: crosshair;
  37     }
  38
  39     .test {
  40       display: inline-block;
  41       height: 200px;
  42       width: 200px;
  43       border: 1px solid black;
  44       margin: 20px;
  45     }
  46
  47     .box {
  48       height: 100px;
  49       width: 100px;
  50       -webkit-box-sizing: border-box;
  51       background-color: #DDD;
  52       border: 1px solid black;
  53     }
  54
  55     .box:hover {
  56       outline: 3px solid orange;
  57     }
  58
  59     .container {
  60       height: 140px;
  61       width: 140px;
  62       margin: 20px;
  63       border: 1px solid black;
  64       -webkit-box-sizing: border-box;
  65       -webkit-perspective: 400;
  66       -webkit-perspective-origin: 20% 80%;
  67     }
  68
  69     .transformed {
  70       position: relative;
  71       height: 100px;
  72       width: 100px;
  73       padding: 20px;
  74       margin: 20px;
  75       border: 1px solid black;
  76       background-color: #AAA;
  77       -webkit-box-sizing: border-box;
  78       transform: translateZ(100px) rotateY(-40deg);
  79       -webkit-transform-origin: 20% 40%;
  80     }
  81
  82     .layer {
  83       padding: 20px;
  84       background-color: #C0D69E;
  85     }
  86
  87     .inner {
  88       background-color: blue;
  89     }
  90
  91     #results {
  92       position: absolute;
  93       left: 30px;
  94       top: 500px;
  95     }
  96
  97     #mousepos {
  98       position: absolute;
  99       left: 30px;
 100       top: 700px;
 101       color: gray;
 102       font-size: smaller;
 103     }
 104   </style>
 105 </head>
 106 <body onclick="clicked(event)">
 107
 108 <div id="results"></div>
 109
 110 <div class="test">
 111   <!-- Simple transformed div in perpsective -->
 112   <div class="container box" id="box1">
 113     <div class="transformed box" id="box2">
 114     </div>
 115   </div>
 116 </div>
 117
 118 <div class="test">
 119   <!-- Transformed div in perpsective with non-layer child -->
 120   <div class="container box" id="box5">
 121     <div class="transformed box" id="box6">
 122       <div class="inner box" id="box7">
 123       </div>
 124     </div>
 125   </div>
 126 </div>
 127 <br>
 128
 129 <div class="test">
 130   <!-- Transformed div in perpsective with layer child -->
 131   <div class="container box" id="box8">
 132     <div class="transformed box" id="box9">
 133       <div class="inner box" style="position: relative" id="box10">
 134       </div>
 135     </div>
 136   </div>
 137 </div>
 138
 139 <div class="test">
 140   <!-- Transformed div in perpsective with child having layer child -->
 141   <div class="container box" id="box11">
 142     <div class="transformed box" id="box12">
 143       <div class="layer box" id="box13">
 144         <div class="inner box" style="position: relative" id="box14">
 145         </div>
 146       </div>
 147     </div>
 148   </div>
 149 </div>
 150
 151 <div id="mousepos"></div>
 152
 153 </body>
 154 </html>