PerformanceTests/ShadowDOM/ChangingClassNameShadowDOM.html - WebKit - Git at Google

 <!DOCTYPE html>
 <html>
 <head>
     <script type="text/javascript" src="../resources/runner.js"></script>
 </head>
 <body>

 <div id="wrapper">
     <div id="host"></div>
 </div>

 <script>
 var numDivsInHost = 100;
 var array = new Array(numDivsInHost);

 function setup()
 {
     var nDivs = numDivsInHost;

     window.shadowRoot = host.webkitCreateShadowRoot();
     shadowRoot.innerHTML = '<h2>Selected</h2><div id="selected"><content select=".selected"></content></div><h2>NonSelected</h2><div id="nonselected"><content></content></div>';

     for (var i = 0; i < nDivs; ++i) {
         var div = document.createElement('div');
         div.appendChild(document.createTextNode('div' + i));
         host.appendChild(div);
         array[i] = div;
     }
 }

 function run()
 {
     var nDivs = numDivsInHost;
     var array = window.array;

     var selected = shadowRoot.getElementById('selected');
     var nonSelected = shadowRoot.getElementById('nonselected');

     for (var i = 2; i < 100; ++i) {
         for (var j = 0; j < nDivs; ++j)
             array[j].className = (j % i == 0) ? 'selected' : '';
         selected.offsetLeft;
         nonSelected.offsetLeft;
     }
 }

 function done()
 {
     wrapper.innerHTML = '';
 }


 setup();

 PerfTestRunner.measureTime({
     description: "Measure distribution and layout performance when className is changed",
     run: run,
     done: done
 });
 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<script type="text/javascript" src="../resources/runner.js"></script>
	</head>
	<body>

	<div id="wrapper">
	<div id="host"></div>
	</div>

	<script>
	var numDivsInHost = 100;
	var array = new Array(numDivsInHost);

	function setup()
	{
	var nDivs = numDivsInHost;

	window.shadowRoot = host.webkitCreateShadowRoot();
	shadowRoot.innerHTML = '<h2>Selected</h2><div id="selected"><content select=".selected"></content></div><h2>NonSelected</h2><div id="nonselected"><content></content></div>';

	for (var i = 0; i < nDivs; ++i) {
	var div = document.createElement('div');
	div.appendChild(document.createTextNode('div' + i));
	host.appendChild(div);
	array[i] = div;
	}
	}

	function run()
	{
	var nDivs = numDivsInHost;
	var array = window.array;

	var selected = shadowRoot.getElementById('selected');
	var nonSelected = shadowRoot.getElementById('nonselected');

	for (var i = 2; i < 100; ++i) {
	for (var j = 0; j < nDivs; ++j)
	array[j].className = (j % i == 0) ? 'selected' : '';
	selected.offsetLeft;
	nonSelected.offsetLeft;
	}
	}

	function done()
	{
	wrapper.innerHTML = '';
	}


	setup();

	PerfTestRunner.measureTime({
	description: "Measure distribution and layout performance when className is changed",
	run: run,
	done: done
	});
	</script>
	</body>
	</html>