css/css-pseudo/active-selection-041.html

<!DOCTYPE html>

<html class="reftest-wait">

  <meta charset="UTF-8">

  <title>CSS Pseudo-Elements Test: active selection and image</title>

  <link rel="author" title="G&eacute;rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
  <link rel="mismatch" href="reference/active-selection-041-notref.html">

  <meta content="should" name="flags">
  <meta name="assert" content="In this test, a filled yellow image is selected and is overlaid with an opaque blue background color. The specification states that, for replaced content, the UA should create a semi-transparent wash to coat the content. But such semi-transparent wash could use a transparency of 0.3 or 0.5 or 0.7: so, we do not know. Therefore we can not predict the rendered end result. All we can be sure of is that the image, once selected, must not be identical to its original non-selected version. This test checks precisely and only this.">

  <!--
  "
  (...) for replaced content, the UA should create
  a semi-transparent wash to coat the content so
  that it can show through the selection.
  "
  coming from
  https://www.w3.org/TR/css-pseudo-4/#highlight-painting
  -->

  <!--
  July 28th 2020

  Firefox 68.10.0 ESR will create a resulting
  background color of #7F7F80, which looks like
  dark gray.

  Chrome 83.0.4103.116 will create a resulting
  background color of #33CCCC which looks like
  dark blue.

  July 28th 2020
  -->

  <style>
  div
    {
      font-size: 300%;
    }

  img
    {
      vertical-align: top;
    }

  /*
  Chromium 80+ will highlight space
  below and above content box while
  Firefox 72+ only highlights the image itself.
  Therefore this 'vertical-align: top' declaration
  to work around this possible behavior.
  */

  img::selection
    {
      background-color: blue;
      /*
      equivalent to rgb(0, 0, 255) or rgb(0%, 0%, 100%)
      or rgba(0, 0, 255, 1) or #0000FF
      */
    }
  </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 */
  document.documentElement.className = "";
  }
  </script>

  <body onload="startTest();">

  <p>Test passes if there is a filled square which is <strong>not yellow</strong>.

  <div id="test"><img src="../support/swatch-yellow.png" width="100" height="100" alt="Image download support must be enabled"></div>