src/third_party/WebKit/LayoutTests/transforms/3d/general/transform-origin-z-change.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css">
   5   body {
   6     margin: 0;
   7   }
   8
   9   .container {
  10     top: 10px;
  11     left: 10px;
  12     -webkit-transform-style: preserve-3d;
  13     -webkit-perspective: 500px;
  14     outline: 1px solid black;
  15   }
  16
  17   .box {
  18     position: absolute;
  19     width: 100px;
  20     height: 100px;
  21   }
  22
  23   .intermediate {
  24     transform: rotateY(-90deg);
  25     -webkit-transform-style: preserve-3d;
  26   }
  27
  28   .inner {
  29     transform: rotateY(-90deg);
  30     background: green;
  31   }
  32
  33   .indicator {
  34     top: 10px;
  35     left: 110px;
  36     background-color: red;
  37   }
  38   </style>
  39   <script type="text/javascript" charset="utf-8">
  40     if (window.testRunner) {
  41       testRunner.dumpAsTextWithPixelResults();
  42       testRunner.waitUntilDone();
  43     }
  44
  45     function doTest()
  46     {
  47       window.setTimeout(function() {
  48         document.getElementById('target').style.webkitTransformOriginZ = '100px';
  49         if (window.testRunner)
  50           testRunner.notifyDone();
  51       }, 0);
  52     }
  53
  54     window.addEventListener('load', doTest, false);
  55   </script>
  56 </head>
  57 <body>
  58   <!-- The gren box should snap to the right, obscuring the red box. -->
  59   <div class="indicator box"></div>
  60   <div class="container box">
  61     <div id="target" class="intermediate box">
  62       <div class="inner box">
  63       </div>
  64     </div>
  65   </div>
  66 </body>
  67 </html>