Blitz - WPT: custom-highlight-painting-user-select-none.html

wpt / css / css-highlight-api / painting / custom-highlight-painting-user-select-none.html

/css/css-highlight-api/painting/custom-highlight-painting-user-select-none.html

<!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="help" href="https://drafts.csswg.org/css-highlight-api-1/#painting">
<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>

/css/css-highlight-api/painting/custom-highlight-painting-user-select-none-ref.html

<!DOCTYPE html>
<meta charset="UTF-8">
<title>CSS Highlight API Reference: custom highlight with ignored selection on user-select:none text</title>
<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/#painting">
<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></body>
<script>
  const nonselectable = document.getElementById("nonselectable").firstChild;

  // Highlight "Lorem".
  const range = new Range();
  range.setStart(nonselectable, 0);
  range.setEnd(nonselectable, 5);
  CSS.highlights.set("example", new Highlight(range));

  // Only the selectable span is selected. The user-select:none text
  // ("Lorem ipsum") keeps its originating color with no selection background --
  // exactly how the test should render once the selection is correctly ignored
  // on the non-selectable text.
  const selectable = document.getElementById("selectable").firstChild;
  getSelection().setBaseAndExtent(selectable, 0, selectable, selectable.length);
</script>
</body>
</html>