third_party/WebKit/LayoutTests/compositing/flat-with-transformed-child.html

   1 <html>
   2 <head>
   3   <style type="text/css">
   4     #container {
   5       margin: 80px 0px;
   6       height: 300px;
   7       width: 300px;
   8       -webkit-perspective: 500;
   9     }
  10
  11     #parent {
  12       width: 280px;
  13       height: 280px;
  14       background-color: green;
  15       opacity: 0.9999;
  16       -webkit-transform-style: flat;
  17       transform: rotateY(80deg);
  18     }
  19
  20     #child {
  21       background-color: green;
  22       transform: translateZ(0);
  23     }
  24
  25     #bad {
  26       position: absolute;
  27       top: 120px;
  28       left: 115px;
  29       width: 20px;
  30       height: 200px;
  31       background-color: red;
  32     }
  33   </style>
  34   <script>
  35     if (window.testRunner)
  36       testRunner.dumpAsTextWithPixelResults();
  37   </script>
  38 </head>
  39 <body>
  40   <!-- This div should be covered up -->
  41   <div id="bad"></div>
  42
  43   <div id="container">
  44     <div id="parent">
  45       <div id="child"></div>
  46     </div>
  47   </div>
  48 </body>
  49 </html>