<!doctype html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<meta name="variant" content="?splitAt=1"><!-- A | B[CDEFG]HI -->
<meta name="variant" content="?splitAt=2"><!-- AB[ | CDEFG]HI -->
<meta name="variant" content="?splitAt=3"><!-- AB[C | DEFG]HI -->
<meta name="variant" content="?splitAt=6"><!-- AB[CDEF | G]HI -->
<meta name="variant" content="?splitAt=7"><!-- AB[CDEFG] | HI -->
<meta name="variant" content="?splitAt=8"><!-- AB[CDEFG]H | I -->
<link rel="match" href="selection-range-painting-after-splitText-ref.html">
<title>Selection painting after Text.splitText() call</title>
<script>
"use strict";

addEventListener("DOMContentLoaded", async () => {
  const link = document.querySelector("link[rel=match]");
  link.href += location.search;
  const text = document.querySelector("p").firstChild;
  getSelection().setBaseAndExtent(text, "AB".length, text, "ABCDEFG".length);
  await new Promise(resolve => {
    requestAnimationFrame(() => requestAnimationFrame(resolve))
  });
  const splitAt = parseInt((new URLSearchParams(location.search)).get("splitAt"));
  text.splitText(splitAt);
  document.documentElement.removeAttribute("class");
}, {once: true});
</script>
</head>
<body>
  <p>ABCDEFGHI</p>
</body>
</html>

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Selection painting result when "CDEFG" is selected</title>
<script>
"use strict";

addEventListener("DOMContentLoaded", async () => {
  const text = document.querySelector("p").firstChild;
  const splitAt = parseInt((new URLSearchParams(location.search)).get("splitAt"));
  const newText = text.splitText(splitAt);
  const [startContainer, startOffset] = (function() {
    if (splitAt > "AB".length) {
      return [text, "AB".length];
    }
    return [newText, "AB".length - splitAt];
  })();
  const [endContainer, endOffset] = (function() {
    if (splitAt > "ABCDEFG".length) {
      return [text, "ABCDEFG".length];
    }
    return [newText, "ABCDEFG".length - splitAt];
  })();
  getSelection().setBaseAndExtent(startContainer, startOffset, endContainer, endOffset);
}, {once: true});
</script>
</head>
<body>
  <p>ABCDEFGHI</p>
</body>
</html>