Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-highlight-api/highlight-image-currentcolor.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>Custom highlight: currentColor over a replaced element resolves against the previous layer</title>
<link rel="author" title="Fernando Fiori" href="mailto:ffiori@microsoft.com">
<link rel="match" href="highlight-image-currentcolor-ref.html">
<meta name="assert" content="A higher-priority ::highlight() with background-color: currentColor over a replaced element resolves currentColor against the previous (lower) layer's resolved color, not the host element's color.">
<style>
body { color: blue; }
/* Lower layer paints red and sets the resolved current color to green. */
::highlight(low) { background-color: red; color: green; }
/* Higher layer's currentColor must resolve to the low layer's green,
NOT the host's blue. */
::highlight(high) { background-color: currentColor; }
</style>
<body>
<div id="d"><img src="../../images/blank-highlight.png"></div>
<script>
const d = document.getElementById('d');
const makeHighlight = () => new Highlight(new StaticRange({
startContainer: d, startOffset: 0, endContainer: d, endOffset: 1,
}));
const low = makeHighlight();
const high = makeHighlight();
low.priority = 0;
high.priority = 1;
CSS.highlights.set("low", low);
CSS.highlights.set("high", high);
</script>
</body>