<!DOCTYPE html>
<html>
<body>
<script src="../resources/runner.js"></script>
<script>

function createDeepShadowTemplateContent(levels, slotted) {
  const nestedContent = levels > 0 ? createDeepShadowTemplateContent(levels-1) : '<span>End</span>';
  if (slotted) {
    return `<div><template shadowroot=open><slot></slot></template>${nestedContent}</div>`;
  } else {
    return `<div><template shadowroot=open>${nestedContent}</template></div>`;
  }
}

function setInnerHTML(el,content) {
  const fragment = (new DOMParser()).parseFromString(`<pre>${content}</pre>`, 'text/html', {includeShadowRoots: true});
  (el instanceof HTMLTemplateElement ? el.content : el).replaceChildren(...fragment.body.firstChild.childNodes);
}

const hostChildren = 100;

function buildTemplate(slotted) {
  const template = document.createElement('template');
  document.body.appendChild(template);
  const html = createDeepShadowTemplateContent(hostChildren, slotted);
  setInnerHTML(template,html);
  return template;
}

// Build templates once
const templateSlotted = buildTemplate(true);
const templateNested = buildTemplate(false);

if (!templateSlotted.content.firstChild.shadowRoot) {
  PerfTestRunner.logFatalError("Declarative Shadow DOM must be enabled for this test.");
}

PerfTestRunner.measureRunsPerSecond({
    description: "This benchmark tests cloning of templates containing declarative Shadow DOM",

    setup: function() {
        const wrapper = document.createElement('div');
        wrapper.id = 'wrapper';
        document.body.appendChild(wrapper);
    },

    run: function() {
        const wrapper = document.querySelector('#wrapper');
        for (var i = 0; i < 100; i++) {
            wrapper.appendChild(templateSlotted.content.cloneNode(true));
            wrapper.appendChild(templateNested.content.cloneNode(true));
        }
    },

    teardown: function() {
        wrapper.remove();
    }});

</script>
</body>
</html>