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

Update web-platform-tests to revision b'b728032f59a396243864b0f8584e7211e3632005'

Browse source
This commit is contained in:
WPT Sync Bot 2022-11-10 01:22:36 +00:00
parent ace9b32b1c
commit df68c4e5d1
15632 changed files with 514865 additions and 155000 deletions
Download patch file Download diff file Expand all files Collapse all files

2
tests/wpt/web-platform-tests/css/css-pseudo/backdrop-animate-002.html
View file

@ -4,6 +4,8 @@
<link rel="help" href="https://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element">
<link rel="match" href="backdrop-animate-002-ref.html">
<dialog id="target">Dialog contents</dialog>
<!-- This test fails on WPT.fyi with off-by-one on the green background (Chrome-only): -->
<meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-472272">
<script>
const target = document.getElementById("target");
target.showModal();

21
tests/wpt/web-platform-tests/css/css-pseudo/chrome-bug-1299142-crash.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1299142">
<style>
#id160::first-letter{
color:blue;
}
</style>
<div style="columns:10;">
<div style="display:flex;"></div>
<div style="display:grid;"></div>
<div style="display:table;"></div>
<math id="id160" style="display:list-item;">
<form>
f
</form>
</math>
</div>
<script>
document.execCommand("SelectAll");
</script>

21
tests/wpt/web-platform-tests/css/css-pseudo/chrome-first-letter-inside-replaced-crash.html Normal file
View file

@ -0,0 +1,21 @@
<!DOCTYPE html>
<title>Chrome issue 1370386</title>
<link rel="help" href="https://crbug.com/1370386">
<style>
#fl::first-letter {
float: right;
}
</style>
<body>
<div id="outer">
<div style="display:table-column;float:left">
<span id="fl" style="display:inline-block">x</span>
</div>
</div>
</body>
<script>
document.body.offsetTop;
outer.style.content = "url(data:text/plain,x)";
fl.firstChild.remove();
document.body.offsetTop;
</script>

80
tests/wpt/web-platform-tests/css/css-pseudo/dir-pseudo-on-bdi-element.html Normal file
View file

@ -0,0 +1,80 @@
<!DOCTYPE html>
<html>
<head>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<link rel="help" href="https://html.spec.whatwg.org/multipage/dom.html#the-directionality">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>
test(() => {
const bdi = document.createElement('bdi');
assert_true(bdi.matches(':dir(ltr)'));
assert_false(bdi.matches(':dir(rtl)'));
bdi.textContent = '\u05EA';
assert_false(bdi.matches(':dir(ltr)'));
assert_true(bdi.matches(':dir(rtl)'));
}, 'bdi element without dir content attribute');
test(() => {
const bdi = document.createElement('bdi');
bdi.setAttribute('dir', 'foo');
assert_true(bdi.matches(':dir(ltr)'));
assert_false(bdi.matches(':dir(rtl)'));
bdi.textContent = '\u05EA';
assert_false(bdi.matches(':dir(ltr)'));
assert_true(bdi.matches(':dir(rtl)'));
}, 'bdi element with invalid dir content attribute');
test(() => {
const bdi = document.createElement('bdi');
bdi.setAttribute('dir', 'auto');
assert_true(bdi.matches(':dir(ltr)'));
assert_false(bdi.matches(':dir(rtl)'));
bdi.textContent = '\u05EA';
assert_false(bdi.matches(':dir(ltr)'));
assert_true(bdi.matches(':dir(rtl)'));
bdi.setAttribute('dir', 'AUTO');
assert_false(bdi.matches(':dir(ltr)'));
assert_true(bdi.matches(':dir(rtl)'));
}, 'bdi element with dir=auto content attribute');
test(() => {
const bdi = document.createElement('bdi');
bdi.setAttribute('dir', 'ltr');
assert_true(bdi.matches(':dir(ltr)'));
assert_false(bdi.matches(':dir(rtl)'));
bdi.setAttribute('dir', 'LTR');
assert_true(bdi.matches(':dir(ltr)'));
assert_false(bdi.matches(':dir(rtl)'));
bdi.textContent = '\u05EA';
assert_true(bdi.matches(':dir(ltr)'));
assert_false(bdi.matches(':dir(rtl)'));
}, 'bdi element with dir=ltr content attribute');
test(() => {
const bdi = document.createElement('bdi');
bdi.setAttribute('dir', 'rtl');
assert_false(bdi.matches(':dir(ltr)'));
assert_true(bdi.matches(':dir(rtl)'));
bdi.setAttribute('dir', 'RTL');
assert_false(bdi.matches(':dir(ltr)'));
assert_true(bdi.matches(':dir(rtl)'));
bdi.textContent = '\u05EA';
assert_false(bdi.matches(':dir(ltr)'));
assert_true(bdi.matches(':dir(rtl)'));
}, 'bdi element with dir=rtl content attribute');
</script>
</body>
</html>

160
tests/wpt/web-platform-tests/css/css-pseudo/dir-pseudo-on-input-element.html Normal file
View file

@ -0,0 +1,160 @@
<!DOCTYPE html>
<html>
<head>
<meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org">
<link rel="help" href="https://html.spec.whatwg.org/multipage/dom.html#the-directionality">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
</head>
<body>
<script>
test(() => {
const input = document.createElement('input');
input.type = 'tel';
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'foo');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'rtl');
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'RTL');
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'ltr');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'LTR');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'auto');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.value = '\u05EA';
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'AUTO');
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.removeAttribute('dir');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
}, 'input element whose type attribute is in the telephone state');
test(() => {
const input = document.createElement('input');
input.type = 'tel';
const container = document.createElement('div');
container.setAttribute('dir', 'rtl');
container.appendChild(input);
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
}, 'input element whose type attribute is in the telephone state in a RTL block');
for (let type of ['text', 'search', 'url', 'email']) {
test(() => {
const input = document.createElement('input');
input.type = type;
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'foo');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'rtl');
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'RTL');
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'ltr');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'LTR');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'auto');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.value = '\u05EA';
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'AUTO');
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'))
input.removeAttribute('dir');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
}, `input element whose type attribute is in the ${type} state`);
}
for (let type of ['password', 'date', 'time', 'number', 'range', 'color',
'checkbox', 'radio', 'submit', 'image', 'reset', 'button']) {
test(() => {
const input = document.createElement('input');
input.type = type;
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'foo');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'rtl');
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'RTL');
assert_false(input.matches(':dir(ltr)'));
assert_true(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'ltr');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'LTR');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'auto');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.value = '\u05EA';
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
input.setAttribute('dir', 'AUTO');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'))
input.removeAttribute('dir');
assert_true(input.matches(':dir(ltr)'));
assert_false(input.matches(':dir(rtl)'));
}, `input element whose type attribute is in the ${type} state`);
}
</script>
</body>
</html>

3
tests/wpt/web-platform-tests/css/css-pseudo/first-line-green-ref.html Normal file
View file

@ -0,0 +1,3 @@
<!doctype html>
<title>CSS Test Reference</title>
<div style="color:green">This text should be green.</div>

14
tests/wpt/web-platform-tests/css/css-pseudo/first-line-nested-gcs.html Normal file
View file

@ -0,0 +1,14 @@
<!doctype html>
<title>CSS Pseudo Test: Query ::first-line computed style before outer block ::first-line matches</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo">
<link rel="match" href="first-line-green-ref.html">
<style>
#outer::first-line { color: green }
</style>
<div id="outer">
<div id="inner"></div>
</div>
<script>
getComputedStyle(inner, "::first-line").color;
inner.appendChild(document.createTextNode("This text should be green."));
</script>

