Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-15 18:35:33 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update web-platform-tests to revision 9ca57e052ba1b19fa3dd46c6aa656e8d529469a8

Browse source
This commit is contained in:
WPT Sync Bot 2020-09-12 08:20:19 +00:00
parent 68cb8f3d59
commit 75d6484415
1377 changed files with 31062 additions and 16983 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/wpt/web-platform-tests/css/css-pseudo/active-selection-031.html
View file

@ -15,7 +15,7 @@
{
color: red;
float: left;
font-size: 48px;
font-size: 32px;
margin-left: 16px;
}

11
tests/wpt/web-platform-tests/css/css-pseudo/file-chooser-button-001.tentative.html
View file

@ -1,11 +0,0 @@
<!doctype html>
<title>::file-chooser-button allows to customize the button in &lt;input type=file&gt;</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5049">
<link rel="mismatch" href="file-chooser-button-001-notref.html">
<style>
input::file-chooser-button {
background: green;
color: white;
}
</style>
<input type="file">

0
tests/wpt/web-platform-tests/css/css-pseudo/file-chooser-button-001-notref.html → tests/wpt/web-platform-tests/css/css-pseudo/file-selector-button-001-notref.html
View file

11
tests/wpt/web-platform-tests/css/css-pseudo/file-selector-button-001.tentative.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype html>
<title>::file-selector-button allows to customize the button in &lt;input type=file&gt;</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5049">
<link rel="mismatch" href="file-selector-button-001-notref.html">
<style>
input::file-selector-button {
background: green;
color: white;
}
</style>
<input type="file">

4
tests/wpt/web-platform-tests/css/css-pseudo/file-chooser-button-display-toggle-crash.tentative.html → tests/wpt/web-platform-tests/css/css-pseudo/file-selector-button-display-toggle-crash.tentative.html
View file

