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/painting/custom-highlight-painting-user-select-none.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Highlight API Test: custom highlight color does not leak to non-highlighted user-select:none text under selection</title>
<link rel="match" href="custom-highlight-painting-user-select-none-ref.html">
<meta name="assert" content="When an element with user-select:none has a custom highlight over part of its text, selecting the non-highlighted text (together with adjacent selectable text) must not give it a selection background, and the non-highlighted text must keep its originating color instead of inheriting the custom highlight color.">
<style>
::highlight(example) {
background-color: black;
color: silver;
}
::selection {
background-color: lime;
color: red;
}
#nonselectable { user-select: none; }
</style>
<body><span id="nonselectable">Lorem ipsum</span><span id="selectable">dolor</span>
<script>
const nonselectable = document.getElementById("nonselectable").firstChild;
const selectable = document.getElementById("selectable").firstChild;
// Highlight "Lorem".
const range = new Range();
range.setStart(nonselectable, 0);
range.setEnd(nonselectable, 5);
CSS.highlights.set("example", new Highlight(range));
// Select all the text. The selection must be ignored on the
// non-selectable text: no selection background and no color change.
getSelection().setBaseAndExtent(nonselectable, 0, selectable, selectable.length);
</script>
</body>
</html>