src/third_party/WebKit/LayoutTests/compositing/anchor-point-should-not-affect-perspective.html

   1 <!DOCTYPE HTML>
   2 <style>
   3   .transformableContainer {
   4     position: absolute;
   5     -webkit-perspective-origin: 50% 50%;
   6     -webkit-perspective: 100;
   7   }
   8   .transformable {
   9     -webkit-transform-origin: 0em 0em 0em;
  10     -webkit-transform-style: preserve-3d;
  11   }
  12   .transformed {
  13     transform: translate3d(100px, 100px, -25px);
  14   }
  15   .resetTransformOrigin {
  16     -webkit-transform-origin: 50% 50% !important;
  17   }
  18 </style>
  19 <!--
  20 The red div should be covered by the green. If the red is showing, there is
  21 an issue with the anchor point.
  22 -->
  23 <div class="transformableContainer transformable" style="width: 400px; height: 400px;">
  24   <div class="transformable transformed">
  25     <div class="content" style="width: 200px; height: 200px; background-color: red;"></div>
  26   </div>
  27 </div>
  28
  29 <div class="transformableContainer resetTransformOrigin" style="width: 400px; height: 400px;">
  30   <div class="transformable transformed">
  31     <div class="content" style="width: 200px; height: 200px; background-color: green;"></div>
  32   </div>
  33 </div>