@ -1,8 +1,8 @@
<!doctype html>
<title>Shouldn't assert when re-creating a ::file-chooser-button pseudo-element after it being display: none</title>
<title>Shouldn't assert when re-creating a ::file-selector-button pseudo-element after it being display: none</title>
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5049">
<style>
.tweak::file-chooser-button {
.tweak::file-selector-button {
display: none;
}
</style>

33
tests/wpt/web-platform-tests/css/css-pseudo/marker-content-023-ref.html Normal file
View file

@ -0,0 +1,33 @@
<!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">
<style>
.disc {
list-style-type: disc;
}
.decimal {
list-style-type: decimal;
}
.string {
list-style-type: "3. ";
}
.content::marker {
content: "4. ";
}
.rtl-marker ::marker {
direction: rtl;
}
</style>
<ol>
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>
<ol class="rtl-marker">
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>

46
tests/wpt/web-platform-tests/css/css-pseudo/marker-content-023.html Normal file
View file

@ -0,0 +1,46 @@
<!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-023-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text/#text-indent-property">
<meta name="assert" content="Checks that 'text-indent' doesn't apply nor inherit to ::marker.">
<style>
li {
text-indent: 100px; /* Should not be inherited by ::marker */
}
::marker {
text-indent: 100px; /* Should have no effect */
}
li > div {
text-indent: 0;
}
.disc {
list-style-type: disc;
}
.decimal {
list-style-type: decimal;
}
.string {
list-style-type: "3. ";
}
.content::marker {
content: "4. ";
}
.rtl-marker ::marker {
direction: rtl;
}
</style>
<ol>
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>
<ol class="rtl-marker">
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>

7
tests/wpt/web-platform-tests/css/css-pseudo/marker-default-styles.html
View file

@ -11,7 +11,11 @@
.decimal { list-style-type: decimal }
.string { list-style-type: "string" }
.marker::marker { content: "marker" }
li { text-transform: lowercase }
li {
/* These inheritable properties should not be inherited by ::marker */
text-transform: lowercase;
text-indent: 1px;
}
</style>
<div id="log"></div>
<ul>
@ -32,6 +36,7 @@ const defaultStyles = [
["unicode-bidi", "isolate"],
["font-variant-numeric", "tabular-nums"],
["text-transform", "none"],
["text-indent", "0px"],
];
for (const target of document.querySelectorAll("li")) {
const cs = getComputedStyle(target, "::marker");

26
tests/wpt/web-platform-tests/css/css-pseudo/marker-hyphens-ref.html Normal file
View file

@ -0,0 +1,26 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
li {
width: 0;
list-style-type: none;
}
</style>
<ol>
<li>foo&shy;bar</li>
<li>foo&shy;bar</li>
</ol>
<ol>
<li>foo&shy;bar</li>
<li>foo&shy;bar</li>
</ol>
<ol>
<li>foobar</li>
<li>foobar</li>
</ol>
<ol>
<li>foobar</li>
<li>foobar</li>
</ol>

44
tests/wpt/web-platform-tests/css/css-pseudo/marker-hyphens.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'hyphens'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation">
<link rel="match" href="marker-hyphens-ref.html">
<meta name="assert" content="Checks that ::marker supports 'hyphens', both explicitly set or inherited from an ancestor">
<style>
li {
list-style-position: inside;
width: 0;
}
.hyphens-manual.explicit ::marker,
.hyphens-manual.inherit {
hyphens: manual;
}
.hyphens-none.explicit ::marker,
.hyphens-none.inherit {
hyphens: none;
}
.marker-string {
list-style-type: "foo\AD bar";
}
.marker-content::marker {
content: "foo\AD bar";
}
</style>
<ol class="hyphens-manual explicit">
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="hyphens-manual inherit">
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="hyphens-none explicit">
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="hyphens-none inherit">
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>

63
tests/wpt/web-platform-tests/css/css-pseudo/marker-letter-spacing-ref-001.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: "2 . \A0 ";
}
.marker-string {
list-style-type: "X p";
}
.marker-content::marker {
content: "X p p";
}
</style>
<div class="inside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>

63
tests/wpt/web-platform-tests/css/css-pseudo/marker-letter-spacing-ref-002.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: "2 . \A0 ";
}
.marker-string {
list-style-type: "X p ";
}
.marker-content::marker {
content: "X p p ";
}
</style>
<div class="inside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>

74
tests/wpt/web-platform-tests/css/css-pseudo/marker-letter-spacing.html Normal file
View file

@ -0,0 +1,74 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'letter-spacing'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property">
<!-- It's unclear whether letter-spacing should add trailing spacing (https://github.com/w3c/csswg-drafts/issues/1518).
The 1st reference assumes no trailing spacing, the 2nd one does. -->
<link rel="match" href="marker-letter-spacing-ref-001.html">
<link rel="match" href="marker-letter-spacing-ref-002.html">
<meta name="assert" content="Checks that ::marker supports 'letter-spacing', both explicitly set or inherited from an ancestor">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.letter-spacing.explicit ::marker,
.letter-spacing.inherit {
letter-spacing: 25px;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "Xp";
}
.marker-content::marker {
content: "Xpp";
}
</style>
<div class="inside">
<ol class="letter-spacing explicit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="letter-spacing inherit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol class="letter-spacing explicit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="letter-spacing inherit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>

23
tests/wpt/web-platform-tests/css/css-pseudo/marker-line-break-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
ul {
float: left;
width: 50px;
list-style-position: inside;
}
</style>
<ul>
<li><br>2.<br>ab<br>cd</li>
</ul>
<ul>
<li><br>2.<br>ab<br>cd</li>
</ul>
<ul>
<li><br>2<br>.<br>a<br>b<br>c<br>d</li>
</ul>
<ul>
<li><br>2<br>.<br>a<br>b<br>c<br>d</li>
</ul>

