<!DOCTYPE> <html> <head> <title>Child layer 3d sorting</title> <style type="text/css" media="screen"> #parent { -webkit-transform-style: preserve-3d; transform: translateZ(0); } #child { width: 200px; height: 200px; transform: translateZ(0px); background: blue; } #child > div { width: 100px; height: 100px; transform: translateZ(0px); background: green; } </style> <script type="text/javascript" charset="utf-8"> if (window.testRunner) { testRunner.waitUntilDone(); testRunner.dumpAsTextWithPixelResults(); } function doTest() { var child = document.getElementById('child'); window.setTimeout(function() { // Move the parent forward child.style.webkitTransform = "translateZ(10px)"; if (window.testRunner) { window.setTimeout(function() { testRunner.notifyDone(); }, 0); } }, 0); } window.addEventListener('load', doTest, false); </script> </head> <body> <!-- When the test is done, you should see a green square inside the blue square --> <div id="parent"> <div id="child"> <div></div> </div> </div> </body> </html>