24
tests/wpt/web-platform-tests/css/css-pseudo/highlight-cascade-005-ref.html Normal file
View file

@ -0,0 +1,24 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</title>
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
<script src="support/selections.js"></script>
<link rel="stylesheet" href="support/highlights.css">
<style>
nav::selection,
span::selection,
b::selection,
aside::selection {
background-color: green;
color: white;
}
main::selection,
i::selection {
background-color: green;
color: yellow;
}
</style>
<nav class="highlight_reftest">white</nav>
<main class="highlight_reftest">yellow <span>white <b>white</b></span></main>
<aside class="highlight_reftest">white <i>yellow</i></aside>
<script>selectNodeContents(document.body);</script>

23
tests/wpt/web-platform-tests/css/css-pseudo/highlight-cascade-005.html Normal file
View file

@ -0,0 +1,23 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</title>
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
<link rel="match" href="highlight-cascade-005-ref.html">
<meta name="assert" content="This test verifies that, given both universal and non-universal ::selection rules, the subject of the non-universal rule has styles from both rules with the non-universal styles overriding the universal styles (due to the cascade), its descendants have styles from both rules with the universal styles overriding the non-universal styles (due to highlight inheritance), and its siblings have the universal styles only.">
<script src="support/selections.js"></script>
<link rel="stylesheet" href="support/highlights.css">
<style>
/* * (universal) */::selection {
background-color: green;
color: white;
}
main::selection,
aside ::selection {
color: yellow;
}
</style>
<nav class="highlight_reftest">white</nav>
<main class="highlight_reftest">yellow <span>white <b>white</b></span></main>
<aside class="highlight_reftest">white <i>yellow</i></aside>
<script>selectNodeContents(document.body);</script>

18
tests/wpt/web-platform-tests/css/css-pseudo/highlight-cascade-006-ref.xhtml Normal file
View file

@ -0,0 +1,18 @@
<?xml version="1.0"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8"/>
<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and namespace-universal rules</title>
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"/>
<script src="support/selections.js"></script>
<style>
main * { all: initial; display: block; }
::selection { color: green; }
</style>
</head><body>
<main xmlns:other="http://example.org/other">
<div class="red"><span class="bar"><other:a>green</other:a></span></div>
<div class="red"><empty xmlns=""><other:b>green</other:b></empty></div>
<div class="red"><foo xmlns="http://example.org/foo"><other:c>green</other:c></foo></div>
<div class="red"><default xmlns="http://example.org/default"><other:d>green</other:d></default></div>
</main>
<script>selectNodeContents(document.body);</script>
</body></html>

34
tests/wpt/web-platform-tests/css/css-pseudo/highlight-cascade-006.xhtml Normal file
View file

@ -0,0 +1,34 @@
<?xml version="1.0"?><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta charset="utf-8"/>
<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and namespace-universal rules</title>
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade"/>
<link rel="match" href="highlight-cascade-006-ref.xhtml"/>
<meta name="assert" content="This test verifies that, given both universal ::selection rules and ::selection rules that are actually non-universal due to an explicit namespace prefix or default @namespace rule, the non-universal rules are not erroneously treated as universal."/>
<script src="support/selections.js"></script>
<style>
main * { all: initial; display: block; }
::selection { color: green; } /* 1. universal (* means *|* if there is no default @namespace) */
.red::selection { color: red; } /* 2. not universal; matches only .red */
</style>
<style>
@namespace "http://example.org/default";
@namespace foo "http://example.org/foo";
*|*.bar::selection { color: red; } /* 3. not universal; matches only .bar */
|*::selection { color: red; } /* 4. not universal; matches only no/empty xmlns */
foo|*::selection { color: red; } /* 5. not universal; matches only xmlns http://example.org/foo */
::selection { color: red; } /* 6. not universal; matches only xmlns http://example.org/default */
</style>
</head><body>
<main xmlns:other="http://example.org/other">
<!-- div.red is red (1+2), span.bar is red (1+3), other:a is green (1) -->
<div class="red"><span class="bar"><other:a>green</other:a></span></div>
<!-- div.red is red (1+2), empty is red (1+4), other:b is green (1) -->
<div class="red"><empty xmlns=""><other:b>green</other:b></empty></div>
<!-- div.red is red (1+2), foo is red (1+5), other:c is green (1) -->
<div class="red"><foo xmlns="http://example.org/foo"><other:c>green</other:c></foo></div>
<!-- div.red is red (1+2), default is red (1+6), other:d is green (1) -->
<div class="red"><default xmlns="http://example.org/default"><other:d>green</other:d></default></div>
</main>
<script>selectNodeContents(document.body);</script>
</body></html>

75
tests/wpt/web-platform-tests/css/css-pseudo/highlight-cascade-007.html Normal file
View file

@ -0,0 +1,75 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight cascade: inheritance with both universal and non-universal rules</title>
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7591">
<meta name="assert" content="This test verifies that non-applicable property declarations are ignored in highlight pseudos, that the computed values of ‘font-size’ and ‘line-height’ in highlight pseudos are taken from the originating element, and that ‘text-shadow’ in highlight pseudos respects these values when given ‘em’ and ‘lh’ units.">
<script src="support/selections.js"></script>
<link rel="stylesheet" href="support/highlights.css">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
main {
font-size: 12px;
line-height: 13px;
}
main span {
font-size: 18px;
line-height: 19px;
}
/* * (universal) */::selection {
font-size: 42px;
line-height: 43px;
}
main .M::selection {
text-shadow: green 1em 0;
}
main .W::selection {
text-shadow: green 0 1lh;
}
/* * (universal) */::selection {
text-decoration-thickness: 1em;
}
</style>
<main>
<div class="M"><div><span>M</span></div></div>
<div class="W"><div><span>W</span></div></div>
<div class="U"><div><span>U</span></div></div>
</main>
<script>
selectNodeContents(document.querySelector("main"));
const m = getComputedStyle(document.querySelector("main .M"), "::selection");
const mSpan = getComputedStyle(document.querySelector("main .M span"), "::selection");
test(() => void assert_equals(m.fontSize, "12px"),
"M::selection’s font-size is the same as in M");
test(() => void assert_equals(mSpan.fontSize, "18px"),
"M span::selection’s font-size is the same as in M span");
test(() => void assert_equals(m.textShadow, "rgb(0, 128, 0) 12px 0px 0px"),
"M::selection’s own text-shadow respects M’s font-size");
test(() => void assert_equals(mSpan.textShadow, "rgb(0, 128, 0) 12px 0px 0px"),
"M span::selection’s inherited text-shadow respects M’s font-size");
const w = getComputedStyle(document.querySelector("main .W"), "::selection");
const wSpan = getComputedStyle(document.querySelector("main .W span"), "::selection");
test(() => void assert_equals(w.lineHeight, "13px"),
"W::selection’s line-height is the same as in W");
test(() => void assert_equals(wSpan.lineHeight, "19px"),
"W span::selection’s line-height is the same as in W span");
test(() => void assert_equals(w.textShadow, "rgb(0, 128, 0) 0px 13px 0px"),
"W::selection’s own text-shadow respects W’s line-height");
test(() => void assert_equals(wSpan.textShadow, "rgb(0, 128, 0) 0px 13px 0px"),
"W span::selection’s inherited text-shadow respects W’s line-height");
const u = getComputedStyle(document.querySelector("main .U"), "::selection");
const uSpan = getComputedStyle(document.querySelector("main .U span"), "::selection");
test(() => void assert_equals(u.fontSize, "12px"),
"U::selection’s font-size is the same as in U");
test(() => void assert_equals(uSpan.fontSize, "18px"),
"U span::selection’s font-size is the same as in U span");
test(() => void assert_equals(u.textDecorationThickness, "12px"),
"U::selection’s own text-decoration-thickness respects U’s font-size");
test(() => void assert_equals(uSpan.textDecorationThickness, "18px"),
"U span::selection’s own text-decoration-thickness respects U span’s font-size");
</script>

