custom-highlight-painting-iframe-002.html

Enable keyboard shortcuts

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

<!DOCTYPE html>

<meta charset="UTF-8">

<title>CSS Highlight API Test: </title>

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

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

<meta name="assert" value="Creating a Highlight in the root Document and registering it in an iframe's CSS.highlights is painted correctly.">

<body>

  <iframe

    id="iframe"

    srcdoc="

    <style>

      ::highlight(foo) {

        color: blue;

        background-color: cyan;

    </style>

    <span id='span-iframe'>abc</span>

</iframe>

<script>

  let iframe = document.querySelector("#iframe");

  iframe.onload = () => {

    let spanIframe = iframe.contentDocument.querySelector("#span-iframe");

    let rangeIframe = new Range();

    rangeIframe.setStart(spanIframe, 0);

    rangeIframe.setEnd(spanIframe, 1);

    let h = new Highlight();

    h.add(rangeIframe);

    iframe.contentWindow.CSS.highlights.set("foo", h);

</script>