62
tests/wpt/web-platform-tests/css/css-pseudo/marker-line-break.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'line-break'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property">
<link rel="match" href="marker-line-break-ref.html">
<meta name="assert" content="Checks that ::marker supports 'line-break', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
}
li {
list-style-position: inside;
width: 0;
}
.line-break-strict.explicit ::marker,
.line-break-strict.inherit {
line-break: strict;
}
.line-break-anywhere.explicit ::marker,
.line-break-anywhere.inherit {
line-break: anywhere;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "ab";
}
.marker-content::marker {
content: "cd";
}
</style>
<ol class="line-break-strict explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="line-break-strict inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="line-break-anywhere explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="line-break-anywhere inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>

62
tests/wpt/web-platform-tests/css/css-pseudo/marker-overflow-wrap.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'overflow-wrap'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property">
<link rel="match" href="marker-line-break-ref.html">
<meta name="assert" content="Checks that ::marker supports 'overflow-wrap', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
}
li {
list-style-position: inside;
width: 0;
}
.overflow-wrap-normal.explicit ::marker,
.overflow-wrap-normal.inherit {
overflow-wrap: strict;
}
.overflow-wrap-anywhere.explicit ::marker,
.overflow-wrap-anywhere.inherit {
overflow-wrap: anywhere;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "ab";
}
.marker-content::marker {
content: "cd";
}
</style>
<ol class="overflow-wrap-normal explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="overflow-wrap-normal inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="overflow-wrap-anywhere explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="overflow-wrap-anywhere inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>

49
tests/wpt/web-platform-tests/css/css-pseudo/marker-tab-size-ref.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.marker-string {
list-style-type: "X p";
}
.marker-content::marker {
content: "X p p";
}
</style>
<div class="inside">
<ol>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>

57
tests/wpt/web-platform-tests/css/css-pseudo/marker-tab-size.html Normal file
View file

@ -0,0 +1,57 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'tab-size'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-tab-size">
<link rel="match" href="marker-tab-size-ref.html">
<meta name="assert" content="Checks that ::marker supports 'tab-size', both explicitly set or inherited from an ancestor">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.tab-size.explicit ::marker,
.tab-size.inherit {
tab-size: 1;
}
.marker-string {
list-style-type: "X\9p";
}
.marker-content::marker {
content: "X\9p\9p";
}
</style>
<div class="inside">
<ol class="tab-size explicit">
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="tab-size inherit">
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol class="tab-size explicit">
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="tab-size inherit">
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>

58
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-align-ref.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reference: ::marker pseudo elements styled with 'text-align' property</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<style>
li {
/* Should not be inherited by ::marker */
text-align: end;
text-align-all: end;
text-align-last: end;
}
::marker {
/* Should have no effect */
text-align: end;
text-align-all: end;
text-align-last: end;
}
li > div {
text-align: initial;
text-align-all: initial;
text-align-last: initial;
}
ol {
padding-left: 13ch;
}
li {
line-height: 16px;
height: 32px;
white-space: pre;
}
.disc {
list-style-type: disc;
}
.decimal {
list-style-type: decimal;
}
.string {
list-style-type: "[m]\a longtext";
}
.content::marker {
content: "[m]\a longtext";
}
.rtl-marker ::marker {
direction: rtl;
}
</style>
<ol>
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>
<ol class="rtl-marker">
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>

62
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-align.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Test: ::marker pseudo elements styled with 'text-align' property</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
<link rel="match" href="marker-text-align-ref.html">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property">
<meta name="assert" content="Checks that 'text-align' doesn't apply nor inherit to ::marker.">
<style>
li {
/* Should not be inherited by ::marker */
text-align: start;
text-align-all: start;
text-align-last: start;
}
::marker {
/* Should have no effect */
text-align: start;
text-align-all: start;
text-align-last: start;
}
li > div {
text-align: initial;
text-align-all: initial;
text-align-last: initial;
}
ol {
padding-left: 13ch;
}
li {
line-height: 16px;
height: 32px;
white-space: pre;
}
.disc {
list-style-type: disc;
}
.decimal {
list-style-type: decimal;
}
.string {
list-style-type: "[m]\a longtext";
}
.content::marker {
content: "[m]\a longtext";
}
.rtl-marker ::marker {
direction: rtl;
}
</style>
<ol>
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>
<ol class="rtl-marker">
<li class="disc"><div>disc</div></li>
<li class="decimal"><div>decimal</div></li>
<li class="string"><div>string</div></li>
<li class="content"><div>content</div></li>
</ol>