43
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html Normal file
View file

@ -0,0 +1,43 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight selectors inheritance getComputedStyle for currentcolor</title>
<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ and ‘background-color’ are set to ‘currentColor’ in the parent. The child should inherit both properties as if if they were directly set to ‘currentColor’, due to highlight inheritance and the fact that ‘currentColor’ computes to itself, and the result for both properties should equal the originating element ‘color’.">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target {
background-color: green;
color: lime;
}
#target::selection {
color: currentcolor;
background-color: currentcolor;
}
#target::target-text {
color: currentcolor;
background-color: currentcolor;
}
#target::spelling-error {
color: currentcolor;
background-color: currentcolor;
}
#target::grammar-error {
color: currentcolor;
background-color: currentcolor;
}
#target::highlight(foo) {
color: currentcolor;
background-color: currentcolor;
}
</style>
<div id="target"><span id="child"></span></div>
<script>
for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
test(() => {
let style = getComputedStyle(child, pseudo);
assert_equals(style.backgroundColor, "rgb(0, 255, 0)", "Background color is lime.");
assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
}, `getComputedStyle() for ${pseudo}`);
}
</script>

42
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed-visited.html Normal file
View file

@ -0,0 +1,42 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle for currentcolor on visited</title>
<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ is set to ‘currentColor’ for visited links (and for unvisited links, via implicit defaulting up to the root). The result for both links should equal the originating element ‘color’ as if the link was unvisited.">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
a {
color: lime;
}
a:visited {
color: cyan;
}
a:visited::selection {
color: currentcolor;
}
a:visited::target-text {
color: currentcolor;
}
a:visited::spelling-error {
color: currentcolor;
}
a:visited::grammar-error {
color: currentcolor;
}
a:visited::highlight(foo) {
color: currentcolor;
}
</style>
<a id="target1" class="target" href=""></a>
<a id="target2" class="target" href="unvisited"></a>
<script>
for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
for (const target of [target1, target2]) {
test(() => {
let style = getComputedStyle(target, pseudo);
assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
}, `getComputedStyle() for ${pseudo} at #${target.id}`);
}
}
</script>

68
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-computed.html Normal file
View file

@ -0,0 +1,68 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle for currentcolor</title>
<meta name="assert" content="Checks the result of getComputedStyle for each kind of highlight pseudo, when ‘color’ and ‘background-color’ are set to ‘currentColor’. The result for both properties should equal the originating element ‘color’.">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
div {
background-color: green;
color: lime;
}
.wrapper::selection {
color: cyan;
background-color: blue;
}
.wrapper::target-text {
color: cyan;
background-color: blue;
}
.wrapper::spelling-error {
color: cyan;
background-color: blue;
}
.wrapper::grammar-error {
color: cyan;
background-color: blue;
}
.wrapper::highlight(foo) {
color: cyan;
background-color: blue;
}
.target::selection {
color: currentcolor;
background-color: currentcolor;
}
.target::target-text {
color: currentcolor;
background-color: currentcolor;
}
.target::spelling-error {
color: currentcolor;
background-color: currentcolor;
}
.target::grammar-error {
color: currentcolor;
background-color: currentcolor;
}
.target::highlight(foo) {
color: currentcolor;
background-color: currentcolor;
}
</style>
<div id="target1" class="target"></div>
<div class="wrapper">
<span id="target2" class="target"></span>
</div>
<script>
for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
for (const target of [target1, target2]) {
test(() => {
let style = getComputedStyle(target, pseudo);
assert_equals(style.backgroundColor, "rgb(0, 255, 0)", "Background color is lime.");
assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
}, `getComputedStyle() for ${pseudo} at #${target.id}`);
}
}
</script>

45
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
#empty > span {
}
#color-currentcolor > span {
color: currentcolor;
}
#backgroundcolor-currentcolor > span {
background-color: currentcolor;
}
#textdecorationcolor-currentcolor > span {
text-decoration-line: underline;
text-decoration-color: currentcolor;
}
#color-currentcolor-backgroundcolor-currentcolor > span {
color: currentcolor;
background-color: currentcolor;
}
#color-currentcolor-backgroundcolor-blue > span {
color: currentcolor;
background-color: blue;
}
#color-blue-backgroundcolor-currentcolor > span {
color: blue;
background-color: currentcolor;
}
</style>
<div id="empty" class="highlight_reftest"><span>example</span> - empty</div>
<div id="color-currentcolor" class="highlight_reftest"><span>example</span> - color-currentcolor</div>
<div id="backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - backgroundcolor-currentcolor</div>
<div id="textdecorationcolor-currentcolor" class="highlight_reftest"><span>example</span> - textdecorationcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - color-currentcolor-backgroundcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest"><span>example</span> - color-currentcolor-backgroundcolor-blue</div>
<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest"><span>example</span> - color-blue-backgroundcolor-currentcolor</div>

62
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html Normal file
View file

@ -0,0 +1,62 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting single layer</title>
<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root). The color of each property should equal the originating element ‘color’.">
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<link rel="match" href="highlight-currentcolor-painting-properties-001-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
::highlight(empty) {
}
::highlight(color-currentcolor) {
color: currentcolor;
}
::highlight(backgroundcolor-currentcolor) {
background-color: currentcolor;
}
::highlight(textdecorationcolor-currentcolor) {
text-decoration-line: underline;
text-decoration-color: currentcolor;
}
::highlight(color-currentcolor-backgroundcolor-currentcolor) {
color: currentcolor;
background-color: currentcolor;
}
::highlight(color-currentcolor-backgroundcolor-blue) {
color: currentcolor;
background-color: blue;
}
::highlight(color-blue-backgroundcolor-currentcolor) {
color: blue;
background-color: currentcolor;
}
</style>
<div id="empty" class="highlight_reftest">example - empty</div>
<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
<div id="textdecorationcolor-currentcolor" class="highlight_reftest">example - textdecorationcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest">example - color-blue-backgroundcolor-currentcolor</div>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const divs = document.getElementsByTagName("div");
for (let div of divs) {
CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
}
</script>

49
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html Normal file
View file

@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
div > span {
color: yellow;
background: maroon;
}
#empty > span > span {
}
#color-currentcolor > span > span {
color: currentcolor;
}
#backgroundcolor-currentcolor > span > span {
background-color: currentcolor;
}
#textdecorationcolor-currentcolor > span > span {
text-decoration-line: underline;
text-decoration-color: currentcolor;
}
#color-currentcolor-backgroundcolor-currentcolor > span > span {
color: currentcolor;
background-color: currentcolor;
}
#color-currentcolor-backgroundcolor-blue > span > span {
color: currentcolor;
background-color: blue;
}
#color-blue-backgroundcolor-currentcolor > span > span {
color: blue;
background-color: currentcolor;
}
</style>
<div id="empty" class="highlight_reftest"><span><span>ex</span>ample</span> - empty</div>
<div id="color-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor</div>
<div id="backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - backgroundcolor-currentcolor</div>
<div id="textdecorationcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - textdecorationcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor-backgroundcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest"><span><span>ex</span>ample</span> - color-currentcolor-backgroundcolor-blue</div>
<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - color-blue-backgroundcolor-currentcolor</div>

