<!doctype html>
<script src="util.js"></script>
<body>
<script>
const styles = `:host { background: red; width: 100px; height: 100px; display: block; }`.repeat(3000);
customElements.define("custom-element", class CustomElement extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" });
    const style = document.createElement("style");
    style.textContent = styles;
    this.shadowRoot.appendChild(style);
  }
});

onload = function() {
  perf_start();
  for (let i = 0; i < 1000; ++i) {
    document.body.appendChild(document.createElement("custom-element"));
  }

  flush_layout(document.body);
  perf_finish();
};
</script>
