custom-highlight-painting-insert-node-001.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-highlight-api/painting/custom-highlight-painting-insert-node-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<html class="reftest-wait">

<meta charset="utf-8">

<title>CSS Highlight API Test: highlight renders on text node inserted after highlight registration</title>

<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">

<link rel="match" href="custom-highlight-painting-insert-node-001-ref.html">

<meta name="assert" content="Highlights on ranges of detached text nodes are painted after the text node is inserted into the document.">

<script src="/common/reftest-wait.js"></script>

<style>

  ::highlight(example) {

    color: red;

</style>

<body>

<pre></pre>

<script>

  const pre = document.querySelector('pre');

  const text = document.createTextNode('Hello world');

  const range = new Range();

  range.setStart(text, 6);

  range.setEnd(text, 11);

  CSS.highlights.set('example', new Highlight(range));

  pre.append(text);

  requestAnimationFrame(() => requestAnimationFrame(() => takeScreenshot()));

</script>

</html>