39
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-decoration-skip-ink-ref.html Normal file
View file

@ -0,0 +1,39 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
ol {
float: left;
width: 50px;
list-style: none;
text-decoration: underline;
}
.text-decoration-skip-ink-auto {
text-decoration-skip-ink: auto;
}
.text-decoration-skip-ink-none {
text-decoration-skip-ink: none;
}
</style>
<ol class="text-decoration-skip-ink-auto">
<li>g. </li>
<li>p. </li>
<li>q. </li>
</ol>
<ol class="text-decoration-skip-ink-auto">
<li>g. </li>
<li>p. </li>
<li>q. </li>
</ol>
<ol class="text-decoration-skip-ink-none">
<li>g. </li>
<li>p. </li>
<li>q. </li>
</ol>
<ol class="text-decoration-skip-ink-none">
<li>g. </li>
<li>p. </li>
<li>q. </li>
</ol>

53
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-decoration-skip-ink.html Normal file
View file

@ -0,0 +1,53 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'text-decoration-skip-ink'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property">
<link rel="match" href="marker-text-decoration-skip-ink-ref.html">
<meta name="assert" content="Checks that ::marker supports 'text-decoration-skip-ink', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
list-style-position: inside;
text-decoration: underline;
}
.text-decoration-skip-ink-auto.explicit ::marker,
.text-decoration-skip-ink-auto.inherit {
text-decoration-skip-ink: auto;
}
.text-decoration-skip-ink-none.explicit ::marker,
.text-decoration-skip-ink-none.inherit {
text-decoration-skip-ink: none;
}
.marker-alpha {
list-style-type: lower-alpha;
}
.marker-string {
list-style-type: "p. ";
}
.marker-content::marker {
content: "q. ";
}
</style>
<ol class="text-decoration-skip-ink-auto explicit">
<li class="marker-alpha" value="7"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-decoration-skip-ink-auto inherit">
<li class="marker-alpha" value="7"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-decoration-skip-ink-none explicit">
<li class="marker-alpha" value="7"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-decoration-skip-ink-none inherit">
<li class="marker-alpha" value="7"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>

44
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-emphasis-ref.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
ol {
float: left;
width: 50px;
list-style: none;
}
.text-emphasis-shorthand {
-webkit-text-emphasis: circle green;
text-emphasis: circle green;
}
.text-emphasis-longhands {
-webkit-text-emphasis-style: circle;
-webkit-text-emphasis-color: green;
-webkit-text-emphasis-position: under right;
text-emphasis-style: circle;
text-emphasis-color: green;
text-emphasis-position: under right;
}
</style>
<ol class="text-emphasis-shorthand">
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
<ol class="text-emphasis-shorthand">
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
<ol class="text-emphasis-longhands">
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
<ol class="text-emphasis-longhands">
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>

58
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-emphasis.html Normal file
View file

@ -0,0 +1,58 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'text-emphasis'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#emphasis-marks">
<link rel="match" href="marker-text-emphasis-ref.html">
<meta name="assert" content="Checks that ::marker supports 'text-emphasis', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
list-style-position: inside;
}
.text-emphasis-shorthand.explicit ::marker,
.text-emphasis-shorthand.inherit {
-webkit-text-emphasis: circle green;
text-emphasis: circle green;
}
.text-emphasis-longhands.explicit ::marker,
.text-emphasis-longhands.inherit {
-webkit-text-emphasis-style: circle;
-webkit-text-emphasis-color: green;
-webkit-text-emphasis-position: under right;
text-emphasis-style: circle;
text-emphasis-color: green;
text-emphasis-position: under right;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "2. ";
}
.marker-content::marker {
content: "3. ";
}
</style>
<ol class="text-emphasis-shorthand explicit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-emphasis-shorthand inherit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-emphasis-longhands explicit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-emphasis-longhands inherit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>

23
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-shadow-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
ol {
float: left;
width: 50px;
list-style: none;
text-shadow: #0f0 1px 2px 3px;
}
</style>
<ol>
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>
<ol>
<li>1. </li>
<li>2. </li>
<li>3. </li>
</ol>

38
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-shadow.html Normal file
View file

@ -0,0 +1,38 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'text-shadow'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-shadow-property">
<link rel="match" href="marker-text-shadow-ref.html">
<meta name="assert" content="Checks that ::marker supports 'text-shadow', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
list-style-position: inside;
}
.text-shadow.explicit ::marker,
.text-shadow.inherit {
text-shadow: #0f0 1px 2px 3px;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "2. ";
}
.marker-content::marker {
content: "3. ";
}
</style>
<ol class="text-shadow explicit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="text-shadow inherit">
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>

23
tests/wpt/web-platform-tests/css/css-pseudo/marker-word-break-ref.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
ul {
float: left;
width: 50px;
list-style-position: inside;
}
</style>
<ul>
<li><br>2.<br>ab<br>cd</li>
</ul>
<ul>
<li><br>2.<br>ab<br>cd</li>
</ul>
<ul>
<li><br>2.<br>a<br>b<br>c<br>d</li>
</ul>
<ul>
<li><br>2.<br>a<br>b<br>c<br>d</li>
</ul>

62
tests/wpt/web-platform-tests/css/css-pseudo/marker-word-break.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'word-break'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property">
<link rel="match" href="marker-word-break-ref.html">
<meta name="assert" content="Checks that ::marker supports 'word-break', both explicitly set or inherited from an ancestor">
<style>
ol {
float: left;
width: 50px;
}
li {
list-style-position: inside;
width: 0;
}
.word-break-keep-all.explicit ::marker,
.word-break-keep-all.inherit {
word-break: keep-all;
}
.word-break-break-all.explicit ::marker,
.word-break-break-all.inherit {
word-break: break-all;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "ab";
}
.marker-content::marker {
content: "cd";
}
</style>
<ol class="word-break-keep-all explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="word-break-keep-all inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="word-break-break-all explicit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>
<ol class="word-break-break-all inherit">
<li class="marker-disc"></li>
<li class="marker-decimal"></li>
<li class="marker-string"></li>
<li class="marker-content"></li>
</ol>

63
tests/wpt/web-platform-tests/css/css-pseudo/marker-word-spacing-ref.html Normal file
View file

@ -0,0 +1,63 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: "2.\A0 \A0 ";
}
.marker-string {
list-style-type: "X\A0 \A0 p";
}
.marker-content::marker {
content: "Xp\A0 \A0 p";
}
</style>
<div class="inside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol>
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>

71
tests/wpt/web-platform-tests/css/css-pseudo/marker-word-spacing.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker supports 'word-spacing'</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property">
<link rel="match" href="marker-word-spacing-ref.html">
<meta name="assert" content="Checks that ::marker supports 'word-spacing', both explicitly set or inherited from an ancestor">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
div {
float: left;
font: 25px/1 Ahem;
}
.inside {
list-style-position: inside;
width: 250px;
}
.outside {
list-style-position: outside;
width: 100px;
margin-left: 150px;
}
ol {
padding: 0;
}
.word-spacing.explicit ::marker,
.word-spacing.inherit {
word-spacing: 25px;
}
.marker-disc {
list-style-type: disc;
}
.marker-decimal {
list-style-type: decimal;
}
.marker-string {
list-style-type: "X p";
}
.marker-content::marker {
content: "Xp p";
}
</style>
<div class="inside">
<ol class="word-spacing explicit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="word-spacing inherit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>
<div class="outside">
<ol class="word-spacing explicit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
<ol class="word-spacing inherit">
<li class="marker-disc">É</li>
<li class="marker-decimal">É</li>
<li class="marker-string">É</li>
<li class="marker-content">É</li>
</ol>
</div>

82
tests/wpt/web-platform-tests/css/css-pseudo/parsing/marker-supported-properties-in-animation.html
View file

@ -158,13 +158,93 @@ const interpolationTests = [
midPoint: "\"bar\"",
},
// ::marker supports `text-transform`
// ::marker supports text properties.
{
property: "hyphens",
from: "manual",
to: "none",
midPoint: "none",
},
{
property: "letter-spacing",
from: "0px",
to: "20px",
midPoint: "10px",
},
{
property: "line-break",
from: "strict",
to: "anywhere",
midPoint: "anywhere",
},
{
property: "overflow-wrap",
from: "break-word",
to: "anywhere",
midPoint: "anywhere",
},
{
property: "tab-size",
from: "0px",
to: "20px",
midPoint: "10px",
},
{
property: "text-transform",
from: "lowercase",
to: "uppercase",
midPoint: "uppercase",
},
{
property: "word-break",
from: "break-all",
to: "break-word",
midPoint: "break-word",
},
{
property: "word-spacing",
from: "0px",
to: "20px",
midPoint: "10px",
},
// ::marker supports inherited text decoration properties.
{
property: "text-decoration-skip-ink",
from: "auto",
to: "none",
midPoint: "none",
},
{
property: "text-emphasis",
from: "dot rgb(0, 200, 0)",
to: "triangle rgb(100, 0, 200)",
midPoint: "triangle rgb(50, 100, 100)",
},
{
property: "text-emphasis-color",
from: "rgb(0, 200, 0)",
to: "rgb(100, 0, 200)",
midPoint: "rgb(50, 100, 100)",
},
{
property: "text-emphasis-position",
from: "over right",
to: "under left",
midPoint: "under left",
},
{
property: "text-emphasis-style",
from: "dot",
to: "triangle",
midPoint: "triangle",
},
{
property: "text-shadow",
from: "rgb(0, 200, 0) 1px 2px 3px",
to: "rgb(100, 0, 200) 3px 2px 1px",
midPoint: "rgb(50, 100, 100) 2px 2px 2px",
},
// ::marker does NOT support layout properties
{

17
tests/wpt/web-platform-tests/css/css-pseudo/parsing/marker-supported-properties.html
View file

@ -63,8 +63,23 @@ test_pseudo_computed_value("::marker", "transition-duration", "2s");
test_pseudo_computed_value("::marker", "transition-property", "display");
test_pseudo_computed_value("::marker", "transition-timing-function", "linear");
// ::marker supports `text-transform`
// ::marker supports text properties.
test_pseudo_computed_value("::marker", "hyphens", "none");
test_pseudo_computed_value("::marker", "letter-spacing", "10px");
test_pseudo_computed_value("::marker", "line-break", "anywhere");
test_pseudo_computed_value("::marker", "overflow-wrap", "anywhere");
test_pseudo_computed_value("::marker", "tab-size", "10px");
test_pseudo_computed_value("::marker", "text-transform", "uppercase");
test_pseudo_computed_value("::marker", "word-break", "break-word");
test_pseudo_computed_value("::marker", "word-spacing", "10px");
// ::marker supports inherited text decoration properties.
test_pseudo_computed_value("::marker", "text-decoration-skip-ink", "none");
test_pseudo_computed_value("::marker", "text-emphasis", "dot rgb(0, 255, 0)");
test_pseudo_computed_value("::marker", "text-emphasis-color", "rgb(0, 255, 0)");
test_pseudo_computed_value("::marker", "text-emphasis-position", "under left");
test_pseudo_computed_value("::marker", "text-emphasis-style", "dot");
test_pseudo_computed_value("::marker", "text-shadow", "rgb(0, 255, 0) 1px 2px 3px");
// ::marker does NOT support layout properties
test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]);

10
tests/wpt/web-platform-tests/css/css-pseudo/placeholder-input-dynamic-crash.html Normal file
View file

