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

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