Blitz - WPT: highlight-priority-painting.html

wpt / css / css-highlight-api / highlight-priority-painting.html

/css/css-highlight-api/highlight-priority-painting.html

<!DOCTYPE html>
<html>
<head>
    <title>Highlight priority attribute painting correctness</title>
    <link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#priorities">
    <link rel="match" href="highlight-priority-painting-ref.html">
    <style>
    ::highlight(yellow-highlight) {
        background-color: yellow;
    }
    ::highlight(green-highlight) {
        background-color: green;
    }
    ::highlight(blue-highlight) {
        background-color: blue;
    }
    </style>
</head>
<body>
    <span id="green-highlight">Green</span>
    <span id="yellow-highlight">Yellow</span>
    <span id="blue-highlight">Blue</span>
    <span id="yellow-blue-highlight">Yellow-Blue</span>

    <script>
        let yellowBlue = document.getElementById("yellow-blue-highlight");
        let green = document.getElementById("green-highlight");
        let highlightGreen = new Highlight(new StaticRange({
            startContainer: green.childNodes[0],
            startOffset: 0,
            endContainer: green.childNodes[0],
            endOffset: 5
        }));
        let yellow = document.getElementById("yellow-highlight");
        let highlightYellow = new Highlight(new StaticRange({
            startContainer: yellow.childNodes[0],
            startOffset: 0,
            endContainer: yellow.childNodes[0],
            endOffset: 6
        }), new StaticRange({
            startContainer: yellowBlue.childNodes[0],
            startOffset: 0,
            endContainer: yellowBlue.childNodes[0],
            endOffset: 6
        }));
        let blue = document.getElementById("blue-highlight");
        let highlightBlue = new Highlight(new StaticRange({
            startContainer: blue.childNodes[0],
            startOffset: 0,
            endContainer: blue.childNodes[0],
            endOffset: 4
        }), new StaticRange({
            startContainer: yellowBlue.childNodes[0],
            startOffset: 0,
            endContainer: yellowBlue.childNodes[0],
            endOffset: 11
        }));
        CSS.highlights.set("yellow-highlight", highlightYellow);
        CSS.highlights.set("green-highlight", highlightGreen);
        CSS.highlights.set("blue-highlight", highlightBlue);
        highlightYellow.priority = 10;
        highlightBlue.priority = -1;
    </script>
</body>
</html>

/css/css-highlight-api/highlight-priority-painting-ref.html

<!DOCTYPE html>
<html>
<head>
    <title>Highlight priority attribute painting</title>
    <style>
    #green-highlight {
        background-color: green;
    }
    .yellow-highlight {
        background-color: yellow;
    }
    .blue-highlight {
        background-color: blue;
    }
    </style>
</head>
<body>
    <span id="green-highlight">Green</span>
    <span class="yellow-highlight">Yellow</span>
    <span class="blue-highlight">Blue</span>
    <span class="yellow-highlight">Yellow</span><span class="blue-highlight">-Blue</span>
</body>
</html>