PerformanceTests/Paint/custom-highlight-repaint.html

<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<script src="resources/custom-highlight-repaint.js"></script>
<title>Tracking the repaint cost of registered CSS Custom Highlight API ranges</title>
<style>
    body { margin: 0; }
    #doc {
        width: 784px;
        padding: 8px;
        outline: 0;
        font: 13px/19.5px monospace, monospace;
    }
    #doc p {
        margin: 0;
        white-space: break-spaces;
    }
    ::highlight(demo) {
        color: hsl(0 80% 45%);
    }
</style>
</head>
<body>
<pre id="log"></pre>
<div id="doc"></div>
<script>
function setupTest() {
    if (!window.CSS || !CSS.highlights) {
        PerfTestRunner.log("FAIL: this browser has no CSS Custom Highlight API.");
        return;
    }
    buildDocument();
    registerHighlights();
    PerfTestRunner.prepareToMeasureValuesAsync({ done: cleanUp, unit: "ms" });
    requestAnimationFrame(runRepaintTest);
}

onload = setupTest;
</script>
</body>
</html>