<!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>