blob: 10d2494b3f955558f6b725e7d32c0733bc799032 [file] [log] [blame]
<!doctype html>
<style>
.foo {
border: 1px solid black;
padding: 10px;
}
.foo .bar.baz {
color: blue;
}
</style>
<script src="../resources/runner.js"></script>
<script>
var listSize = 1000;
window.onload = function() {
var root = document.querySelector('#list').createShadowRoot();
root.appendChild(document.createElement('content'));
PerfTestRunner.measureTime({
description: "Measures performance of creating and rendering elements with shadow roots (contains class descendant selector styles).",
setup: function() {
},
run: function() {
var frag = document.createDocumentFragment();
var tmpl = document.querySelector('#tmpl');
var start = PerfTestRunner.now();
var i = 0;
do {
frag.appendChild(tmpl.content.cloneNode(true));;
} while (++i < listSize);
document.querySelector('#list').appendChild(frag);
PerfTestRunner.forceLayout();
return PerfTestRunner.now() - start;
},
done: function() {
document.querySelector('#list').innerHTML = '';
}
});
}
</script>
<template id="tmpl">
<div class="foo">
<div class="bar baz">item</div>
</div>
</template>
<section id="list"></section>