71
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html Normal file
View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting two layers</title>
<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root), and there is another active highlight below. The color of each property should equal the underlying highlight ‘color’.">
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<link rel="match" href="highlight-currentcolor-painting-properties-002-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
::highlight(below) {
color: yellow;
background: maroon;
}
::highlight(empty) {
}
::highlight(color-currentcolor) {
color: currentcolor;
}
::highlight(backgroundcolor-currentcolor) {
background-color: currentcolor;
}
::highlight(textdecorationcolor-currentcolor) {
text-decoration-line: underline;
text-decoration-color: currentcolor;
}
::highlight(color-currentcolor-backgroundcolor-currentcolor) {
color: currentcolor;
background-color: currentcolor;
}
::highlight(color-currentcolor-backgroundcolor-blue) {
color: currentcolor;
background-color: blue;
}
::highlight(color-blue-backgroundcolor-currentcolor) {
color: blue;
background-color: currentcolor;
}
</style>
<div id="empty" class="highlight_reftest">example - empty</div>
<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
<div id="textdecorationcolor-currentcolor" class="highlight_reftest">example - textdecorationcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
<div id="color-blue-backgroundcolor-currentcolor" class="highlight_reftest">example - color-blue-backgroundcolor-currentcolor</div>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const divs = document.getElementsByTagName("div");
let ranges = [];
for (let div of divs) {
ranges.push(range(div.firstChild, 0, 7));
}
CSS.highlights.set("below", new Highlight(...ranges));
for (let div of divs) {
CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 2)));
}
</script>

14
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html><meta charset="utf-8">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
#textshadow-currentcolor > span {
text-shadow: currentcolor 2px 2px;
}
</style>
<div id="textshadow-currentcolor" class="highlight_reftest"><span>example</span> - textshadow-currentcolor</div>

33
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html><meta charset="utf-8">
<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting single layer</title>
<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘text-shadow’ contains a shadow with ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root). The color of the text shadow should equal the originating element ‘color’.">
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<link rel="match" href="highlight-currentcolor-painting-text-shadow-001-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
::highlight(textshadow-currentcolor) {
text-shadow: currentcolor 2px 2px;
}
</style>
<div id="textshadow-currentcolor" class="highlight_reftest">example - textshadow-currentcolor</div>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const divs = document.getElementsByTagName("div");
for (let div of divs) {
CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
}
</script>

18
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html><meta charset="utf-8">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
div > span {
color: yellow;
background: maroon;
}
#textshadow-currentcolor > span > span {
text-shadow: currentcolor 2px 2px;
}
</style>
<div id="textshadow-currentcolor" class="highlight_reftest"><span><span>ex</span>ample</span> - textshadow-currentcolor</div>

43
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html><meta charset="utf-8">
<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor painting two layers</title>
<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when other properties are set to ‘currentColor’ (and ‘color’ is also ‘currentColor’, via implicit defaulting up to the root), and there is another active highlight below. The color of each property should equal the underlying highlight ‘color’.">
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<link rel="match" href="highlight-currentcolor-painting-text-shadow-002-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
::highlight(below) {
color: yellow;
background: maroon;
}
::highlight(textshadow-currentcolor) {
text-shadow: currentcolor 2px 2px;
}
</style>
<div id="textshadow-currentcolor" class="highlight_reftest">example - textshadow-currentcolor</div>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const divs = document.getElementsByTagName("div");
let ranges = [];
for (let div of divs) {
ranges.push(range(div.firstChild, 0, 7));
}
CSS.highlights.set("below", new Highlight(...ranges));
for (let div of divs) {
CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 2)));
}
</script>

113
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html Normal file
View file

@ -0,0 +1,113 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
::highlight(empty) {
color: lime;
background: transparent;
}
::highlight(color-currentcolor) {
color: lime;
background: transparent;
}
::highlight(color-initial) {
color: black;
background: transparent;
}
::highlight(color-inherit) {
color: lime;
background: transparent;
}
::highlight(color-unset) {
color: lime;
background: transparent;
}
::highlight(color-cyan) {
color: cyan;
background: transparent;
}
::highlight(backgroundcolor-currentcolor) {
color: lime;
background-color: lime;
}
::highlight(color-currentcolor-backgroundcolor-currentcolor) {
color: lime;
background-color: lime;
}
::highlight(color-initial-backgroundcolor-currentcolor) {
color: black;
background-color: black;
}
::highlight(color-inherit-backgroundcolor-currentcolor) {
color: lime;
background-color: lime;
}
::highlight(color-unset-backgroundcolor-currentcolor) {
color: lime;
background-color: lime;
}
::highlight(color-cyan-backgroundcolor-currentcolor) {
color: cyan;
background-color: cyan;
}
::highlight(backgroundcolor-blue) {
color: lime;
background-color: blue;
}
::highlight(color-currentcolor-backgroundcolor-blue) {
color: lime;
background-color: blue;
}
::highlight(color-initial-backgroundcolor-blue) {
color: black;
background-color: blue;
}
::highlight(color-inherit-backgroundcolor-blue) {
color: lime;
background-color: blue;
}
::highlight(color-unset-backgroundcolor-blue) {
color: lime;
background-color: blue;
}
</style>
<div id="empty" class="highlight_reftest">example - empty</div>
<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
<div id="color-initial" class="highlight_reftest">example - color-initial</div>
<div id="color-inherit" class="highlight_reftest">example - color-inherit</div>
<div id="color-unset" class="highlight_reftest">example - color-unset</div>
<div id="color-cyan" class="highlight_reftest">example - color-cyan</div>
<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
<div id="color-initial-backgroundcolor-currentcolor" class="highlight_reftest">example - color-initial-backgroundcolor-currentcolor</div>
<div id="color-inherit-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inherit-backgroundcolor-currentcolor</div>
<div id="color-unset-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inset-backgroundcolor-currentcolor</div>
<div id="color-cyan-backgroundcolor-currentcolor" class="highlight_reftest">example - color-cyan-backgroundcolor-currentcolor</div>
<div id="backgroundcolor-blue" class="highlight_reftest">example - backgroundcolor-blue</div>
<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
<div id="color-initial-backgroundcolor-blue" class="highlight_reftest">example - color-initial-backgroundcolor-blue</div>
<div id="color-inherit-backgroundcolor-blue" class="highlight_reftest">example - color-inherit-backgroundcolor-blue</div>
<div id="color-unset-backgroundcolor-blue" class="highlight_reftest">example - color-inset-backgroundcolor-blue</div>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const divs = document.getElementsByTagName("div");
for (let div of divs) {
CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
}
</script>

105
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html Normal file
View file

