<!DOCTYPE html>
<html>
<head>
    <script src="../resources/runner.js"></script>
    <script src="resources/utils.js"></script>
    <style type="text/css">
        /*
        We are attempting to manipulate 'expensive' properties here.
        */
        #item {
            background-color: red;
            border-radius: 5px;
            padding: 3px;
            box-shadow: 0 5px 5px #000;
            transform: rotate(10deg);
            display: block;
        }
    </style>
</head>
<body>
</body>
    <script>
        createShallowDOMTree();
        var allElements = document.body.getElementsByTagName("div");
        var length = allElements.length
        PerfTestRunner.measureTime({
            description: "Measures the performance of changing the style of an element in a shallow and broad tree",
            run: function() {
                for (var i=0; i < length; i++) {
                    allElements[i].id = "item";
                    forceStyleRecalc(allElements[i]);
                    allElements[i].id = "";
                    forceStyleRecalc(allElements[i]);
                }
            },
            tracingCategories: 'blink',
            traceEventsToMeasure: [
                'Document::updateStyle',
                'Document::recalcStyle',
                'Document::rebuildLayoutTree'
            ]
        });
    </script>
</html>