third_party/WebKit/LayoutTests/compositing/geometry/require-own-backing-recalc-order-expected.html

   1 <!DOCTYPE html>
   2 <style>
   3 #clipping-repaint-container {
   4     transform: translateZ(0);
   5     overflow: hidden;
   6     position: absolute;
   7     left: 49px;
   8     top: 49px;
   9     width: 348px;
  10     height: 348px;
  11     border: black 1px solid;
  12 }
  13
  14 #non-repaint-container-compositing-layer {
  15     -webkit-perspective: 1px;
  16     position: absolute;
  17     left: 49px;
  18     top: 49px;
  19     width: 248px;
  20     height: 248px;
  21     border: red 1px solid;
  22 }
  23
  24 #painting-layer {
  25     position: absolute;
  26     left: 49px;
  27     top: 49px;
  28     width: 148px;
  29     height: 148px;
  30     border: green 1px solid;
  31 }
  32
  33 #compositing-child1 {
  34     transform: translateZ(-1px);
  35     position: absolute;
  36     left: 48px;
  37     top: 48px;
  38     width: 48px;
  39     height: 48px;
  40     border: blue 2px solid;
  41 }
  42
  43 #compositing-child2 {
  44     transform: translateZ(0);
  45     position: absolute;
  46     left: 49px;
  47     top: 49px;
  48     width: 48px;
  49     height: 48px;
  50     border: blue 1px solid;
  51 }
  52 </style>
  53
  54 <div id="clipping-repaint-container">
  55     <div id="non-repaint-container-compositing-layer">
  56         <div id="painting-layer">
  57             <div id="compositing-child1">
  58             </div>
  59             <div id="compositing-child2">
  60             </div>
  61         </div>
  62     </div>
  63 </div>