@ -0,0 +1,105 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor, initial, inherit, unset painting</title>
<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘color’ is explicitly defaulted in a universal rule. ‘inherit’ (and ‘unset’, due to highlight inheritance) should equal the originating element ‘color’, because ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights. ‘initial’ should equal the initial value of ‘color’, which is ‘CanvasText’.">
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<link rel="match" href="highlight-currentcolor-root-explicit-default-001-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<style>
div {
color: lime;
background: green;
margin: 10px;
}
::highlight(empty) {
}
::highlight(color-currentcolor) {
color: currentcolor;
}
::highlight(color-initial) {
color: initial;
}
::highlight(color-inherit) {
color: inherit;
}
::highlight(color-unset) {
color: unset;
}
::highlight(color-cyan) {
color: cyan;
}
::highlight(backgroundcolor-currentcolor) {
background-color: currentcolor;
}
::highlight(color-currentcolor-backgroundcolor-currentcolor) {
color: currentcolor;
background-color: currentcolor;
}
::highlight(color-initial-backgroundcolor-currentcolor) {
color: initial;
background-color: currentcolor;
}
::highlight(color-inherit-backgroundcolor-currentcolor) {
color: inherit;
background-color: currentcolor;
}
::highlight(color-unset-backgroundcolor-currentcolor) {
color: unset;
background-color: currentcolor;
}
::highlight(color-cyan-backgroundcolor-currentcolor) {
color: cyan;
background-color: currentcolor;
}
::highlight(backgroundcolor-blue) {
background-color: blue;
}
::highlight(color-currentcolor-backgroundcolor-blue) {
color: currentcolor;
background-color: blue;
}
::highlight(color-initial-backgroundcolor-blue) {
color: initial;
background-color: blue;
}
::highlight(color-inherit-backgroundcolor-blue) {
color: inherit;
background-color: blue;
}
::highlight(color-unset-backgroundcolor-blue) {
color: unset;
background-color: blue;
}
</style>
<div id="empty" class="highlight_reftest">example - empty</div>
<div id="color-currentcolor" class="highlight_reftest">example - color-currentcolor</div>
<div id="color-initial" class="highlight_reftest">example - color-initial</div>
<div id="color-inherit" class="highlight_reftest">example - color-inherit</div>
<div id="color-unset" class="highlight_reftest">example - color-unset</div>
<div id="color-cyan" class="highlight_reftest">example - color-cyan</div>
<div id="backgroundcolor-currentcolor" class="highlight_reftest">example - backgroundcolor-currentcolor</div>
<div id="color-currentcolor-backgroundcolor-currentcolor" class="highlight_reftest">example - color-currentcolor-backgroundcolor-currentcolor</div>
<div id="color-initial-backgroundcolor-currentcolor" class="highlight_reftest">example - color-initial-backgroundcolor-currentcolor</div>
<div id="color-inherit-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inherit-backgroundcolor-currentcolor</div>
<div id="color-unset-backgroundcolor-currentcolor" class="highlight_reftest">example - color-inset-backgroundcolor-currentcolor</div>
<div id="color-cyan-backgroundcolor-currentcolor" class="highlight_reftest">example - color-cyan-backgroundcolor-currentcolor</div>
<div id="backgroundcolor-blue" class="highlight_reftest">example - backgroundcolor-blue</div>
<div id="color-currentcolor-backgroundcolor-blue" class="highlight_reftest">example - color-currentcolor-backgroundcolor-blue</div>
<div id="color-initial-backgroundcolor-blue" class="highlight_reftest">example - color-initial-backgroundcolor-blue</div>
<div id="color-inherit-backgroundcolor-blue" class="highlight_reftest">example - color-inherit-backgroundcolor-blue</div>
<div id="color-unset-backgroundcolor-blue" class="highlight_reftest">example - color-inset-backgroundcolor-blue</div>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const divs = document.getElementsByTagName("div");
for (let div of divs) {
CSS.highlights.set(div.id, new Highlight(range(div.firstChild, 0, 7)));
}
</script>

20
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html Normal file
View file

@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" href="support/highlights.css">
<style>
.highlight_reftest {
color: green;
margin: 10px;
}
.color-blue {
color: blue;
}
</style>
<div class="highlight_reftest">green</div>
<div class="highlight_reftest">green</div>
<div class="highlight_reftest color-blue">blue</div>
<div class="highlight_reftest color-blue">blue</div>

45
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html Normal file
View file

@ -0,0 +1,45 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Custom Highlights color inherit painting</title>
<meta name="assert" content="Checks the painting for highlight pseudos (using ::highlight), when ‘color’ is universally set to ‘inherit’. When the parent is explicitly set to ‘blue’, inheritance stops there, yielding blue. Otherwise inheritance reaches the root element, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<link rel="match" href="highlight-currentcolor-root-explicit-default-002-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<style>
.highlight_reftest {
color: green;
margin: 10px;
}
::highlight(color-inherit) {
color: inherit;
}
#wrapper::highlight(color-inherit) {
color: blue;
}
</style>
<div class="highlight_reftest">green</div>
<div class="highlight_reftest">g<span>ree</span>n</div>
<div id="wrapper">
<div class="highlight_reftest">blue</div>
<div class="highlight_reftest">b<span>lu</span>e</div>
</div>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const divs = document.getElementsByClassName("highlight_reftest");
let ranges = [];
for (let div of divs) {
if (div.childElementCount == 0)
ranges.push(range(div, 0, 1));
else
ranges.push(range(div, 0, 3));
}
CSS.highlights.set("color-inherit", new Highlight(...ranges));
</script>

27
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html Normal file
View file

@ -0,0 +1,27 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: implicit defaulting of ‘color’ in :root highlights</title>
<meta name="assert" content="Checks the painting for ::selection and ::highlight, when ‘background-color’ is set in the root element but ‘color’ is implicitly defaulted. ‘background-color’ suppresses the UA default ‘color’ for ::selection via paired cascade. The resultant ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<link rel="match" href="highlight-currentcolor-root-implicit-default-ref.html">
<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
<main>FAIL</main>
<main>FAIL</main>
<style>
main { color: green; }
:root::selection { background-color: lime; }
:root::highlight(foo) { background-color: lime; }
</style>
<script>
const [selection, highlight] = document.querySelectorAll("main");
let selectionRange = new Range();
selectionRange.selectNode(selection);
window.getSelection().addRange(selectionRange);
selection.textContent = getComputedStyle(selection, "::selection").color;
let highlightRange = new Range();
highlightRange.selectNode(highlight);
CSS.highlights.set("foo", new Highlight(highlightRange));
highlight.textContent = getComputedStyle(highlight, "::highlight(foo)").color;
</script>

28
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: implicit defaulting of ‘color’ in :root highlights</title>
<meta name="assert" content="Checks the painting for ::selection and ::highlight, when ‘background-color’ is set in the target element but ‘color’ is implicitly defaulted. ‘background-color’ suppresses the UA default ‘color’ for ::selection via paired cascade. The resultant ‘color’ inherits through ancestor highlight pseudos up to the root, where the inherited value is defined as ‘currentColor’ for highlights, yielding green.">
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<link rel="match" href="highlight-currentcolor-root-implicit-default-ref.html">
<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
<main>FAIL</main>
<main>FAIL</main>
<style>
main { color: green; }
main::selection { background-color: lime; }
main::highlight(foo) { background-color: lime; }
</style>
<script>
const [selection, highlight] = document.querySelectorAll("main");
let selectionRange = new Range();
selectionRange.selectNode(selection);
window.getSelection().addRange(selectionRange);
selection.textContent = getComputedStyle(selection, "::selection").color;
let highlightRange = new Range();
highlightRange.selectNode(highlight);
CSS.highlights.set("foo", new Highlight(highlightRange));
highlight.textContent = getComputedStyle(highlight, "::highlight(foo)").color;
</script>

22
tests/wpt/web-platform-tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html Normal file
View file

