mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'468d01bbd84da2babf265c6af46947be68713440'
This commit is contained in:
WPT Sync Bot
cybai
parent
35e95f55a1
commit
58e8ee674b
9438 changed files with 266112 additions and 106976 deletions
34
tests/wpt/web-platform-tests/css/css-pseudo/README.md
Normal file
34
tests/wpt/web-platform-tests/css/css-pseudo/README.md
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
## Highlight pseudos
|
||||
|
||||
There are many subtle browser differences in rendering these pseudo-elements,
|
||||
most of which comply with the specs, so here are some hints.
|
||||
|
||||
Use the helpers in `support/highlights.css` and `support/selections.js` where
|
||||
possible. They include rules and functions for “basic” but tricky tasks like
|
||||
setting up a test area, selecting content, and triggering spellcheck.
|
||||
|
||||
When creating complex layered references, start by wrapping your text in a
|
||||
relative container, then prepend absolute layers with copies of that text, then
|
||||
mark up those copies with spans. Make everything transparent initially, and set
|
||||
visible styles on the spans only. The absolute layers will perfectly overlap
|
||||
your original text, which you can keep for external layout. For example:
|
||||
|
||||
```html
|
||||
<div class="container">
|
||||
<div class="spelling-error"><span>Teh</span> <span>dgo</span> and
|
||||
<span>teh</span> <span>sphixn</span>.</div>
|
||||
<div class="selection">Teh d<span>go and te</span>h sphixn.</div>
|
||||
Teh dgo and teh sphixn.
|
||||
</div>
|
||||
```
|
||||
```css
|
||||
.container { position: relative; color: transparent; }
|
||||
.container > * { position: absolute; }
|
||||
.spelling-error > span { background: ...; color: ...; }
|
||||
.selection > span { background: ...; text-shadow: ...; }
|
||||
```
|
||||
|
||||
Simplify this pattern at your own peril! For example, if you set backgrounds
|
||||
directly on layers as your highlight backgrounds, they will always be exactly
|
||||
`line-height` tall, but even if your `line-height` is 1, the actual line boxes
|
||||
and so on can still be taller (unless they contain Ahem text only).
|
||||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -40,4 +41,4 @@
|
|||
|
||||
<p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> while background color of each glyph of "Selected Text" is white.
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
<div id="test" class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -48,4 +49,4 @@
|
|||
|
||||
<p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
<div id="test" class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -13,6 +13,7 @@
|
|||
<meta content="should" name="flags">
|
||||
<meta name="assert" content="This test checks that 'text-decoration' applies to highlight pseudo-element. Since neither 'color' nor 'background-color' has been specified by the pseudo-element selector in this test, then OS-default highlight colors should be used. The consequence of this is that the highlight color determines also the color of the underline.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -52,4 +53,4 @@
|
|||
|
||||
<p>Test passes if each glyph of "Selected Text" is underlined and if color and background color of "Selected Text" are the OS-default highlight colors. The underline color must also be the same as the highlight color of "Selected Text".
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
<div id="test" class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -43,4 +44,4 @@
|
|||
|
||||
<body onload="startTest();">
|
||||
|
||||
<div id="test">FAIL PASS FAIL</div>
|
||||
<div id="test" class="highlight_reftest">FAIL PASS FAIL</div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -57,4 +58,4 @@
|
|||
|
||||
<p>Test passes if each glyph of "Selected Text" is green, if background color of each glyph of "Selected Text" is white and if there is <strong>no red</strong>.
|
||||
|
||||
<div id="parent">Selected Text <span>FAIL</span></div>
|
||||
<div id="parent" class="highlight_reftest">Selected Text <span>FAIL</span></div>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -52,4 +53,4 @@
|
|||
|
||||
<p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> and if the underline, the overline and the line-through are also green and not red.
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
<div id="test" class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -57,4 +58,4 @@
|
|||
|
||||
<p>Test passes if background color of "Selected Text" is yellow, if the "S" glyph is purple and if the other glyphs are green.
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
<div id="test" class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@
|
|||
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -57,4 +58,4 @@
|
|||
|
||||
<p>Test passes if both "selected text" have a yellow background, if the glyphs of "1st selected text" are purple and if the glyphs of "2nd selected text" are green.
|
||||
|
||||
<div id="test">1st selected text<br>2nd selected text</div>
|
||||
<div id="test" class="highlight_reftest">1st selected text<br>2nd selected text</div>
|
||||
|
|
|
|||
|
|
@ -10,6 +10,7 @@
|
|||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div > div
|
||||
{
|
||||
|
|
@ -69,7 +70,7 @@
|
|||
|
||||
<p>Test passes if each glyph of the 6 "Selected Text" is green and if there is <strong>no red</strong>.
|
||||
|
||||
<div id="test">
|
||||
<div id="test" class="highlight_reftest">
|
||||
|
||||
<div class="vrl mixed">Selected Text</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -18,4 +19,4 @@
|
|||
|
||||
<p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
|
||||
|
||||
<div>Text sample</div>
|
||||
<div class="highlight_reftest">Text sample</div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<meta content="" name="flags">
|
||||
<meta name="assert" content="This test is an adaptation (or modified version) of Example 11 (#example-c35bf49a). The 'div > span::selection' selector has an higher specificity than the 'span::selection' selector.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -64,4 +65,4 @@
|
|||
|
||||
<p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
|
||||
|
||||
<div id="test">Text <span>sample</span></div>
|
||||
<div id="test" class="highlight_reftest">Text <span>sample</span></div>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<meta content="" name="flags">
|
||||
<meta name="assert" content="This test is an adaptation (or modified version) of Example 12 (#example-97480f68). In this test, <span> element's ::selection matches the ::selection { background-color: green; } rule and not the div#test::selection rule because '*' is implied when a tag selector is missing.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -51,4 +52,4 @@
|
|||
|
||||
<p>Test passes if background color of "Text sample" is green and <strong>not red</strong>.
|
||||
|
||||
<div id="test"><span>Text sample</span></div>
|
||||
<div id="test" class="highlight_reftest"><span>Text sample</span></div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -18,4 +19,4 @@
|
|||
|
||||
<p>Test passes if "Text sample" is green and if its background color is yellow.
|
||||
|
||||
<div>Text sample</div>
|
||||
<div class="highlight_reftest">Text sample</div>
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@
|
|||
https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -49,4 +50,4 @@
|
|||
|
||||
<p>Test passes if "Text sample" is green and if its background color is yellow.
|
||||
|
||||
<div id="test"><span>Text sample</span></div>
|
||||
<div id="test" class="highlight_reftest"><span>Text sample</span></div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: ::first-letter formatting</title>
|
||||
<style>
|
||||
div {
|
||||
font-size: 36px;
|
||||
}
|
||||
span {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the "$", "(£)", "₹" and "©" symbols are green.</p>
|
||||
<div><span>$</span>1,234.56</div>
|
||||
<div><span>(£)</span>78.90</div>
|
||||
<div><span>₹</span>10,000</div>
|
||||
<div><span>©</span>2021</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: ::first-letter formatting</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<link rel="match" href="first-letter-005-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo">
|
||||
<meta name="assert" content="Checks that symbols such as currency signs have proper ::first-letter styling.">
|
||||
<style>
|
||||
div {
|
||||
font-size: 36px;
|
||||
}
|
||||
div::first-letter {
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the "$", "(£)", "₹" and "©" symbols are green.</p>
|
||||
<div>$1,234.56</div>
|
||||
<div>(£)78.90</div>
|
||||
<div>₹10,000</div>
|
||||
<div>©2021</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -28,7 +28,7 @@ var validProperties = {
|
|||
backgroundColor: 'rgb(10, 20, 30)',
|
||||
backgroundImage: 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))',
|
||||
backgroundOrigin: 'border-box',
|
||||
backgroundPosition: 'left 10px top 20px',
|
||||
backgroundPosition: '10px 20px',
|
||||
backgroundRepeat: 'no-repeat',
|
||||
backgroundSize: '10px 20px',
|
||||
border: '40px dotted rgb(10, 20, 30)',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,5 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<p>Only the 'A' below should be green.</p>
|
||||
<span style="color:green">A</span> .B
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: ::first-letter modified text node with punctuation</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-letter-pseudo">
|
||||
<link rel="match" href="first-letter-punctuation-dynamic-ref.html">
|
||||
<style>
|
||||
#target::first-letter { color: green; }
|
||||
</style>
|
||||
<p>Only the 'A' below should be green.</p>
|
||||
<div id="target"> .<span>B</span></div>
|
||||
<script>
|
||||
target.offsetTop;
|
||||
target.firstChild.insertData(0, 'A');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>Reference: The ::first-letter should work with quote element</title>
|
||||
<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com">
|
||||
<style>
|
||||
span { color: red }
|
||||
</style>
|
||||
<p>
|
||||
<span>“</span>abc”
|
||||
</p>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>CSS Test: The ::first-letter should work with quote element</title>
|
||||
<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css">
|
||||
<link rel="match" href="first-letter-with-quote-ref.html">
|
||||
<style>
|
||||
p::first-letter { color: red }
|
||||
</style>
|
||||
<p>
|
||||
<q lang="en">abc</q>
|
||||
</p>
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>Reference: The ::first-letter should work with quote text span element</title>
|
||||
<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com">
|
||||
<style>
|
||||
span { color: red }
|
||||
</style>
|
||||
<p>
|
||||
<span>"</span>abc"
|
||||
</p>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>CSS Test: The ::first-letter should work with quote text span element</title>
|
||||
<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css">
|
||||
<link rel="match" href="first-letter-with-span-ref.html">
|
||||
<style>
|
||||
p::first-letter { color: red }
|
||||
</style>
|
||||
<p>
|
||||
<span>"</span>abc"
|
||||
</p>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<style>
|
||||
.inner {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div>A<span class=inner></span>C</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<!DOCTYPE html>
|
||||
<link rel="match" href="first-line-replaced-001-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-styling">
|
||||
<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org">
|
||||
<style>
|
||||
.inner {
|
||||
display: inline-block;
|
||||
margin: 10px;
|
||||
}
|
||||
*::first-line { visibility: visible; }
|
||||
</style>
|
||||
<body>
|
||||
<div>A<span class=inner></span>C</div>
|
||||
</body>
|
||||
|
|
@ -1,19 +1,12 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
p {
|
||||
font-size: 7em;
|
||||
text-shadow: 0.2500em 0.2500em #C0C000;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
|
||||
/*
|
||||
https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
|
||||
For text, the corresponding overlay must cover at least
|
||||
the entire em box and may extend further above/below the
|
||||
em box to the line box edges.
|
||||
*/
|
||||
line-height: 1;
|
||||
}
|
||||
p > span {
|
||||
color: initial;
|
||||
|
|
@ -27,4 +20,4 @@
|
|||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<p><span>q<span>uic</span>k</span>quick
|
||||
<p class="highlight_reftest"><span>q<span>uic</span>k</span>quick
|
||||
|
|
|
|||
|
|
@ -7,25 +7,18 @@
|
|||
<link rel="match" href="highlight-painting-001-ref.html">
|
||||
<meta name="assert" value="::selection overlay is painted in the correct order, including both the element’s shadows and the highlight’s shadows">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
p {
|
||||
font-size: 7em;
|
||||
text-shadow: 0.2500em 0.2500em #C0C000;
|
||||
|
||||
/*
|
||||
https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
|
||||
For text, the corresponding overlay must cover at least
|
||||
the entire em box and may extend further above/below the
|
||||
em box to the line box edges.
|
||||
*/
|
||||
line-height: 1;
|
||||
}
|
||||
p::selection {
|
||||
background: #C0C0C0;
|
||||
text-shadow: 0.5000em 0.5000em #3838E0;
|
||||
}
|
||||
</style>
|
||||
<p>quick
|
||||
<p class="highlight_reftest">quick
|
||||
<script>
|
||||
const target = document.querySelector("p");
|
||||
selectRangeWith(range => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-rl;
|
||||
|
|
@ -9,14 +10,6 @@
|
|||
text-shadow: 0.1250em 0.1250em #C0C000C0;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
|
||||
/*
|
||||
https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
|
||||
For text, the corresponding overlay must cover at least
|
||||
the entire em box and may extend further above/below the
|
||||
em box to the line box edges.
|
||||
*/
|
||||
line-height: 1;
|
||||
}
|
||||
p > span {
|
||||
color: #E03838C0;
|
||||
|
|
@ -31,4 +24,4 @@
|
|||
position: relative;
|
||||
}
|
||||
</style>
|
||||
<p><span>q<span>uic</span>k</span>quick
|
||||
<p class="highlight_reftest"><span>q<span>uic</span>k</span>quick
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="match" href="highlight-painting-002-ref.html">
|
||||
<meta name="assert" value="::selection overlay is painted in the correct order, including originating element shadows (but not text proper) where selected">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
:root {
|
||||
writing-mode: vertical-rl;
|
||||
|
|
@ -15,14 +16,6 @@
|
|||
font-size: 7em;
|
||||
color: #E03838C0;
|
||||
text-shadow: 0.1250em 0.1250em #C0C000C0;
|
||||
|
||||
/*
|
||||
https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
|
||||
For text, the corresponding overlay must cover at least
|
||||
the entire em box and may extend further above/below the
|
||||
em box to the line box edges.
|
||||
*/
|
||||
line-height: 1;
|
||||
}
|
||||
p::selection {
|
||||
color: #707070C0;
|
||||
|
|
@ -30,7 +23,7 @@
|
|||
text-shadow: 0.2500em 0.2500em #3838E0C0;
|
||||
}
|
||||
</style>
|
||||
<p>quick
|
||||
<p class="highlight_reftest">quick
|
||||
<script>
|
||||
const target = document.querySelector("p");
|
||||
selectRangeWith(range => {
|
||||
|
|
|
|||
|
|
@ -1,39 +1,41 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
p {
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
.background {
|
||||
width: 100%;
|
||||
height: 0.25em;
|
||||
background: #C0C000C0;
|
||||
position: relative;
|
||||
color: transparent;
|
||||
|
||||
/*
|
||||
https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
|
||||
For text, the corresponding overlay must cover at least
|
||||
the entire em box and may extend further above/below the
|
||||
em box to the line box edges.
|
||||
*/
|
||||
line-height: 1;
|
||||
background: #707070C0;
|
||||
}
|
||||
p > span {
|
||||
position: absolute;
|
||||
}
|
||||
p > span:nth-child(1) {
|
||||
.unselected {
|
||||
color: #E03838C0;
|
||||
text-decoration: #C0C000C0 solid line-through;
|
||||
}
|
||||
p > span:nth-child(1) > span {
|
||||
visibility: hidden;
|
||||
}
|
||||
p > span:nth-child(2) {
|
||||
color: transparent;
|
||||
}
|
||||
p > span:nth-child(2) > span {
|
||||
color: #707070C0;
|
||||
.selected {
|
||||
background: #38E038C0;
|
||||
text-decoration: #3838E0C0 wavy line-through;
|
||||
text-decoration: #663399C0 solid line-through;
|
||||
}
|
||||
.selected, .selected * {
|
||||
color: #663399C0;
|
||||
}
|
||||
.selection {
|
||||
text-decoration: #3838E0C0 solid underline;
|
||||
}
|
||||
</style>
|
||||
<p><span>q<span>uic</span>k</span><span>q<span>uic</span>k</span>quick
|
||||
<main class="highlight_reftest">
|
||||
<div class="hrt_layers">
|
||||
<div class="background"></div>
|
||||
<div>qui<span class="unselected">ck</span></div>
|
||||
<div><span class="selected"><span class="selection">qui</span></span>ck</div>
|
||||
quick
|
||||
</div>
|
||||
</main>
|
||||
|
|
|
|||
|
|
@ -5,37 +5,51 @@
|
|||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
|
||||
<link rel="match" href="highlight-painting-003-ref.html">
|
||||
<meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, except that originating element decorations are suppressed where selected">
|
||||
<meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, and originating element decorations lose their colour">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
p {
|
||||
/*
|
||||
Topmost last:
|
||||
1. originating background (grey)
|
||||
2. unselected text (red)
|
||||
3. originating line-through on unselected text (yellow)
|
||||
4. ::selection background (green)
|
||||
5. ::selection underline on selected text (blue)
|
||||
6. selected text (purple)
|
||||
7. originating line-through on selected text (purple!)
|
||||
|
||||
Decoration paints are ordered by text-decoration-line
|
||||
(underline, overline, text, line-through), then by highlight
|
||||
overlay (originating, ::grammar-error, ::spelling-error,
|
||||
::target-text, ::selection). See options (d, d, d) in
|
||||
csswg-drafts#6022 for more details.
|
||||
*/
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
height: 0.25em;
|
||||
background: #707070C0;
|
||||
color: #E03838C0;
|
||||
background: #C0C000C0;
|
||||
text-decoration: #C0C000C0 solid line-through;
|
||||
|
||||
/*
|
||||
https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
|
||||
For text, the corresponding overlay must cover at least
|
||||
the entire em box and may extend further above/below the
|
||||
em box to the line box edges.
|
||||
*/
|
||||
line-height: 1;
|
||||
}
|
||||
p::selection {
|
||||
color: #707070C0;
|
||||
main::selection {
|
||||
background: #38E038C0;
|
||||
text-decoration: #3838E0C0 wavy line-through;
|
||||
text-decoration: #3838E0C0 solid underline;
|
||||
color: #663399C0;
|
||||
}
|
||||
</style>
|
||||
<p>quick
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>
|
||||
const target = document.querySelector("p");
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 1);
|
||||
range.setEnd(target.childNodes[0], 4);
|
||||
range.setStart(target.childNodes[0], 0);
|
||||
range.setEnd(target.childNodes[0], 3);
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,39 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
.unselected {
|
||||
text-decoration: #E03838C0 wavy underline;
|
||||
color: #C0C000C0;
|
||||
}
|
||||
.selected {
|
||||
background: #38E038C0;
|
||||
text-decoration: #3838E0C0 wavy underline;
|
||||
}
|
||||
.selected, .selected * {
|
||||
color: #3838E0C0;
|
||||
}
|
||||
.selection {
|
||||
text-decoration: #663399C0 wavy line-through;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
In this ref, three separate wavy lines are painted, with two
|
||||
spanning the selected part and one spanning the unselected part.
|
||||
-->
|
||||
<main class="highlight_reftest">
|
||||
<div class="hrt_layers">
|
||||
<div>qui<span class="unselected">ck</span></div>
|
||||
<div><span class="selected"><span class="selection">qui</span></span>ck</div>
|
||||
quick
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
.unselected {
|
||||
text-decoration: #E03838C0 wavy underline;
|
||||
color: #C0C000C0;
|
||||
}
|
||||
.selected {
|
||||
background: #38E038C0;
|
||||
text-decoration: #3838E0C0 wavy underline;
|
||||
}
|
||||
.selected, .selected * {
|
||||
color: #3838E0C0;
|
||||
}
|
||||
.selection {
|
||||
text-decoration: #663399C0 wavy line-through;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
In this ref, two wavy lines appear to be painted, with one
|
||||
spanning the selected part and one spanning the whole text. The
|
||||
latter changes color where selected and unselected meet.
|
||||
-->
|
||||
<main class="highlight_reftest">
|
||||
<div class="hrt_layers">
|
||||
<!--
|
||||
While the selection starts from the very first letter, we
|
||||
still include a layer for the left unselected part, just
|
||||
in case the wavy line has a long tip like in Blink.
|
||||
-->
|
||||
<div><span class="unselected">quick</span></div>
|
||||
<div><span class="hrt_cover">quick</span>quick</div>
|
||||
<div><span class="hrt_hider"><div><span class="selected">quick</span></div>quick</span></div>
|
||||
<div><span class="hrt_cover">ck</span>quick</div>
|
||||
<div>qui<span class="hrt_hider"><span class="unselected">quick</span>ck</span></div>
|
||||
<div><span class="selection">qui</span>ck</div>
|
||||
quick
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
.unselected {
|
||||
text-decoration: #E03838C0 wavy underline;
|
||||
color: #C0C000C0;
|
||||
}
|
||||
.selected {
|
||||
background: #38E038C0;
|
||||
text-decoration: #3838E0C0 wavy underline;
|
||||
}
|
||||
.selected, .selected * {
|
||||
color: #3838E0C0;
|
||||
}
|
||||
.selection {
|
||||
text-decoration: #663399C0 wavy line-through;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
In this ref, two wavy lines appear to be painted, with one
|
||||
clipped to the selected part and one spanning the whole text. The
|
||||
latter changes color where selected and unselected meet.
|
||||
-->
|
||||
<main class="highlight_reftest">
|
||||
<div class="hrt_layers">
|
||||
<!--
|
||||
While the selection starts from the very first letter, we
|
||||
still include a layer for the left unselected part, just
|
||||
in case the wavy line has a long tip like in Blink.
|
||||
-->
|
||||
<div><span class="unselected">quick</span></div>
|
||||
<div><span class="hrt_cover">quick</span>quick</div>
|
||||
<div><span class="hrt_hider"><div><span class="selected"><span class="selection">quick</span></span></div>quick</span></div>
|
||||
<div><span class="hrt_cover">ck</span>quick</div>
|
||||
<div>qui<span class="hrt_hider"><span class="unselected">quick</span>ck</span></div>
|
||||
quick
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight painting</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
|
||||
<link rel="match" href="highlight-painting-004-ref1.html">
|
||||
<link rel="match" href="highlight-painting-004-ref2.html">
|
||||
<link rel="match" href="highlight-painting-004-ref3.html">
|
||||
<meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, and originating element decorations lose their colour">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
/*
|
||||
Topmost last:
|
||||
1. originating underline on unselected text (red)
|
||||
2. unselected text (yellow)
|
||||
3. ::selection background (green)
|
||||
4. originating underline on selected text (blue!)
|
||||
5. selected text (blue)
|
||||
6. ::selection line-through on selected text (purple)
|
||||
|
||||
Decoration paints are ordered by text-decoration-line
|
||||
(underline, overline, text, line-through), then by highlight
|
||||
overlay (originating, ::grammar-error, ::spelling-error,
|
||||
::target-text, ::selection). See options (d, d, d) in
|
||||
csswg-drafts#6022 for more details.
|
||||
*/
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: #E03838C0 wavy underline;
|
||||
color: #C0C000C0;
|
||||
}
|
||||
main::selection {
|
||||
background: #38E038C0;
|
||||
color: #3838E0C0;
|
||||
text-decoration: #663399C0 wavy line-through;
|
||||
}
|
||||
</style>
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 0);
|
||||
range.setEnd(target.childNodes[0], 3);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -8,18 +8,39 @@
|
|||
#target::selection,
|
||||
#target::target-text,
|
||||
#target::spelling-error,
|
||||
#target::grammar-error {
|
||||
#target::grammar-error,
|
||||
#target::highlight(foo) {
|
||||
background-color: green;
|
||||
color: lime;
|
||||
}
|
||||
#target::highlight(bar) {
|
||||
background-color: blue;
|
||||
color: yellow;
|
||||
}
|
||||
</style>
|
||||
<div id="target"></div>
|
||||
<script>
|
||||
for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error"]) {
|
||||
for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
|
||||
test(() => {
|
||||
let style = getComputedStyle(target, pseudo);
|
||||
assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "Background color is green.");
|
||||
assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
|
||||
}, `getComputedStyle() for ${pseudo}`);
|
||||
|
||||
for (illFormedPseudo of [`${pseudo}:`, `${pseudo})`, `${pseudo}(`, `${pseudo}(foo)`, `${pseudo}()`, `:${pseudo}`, `${pseudo}.`]) {
|
||||
test(() => {
|
||||
let style = getComputedStyle(target, illFormedPseudo);
|
||||
let defaultStyle = getComputedStyle(target);
|
||||
assert_equals(style.backgroundColor, defaultStyle.backgroundColor, "Background color is element's default.");
|
||||
assert_equals(style.color, defaultStyle.color, "Color is element's default.");
|
||||
}, `getComputedStyle() for ${illFormedPseudo} should be element's default`);
|
||||
}
|
||||
}
|
||||
|
||||
const pseudo = "::highlight(bar)";
|
||||
test(() => {
|
||||
let style = getComputedStyle(target, pseudo);
|
||||
assert_equals(style.backgroundColor, "rgb(0, 0, 255)", "Background color is blue.");
|
||||
assert_equals(style.color, "rgb(255, 255, 0)", "Color is yellow.");
|
||||
}, `Different getComputedStyle() for ${pseudo} and same element`);
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<style>
|
||||
li { list-style-type: "ab"; }
|
||||
#t1 > li { list-style-type: "ab"; }
|
||||
#t2 > li { list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D); }
|
||||
#t2 > li::before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D); margin-left: -24px; }
|
||||
li::after {
|
||||
content: "d";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ li {
|
|||
list-style-position: outside;
|
||||
}
|
||||
#t1 > li::marker { content: "a" "b"; }
|
||||
#t2 > li::marker { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D); padding-inline-end: calc(1em / 2); }
|
||||
#t2 > li::marker { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D); }
|
||||
li::before {
|
||||
content: "c";
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
div {
|
||||
white-space: pre;
|
||||
font: 25px/1 Ahem;
|
||||
text-emphasis-style: circle;
|
||||
-webkit-text-emphasis-style: circle;
|
||||
}
|
||||
</style>
|
||||
<div>XÉ pÉ
|
||||
Ép pp
|
||||
XÉ pÉ
|
||||
Ép pp
|
||||
</div>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: ::marker pseudo elements styled with 'content' property</title>
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<link rel="match" href="marker-content-024-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-multicol/">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#emphasis-marks">
|
||||
<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#contenteditable">
|
||||
<meta name="assert" content="Checks ::marker in a multi-column can have emphasis marks and doesn't crash when made editable.">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
<style>
|
||||
ol {
|
||||
margin: 0;
|
||||
padding-left: 25px;
|
||||
font: 25px/1 Ahem;
|
||||
}
|
||||
li {
|
||||
width: 150px;
|
||||
column-count: 2;
|
||||
column-gap: 0;
|
||||
text-emphasis-style: circle;
|
||||
-webkit-text-emphasis-style: circle;
|
||||
}
|
||||
li + li {
|
||||
list-style-position: inside;
|
||||
}
|
||||
::marker {
|
||||
content: 'X';
|
||||
}
|
||||
</style>
|
||||
<ol>
|
||||
<li>É<br>Ép<br>pÉ<br>pp</li>
|
||||
<li>É<br>Ép<br>pÉ<br>pp</li>
|
||||
</ol>
|
||||
<script>
|
||||
// Force layout
|
||||
document.body.offsetLeft;
|
||||
// Enabling editability shouldn't crash
|
||||
document.querySelector("ol").contentEditable = "true";
|
||||
</script>
|
||||
|
|
@ -31,6 +31,18 @@ test_valid_selector("*::placeholder", "::placeholder");
|
|||
test_valid_selector("foo.bar[baz]::placeholder");
|
||||
test_invalid_selector("::placeholder *");
|
||||
|
||||
// ::file-selector-button
|
||||
test_valid_selector("::file-selector-button");
|
||||
test_valid_selector("::file-selector-button:hover");
|
||||
test_valid_selector("::file-selector-button:focus");
|
||||
test_valid_selector("::file-selector-button:active");
|
||||
test_valid_selector("::file-selector-button:is(:hover)");
|
||||
|
||||
test_invalid_selector("::file-selector-button::before");
|
||||
test_invalid_selector("::file-selector-button#id");
|
||||
test_invalid_selector("::file-selector-button#class");
|
||||
test_invalid_selector("::file-selector-button:host");
|
||||
|
||||
// Combinations of the above
|
||||
test_invalid_selector("::before::before");
|
||||
test_invalid_selector("::after::before");
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -16,4 +17,4 @@
|
|||
|
||||
<p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> while background color of each glyph of "Selected Text" is white.
|
||||
|
||||
<div>Selected Text</div>
|
||||
<div class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -18,4 +19,4 @@
|
|||
|
||||
<p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
|
||||
|
||||
<div>Selected Text</div>
|
||||
<div class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -44,4 +45,4 @@
|
|||
|
||||
<p>Test passes if each glyph of "Selected Text" is underlined and if color and background color of "Selected Text" are the OS-default highlight colors. The underline color must also be the same as the highlight color of "Selected Text".
|
||||
|
||||
<div id="test">Selected Text</div>
|
||||
<div id="test" class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -19,4 +20,4 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<div>FAIL <span>PASS</span></div>
|
||||
<div class="highlight_reftest">FAIL <span>PASS</span></div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -16,4 +17,4 @@
|
|||
|
||||
<p>Test passes if each glyph of "Selected Text" is green, if background color of each glyph of "Selected Text" is white and if there is <strong>no red</strong>.
|
||||
|
||||
<div>Selected Text</div>
|
||||
<div class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@
|
|||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -18,4 +19,4 @@
|
|||
|
||||
<p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> and if the underline, the overline and the line-through are also green and not red.
|
||||
|
||||
<div>Selected Text</div>
|
||||
<div class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -23,4 +24,4 @@
|
|||
|
||||
<p>Test passes if background color of "Selected Text" is yellow, if the "S" glyph is purple and if the other glyphs are green.
|
||||
|
||||
<div><span>S</span>elected Text</div>
|
||||
<div class="highlight_reftest"><span>S</span>elected Text</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -30,6 +31,6 @@
|
|||
|
||||
<p>Test passes if both "selected text" have a yellow background, if the glyphs of "1st selected text" are purple and if the glyphs of "2nd selected text" are green.
|
||||
|
||||
<div><span id="first">1st selected text</span></div>
|
||||
<div class="highlight_reftest"><span id="first">1st selected text</span></div>
|
||||
|
||||
<div><span id="second">2nd selected text</span></div>
|
||||
<div class="highlight_reftest"><span id="second">2nd selected text</span></div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,9 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
div > div
|
||||
{
|
||||
color: green;
|
||||
float: left;
|
||||
|
|
@ -50,14 +51,18 @@
|
|||
|
||||
<p>Test passes if each glyph of the 6 "Selected Text" is green and if there is <strong>no red</strong>.
|
||||
|
||||
<div class="vrl mixed">Selected Text</div>
|
||||
<div class="highlight_reftest">
|
||||
|
||||
<div class="vrl sideways">Selected Text</div>
|
||||
<div class="vrl mixed">Selected Text</div>
|
||||
|
||||
<div class="vrl upright"><span>Selected Text</span></div>
|
||||
<div class="vrl sideways">Selected Text</div>
|
||||
|
||||
<div class="vlr mixed">Selected Text</div>
|
||||
<div class="vrl upright"><span>Selected Text</span></div>
|
||||
|
||||
<div class="vlr sideways">Selected Text</div>
|
||||
<div class="vlr mixed">Selected Text</div>
|
||||
|
||||
<div class="vlr upright"><span>Selected Text</span></div>
|
||||
<div class="vlr sideways">Selected Text</div>
|
||||
|
||||
<div class="vlr upright"><span>Selected Text</span></div>
|
||||
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -26,4 +27,4 @@
|
|||
|
||||
<p>Test passes if the background of characters "c" and "t" is orange (and only those 2 characters) and if the space between those 2 characters is also orange.
|
||||
|
||||
<div><span id="yellow">Sele<span id="orange">ct</span>ed</span></div>
|
||||
<div class="highlight_reftest"><span id="yellow">Sele<span id="orange">ct</span>ed</span></div>
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -26,4 +27,4 @@
|
|||
|
||||
<p>Test passes if the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange).
|
||||
|
||||
<div><span id="yellow">Sele<span class="orange">c</span> <span class="orange">t</span>ed</span></div>
|
||||
<div class="highlight_reftest"><span id="yellow">Sele<span class="orange">c</span> <span class="orange">t</span>ed</span></div>
|
||||
|
|
|
|||
|
|
@ -8,25 +8,26 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
#ref
|
||||
{
|
||||
font-size: 60px;
|
||||
line-height: 90px;
|
||||
}
|
||||
|
||||
div#overlapped-line
|
||||
{
|
||||
position: relative;
|
||||
color: transparent;
|
||||
margin-bottom: -90px;
|
||||
}
|
||||
|
||||
span#single-word
|
||||
#ref > div
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#grammar-error > span
|
||||
{
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
span#overlapping-line
|
||||
#selection > span
|
||||
{
|
||||
background-color: rgba(0%, 50%, 100%, 0.5);
|
||||
/*
|
||||
|
|
@ -38,23 +39,6 @@
|
|||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
function startTest()
|
||||
{
|
||||
document.getElementById("reference").blur();
|
||||
/*
|
||||
Some browsers, like Chromium 80+, will
|
||||
transfer focus to a selected element
|
||||
like a contenteditable div and
|
||||
therefore style the border of
|
||||
such element. We remove such
|
||||
focus with the blur() method.
|
||||
*/
|
||||
}
|
||||
</script>
|
||||
|
||||
<body onload="startTest();">
|
||||
|
||||
<p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent.
|
||||
|
||||
<p>Test passes
|
||||
|
|
@ -66,6 +50,8 @@
|
|||
<li>if there is no red.
|
||||
</ul>
|
||||
|
||||
<div id="overlapped-line">Many <span id="single-word">thing</span> can happen.</div>
|
||||
|
||||
<div contenteditable="true"><span id="overlapping-line">Many thing can happen.</span></div>
|
||||
<div id="ref" class="highlight_reftest">
|
||||
<div id="grammar-error">Many <span>thing</span> can happen.</div>
|
||||
<div id="selection"><span>Many thing can happen.</span></div>
|
||||
Many thing can happen.
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -8,29 +8,26 @@
|
|||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
#ref
|
||||
{
|
||||
font-size: 60px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
span#outer
|
||||
{
|
||||
position: relative;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
span#inner
|
||||
#ref > div
|
||||
{
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#spelling-error > span
|
||||
{
|
||||
background-color: yellow;
|
||||
}
|
||||
|
||||
div#overlapping-line
|
||||
{
|
||||
margin-top: -60px; /* -1lh unfortunately is not implemented */
|
||||
}
|
||||
|
||||
div#overlapping-line > span
|
||||
#selection > span
|
||||
{
|
||||
background-color: rgba(0%, 50%, 100%, 0.5);
|
||||
/*
|
||||
|
|
@ -53,10 +50,8 @@
|
|||
<li>if there is no red.
|
||||
</ul>
|
||||
|
||||
<!--
|
||||
The bad spelling of Txet is intentional and part of this test
|
||||
-->
|
||||
|
||||
<div id="overlapped-line"><span id="outer"><span id="inner">Txet</span> sample</span></div>
|
||||
|
||||
<div id="overlapping-line"><span>Txet sample</span></div>
|
||||
<div id="ref" class="highlight_reftest">
|
||||
<div id="spelling-error"><span>Txet</span> sample</div>
|
||||
<div id="selection"><span>Txet sample</span></div>
|
||||
Txet sample
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
main {
|
||||
font: 7em Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is no red below.
|
||||
<main class="highlight_reftest">XX</main>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
|
||||
<link rel="match" href="selection-decoration-p1-ref.html">
|
||||
<meta name="assert" value="originating underlines and overlines are never painted over text, even when some of the text is selected">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
/*
|
||||
The idea behind this test is that the underline should be
|
||||
completely obscured by both the selected and unselected text.
|
||||
|
||||
Note that the former is not yet actually tested here, because
|
||||
originating decoration recoloring essentially makes it
|
||||
impossible to tell whether the text or underline is on top
|
||||
(this can be fixed by highlighting the unselected text with
|
||||
some other highlight pseudo, so recoloring doesn’t apply).
|
||||
|
||||
Chromium fails in /c/2902289 and passes in /c/2903387.
|
||||
*/
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font: 7em Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: 0.25em red solid underline;
|
||||
/* try to keep decoration between ascent and descent */
|
||||
text-underline-offset: -0.5em;
|
||||
}
|
||||
main::selection {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is no red below.
|
||||
<main class="highlight_reftest">XX</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 0);
|
||||
range.setEnd(target.childNodes[0], 1);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: currentColor solid line-through;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if all of the text below is decorated with a line-through.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
|
||||
<link rel="match" href="selection-decoration-p2-ref.html">
|
||||
<meta name="assert" value="originating line-through decorations are always painted over text, even when some of the text is selected">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
/*
|
||||
This test verifies that line-through decorations are correctly
|
||||
“lifted” to paint over selected text.
|
||||
|
||||
Chromium fails this test before /c/2902289.
|
||||
*/
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: currentColor solid line-through;
|
||||
}
|
||||
main::selection {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if all of the text below is decorated with a line-through.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 1);
|
||||
range.setEnd(target.childNodes[0], 4);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
main {
|
||||
font: 7em Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
main .green {
|
||||
text-decoration: 0.125em green solid line-through;
|
||||
}
|
||||
main .recolor {
|
||||
text-decoration: 0.125em currentColor solid line-through;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the line-through decoration has two green ends.
|
||||
<main class="highlight_reftest"><span class="green">p</span><span class="recolor">ppp</span><span class="green">p</span></main>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
|
||||
<link rel="match" href="selection-decoration-p3-ref.html">
|
||||
<meta name="assert" value="originating decorations on unselected parts are in originating text-decoration-color, even when some of the text is selected">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
/*
|
||||
This test verifies that the originating decoration is not
|
||||
recolored in the unselected parts.
|
||||
|
||||
Chromium fails this test before /c/2903387.
|
||||
*/
|
||||
main {
|
||||
font: 7em Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: 0.125em green solid line-through;
|
||||
}
|
||||
main::selection {
|
||||
background: transparent;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the line-through decoration has two green ends.
|
||||
<main class="highlight_reftest">ppppp</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 1);
|
||||
range.setEnd(target.childNodes[0], 4);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: 0.125em currentColor solid underline;
|
||||
/* try to keep decoration between ascent and baseline */
|
||||
text-underline-offset: -0.5em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a solid line through the “O” below.
|
||||
<main class="highlight_reftest">O</main>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
|
||||
<link rel="match" href="selection-decoration-p4-ref.html">
|
||||
<meta name="assert" value="originating decorations on selected parts are painted over ::selection background">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
/*
|
||||
This test verifies that originating decorations are correctly
|
||||
“lifted” to paint over the ::selection background.
|
||||
|
||||
Chromium fails this test before /c/2902289.
|
||||
*/
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: 0.125em currentColor solid underline;
|
||||
/* try to keep decoration between ascent and baseline */
|
||||
text-underline-offset: -0.5em;
|
||||
}
|
||||
main::selection {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a solid line through the “O” below.
|
||||
<main class="highlight_reftest">O</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 0);
|
||||
range.setEnd(target.childNodes[0], 1);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -12,6 +12,7 @@
|
|||
<meta content="may" name="flags">
|
||||
<meta name="assert" content="This test verifies that intercharacter spacing may be part of the overlay area. When intercharacter spacing is part of the overlay area, then it belongs to the innermost element which contains both characters and which contains such spacing when both characters are selected. In this test, the 'c' and the 't' characters and the space between these characters belong to the same element. Therefore, the 'c' character, the 't' character and the space between these characters have the same orange background color painting.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -46,4 +47,4 @@
|
|||
|
||||
<p>Test passes if the background of characters "c" and "t" is orange (and only those 2 characters) and if the space between those 2 characters is also orange.
|
||||
|
||||
<div id="test">Sele<span>ct</span>ed</div>
|
||||
<div id="test" class="highlight_reftest">Sele<span>ct</span>ed</div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
<meta content="may" name="flags">
|
||||
<meta name="assert" content="In this test, the 'c' and the 't' characters share the same level in the containment hierarchy but the space between these characters does not. Therefore, only the 'c' and the 't' characters themselves have an orange background color painting.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -46,4 +47,4 @@
|
|||
|
||||
<p>Test passes if the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange).
|
||||
|
||||
<div id="test">Sele<span>c</span> <span>t</span>ed</div>
|
||||
<div id="test" class="highlight_reftest">Sele<span>c</span> <span>t</span>ed</div>
|
||||
|
|
|
|||
|
|
@ -13,21 +13,7 @@
|
|||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, the div::selection pseudo-element must be drawn over the div::grammar-error overlay.">
|
||||
|
||||
<!--
|
||||
|
||||
The initial version of this test was relying on color
|
||||
composition and was predicting a lime-green-ish (#7FBF80:
|
||||
slightly desaturated lime green) background color for "thing".
|
||||
|
||||
"#7fbf80 color description : Slightly desaturated lime green"
|
||||
https://www.colorhexa.com/7fbf80
|
||||
|
||||
This test does not rely on color composition but the
|
||||
test nevertheless verifies the ::selection overlay drawn
|
||||
over the ::grammar-error overlay.
|
||||
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
|
|
@ -74,7 +60,7 @@
|
|||
• spellcheck tries to enable spelling and grammar checking (subject to user preferences)
|
||||
• lang tries to guide the UA towards checking the text in English (but the UA may ignore this)
|
||||
-->
|
||||
<div id="test" contenteditable="true" spellcheck="true" lang="en">The fox jumps over the dog.the fox jumps over the dog.</div>
|
||||
<div id="test" class="highlight_reftest" contenteditable="true" spellcheck="true" lang="en">Many thing can happen.</div>
|
||||
|
||||
<script>
|
||||
const test = document.querySelector("#test");
|
||||
|
|
|
|||
|
|
@ -13,43 +13,11 @@
|
|||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, the div::selection pseudo-element must be drawn over the div::spelling-error overlay.">
|
||||
|
||||
<!--
|
||||
|
||||
The initial version of this test was relying on color
|
||||
composition and was predicting a lime-green-ish (#7FBF80:
|
||||
slightly desaturated lime green) background color for "Txet".
|
||||
|
||||
"#7fbf80 color description : Slightly desaturated lime green"
|
||||
https://www.colorhexa.com/7fbf80
|
||||
|
||||
This test does not rely on color composition but the
|
||||
test nevertheless verifies the ::selection overlay drawn
|
||||
over the ::grammar-error overlay.
|
||||
|
||||
Chromium 83+'s selection highlight will vertically
|
||||
extend to line box top and bottom... which is
|
||||
under an eventual discussion in
|
||||
https://github.com/w3c/csswg-drafts/issues/5395
|
||||
One easy way to work around this issue
|
||||
would be to set 'line-height' to '1' instead of
|
||||
'90px'.
|
||||
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 60px;
|
||||
line-height: 1;
|
||||
/*
|
||||
We deliberately set line-height to 1 in order
|
||||
to avoid/work around a possible difference
|
||||
of rendering of highlight overlay among browsers.
|
||||
In Chrome 80+, the selection highlight
|
||||
overlay will extent vertically to include line
|
||||
box top and line box bottom. This is not
|
||||
the case in Firefox 68+.
|
||||
*/
|
||||
}
|
||||
|
||||
div::selection
|
||||
|
|
@ -91,7 +59,7 @@
|
|||
• spellcheck tries to enable spelling and grammar checking (subject to user preferences)
|
||||
• lang tries to guide the UA towards checking the text in English (but the UA may ignore this)
|
||||
-->
|
||||
<div id="test" contenteditable="true" spellcheck="true" lang="en">Txet sample</div>
|
||||
<div id="test" class="highlight_reftest" contenteditable="true" spellcheck="true" lang="en">Txet sample</div>
|
||||
|
||||
<script>
|
||||
const test = document.querySelector("#test");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,68 @@
|
|||
/**
|
||||
* Container for the interesting part of a highlight reftest, to be
|
||||
* used on both the test page and any reference pages.
|
||||
*/
|
||||
.highlight_reftest {
|
||||
/*
|
||||
https://drafts.csswg.org/css-pseudo-4/#highlight-bounds
|
||||
For text, the corresponding overlay must cover at least
|
||||
the entire em box and may extend further above/below the
|
||||
em box to the line box edges.
|
||||
*/
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
/**
|
||||
* Container for layers. All text is transparent by default, and each direct
|
||||
* child creates a layer that overlaps any text content.
|
||||
*/
|
||||
.hrt_layers,
|
||||
.hrt_layers * {
|
||||
color: transparent;
|
||||
}
|
||||
.hrt_layers {
|
||||
position: relative;
|
||||
}
|
||||
.hrt_layers > * {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/**
|
||||
* Cover to clip text from the right. Usage:
|
||||
*
|
||||
* <div class="hrt_layers">
|
||||
* <div><!-- content to clip to “foo” from right --></div>
|
||||
* <div><span class="hrt_cover">bar</span>foobar</div>
|
||||
* foobar
|
||||
* </div>
|
||||
*/
|
||||
.hrt_cover {
|
||||
background: white;
|
||||
position: absolute;
|
||||
padding: 0.5em 0;
|
||||
top: -0.5em;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hider to clip text from the left. Usage:
|
||||
*
|
||||
* <div class="hrt_layers">
|
||||
* <div>foo<span class="hrt_hider">
|
||||
* <div><!-- content to clip to “bar” from left --></div>
|
||||
* bar
|
||||
* </span></div>
|
||||
* foobar
|
||||
* </div>
|
||||
*/
|
||||
.hrt_hider {
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
padding: 0.5em 0;
|
||||
top: -0.5em;
|
||||
}
|
||||
.hrt_hider > * {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
|
@ -1,6 +1,15 @@
|
|||
/**
|
||||
* Replaces the current selection (if any) with a new range, after
|
||||
* it’s configured by the given function.
|
||||
*
|
||||
* See also: selectNodeContents
|
||||
* Example:
|
||||
*
|
||||
* selectRangeWith(range => {
|
||||
* range.selectNodeContents(foo);
|
||||
* range.setStart(foo.childNodes[0], 3);
|
||||
* range.setEnd(foo.childNodes[0], 5);
|
||||
* });
|
||||
*/
|
||||
function selectRangeWith(fun) {
|
||||
const selection = getSelection();
|
||||
|
|
@ -37,17 +46,20 @@ function selectNodeContents(node) {
|
|||
}
|
||||
|
||||
/**
|
||||
* Tries to convince a UA with lazy spellcheck to check and mark the
|
||||
* contents of the given nodes (form fields or @contenteditables).
|
||||
* Tries to convince a UA with lazy spellcheck to check and highlight
|
||||
* the contents of the given nodes (form fields or @contenteditables).
|
||||
*
|
||||
* Both focus and selection can be used for this purpose, but only
|
||||
* focus works for @contenteditables.
|
||||
* Each node is focused then immediately unfocused. Both focus and
|
||||
* selection can be used for this purpose, but only focus works for
|
||||
* @contenteditables.
|
||||
*/
|
||||
function trySpellcheck(...nodes) {
|
||||
// This is inherently a flaky test risk, but Chromium (as of 87)
|
||||
// seems to cancel spellcheck on a node if it wasn’t the last one
|
||||
// focused for “long enough” (though immediate unfocus is ok).
|
||||
// setInterval(0) is usually not long enough.
|
||||
// Using requestAnimationFrame or setInterval(0) are usually not
|
||||
// long enough (see <https://bucket.daz.cat/work/igalia/0/0.html>
|
||||
// under “trySpellcheck strategy” for an example).
|
||||
const interval = setInterval(() => {
|
||||
if (nodes.length > 0) {
|
||||
const node = nodes.shift();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue