third_party/WebKit/LayoutTests/compositing/child-transform-layer-rounding.html

   1 <!DOCTYPE HTML>
   2 <!--
   3     This test creates a situation where the child transform layer's position
   4     needs to take into account the rounding that is applied to m_graphicsLayer.
   5 -->
   6 <style>
   7 #animDiv {
   8   position: absolute;
   9   width: 176px;
  10   height: 91px;
  11   background-image: none;
  12   background-color: #cc3500;
  13   left: -164.5px;
  14   top: 184.5px;
  15 }
  16
  17 #clipper {
  18   overflow: hidden;
  19   width: 700px;
  20   height: 700px;
  21   margin: -10px;
  22 }
  23
  24 #shake {
  25   position:absolute;
  26   width:200px;
  27   height:64px;
  28   left:51px;
  29   top:121px;
  30   border-style:solid;border-width:1px;
  31   transform:translateZ(0);
  32 }
  33
  34 #container {
  35   perspective: 1400px;
  36   /* Without this, container will paint into composited ancestor, and prevent
  37      us from seeing the bug. */
  38   transform: translateZ(0);
  39 }
  40 </style>
  41 <div id="clipper">
  42   <div id="container">
  43     <div id="animDiv"></div>
  44     <div id="shake"></div>
  45   </div>
  46 </div>