forked from mirrors/gecko-dev
f97dac4ff6
Automatic update from web-platform-tests Added active-selection-041.html and active-selection-043.html -- Improved active-selection-041 and 043 according to reviews -- wpt-commits: 4332085a41b433d220390e7230b9cca311955917, 2589acc42a9125817c2e0bcf130710cbf7c6b5ca wpt-pr: 24754
86 lines
2.6 KiB
HTML
86 lines
2.6 KiB
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é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>
|