@ -0,0 +1,22 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<p>Pass if text below is green on lime, and the text itself represents green, not initial (black).</p>
<main>rgb(0, 128, 0)</main>
<main>rgb(0, 128, 0)</main>
<style>
main { color: green; }
main::selection { background-color: lime; color: green; }
main::highlight(foo) { background-color: lime; color: green; }
</style>
<script>
const [selection, highlight] = document.querySelectorAll("main");
let selectionRange = new Range();
selectionRange.selectNode(selection);
window.getSelection().addRange(selectionRange);
let highlightRange = new Range();
highlightRange.selectNode(highlight);
CSS.highlights.set("foo", new Highlight(highlightRange));
</script>

5
tests/wpt/web-platform-tests/css/css-pseudo/highlight-painting-003.html
View file

@ -23,10 +23,9 @@
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.
::target-text, ::selection).
*/
* {
*, *::selection {
text-decoration-skip-ink: none;
text-decoration-skip: none;
}

3
tests/wpt/web-platform-tests/css/css-pseudo/highlight-painting-004.html
View file

@ -24,8 +24,7 @@
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.
::target-text, ::selection).
*/
* {
text-decoration-skip-ink: none;

17
tests/wpt/web-platform-tests/css/css-pseudo/highlight-painting-currentcolor-005-ref.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="stylesheet" href="support/highlights.css">
<style>
a {
color: green;
text-decoration: none;
}
a:visited {
color: blue;
}
</style>
<a href="" class="highlight_reftest">visited</a>
<a href="unvisited" class="highlight_reftest">unvisited</a>

42
tests/wpt/web-platform-tests/css/css-pseudo/highlight-painting-currentcolor-005.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Custom Highlights currentcolor on visited</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-text">
<meta name="assert" content="Checks that color currentcolor is properly resolved when painting highlight pseudos on a visited link.">
<link rel="match" href="highlight-painting-currentcolor-005-ref.html">
<link rel="stylesheet" href="support/highlights.css">
<style>
a {
color: green;
text-decoration: none;
}
a:visited {
color: blue;
}
a::highlight(example) {
color: currentcolor;
}
a:visited::highlight(example) {
color: currentcolor;
}
</style>
<a href="" class="highlight_reftest">visited</a>
<a href="unvisited" class="highlight_reftest">unvisited</a>
<script>
function range(node, start, end) {
let range = new Range();
range.setStart(node, start);
range.setEnd(node, end);
return range;
}
const links = document.getElementsByTagName("a");
let ranges = [];
for (let link of links) {
ranges.push(range(link, 0, 1));
}
CSS.highlights.set("example", new Highlight(...ranges));
</script>

15
tests/wpt/web-platform-tests/css/css-pseudo/highlight-painting-soft-hyphens-001-ref.html Normal file
View file

@ -0,0 +1,15 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight painting: soft hyphens</title>
<link rel="stylesheet" href="support/highlights.css">
<style>
main {
width: 13em;
color: transparent;
}
main > span {
color: green;
}
</style>
<p>Pass if only the letter T is visible below, not the hyphens.
<main class="highlight_reftest"><span>T</span>he&#xAD;Quick&#xAD;Brown&#xAD;Fox&#xAD;Jumps&#xAD;Over&#xAD;The&#xAD;Lazy&#xAD;Dog&#xAD;The&#xAD;Quick&#xAD;Brown&#xAD;Fox&#xAD;Jumps&#xAD;Over&#xAD;The&#xAD;Lazy&#xAD;Dog&#xAD;The&#xAD;Quick&#xAD;Brown&#xAD;Fox&#xAD;Jumps&#xAD;Over&#xAD;The&#xAD;Lazy&#xAD;Dog</main>

28
tests/wpt/web-platform-tests/css/css-pseudo/highlight-painting-soft-hyphens-001.html Normal file
View file

@ -0,0 +1,28 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight painting: soft hyphens</title>
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
<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-soft-hyphens-001-ref.html">
<meta name="assert" value="::highlight overlay is not painted under soft hyphens in a text node with [0,1) highlighted and no other ranges highlighted">
<link rel="stylesheet" href="support/highlights.css">
<style>
main {
width: 13em;
color: transparent;
}
main::highlight(foo) {
color: green;
}
</style>
<p>Pass if only the letter T is visible below, not the hyphens.
<main class="highlight_reftest">The&#xAD;Quick&#xAD;Brown&#xAD;Fox&#xAD;Jumps&#xAD;Over&#xAD;The&#xAD;Lazy&#xAD;Dog&#xAD;The&#xAD;Quick&#xAD;Brown&#xAD;Fox&#xAD;Jumps&#xAD;Over&#xAD;The&#xAD;Lazy&#xAD;Dog&#xAD;The&#xAD;Quick&#xAD;Brown&#xAD;Fox&#xAD;Jumps&#xAD;Over&#xAD;The&#xAD;Lazy&#xAD;Dog</main>
<script>
const main = document.querySelector("main");
const range = new Range;
range.setStart(main.firstChild, 0);
range.setEnd(main.firstChild, 1);
CSS.highlights.set("foo", new Highlight(range));
</script>

12
tests/wpt/web-platform-tests/css/css-pseudo/highlight-painting-soft-hyphens-002-crash.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight painting: soft hyphens near atomic inlines</title>
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
<link rel="help" href="https://crbug.com/1367860">
<meta name="assert" value="Checks that selecting a soft hyphen near an atomic inline will not cause a crash.">
<img><s>aaaaaaaaaaaaa&#xAD;a
<script>
document.body.style.width = 0;
document.execCommand("selectall");
</script>

1
tests/wpt/web-platform-tests/css/css-pseudo/highlight-paired-cascade-004.tentative.html → tests/wpt/web-platform-tests/css/css-pseudo/highlight-paired-cascade-004.html
View file

@ -1,6 +1,5 @@
<!doctype html>
<meta charset="utf-8">
<!-- tentative due to unresolved spec issue: see question 3 in <https://github.com/w3c/csswg-drafts/issues/6386> -->
<title>CSS Pseudo-Elements Test: paired cascade: rule includes highlight pseudos other than ::selection</title>
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">

1
tests/wpt/web-platform-tests/css/css-pseudo/highlight-paired-cascade-005.tentative.html → tests/wpt/web-platform-tests/css/css-pseudo/highlight-paired-cascade-005.html
View file

@ -1,6 +1,5 @@
<!doctype html>
<meta charset="utf-8">
<!-- tentative due to unresolved spec issue: see question 6 in <https://github.com/w3c/csswg-drafts/issues/6386> -->
<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are not used when highlight pseudo has declared color value of unset</title>
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">

20
tests/wpt/web-platform-tests/css/css-pseudo/highlight-pseudos-computed.html
View file

@ -5,10 +5,22 @@
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#target::selection,
#target::target-text,
#target::spelling-error,
#target::grammar-error,
#target::selection {
background-color: green;
color: lime;
}
#target::target-text {
background-color: green;
color: lime;
}
#target::spelling-error {
background-color: green;
color: lime;
}
#target::grammar-error {
background-color: green;
color: lime;
}
#target::highlight(foo) {
background-color: green;
color: lime;

42
tests/wpt/web-platform-tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html Normal file
View file

