<!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="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-bounds">
  <link rel="help" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property">
  <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>