1 <!DOCTYPE html> 2 <script src="../resources/runner.js"></script> 3 <style> 4 .a .b { background-color: green } 5 </style> 6 <div id="root"></div> 7 <script> 8 function appendDivChildren(root, childCount, levels) { 9 if (levels <= 0) 10 return; 11 for (var i = 0; i < childCount; i++) { 12 var div = document.createElement("div"); 13 appendDivChildren(div, childCount, levels - 1) 14 root.appendChild(div); 15 } 16 } 17 18 var root = document.getElementById("root"); 19 appendDivChildren(root, 5, 5); 20 root.firstChild.className = "b"; 21 document.body.offsetTop; // force style recalc. 22 23 PerfTestRunner.measureRunsPerSecond({ 24 description: "Measure the style recalc performance when changing a class affecting the style of a single descendant.", 25 run: function() { 26 root.className = "a"; 27 root.offsetTop; // force recalc. 28 root.className = ""; 29 root.offsetTop; // force recalc. 30 }}); 31 </script> 32