<!DOCTYPE html>
<html>
    <head>
        <title>Performance tester for non-overlaping 3D layers</title>
        <style>
            .container {
                width: 20px;
                height: 20px;
                border: 1px solid #AAA;
                margin: 0 auto 5px;
                -webkit-perspective: 400px;
            }

            .box {
                width: 100%;
                height: 100%;
                position: absolute;
                background: red;
                -webkit-transform: translateZ( -200px );
            }
        </style>
        <script src="../resources/runner.js"></script>
    </head>
    <body>
        <pre id="log"></pre>
        <script>
            function createTestFunction(count) {
                return function() {
                    var container = document.createElement("div");
                    for(i = 0; i < count; ++i) {
                        var outer = document.createElement('div');
                        outer.className = 'container';
                        var inner = document.createElement('div');
                        inner.className = 'box';
                        outer.appendChild(inner);
                        container.appendChild(outer);
                    }
                    document.body.appendChild(container);
                    // Force a layout update.
                    document.body.clientHeight;
                    container.remove();
                }
            }
            PerfTestRunner.measureTime({run: createTestFunction(5000)});
        </script>
    </body>
</html>