<!doctype html>
<style>
  div {
    color: orange;
  }
</style>
<script src="../resources/runner.js"></script>
<script>
  var listSize = 1000;
  window.onload = function() {
    PerfTestRunner.measureTime({
      description: "Measures performance of creating and rendering elements with shadow roots from templates (contains attribute selector styles).",
      run: function() {
        var list = document.querySelector('#list');
        var tmpl = document.querySelector("#tmpl");
        list.innerHTML = '';
        var start = PerfTestRunner.now();
        var i = 0;
        do {
          var host = document.createElement('div');
          var root = host.attachShadow({mode:'open'});
          root.appendChild(tmpl.content.cloneNode(true));
          var light = document.createElement('div');
          list.appendChild(host);
        } while (++i < listSize);

        PerfTestRunner.forceLayout();
        return PerfTestRunner.now() - start;
      }
    });
  }
</script>
<template id="tmpl">
  <!-- None of these styles match, but that's on purpose -->
  <style>
    [foo] {
      color: blue;
    }
    [bar] {
      color: red;
    }
    [baz] {
      color: green;
    }
  </style>
  <div>
    <div>
      <div>item</div>
    </div>
  </div>
  <slot></slot>
</template>
<section id="list"></section>