<!doctype html>
<script src="style-bench.js"></script>
<body>
<div id="testroot"></div>
<div id="controls">
<select></select>
<button onclick="createBenchmarkFromSelect()">Initialize</button>
<button onclick="createBenchmarkFromSelect().runForever()">Initialize and run</button>
</div>
<script>
const configurations = StyleBench.predefinedConfigurations();

const select = document.querySelector("#controls select");
for (const configuration of configurations) {
    const option = document.createElement("option");
    option.innerHTML = configuration.name;
    select.appendChild(option);
}

function createBenchmark(configuration)
{
    controls.remove();

    return new StyleBench(configuration);
}

function createBenchmarkFromSelect()
{
    return createBenchmark(configurations[select.selectedIndex]);
}
</script>