third_party/WebKit/LayoutTests/compositing/reorder-z-with-style.html

   1 <!DOCTYPE html>
   2 <style>
   3   body {
   4     transform: translateZ(0);
   5   }
   6   #container {
   7     height: 300px;
   8     width: 300px;
   9     background-color: green;
  10     transform: translateZ(0);
  11   }
  12
  13   #parent {
  14     position: absolute;
  15     left: 400px;
  16     width: 300px;
  17     height: 300px;
  18     background-color: green;
  19     -webkit-transform-style: preserve-3d;
  20   }
  21
  22   #child {
  23     position: absolute;
  24     width: 200px;
  25     height: 200px;
  26     z-index: -2;
  27     background-color: red;
  28     transform: translateZ(0);
  29   }
  30 </style>
  31 <body>
  32 <div id="container">
  33   <div id="parent">
  34     <div id="child"></div>
  35   </div>
  36 </div>
  37 <script>
  38 if (window.testRunner)
  39   testRunner.waitUntilDone();
  40
  41 requestAnimationFrame(function() {
  42   requestAnimationFrame(function() {
  43     document.getElementById('parent').style.webkitTransformStyle = 'flat';
  44     setTimeout(function() {
  45       testRunner.notifyDone();
  46     });
  47   });
  48 });
  49 </script>
  50 </body>