<!DOCTYPE>
<html>
<head>
<title>Child layer 3d sorting</title>

<style type="text/css" media="screen">
    #parent {
        -webkit-transform-style: preserve-3d;
        will-change: transform;
    }
    #child {
        width: 200px;
        height: 200px;
        will-change: transform;
        background: blue;
    }
    #child > div {
        width: 100px;
        height: 100px;
        will-change: transform;
        background: green;
    }
</style>
<script src="../resources/run-after-layout-and-paint.js"></script>
<script type="text/javascript" charset="utf-8">
    function doTest()
    {
        var child = document.getElementById('child');

        runAfterLayoutAndPaint(function() {
            // Move the parent forward
            child.style.webkitTransform = "translateZ(10px)";
        }, true);
    }

    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>