@ -0,0 +1,42 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight selectors inheritance getComputedStyle</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<meta name="assert" content="This test checks that computed style is properly resolved for highlight pseudos even when 'display: contents' is involved.">
<style>
.target::selection {
background-color: green;
color: lime;
}
.target::target-text {
background-color: green;
color: lime;
}
.target::spelling-error {
background-color: green;
color: lime;
}
.target::grammar-error {
background-color: green;
color: lime;
}
.target::highlight(foo) {
background-color: green;
color: lime;
}
</style>
<div class="target"><span id="child1"></span></div>
<div class="target" style="display: contents;"><span id="child2"></span></div>
<script>
for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
for (const child of [child1, child2]) {
test(() => {
let style = getComputedStyle(child, 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} at #${child.id}`);
}
}
</script>

50
tests/wpt/web-platform-tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html Normal file
View file

@ -0,0 +1,50 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: highlight selectors getComputedStyle on visited</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
a::selection {
color: lime;
}
a::target-text {
color: lime;
}
a::spelling-error {
color: lime;
}
a::grammar-error {
color: lime;
}
a::highlight(foo) {
color: lime;
}
a:visited::selection {
color: yellow;
}
a:visited::target-text {
color: yellow;
}
a:visited::spelling-error {
color: yellow;
}
a:visited::grammar-error {
color: yellow;
}
a:visited::highlight(foo) {
color: yellow;
}
</style>
<a id="target1" class="target" href=""></a>
<a id="target2" class="target" href="unvisited"></a>
<script>
for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) {
for (const target of [target1, target2]) {
test(() => {
let style = getComputedStyle(target, pseudo);
assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime.");
}, `getComputedStyle() for ${pseudo} at #${target.id}`);
}
}
</script>

7
tests/wpt/web-platform-tests/css/css-pseudo/lang-pseudo-class-across-shadow-boundaries-ref.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<div style="width: 100px; height: 100px; background: green;"></div>
</body>
</html>

28
tests/wpt/web-platform-tests/css/css-pseudo/lang-pseudo-class-across-shadow-boundaries.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<link rel="help" href="https://drafts.csswg.org/selectors/#lang-pseudo">
<link rel="match" href="lang-pseudo-class-across-shadow-boundaries-ref.html">
</head>
<body>
<p>Test passes if you see a single 100px by 100px green box below.</p>
<style>
#testCases div { width: 100px; height: 25px; }
#host1:lang(zh) { background: green; }
#host3 > :lang(ja) { background: green; }
#host4 > div { background: red; }
</style>
<div id="testCases">
<div id="host1" lang="zh"><div></div></div>
<div id="host2" lang="de"><div></div></div>
<div id="host3" lang="ja"><div></div></div>
<div id="host4"><div></div></div>
</div>
<script>
host1.attachShadow({mode: 'closed'}).innerHTML = '<slot></slot>';
host2.attachShadow({mode: 'closed'}).innerHTML = '<style> div { width: 100px; height: 25px; background: red; } div:lang(de) { background: green; } </style><div></div>';
host3.attachShadow({mode: 'closed'}).innerHTML = '<slot lang="en"></slot>';
host4.attachShadow({mode: 'closed'}).innerHTML = '<style> :lang(ja)::slotted(*) { background: green !important; } </style><slot lang="ja"></slot>';
</script>
</body>
</html>

1
tests/wpt/web-platform-tests/css/css-pseudo/marker-line-height-ref.html
View file

