Blitz - WPT: custom-highlight-painting-insert-node-001.html

wpt / css / css-highlight-api / painting / custom-highlight-painting-insert-node-001.html

/css/css-highlight-api/painting/custom-highlight-painting-insert-node-001.html

<!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>

/css/css-highlight-api/painting/custom-highlight-painting-insert-node-001-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<pre>Hello <span style="color: red;">world</span></pre>