Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/css-pseudo/active-selection-041.html - WPT Dashboard Interop Dashboard
<!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érard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<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
-->
<!--
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>