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

   1 <html>
   2 <head>
   3   <title>More 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       // 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(120, 128, 'box4', 2, 2);
  20       dispatchEvent(336, 87, 'box7', 2, 2);
  21       dispatchEvent(348, 86, 'box8', 2, 2);
  22
  23       dispatchEvent(582, 87, 'box11', 2, 2);
  24       dispatchEvent(594, 86, 'box12', 2, 2);
  25     }
  26   </script>
  27   <style type="text/css" media="screen">
  28
  29     body {
  30       margin: 0;
  31       border: 1px solid black;
  32       cursor: crosshair;
  33     }
  34
  35     .test {
  36       display: inline-block;
  37       height: 200px;
  38       width: 200px;
  39       border: 1px solid black;
  40       margin: 20px;
  41     }
  42
  43     .box {
  44       height: 100px;
  45       width: 100px;
  46       -webkit-box-sizing: border-box;
  47       background-color: #DDD;
  48       border: 1px solid black;
  49     }
  50
  51     .box:hover {
  52       outline: 3px solid orange;
  53     }
  54
  55     .container {
  56       height: 140px;
  57       width: 140px;
  58       margin: 20px;
  59       border: 1px solid black;
  60       -webkit-box-sizing: border-box;
  61       -webkit-perspective: 400;
  62     }
  63
  64     .transformed-3d {
  65       position: relative;
  66       height: 100px;
  67       width: 100px;
  68       padding: 20px;
  69       margin: 20px;
  70       border: 1px solid black;
  71       background-color: #81AA8A;
  72       -webkit-transform-style: preserve-3d;
  73       -webkit-box-sizing: border-box;
  74     }
  75
  76     .transformed-flat {
  77       position: relative;
  78       height: 100px;
  79       width: 100px;
  80       padding: 20px;
  81       margin: 20px;
  82       border: 1px solid black;
  83       background-color: #AA7994;
  84       -webkit-transform-style: flat;
  85       -webkit-box-sizing: border-box;
  86     }
  87
  88     .inner {
  89       background-color: blue;
  90       height: 90px;
  91       width: 90px;
  92       transform: rotateY(30deg);
  93     }
  94
  95     #results {
  96       position: absolute;
  97       left: 30px;
  98       top: 500px;
  99     }
 100
 101     #mousepos {
 102       position: absolute;
 103       left: 430px;
 104       top: 400px;
 105       color: gray;
 106       font-size: smaller;
 107     }
 108   </style>
 109 </head>
 110 <body onclick="clicked(event)">
 111
 112 <div id="results"></div>
 113
 114 <div class="test">
 115   <!-- preserve-3d element with no transform-->
 116   <div class="container box" id="box1">
 117     <div class="transformed-3d box" style="transform: rotateY(-30deg);" id="box2">
 118       <div class="transformed-3d box" id="box3">
 119         <div class="inner box" id="box4">
 120         </div>
 121       </div>
 122     </div>
 123   </div>
 124 </div>
 125
 126 <div class="test">
 127   <!-- layer with no transform-->
 128   <div class="container box" id="box5">
 129     <div class="transformed-3d box" style="transform: rotateY(-30deg);" id="box6">
 130       <div class="box" style="position: relative; padding-left: 20px" id="box7">
 131         <div class="inner box" id="box8">
 132         </div>
 133       </div>
 134     </div>
 135   </div>
 136 </div>
 137
 138 <div class="test">
 139   <!-- non-layer with no transform-->
 140   <div class="container box" id="box9">
 141     <div class="transformed-3d box" style="transform: rotateY(-30deg);" id="box10">
 142       <div class="box" style="padding-left: 20px" id="box11">
 143         <div class="inner box" id="box12">
 144         </div>
 145       </div>
 146     </div>
 147   </div>
 148 </div>
 149
 150 <div id="mousepos"></div>
 151
 152 </body>
 153 </html>