third_party/WebKit/LayoutTests/compositing/child-layer-3d-sorting.html

   1 <!DOCTYPE>
   2 <html>
   3 <head>
   4 <title>Child layer 3d sorting</title>
   5
   6 <style type="text/css" media="screen">
   7     #parent {
   8         -webkit-transform-style: preserve-3d;
   9         transform: translateZ(0);
  10     }
  11     #child {
  12         width: 200px;
  13         height: 200px;
  14         transform: translateZ(0px);
  15         background: blue;
  16     }
  17     #child > div {
  18         width: 100px;
  19         height: 100px;
  20         transform: translateZ(0px);
  21         background: green;
  22     }
  23 </style>
  24 <script type="text/javascript" charset="utf-8">
  25     if (window.testRunner) {
  26         testRunner.waitUntilDone();
  27         testRunner.dumpAsTextWithPixelResults();
  28     }
  29     function doTest()
  30     {
  31         var child = document.getElementById('child');
  32
  33         window.setTimeout(function() {
  34             // Move the parent forward
  35             child.style.webkitTransform = "translateZ(10px)";
  36             if (window.testRunner) {
  37                 window.setTimeout(function() {
  38                     testRunner.notifyDone();
  39                 }, 0);
  40             }
  41         }, 0);
  42     }
  43
  44     window.addEventListener('load', doTest, false);
  45 </script>
  46 </head>
  47 <body>
  48 <!-- When the test is done, you should see a green square inside the blue square -->
  49
  50 <div id="parent">
  51     <div id="child">
  52         <div></div>
  53     </div>
  54 </div>
  55 </body>
  56 </html>