@ -3,6 +3,7 @@
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
::marker { font-family: inherit; }
ol {
float: left;
width: 50px;

1
tests/wpt/web-platform-tests/css/css-pseudo/marker-line-height.html
View file

@ -7,6 +7,7 @@
<link rel="match" href="marker-line-height-ref.html">
<meta name="assert" content="Checks that ::marker supports 'line-height', both explicitly set or inherited from an ancestor">
<style>
::marker { font-family: inherit; }
ol {
float: left;
width: 50px;

28
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-transform-dynamic-ref.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Reftest Reference</title>
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" />
<style>
.inside {
list-style-position: inside;
}
.latin {
list-style-type: upper-latin;
}
.string {
list-style-type: "B. ";
}
.content::marker {
content: "C. ";
}
</style>
<ol class="outside">
<li class="latin"></li>
<li class="string"></li>
<li class="content"></li>
</ol>
<ol class="inside">
<li class="latin"></li>
<li class="string"></li>
<li class="content"></li>
</ol>

42
tests/wpt/web-platform-tests/css/css-pseudo/marker-text-transform-dynamic.html Normal file
View file

@ -0,0 +1,42 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>::marker with dynamic 'text-transform'</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-4/#text-transform-property">
<link rel="match" href="marker-text-transform-dynamic-ref.html">
<meta name="assert" content="Checks that ::marker is updated when 'text-transform' is set dynamically.">
<style>
.uppercase ::marker {
text-transform: uppercase;
}
.inside {
list-style-position: inside;
}
.latin {
list-style-type: lower-latin;
}
.string {
list-style-type: "b. ";
}
.content::marker {
content: "c. ";
}
</style>
<ol class="outside">
<li class="latin"></li>
<li class="string"></li>
<li class="content"></li>
</ol>
<ol class="inside">
<li class="latin"></li>
<li class="string"></li>
<li class="content"></li>
</ol>
<script>
// Force layout
document.body.offsetLeft;
// Set 'text-transform'
document.body.className = "uppercase";
</script>

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

@ -61,6 +61,7 @@ test_pseudo_computed_value("::marker", "animation-iteration-count", "infinite");
test_pseudo_computed_value("::marker", "animation-name", "anim");
test_pseudo_computed_value("::marker", "animation-play-state", "paused");
test_pseudo_computed_value("::marker", "animation-timing-function", "linear");
test_pseudo_computed_value("::marker", "animation-composition", "add");
// ::marker supports transition properties.
test_pseudo_computed_value("::marker", "transition", "display 1s linear 2s");

7
tests/wpt/web-platform-tests/css/css-pseudo/placeholder-as-multicol-crash.html Normal file
View file

@ -0,0 +1,7 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1295976">
<style>
::placeholder { columns:100; }
</style>
<textarea placeholder="a b c d e f g"></textarea>

18
tests/wpt/web-platform-tests/css/css-pseudo/selection-link-001-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<script src="support/selections.js"></script>
<style>
.green::selection {
color: green;
}
</style>
<p>Test passes if when selecting the content "visited" has a green color and white background, and "unvisited" is selected with the default colors.</p>
<main>
<span class="green">visited</span>
<span>unvisited</span>
</main>
<script>selectNodeContents(document.querySelector("main"));</script>

25
tests/wpt/web-platform-tests/css/css-pseudo/selection-link-001.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: ::selection on visited and unvisited links</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<meta name="assert" content="This test checks that ::selection works as expected when only visited links have pseudo style.">
<link rel="match" href="selection-link-001-ref.html">
<script src="support/selections.js"></script>
<style>
a {
text-decoration: none;
color: black;
}
a:visited::selection {
color: green;
}
</style>
<p>Test passes if when selecting the content "visited" has a green color and white background, and "unvisited" is selected with the default colors.</p>
<main>
<a href="">visited</a>
<a href="#">unvisited</a>
</main>
<script>selectNodeContents(document.querySelector("main"));</script>

18
tests/wpt/web-platform-tests/css/css-pseudo/selection-link-002-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<script src="support/selections.js"></script>
<style>
.green::selection {
color: green;
}
</style>
<p>Test passes if when selecting the content "visited" is selected with the default colors and "unvisited" has a green color and white background.</p>
<main>
<span>visited</span>
<span class="green">unvisited</span>
</main>
<script>selectNodeContents(document.querySelector("main"));</script>

25
tests/wpt/web-platform-tests/css/css-pseudo/selection-link-002.html Normal file
View file

@ -0,0 +1,25 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: ::selection on visited and unvisited links</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<meta name="assert" content="This test checks that ::selection works as expected when only unvisited links have pseudo style.">
<link rel="match" href="selection-link-002-ref.html">
<script src="support/selections.js"></script>
<style>
a {
text-decoration: none;
color: black;
}
a:link::selection {
color: green;
}
</style>
<p>Test passes if when selecting the content "visited" is selected with the default colors and "unvisited" has a green color and white background.</p>
<main>
<a href="">visited</a>
<a href="#">unvisited</a>
</main>
<script>selectNodeContents(document.querySelector("main"));</script>

18
tests/wpt/web-platform-tests/css/css-pseudo/selection-link-003-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference file</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<script src="support/selections.js"></script>
<style>
span::selection {
color: green;
}
</style>
<p>Test passes if when selecting the content both "visited" and "unvisited" have a green color and white background.</p>
<main>
<span>visited</span>
<span>unvisited</span>
</main>
<script>selectNodeContents(document.querySelector("main"));</script>

28
tests/wpt/web-platform-tests/css/css-pseudo/selection-link-003.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: ::selection on visited and unvisited links</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<meta name="assert" content="This test checks that ::selection works as expected when both unvisited and visited links have pseudo style.">
<link rel="match" href="selection-link-003-ref.html">
<script src="support/selections.js"></script>
<style>
a {
text-decoration: none;
color: black;
}
a:visited::selection {
color: green;
}
a:link::selection {
color: green;
}
</style>
<p>Test passes if when selecting the content both "visited" and "unvisited" have a green color and white background.</p>
<main>
<a href="">visited</a>
<a href="#">unvisited</a>
</main>
<script>selectNodeContents(document.querySelector("main"));</script>

30
tests/wpt/web-platform-tests/css/css-pseudo/selection-universal-shadow-dom.html Normal file
View file

@ -0,0 +1,30 @@
<!doctype html>
<meta charset="utf-8">
<title>CSS Pseudo-Elements Test: Universal ::selection in Shadow DOM</title>
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-selectors">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
::selection {
background-color: pink;
color: red;
}
</style>
<div id="host"></div>
<script>
const root = host.attachShadow({mode:"open"});
root.innerHTML = `
<style>
::selection {
background-color: green;
color: lime;
}
</style>
<div id="target"></div>
`;
test(() => {
const style = getComputedStyle(root.querySelector("#target"), "::selection");
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 #target ::selection");
</script>

12
tests/wpt/web-platform-tests/css/css-pseudo/spelling-error-004-crash.html Normal file
View file

@ -0,0 +1,12 @@
<!doctype html><meta charset="utf-8">
<title>CSS Pseudo-Elements Test: spelling error with unusual root element</title>
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-ua-styles">
<link rel="help" href="https://crbug.com/1359175">
<meta name="assert" value="Checks that spelling errors in an HTML document with the wrong root element (body) will not cause a crash, even if this means there are no longer any default UA styles.">
<!-- TODO force spelling error without relying on UA under test having English spellchecking https://github.com/web-platform-tests/wpt/issues/30863 -->
<body contenteditable spellcheck lang="en">quikc
<script>
document.documentElement.replaceWith(document.body);
document.documentElement.focus();
</script>

11
tests/wpt/web-platform-tests/css/css-pseudo/spelling-error-005-crash.html Normal file
View file

@ -0,0 +1,11 @@
<!doctype html><meta charset="utf-8">
<title>CSS Pseudo-Elements Test: spelling error with unusual root element</title>
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-ua-styles">
<link rel="help" href="https://crbug.com/1359175">
<meta name="assert" value="Checks that spelling errors in an SVG document will not cause a crash, even if this means there are no longer any default UA styles.">
<!-- TODO force spelling error without relying on UA under test having English spellchecking https://github.com/web-platform-tests/wpt/issues/30863 -->
<body contenteditable spellcheck lang="en"><svg><text y="42">quikc</text></svg>
<script>
document.documentElement.focus();
</script>

8
tests/wpt/web-platform-tests/css/css-pseudo/spelling-error-006-notref.html Normal file
View file

@ -0,0 +1,8 @@
<!doctype html><meta charset="utf-8">
<title>CSS Pseudo-Elements Test: spelling error with originating decorations</title>
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
<!-- TODO force spelling error without relying on UA under test having English spellchecking https://github.com/web-platform-tests/wpt/issues/30863 -->
<body contenteditable spellcheck lang="en">quikc
<script>
document.body.focus();
</script>

13
tests/wpt/web-platform-tests/css/css-pseudo/spelling-error-006.html Normal file
View file

@ -0,0 +1,13 @@
<!doctype html><meta charset="utf-8">
<title>CSS Pseudo-Elements Test: spelling error with originating decorations</title>
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
<link rel="help" href="https://crbug.com/1381486">
<link rel="mismatch" href="spelling-error-006-notref.html">
<meta name="assert" value="Checks that spelling errors with UA default styles do not prevent rendering of originating decorations.">
<style>body { text-decoration: line-through; }</style>
<!-- TODO force spelling error without relying on UA under test having English spellchecking https://github.com/web-platform-tests/wpt/issues/30863 -->
<body contenteditable spellcheck lang="en">quikc
<script>
document.body.focus();
</script>

18
tests/wpt/web-platform-tests/css/css-pseudo/target-text-008-ref.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: Reference</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<style>
a::target-text {
color: lime;
background: green;
}
</style>
<p>Test passes if the link below has lime color and green background.</p>
<a href="">visited</a>
<script>
window.location.hash = "#:~:text=visited";
</script>

23
tests/wpt/web-platform-tests/css/css-pseudo/target-text-008.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<meta charset="utf-8" />
<title>CSS Pseudo-Elements Test: ::target-text visited links</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text">
<meta name="assert" content="Checks that ::target-text pseudo-element can be applied on visited links.">
<link rel="match" href="target-text-008-ref.html">
<style>
a::target-text {
background: red;
}
a:visited::target-text {
color: lime;
background: green;
}
</style>
<p>Test passes if the link below has lime color and green background.</p>
<a href="">visited</a>
<script>
window.location.hash = "#:~:text=visited";
</script>

2
tests/wpt/web-platform-tests/css/css-pseudo/target-text-text-decoration-001-ref.html
View file

@ -4,6 +4,8 @@
<style>
div {
text-decoration: solid underline magenta;
color: initial;
background: transparent;
}
</style>
<p>The test passes if the following line has a magenta underline.</p>

2
tests/wpt/web-platform-tests/css/css-pseudo/target-text-text-decoration-001.html
View file

@ -7,6 +7,8 @@
<style>
::target-text {
text-decoration: solid underline magenta;
color: initial;
background: transparent;
}
</style>
<p>The test passes if the following line has a magenta underline.</p>

1
tests/wpt/web-platform-tests/css/css-pseudo/textpath-selection-011-ref.html
View file

@ -15,7 +15,6 @@
/*
color suppresses UA default background-color,
but fill and stroke do not, so set explicitly
https://github.com/w3c/csswg-drafts/issues/6386
*/
fill: green;
/*

1
tests/wpt/web-platform-tests/css/css-pseudo/textpath-selection-011.html
View file

@ -21,7 +21,6 @@
/*
color suppresses UA default background-color,
but fill and stroke do not, so set explicitly
https://github.com/w3c/csswg-drafts/issues/6386
*/
fill: green;
/*