Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/selection-intercharacter-012.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Pseudo-Elements Test: active selection and inter-character spacing</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<link rel="match" href="reference/selection-intercharacter-012-ref.html">
<meta content="may" name="flags">
<meta name="assert" content="In this test, the 'c' and the 't' characters share the same level in the containment hierarchy but the space between these characters does not. Therefore, only the 'c' and the 't' characters themselves have an orange background color painting.">
<link rel="stylesheet" href="support/highlights.css">
<style>
div
{
font-size: 48px;
letter-spacing: 1em;
}
div::selection
{
background-color: yellow;
}
span::selection
{
background-color: orange;
}
</style>
<script>
function startTest()
{
var targetRange = document.createRange();
/* We first create an empty range */
targetRange.selectNodeContents(document.getElementById("test"));
/* Then we set the range boundaries to the children of div#test */
window.getSelection().addRange(targetRange);
/* Finally, we now select such range of content */
}
</script>
<body onload="startTest();">
<p>Test passes if the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange).
<div id="test" class="highlight_reftest">Sele<span>c</span> <span>t</span>ed</div>