pseudo-elements-009.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-contain/container-queries/pseudo-elements-009.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>CSS Container Queries Test: Container for highlight pseudo elements</title>

<link rel="help" href="https://drafts.csswg.org/css-contain-3/#query-container">

<link rel="match" href="pseudo-elements-009-ref.html">

<style>

  #container {

    container-type: inline-size;

    width: 500px;

  ::selection { color: red; background: transparent; }

  ::highlight(hi) { color: red; background: transparent; }

  @container (width >= 400px) {

    ::selection { color: green }

    ::highlight(hi) { color: green }

</style>

<div id="container">

  <span id="sel">Selection</span>

  <span id="hi">Highlight</span>

</div>

<script>

  getSelection().selectAllChildren(sel);

  let highlight_range = document.createRange();

  highlight_range.selectNode(hi);

  CSS.highlights.set("hi", new Highlight(highlight_range));

</script>