Blitz - WPT: highlight-fill-color-ignores-stroke-color.html

wpt / css / css-pseudo / highlight-fill-color-ignores-stroke-color.html

/css/css-pseudo/highlight-fill-color-ignores-stroke-color.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight text fill color uses 'color', not 'stroke-color'</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
<link rel="help" href="https://drafts.fxtf.org/fill-stroke-3/#fill-stroke-paint">
<link rel="match" href="highlight-fill-color-ignores-stroke-color-ref.html">
<meta name="assert" content="The text (fill) of a custom highlight is painted using its 'color'. With 'stroke-width: 0' no stroke is painted, so a differing 'stroke-color' must not affect the fill color of the highlighted text.">
<link rel="stylesheet" href="support/highlights.css">
<script src="support/selections.js"></script>
<style>
    main {
        font-size: 4em;
    }
    main::highlight(example) {
        color: green;
        stroke-color: red;
        stroke-width: 0;
    }
</style>
<p>Test passes if the word below is green.
<main class="highlight_reftest" id="target">PASS</main>
<script>
    CSS.highlights.set("example", new Highlight(createRangeForTextOnly(target, 0, 4)));
</script>

/css/css-pseudo/highlight-fill-color-ignores-stroke-color-ref.html

<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Reference: highlight text fill color uses 'color', not 'stroke-color'</title>
<link rel="stylesheet" href="support/highlights.css">
<script src="support/selections.js"></script>
<style>
    main {
        font-size: 4em;
    }
    main::highlight(example) {
        color: green;
    }
</style>
<p>Test passes if the word below is green.
<main class="highlight_reftest" id="target">PASS</main>
<script>
    CSS.highlights.set("example", new Highlight(createRangeForTextOnly(target, 0, 4)));
</script>