<!doctype html>
<script src="util.js"></script>
<body>
<script>
const styles = `:host { background: red; width: 100px; height: 100px; display: block; }`.repeat(3000);
const blob = URL.createObjectURL(new Blob([styles], { type: 'text/css' }));
customElements.define("custom-element", class CustomElement extends HTMLElement {
  connectedCallback() {
    this.attachShadow({ mode: "open" });
    const link = document.createElement("link");
    link.rel = "stylesheet";
    link.href = blob;
    this.shadowRoot.appendChild(link);
  }
});

perf_start();

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

onload = function() {
  flush_layout(document.body);
  perf_finish();
};
</script>