@ -0,0 +1,10 @@
<!doctype html>
<title>Dynamic placeholder attribute changes after addition shouldn't crash</title>
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1662483">
<input type="text">
<script>
let input = document.querySelector("input");
input.getBoundingClientRect();
input.placeholder = "Foo";
input.placeholder = "Bar";
</script>

2
tests/wpt/web-platform-tests/css/css-pseudo/reference/active-selection-031-ref.html
View file

@ -12,7 +12,7 @@
background-color: yellow;
color: green;
float: left;
font-size: 48px;
font-size: 32px;
margin-left: 16px;
}

71
tests/wpt/web-platform-tests/css/css-pseudo/reference/selection-overlay-and-grammar-001-ref.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div
{
font-size: 60px;
line-height: 90px;
}
div#overlapped-line
{
color: transparent;
margin-bottom: -90px;
}
span#single-word
{
background-color: yellow;
}
span#overlapping-line
{
background-color: rgba(0%, 50%, 100%, 0.5);
/*
a very lite blue color
according to
https://www.colorhexa.com/7fbfff
*/
color: yellow;
}
</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
<ul>
<li>if each glyph of the sentence is yellow
<li>if "thing" has a desaturated lime green background
<li>if the other words have a very lite blue background and
<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>

62
tests/wpt/web-platform-tests/css/css-pseudo/reference/selection-overlay-and-spelling-001-ref.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
<style>
div
{
font-size: 60px;
line-height: 1;
}
span#outer
{
color: transparent;
}
span#inner
{
background-color: yellow;
}
div#overlapping-line
{
margin-top: -60px; /* -1lh unfortunately is not implemented */
}
div#overlapping-line > span
{
background-color: rgba(0%, 50%, 100%, 0.5);
/*
a very lite blue color
according to
https://www.colorhexa.com/7fbfff
*/
color: yellow;
}
</style>
<p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent.
<p>Test passes
<ul>
<li>if each glyph of "Txet sample" is yellow
<li>if "Txet" has a desaturated lime green background
<li>if " sample" has a very lite blue background and
<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>

90
tests/wpt/web-platform-tests/css/css-pseudo/selection-overlay-and-grammar-001.html Normal file
View file

@ -0,0 +1,90 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>CSS Pseudo-Elements Test: ::selection overlay drawn over the ::grammar-error overlay</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="match" href="reference/selection-overlay-and-grammar-001-ref.html">
<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.
-->
<style>
div
{
font-size: 60px;
line-height: 90px;
}
div::selection
{
background-color: rgba(0%, 50%, 100%, 0.5);
/*
a very lite blue color
according to
https://www.colorhexa.com/7fbfff
*/
color: yellow;
}
div::grammar-error
{
background-color: yellow;
color: red;
}
</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.getElementById("test").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
<ul>
<li>if each glyph of the sentence is yellow
<li>if "thing" has a desaturated lime green background
<li>if the other words have a very lite blue background and
<li>if there is no red.
</ul>
<div contenteditable="true" id="test">Many thing can happen.</div>

102
tests/wpt/web-platform-tests/css/css-pseudo/selection-overlay-and-spelling-001.html Normal file
View file

@ -0,0 +1,102 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<title>CSS Pseudo-Elements Test: ::selection overlay drawn over the ::spelling-error overlay</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="match" href="reference/selection-overlay-and-spelling-001-ref.html">
<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'.
-->
<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
{
background-color: rgba(0%, 50%, 100%, 0.5);
/*
a very lite blue color
according to
https://www.colorhexa.com/7fbfff
*/
color: yellow;
}
div::spelling-error
{
background-color: yellow;
color: red;
}
</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 */
}
</script>
<body onload="startTest();">
<p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent.
<p>Test passes
<ul>
<li>if each glyph of "Txet sample" is yellow
<li>if "Txet" has a desaturated lime green background
<li>if " sample" has a very lite blue background and
<li>if there is no red.
</ul>
<!--
The bad spelling of Txet is intentional and part of this test
-->
<div id="test">Txet sample</div>