mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update web-platform-tests to revision b'ee6da9d71d0268d7fdb04e8e5b26858f46ee0cc4'
This commit is contained in:
WPT Sync Bot
cybai
parent
4401622eb1
commit
b77ad115f6
16832 changed files with 270819 additions and 87621 deletions
|
|
@ -32,3 +32,38 @@ Simplify this pattern at your own peril! For example, if you set backgrounds
|
|||
directly on layers as your highlight backgrounds, they will always be exactly
|
||||
`line-height` tall, but even if your `line-height` is 1, the actual line boxes
|
||||
and so on can still be taller (unless they contain Ahem text only).
|
||||
|
||||
|
||||
## Selection regression tests
|
||||
|
||||
Four tests are based on the properties described in <https://crrev.com/915543>,
|
||||
and were designed to catch regressions as bugs were fixed in Chromium:
|
||||
|
||||
* selection-originating-underline-order.html (P1)
|
||||
* selection-originating-decoration-color.html (P3)
|
||||
* selection-originating-strikethrough-order.html (P4)
|
||||
* selection-background-painting-order.html (P5)
|
||||
|
||||
Ideally we would want a test for property P2, that line-through decorations are
|
||||
always painted over text when selecting some of that text. But unfortunately,
|
||||
originating decoration recoloring (when correctly implemented) essentially makes
|
||||
it impossible to tell whether the text or the decoration was painted on top.
|
||||
|
||||
Some ways this test could become possible:
|
||||
|
||||
* Wider impl support for ::target-text or ::highlight decorations.
|
||||
Decorations introduced by highlight pseudos aren’t recolored, so
|
||||
we could move the originating text-decoration to any highlight
|
||||
that paints under ::selection (currently all of them), choose
|
||||
another ::selection color, and check which is painted on top.
|
||||
|
||||
* SVG adds support for text-decoration-color, or HTML adds support
|
||||
for stroke and stroke-width via CSS, as long as we continue to
|
||||
recolor originating decorations to color only. Then we could
|
||||
stroke in another color, and check which is painted on top.
|
||||
|
||||
* css-pseudo adds some kind of support for suppressing or otherwise
|
||||
tweaking the recoloring of originating decorations.
|
||||
|
||||
* Some other standard means for text to contain colors other than
|
||||
the color property, such as color fonts.
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-011-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-012-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
|
|
@ -24,6 +23,7 @@
|
|||
div::selection
|
||||
{
|
||||
background-color: green;
|
||||
color: aqua;
|
||||
}
|
||||
|
||||
/*
|
||||
|
|
@ -47,6 +47,6 @@
|
|||
|
||||
<body onload="startTest();">
|
||||
|
||||
<p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
|
||||
<p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is aqua and <strong>not fuchsia</strong>.
|
||||
|
||||
<div id="test" class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-016-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-018-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@
|
|||
<link rel="match" href="reference/active-selection-021-ref.html">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
|
||||
<link rel="match" href="reference/active-selection-025-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, the div::selection selector has no 'color' declaration. The div::selection selector should use the 'color' declaration from the div rule and, for the first letter only, it should use the 'color' declaration from the ::first-letter pseudo-element. Therefore the first letter 'S' should be purple and the rest of the words should be green.">
|
||||
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
|
||||
<link rel="match" href="reference/active-selection-027-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, the div::selection selector has no 'color' declaration. The div::selection selector should use the 'color' declaration from the div rule and, for the first line only, it should use the 'color' declaration from the ::first-line pseudo-element. Therefore the '1st selected text' should be purple and the '2nd selected text' should be green.">
|
||||
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="reference/active-selection-031-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-bounds">
|
||||
<link rel="match" href="../reference/ref-nothing-below.xht">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, a filled red image has a padding belt painted red and a red border. This test checks that the associated overlay for an image must not leak outside the image's border box.">
|
||||
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
|
||||
<link rel="match" href="../reference/ref-nothing-below.xht">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="This test checks that the associated overlay for image must not cover (or leak) outside the image's content box.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@
|
|||
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="The <br> element is an empty element. Its background color can be painted but specifying its color should generate no rendering effect of any kind. Since the 'background-color' has been specified as 'transparent', then nothing should be painted or viewable in this test.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
|
||||
<link rel="match" href="../reference/ref-nothing-below.xht">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="The <div id="subtest1"> element and the <hr> element in this test are empty elements. Their background color can be painted but specifying their 'color' should generate no rendering effect of any kind. Since the 'background-color' has not been specified in the ::selection pseudo-element, then it defaults to 'transparent'. The <div id="subtest3"> element is also an empty element since the 2 &NewLine; character references are line break control characters. Their background color can not be painted. Therefore, in this test, nothing should be painted or viewable. The fact that lines break at preserved newline characters thanks to 'white-space: pre' does not change that.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
|
||||
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, tab characters are preserved and converted into 4 consecutive blank spaces. The background of such blank spaces can be painted. The lines are broken after each tab character since 'white-space: pre' preserves line breaks.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<dialog id="target">Dialog contents</dialog>
|
||||
<style>
|
||||
#target::backdrop {
|
||||
opacity: 0.1;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
const target = document.getElementById("target");
|
||||
target.showModal();
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: A Web Animations on ::backdrop</title>
|
||||
<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>
|
||||
<script>
|
||||
const target = document.getElementById("target");
|
||||
target.showModal();
|
||||
target.animate({
|
||||
opacity: [0.1, 0.1],
|
||||
backgroundColor: ["green", "green"]
|
||||
}, {
|
||||
pseudoElement: "::backdrop",
|
||||
duration: Infinity
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: ::backdrop & web animations</title>
|
||||
<link rel="help" href="https://fullscreen.spec.whatwg.org/#::backdrop-pseudo-element">
|
||||
<link rel="help" href="https://drafts.csswg.org/web-animations-1/">
|
||||
<meta name="assert" content="This test checks that ::backdrop can be animated with Web Animations." />
|
||||
<div id="log"></div>
|
||||
<dialog id="target">Dialog contents</dialog>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<script>
|
||||
const target = document.getElementById("target");
|
||||
target.showModal();
|
||||
|
||||
test(function() {
|
||||
const options = {
|
||||
pseudoElement: "::backdrop",
|
||||
duration: 2,
|
||||
delay: -1,
|
||||
};
|
||||
const cs = getComputedStyle(target, "::backdrop");
|
||||
const anim = target.animate([
|
||||
{backgroundColor: "rgb(0, 100, 200)"},
|
||||
{backgroundColor: "rgb(200, 0, 100)"},
|
||||
], options);
|
||||
this.add_cleanup(() => anim.cancel());
|
||||
assert_equals(cs.backgroundColor, "rgb(100, 50, 150)", "background-color");
|
||||
}, "'backgroundColor' animation");
|
||||
</script>
|
||||
|
|
@ -13,7 +13,6 @@
|
|||
https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="This test is an adaptation (or modified version) of Example 11 (#example-c35bf49a). The 'div > span::selection' selector has an higher specificity than the 'span::selection' selector.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@
|
|||
https://www.w3.org/TR/css-pseudo-4/#example-97480f68
|
||||
-->
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="This test is an adaptation (or modified version) of Example 12 (#example-97480f68). In this test, <span> element's ::selection matches the ::selection { background-color: green; } rule and not the div#test::selection rule because '*' is implied when a tag selector is missing.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-cascade">
|
||||
<link rel="match" href="cascade-highlight-004-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, 'color' and 'background-color' have not been given a value for the span element. Since its parent element has an highlight pseudo-element, then these values should be inherited. Therefore the span element should be green on a yellow background and should not use the OS default selection highlight color values.">
|
||||
|
||||
<!--
|
||||
|
|
|
|||
|
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Pseudo-Elements Test: inheritance of selection highlight background color from its parent element</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-cascade">
|
||||
<link rel="match" href="reference/cascade-highlight-005-ref.html">
|
||||
|
||||
<meta name="assert" content="In this test, 'background-color' has not been specified a value for the highlight pseudo-element of the span element. Since the span's parent element has an highlight pseudo-element also, then the span's background color for its highlight pseudo-element should be inherited from its parent highlight pseudo-element. Therefore the span element should have a green background color.">
|
||||
|
||||
<!--
|
||||
|
||||
This is a modified version of Example 11
|
||||
https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a
|
||||
found in § 3.5 Cascading and Per-Element Highlight Styles
|
||||
https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
|
||||
|
||||
-->
|
||||
|
||||
<!--
|
||||
When any supported property is not given a value by the
|
||||
cascade, its value is determined by inheritance from the
|
||||
corresponding highlight pseudo-element of its originating
|
||||
element's parent element (regardless of whether that property
|
||||
is an inherited property).
|
||||
https://www.w3.org/TR/css-pseudo-4/#highlight-cascade
|
||||
-->
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
div::selection
|
||||
{
|
||||
background-color: green;
|
||||
color: yellow;
|
||||
}
|
||||
|
||||
span::selection
|
||||
{
|
||||
color: orange;
|
||||
}
|
||||
</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>Test passes if "Text selected" has a green background throughout, if "Tex" and "cted" are yellow and if "t sele" are orange.
|
||||
|
||||
<div id="test" class="highlight_reftest">Tex<span>t sele</span>cted</div>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<title>CSS Pseudo Test: ::file-selector-button inherits from its originating element</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
input { background-color: green; }
|
||||
input::file-selector-button {
|
||||
color: green;
|
||||
background-color: inherit;
|
||||
}
|
||||
</style>
|
||||
<input id="inp" type="file">
|
||||
<script>
|
||||
test(() => {
|
||||
const style = getComputedStyle(inp, "::file-selector-button");
|
||||
assert_equals(style.color, "rgb(0, 128, 0)", "Check that ::file-selector-button is supported via color");
|
||||
assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "::file-selector-button inheriting background-color");
|
||||
}, "::file-selector-button should inherit from its originating element");
|
||||
</script>
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
|
||||
<link rel="match" href="first-letter-001-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that a floated ::first-letter follows the usual formating rules for floats.">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
|
||||
<link rel="match" href="first-letter-001-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content.">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net">
|
||||
<link rel="match" href="first-letter-001-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content.">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -6,7 +6,6 @@
|
|||
<link rel="author" title="Chris Nardi" href="mailto:csnardi1@gmail.com">
|
||||
<link rel="match" href="first-letter-004-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that punctuation and letters with combining characters still have proper ::first-letter styling.">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Pseudo reference - ::first-letter in Hindi</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: test;
|
||||
src: url("/fonts/noto/NotoSansDevanagari-Regular.ttf");
|
||||
}
|
||||
p { font: 16px test, sans-serif; }
|
||||
.fl { color: green; font-size: 2em; }
|
||||
</style>
|
||||
<body lang="hi">
|
||||
<p><span class=fl>स्थ</span>लों
|
||||
<p><span class=fl>स्व</span>भाव
|
||||
<p><span class=fl>क्ल</span>ब
|
||||
<p><span class=fl>क्र</span>म
|
||||
<p><span class=fl>क्ष</span>ण
|
||||
<p><span class=fl>ष्क्र</span>स
|
||||
<p><span class=fl>ङ्</span>ङम
|
||||
<p><span class=fl>ङ्</span>क्रस
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Pseudo testcase - ::first-letter in Hindi</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<link rel="match" href="first-letter-hi-001-ref.html">
|
||||
<meta name="assert" content="When selecting the first-letter text, the UA should tailor its definition of typographic letter unit to reflect the first-letter traditions of the ::first-letter pseudo-element’s containing block’s content language">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-letter-pseudo">
|
||||
<link rel="help" href="https://www.w3.org/International/i18n-tests/run?base=css-pseudo/first-letter-pseudo&batch=first-letter-pseudo&test=first-letter-deva-1consonant.html">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: test;
|
||||
src: url("/fonts/noto/NotoSansDevanagari-Regular.ttf");
|
||||
}
|
||||
p { font: 16px test, sans-serif; }
|
||||
p::first-letter { color: green; font-size: 2em; }
|
||||
</style>
|
||||
<body lang="hi">
|
||||
<p>स्थलों
|
||||
<p>स्वभाव
|
||||
<p>क्लब
|
||||
<p>क्रम
|
||||
<p>क्षण
|
||||
<p>ष्क्रस
|
||||
<p>ङ्ङम
|
||||
<p>ङ्क्रस
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Pseudo reference - ::first-letter in Hindi</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: test;
|
||||
src: url("/fonts/noto/NotoSansDevanagari-Regular.ttf");
|
||||
}
|
||||
p { font: 16px test, sans-serif; }
|
||||
.fl { color: green; font-size: 2em; }
|
||||
</style>
|
||||
<body lang="hi">
|
||||
<p><span class=fl>क्ला</span>स
|
||||
<p><span class=fl>स्ति</span>ठड
|
||||
<p><span class=fl>प्या</span>ला
|
||||
<p><span class=fl>प्रि</span>यबर
|
||||
<p><span class=fl>ब्रे</span>डक्रंब
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Pseudo testcase - ::first-letter in Hindi</title>
|
||||
<link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com">
|
||||
<link rel="match" href="first-letter-hi-002-ref.html">
|
||||
<meta name="assert" content="When selecting the first-letter text, the UA should tailor its definition of typographic letter unit to reflect the first-letter traditions of the ::first-letter pseudo-element’s containing block’s content language">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-letter-pseudo">
|
||||
<link rel="help" href="https://www.w3.org/International/i18n-tests/run?base=css-pseudo/first-letter-pseudo&batch=first-letter-pseudo&test=first-letter-deva-syllable.html">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: test;
|
||||
src: url("/fonts/noto/NotoSansDevanagari-Regular.ttf");
|
||||
}
|
||||
p { font: 16px test, sans-serif; }
|
||||
p::first-letter { color: green; font-size: 2em; }
|
||||
</style>
|
||||
<body lang="hi">
|
||||
<p>क्लास
|
||||
<p>स्तिठड
|
||||
<p>प्याला
|
||||
<p>प्रियबर
|
||||
<p>ब्रेडक्रंब
|
||||
|
|
@ -6,7 +6,6 @@
|
|||
<link rel="author" title="Johannes Odland" href="mailto:johannes.odland@gmail.com">
|
||||
<link rel="match" href="first-letter-punctuation-and-space-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Test checks that punctuation, intervening space separators and letters still have proper ::first-letter styling.">
|
||||
<style>
|
||||
div {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Pseudo reference</title>
|
||||
<style>
|
||||
div {
|
||||
font: 16px monospace;
|
||||
line-height: 24px;
|
||||
width: 45ch;
|
||||
background: #eee;
|
||||
}
|
||||
.fl {
|
||||
font-size: 2.5em;
|
||||
line-height: 2em;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<span class="fl">Lorem ipsum dolor</span><br>
|
||||
sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Pseudo testcase: first-line</title>
|
||||
<link rel="author" title="Jonathan Kew" href="jkew@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-line-styling">
|
||||
<link rel="match" href="first-line-line-height-001-ref.html">
|
||||
<meta name="assert" content="The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level element">
|
||||
<style>
|
||||
div {
|
||||
font: 16px monospace;
|
||||
line-height: 24px;
|
||||
width: 45ch;
|
||||
background: #eee;
|
||||
}
|
||||
div:first-line {
|
||||
font-size: 2.5em;
|
||||
line-height: 2em;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Pseudo reference</title>
|
||||
<style>
|
||||
div {
|
||||
font: 24px/2em monospace;
|
||||
width: 45ch;
|
||||
background: #eee;
|
||||
}
|
||||
.fl {
|
||||
font-size: 16px;
|
||||
line-height: 1em;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<span class="fl">Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do</span> eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS-Pseudo testcase: first-line</title>
|
||||
<link rel="author" title="Jonathan Kew" href="jkew@mozilla.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-line-styling">
|
||||
<link rel="match" href="first-line-line-height-002-ref.html">
|
||||
<meta name="assert" content="The ::first-line pseudo-element’s generated box behaves similar to that of an inline-level element">
|
||||
<style>
|
||||
div {
|
||||
font: 24px/2em monospace;
|
||||
width: 45ch;
|
||||
background: #eee;
|
||||
}
|
||||
div:first-line {
|
||||
font-size: 16px;
|
||||
line-height: 1em;
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
||||
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
Ut enim ad minim veniam, quis nostrud exercitation ullamco
|
||||
laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</div>
|
||||
|
|
@ -11,7 +11,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="grammar-error-001-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
input
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-selectors">
|
||||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling">
|
||||
|
||||
<meta content="" name="flags">
|
||||
|
||||
<style>
|
||||
textarea
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
|
||||
<link rel="match" href="reference/grammar-spelling-errors-001-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, we postulate that the word 'dificultly' represents both a grammar error and a spelling error. In such editorial scenario, then the pseudo-element ::spelling-error's background color (yellow) is supposed to be drawn over the pseudo-element ::grammar-error's background color (red). The color should remain green as the pseudo-element ::spelling-error's 'color' is unspecified.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
|
||||
<link rel="match" href="reference/grammar-spelling-errors-002-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="In this test, we postulate that the word 'wolks' represents both a grammar error and a spelling error. In such such editorial scenario, then the pseudo-element ::spelling-error's 'color' (green) is supposed to be drawn over the pseudo-element ::grammar-error's 'color' (red). The background color should remain yellow as ::spelling-error's 'background-color' is unspecified, therefore defaulting to 'transparent'.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main > span::selection {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below is white on green.
|
||||
<main class="highlight_reftest"><span>quick</span></main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight cascade: unset is treated like inherit regardless of whether property is inherited</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-001-ref.html">
|
||||
<meta name="assert" value="This test verifies that, given ::selection styles with both color and background-color declared as unset, both properties inherit their values from the parent ::selection styles. All properties become inherited for the purposes of deciding whether unset should mean initial or inherit.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
background-color: green;
|
||||
color: white;
|
||||
}
|
||||
main > span::selection {
|
||||
background-color: unset;
|
||||
color: unset;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below is white on green.
|
||||
<main class="highlight_reftest"><span>quick</span></main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
}
|
||||
main > .control > span::selection,
|
||||
main > .bg > span::selection {
|
||||
color: white;
|
||||
background-color: green;
|
||||
}
|
||||
main > .fg > span::selection {
|
||||
color: green;
|
||||
background-color: white;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
|
||||
<!--
|
||||
The element tree below is intentionally the same shape as the
|
||||
test, despite the fact that we might be able to simplify it. This
|
||||
is because multiple impls (including Gecko and Blink) split the
|
||||
background paints accordingly, which can obscure ink overflow in
|
||||
some of the highlighted text (especially “f”).
|
||||
-->
|
||||
<main class="highlight_reftest"
|
||||
><span class="control"><span>foo</span></span
|
||||
> <span class="fg"><span>b</span></span
|
||||
><span class="fg"><span>a</span></span
|
||||
><span class="fg"><span>r</span></span
|
||||
> <span class="bg"><span>b</span></span
|
||||
><span class="bg"><span>a</span></span
|
||||
><span class="bg"><span>z</span></span
|
||||
></main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,120 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight cascade: custom properties are inherited regardless of inherits flag or inheritedness of referencing property</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-002-ref.html">
|
||||
<meta name="assert" value="This test verifies that, given ::selection styles referencing custom properties, their substitution values are inherited from the parent ::selection styles, even if the property is registered with inherits set to false (--inherits-false) or the referencing property is not an inherited property (background-color). All custom properties are treated as inherited when used in highlight styles in any way.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
/*
|
||||
Register the custom properties, other than --unregistered,
|
||||
which would be an inherited property [css-variables-1].
|
||||
*/
|
||||
@property --control {
|
||||
syntax: "<color>";
|
||||
initial-value: green;
|
||||
inherits: false;
|
||||
}
|
||||
@property --inherits-false {
|
||||
syntax: "<color>";
|
||||
initial-value: red;
|
||||
inherits: false;
|
||||
}
|
||||
@property --inherits-true {
|
||||
syntax: "<color>";
|
||||
initial-value: red;
|
||||
inherits: true;
|
||||
}
|
||||
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
/*
|
||||
Don’t visibly highlight the spaces between words.
|
||||
*/
|
||||
color: black;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
/*
|
||||
Non-highlight control: if this text is white on red (inherit)
|
||||
rather than white on green (initial), then @property is not
|
||||
supported well enough to make this test meaningful.
|
||||
*/
|
||||
main > .control {
|
||||
--control: red;
|
||||
}
|
||||
main > .control > span {
|
||||
color: white;
|
||||
background-color: var(--control);
|
||||
}
|
||||
|
||||
main > *::selection {
|
||||
--inherits-false: green;
|
||||
--inherits-true: green;
|
||||
--unregistered: green;
|
||||
}
|
||||
|
||||
/*
|
||||
Foreground tests: if the foreground of this text is red or
|
||||
black (initial) rather than green (inherit), then custom
|
||||
properties are not being inherited in highlight styles.
|
||||
|
||||
color is an inherited property, but that shouldn’t matter.
|
||||
*/
|
||||
main > .fg > span::selection {
|
||||
background-color: white;
|
||||
}
|
||||
main > .fg.inherits-false > span::selection {
|
||||
color: var(--inherits-false);
|
||||
}
|
||||
main > .fg.inherits-true > span::selection {
|
||||
color: var(--inherits-true);
|
||||
}
|
||||
main > .fg.unregistered > span::selection {
|
||||
color: var(--unregistered);
|
||||
}
|
||||
|
||||
/*
|
||||
Background tests: if the background of this text is red or
|
||||
black (initial) rather than green (inherit), then custom
|
||||
properties are not being inherited in highlight styles.
|
||||
|
||||
background-color is not an inherited property, but that
|
||||
shouldn’t matter.
|
||||
*/
|
||||
main > .bg > span::selection {
|
||||
color: white;
|
||||
}
|
||||
main > .bg.inherits-false > span::selection {
|
||||
background-color: var(--inherits-false);
|
||||
}
|
||||
main > .bg.inherits-true > span::selection {
|
||||
background-color: var(--inherits-true);
|
||||
}
|
||||
main > .bg.unregistered > span::selection {
|
||||
background-color: var(--unregistered);
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the words below are (respectively): white on green, green on white, white on green.
|
||||
<main class="highlight_reftest"
|
||||
><span class="control"><span>foo</span></span
|
||||
> <span class="fg inherits-false"><span>b</span></span
|
||||
><span class="fg inherits-true"><span>a</span></span
|
||||
><span class="fg unregistered"><span>r</span></span
|
||||
> <span class="bg inherits-false"><span>b</span></span
|
||||
><span class="bg inherits-true"><span>a</span></span
|
||||
><span class="bg unregistered"><span>z</span></span
|
||||
></main>
|
||||
<script>
|
||||
const main = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(main);
|
||||
range.setStart(main, 2);
|
||||
range.setEnd(main, 9);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Initial custom property values in :root::selection rule</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
|
||||
<script src="support/selections.js"></script>
|
||||
<style>
|
||||
:root::selection {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<main>PASS if background-color is green when selected</main>
|
||||
<script>
|
||||
selectNodeContents(document.querySelector("main"));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Initial custom property values in :root::selection rule</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
|
||||
<link rel="match" href="highlight-cascade-003-ref.html">
|
||||
<meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
|
||||
<script src="support/selections.js"></script>
|
||||
<style>
|
||||
@property --bg {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: green;
|
||||
}
|
||||
:root::selection {
|
||||
background-color: var(--bg, red);
|
||||
}
|
||||
</style>
|
||||
<main>PASS if background-color is green when selected</main>
|
||||
<script>
|
||||
selectNodeContents(document.querySelector("main"));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Initial custom property values in div::selection rule</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
|
||||
<script src="support/selections.js"></script>
|
||||
<style>
|
||||
div::selection {
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<div>PASS if background-color is green when selected</div>
|
||||
<script>
|
||||
selectNodeContents(document.querySelector("div"));
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>Initial custom property values in div::selection rule</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-cascade">
|
||||
<link rel="match" href="highlight-cascade-004-ref.html">
|
||||
<meta name="assert" value="This test verifies that the initial value given in a custom property registration is respected, when the property is referenced in ::selection styles but no value is defined. The initial value is not the guaranteed-invalid value, so the fallback value in var() is not used.">
|
||||
<script src="support/selections.js"></script>
|
||||
<style>
|
||||
@property --bg {
|
||||
syntax: "<color>";
|
||||
inherits: false;
|
||||
initial-value: green;
|
||||
}
|
||||
div::selection {
|
||||
background-color: var(--bg, red);
|
||||
}
|
||||
</style>
|
||||
<div>PASS if background-color is green when selected</div>
|
||||
<script>
|
||||
selectNodeContents(document.querySelector("div"));
|
||||
</script>
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
p {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight painting</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">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
:root {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight painting</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">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight painting</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">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight painting</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">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
background-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if no text is legible below.
|
||||
<main class="highlight_reftest">FAIL</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are not used when highlight pseudo cascade yields foreground color</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">
|
||||
<link rel="match" href="highlight-paired-cascade-001-ref.html">
|
||||
<meta name="assert" value="This test verifies that setting color on ::selection suppresses any UA non-initial used value for background-color. These properties are highlight colors, which are subject to paired cascade.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
/*
|
||||
Used background-color should be initial (transparent).
|
||||
https://www.w3.org/TR/CSS21/colors.html#propdef-background-color
|
||||
*/
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if no text is legible below.
|
||||
<main class="highlight_reftest">FAIL</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
color: black;
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if no text is legible below.
|
||||
<main class="highlight_reftest">FAIL</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are not used when highlight pseudo cascade yields background color</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">
|
||||
<link rel="match" href="highlight-paired-cascade-002-ref.html">
|
||||
<meta name="assert" value="This test verifies that setting background-color on ::selection suppresses any UA non-initial used value for color. These properties are highlight colors, which are subject to paired cascade.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
/*
|
||||
Used value for color should be initial (black).
|
||||
https://web-platform-tests.org/writing-tests/assumptions.html
|
||||
*/
|
||||
background-color: black;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if no text is legible below.
|
||||
<main class="highlight_reftest">FAIL</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
/*
|
||||
UA default highlight colors for ::selection.
|
||||
*/
|
||||
</style>
|
||||
<p>Test passes if the text below appears to be highlighted.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are used when highlight pseudo cascade yields only properties other than highlight colors</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">
|
||||
<link rel="match" href="highlight-paired-cascade-003-ref.html">
|
||||
<meta name="assert" value="This test verifies that setting text-decoration on ::selection does not suppress any UA non-initial used values for color or background-color. While the former is an applicable (shorthand) property for highlight styles, it is not one of the highlight colors (color or background-color), so paired cascade does not apply.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
/*
|
||||
Used values for color and background-color should be the
|
||||
UA defaults, usually like black on blue or white on blue,
|
||||
*not* initial on initial (like unhighlighted content).
|
||||
*/
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below appears to be highlighted.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
:link, :visited {
|
||||
color: blue;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
/*
|
||||
UA default highlight colors for ::target-text.
|
||||
*/
|
||||
</style>
|
||||
<p>Test passes if the text below does not appear to be highlighted (<a href="">test again</a>).
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>location.href = "#:~:text=quick";</script>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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">
|
||||
<link rel="mismatch" href="highlight-paired-cascade-004-notref.html">
|
||||
<meta name="assert" value="This test verifies that setting color on ::target-text suppresses any UA non-initial used value for background-color. ::target-text is a highlight pseudo with a recommended UA default background-color that is not initial (Mark), so paired cascade can be observed.">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
:link, :visited {
|
||||
color: blue;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::target-text {
|
||||
/*
|
||||
Used background-color should be initial (transparent).
|
||||
https://www.w3.org/TR/CSS21/colors.html#propdef-background-color
|
||||
*/
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below does not appear to be highlighted (<a href="">test again</a>).
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>location.href = "#:~:text=quick";</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
background-color: transparent;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below does not appear to be highlighted.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!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">
|
||||
<link rel="match" href="highlight-paired-cascade-005-ref.html">
|
||||
<meta name="assert" value="This test verifies that setting color to unset on ::selection suppresses any UA non-initial used value for background-color. The unset value is defined as both “treated as [inherit or initial depending on whether the property is inherited]” and “effectively erases all declared values occurring earlier in the cascade [(inclusive)]”, which are normally equivalent, but under paired cascade, the former wins.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
/*
|
||||
Used background-color should be initial (transparent).
|
||||
https://www.w3.org/TR/CSS21/colors.html#propdef-background-color
|
||||
*/
|
||||
color: unset;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below does not appear to be highlighted.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
/*
|
||||
UA default highlight colors for ::selection.
|
||||
*/
|
||||
</style>
|
||||
<p>Test passes if the text below appears to be highlighted.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: paired cascade: UA default highlight colors are used when highlight pseudo has declared color value of revert</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">
|
||||
<link rel="match" href="highlight-paired-cascade-006-ref.html">
|
||||
<meta name="assert" value="This test verifies that setting color to revert on ::selection does not suppress any UA non-initial used value for background-color. Because the revert value rolls back the cascade, it destroys its own existence as a cascaded value, and this is also true under paired cascade.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
/*
|
||||
Used background-color should be UA default, not initial.
|
||||
*/
|
||||
color: revert;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below appears to be highlighted.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
color: white;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below is white on green.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight styling: custom properties are applicable properties in highlight pseudos</title>
|
||||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="highlight-styling-001-ref.html">
|
||||
<meta name="assert" value="This test verifies that ::selection styles can set and reference custom properties.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
--x: green;
|
||||
color: white;
|
||||
background-color: var(--x);
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below is white on green.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<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>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
}
|
||||
main::selection {
|
||||
color: white;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below is white on green.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: highlight styling: originating custom property values do not affect highlight pseudos</title>
|
||||
<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-styling">
|
||||
<link rel="match" href="highlight-styling-002-ref.html">
|
||||
<meta name="assert" value="This test verifies that custom property values set in originating elements do not participate in the substitution of those properties in ::selection styles.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
--x: red;
|
||||
}
|
||||
main::selection {
|
||||
color: white;
|
||||
background-color: var(--x, green);
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the text below is white on green.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>selectNodeContents(document.querySelector("main"));</script>
|
||||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
|
||||
<link rel="match" href="highlight-z-index-001-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="This test checks that the ::selection pseudo-element must be drawn below a relatively positioned element. In this test, such relatively positioned element is a preceding sibling element.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting">
|
||||
<link rel="match" href="highlight-z-index-002-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta name="assert" content="This test checks that the ::selection pseudo-element must be drawn below an absolutely positioned element. In this test, such absolutely positioned element is a preceding sibling element.">
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -70,6 +70,24 @@ const interpolationTests = [
|
|||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-synthesis-small-caps",
|
||||
from: "auto",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-synthesis-style",
|
||||
from: "auto",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-synthesis-weight",
|
||||
from: "auto",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-variant",
|
||||
from: "unicase",
|
||||
|
|
@ -243,8 +261,8 @@ const interpolationTests = [
|
|||
},
|
||||
{
|
||||
property: "text-emphasis-style",
|
||||
from: "dot",
|
||||
to: "triangle",
|
||||
from: "filled dot",
|
||||
to: "filled triangle",
|
||||
midPoint: "triangle",
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -23,6 +23,9 @@ test_pseudo_computed_value("::marker", "font-size-adjust", "1");
|
|||
test_pseudo_computed_value("::marker", "font-stretch", "expanded", ["expanded", "125%"]);
|
||||
test_pseudo_computed_value("::marker", "font-style", "italic");
|
||||
test_pseudo_computed_value("::marker", "font-synthesis", "none");
|
||||
test_pseudo_computed_value("::marker", "font-synthesis-small-caps", "none");
|
||||
test_pseudo_computed_value("::marker", "font-synthesis-style", "none");
|
||||
test_pseudo_computed_value("::marker", "font-synthesis-weight", "none");
|
||||
test_pseudo_computed_value("::marker", "font-variant", "small-caps");
|
||||
test_pseudo_computed_value("::marker", "font-variant-caps", "small-caps");
|
||||
test_pseudo_computed_value("::marker", "font-variant-east-asian", "full-width");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,20 @@
|
|||
<!doctype html>
|
||||
<title>CSS Pseudo Test: ::placeholder inherits from its originating element</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike">
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
input { background-color: green; }
|
||||
input::placeholder {
|
||||
color: green;
|
||||
background-color: inherit;
|
||||
}
|
||||
</style>
|
||||
<input id="inp" type="text">
|
||||
<script>
|
||||
test(() => {
|
||||
const style = getComputedStyle(inp, "::placeholder");
|
||||
assert_equals(style.color, "rgb(0, 128, 0)", "Check that ::placeholder is supported via color");
|
||||
assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "::placeholder inheriting background-color");
|
||||
}, "::placeholder should inherit from its originating element");
|
||||
</script>
|
||||
|
|
@ -11,12 +11,12 @@
|
|||
div
|
||||
{
|
||||
background-color: green;
|
||||
color: fuchsia;
|
||||
color: aqua;
|
||||
display: inline;
|
||||
font-size: 300%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is fuchsia.
|
||||
<p>Test passes if the background color of each glyph of "Selected Text" is green and <strong>not red</strong> while each glyph of "Selected Text" is aqua and <strong>not fuchsia</strong>.
|
||||
|
||||
<div class="highlight_reftest">Selected Text</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Reftest Reference</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
|
||||
<link rel="stylesheet" href="../support/highlights.css">
|
||||
|
||||
<style>
|
||||
div
|
||||
{
|
||||
background-color: green;
|
||||
color: yellow;
|
||||
display: inline;
|
||||
font-size: 300%;
|
||||
}
|
||||
|
||||
span
|
||||
{
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
|
||||
<p>Test passes if "Text selected" has a green background throughout, if "Tex" and "cted" are yellow and if "t sele" are orange.
|
||||
|
||||
<div class="highlight_reftest">Tex<span>t sele</span>cted</div>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: CSSTest;
|
||||
src: url(/fonts/CSSTest/csstest-basic-italic.ttf);
|
||||
}
|
||||
main {
|
||||
font: 80px/1 CSSTest;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
.unselected {
|
||||
background: black;
|
||||
}
|
||||
.orange {
|
||||
color: orange;
|
||||
}
|
||||
.selected {
|
||||
background: #0000FFC0;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
In this ref, the overhanging parts of the selected text are
|
||||
visible, being painted in orange. Gecko does this.
|
||||
-->
|
||||
<p>Test passes if the blue rectangle below contains no proper orange, only orange dimmed by blue.
|
||||
<main class="highlight_reftest">
|
||||
<div class="hrt_layers">
|
||||
<div><span class="unselected">ii∫<span class="orange">∫∫</span></span></div>
|
||||
<div><span class="selected">ii∫</span>∫∫</div>
|
||||
ii∫∫∫
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: CSSTest;
|
||||
src: url(/fonts/CSSTest/csstest-basic-italic.ttf);
|
||||
}
|
||||
main {
|
||||
font: 80px/1 CSSTest;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
.unselected {
|
||||
background: black;
|
||||
}
|
||||
.orange {
|
||||
color: orange;
|
||||
}
|
||||
.selected {
|
||||
background: #0000FFC0;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<!--
|
||||
In this ref, the overhanging parts of the selected text are
|
||||
invisible, being painted in transparent. Blink does this.
|
||||
-->
|
||||
<p>Test passes if the blue rectangle below contains no proper orange, only orange dimmed by blue.
|
||||
<main class="highlight_reftest">
|
||||
<div class="hrt_layers">
|
||||
<div><span class="unselected">ii∫∫∫</span></div>
|
||||
<div>ii∫<span class="hrt_hider">
|
||||
<div><span class="orange">ii∫</span>∫∫</div>
|
||||
∫∫
|
||||
</span></div>
|
||||
<div>ii∫<span class="orange">∫∫</span></div>
|
||||
<div><span class="selected">ii∫</span>∫∫</div>
|
||||
ii∫∫∫
|
||||
</div>
|
||||
</main>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<!-- see “Selection regression tests” in README.md -->
|
||||
<title>CSS Pseudo-Elements Test: ::selection background always paints over unselected parts when selecting text</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="selection-background-painting-order-ref1.html">
|
||||
<link rel="match" href="selection-background-painting-order-ref2.html">
|
||||
<meta name="assert" value="This test verifies that when selecting text, the ::selection background always paints over unselected parts.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
@font-face {
|
||||
font-family: CSSTest;
|
||||
src: url(/fonts/CSSTest/csstest-basic-italic.ttf);
|
||||
}
|
||||
main {
|
||||
font: 80px/1 CSSTest;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
main > span {
|
||||
background: black;
|
||||
color: orange;
|
||||
}
|
||||
main > span::selection {
|
||||
/*
|
||||
Safari on macOS: opaque selection backgrounds are made
|
||||
translucent in the used value, so we need to choose a
|
||||
background color with known but non-opaque alpha.
|
||||
*/
|
||||
background: #0000FFC0;
|
||||
color: transparent;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the blue rectangle below contains no proper orange, only orange dimmed by blue.
|
||||
<main class="highlight_reftest"><span>ii∫∫∫</span></main>
|
||||
<script>
|
||||
const target = document.querySelector("main > span");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 0);
|
||||
range.setEnd(target.childNodes[0], 3);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
<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-selectors">
|
||||
<link rel="match" href="reference/selection-contenteditable-011-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<!-- Allow different antialiased pixels on the focus ring. -->
|
||||
<meta name="fuzzy" content="0-5;0-255">
|
||||
|
||||
<style>
|
||||
div
|
||||
|
|
|
|||
|
|
@ -1,13 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
main {
|
||||
font: 7em Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is no red below.
|
||||
<main class="highlight_reftest">XX</main>
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: currentColor solid line-through;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if all of the text below is decorated with a line-through.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
|
||||
<link rel="match" href="selection-decoration-p2-ref.html">
|
||||
<meta name="assert" value="originating line-through decorations are always painted over text, even when some of the text is selected">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
/*
|
||||
This test verifies that line-through decorations are correctly
|
||||
“lifted” to paint over selected text.
|
||||
|
||||
Chromium fails this test before /c/2902289.
|
||||
*/
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: currentColor solid line-through;
|
||||
}
|
||||
main::selection {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if all of the text below is decorated with a line-through.
|
||||
<main class="highlight_reftest">quick</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 1);
|
||||
range.setEnd(target.childNodes[0], 4);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
main {
|
||||
font: 7em Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
main .green {
|
||||
text-decoration: 0.125em green solid line-through;
|
||||
}
|
||||
main .recolor {
|
||||
text-decoration: 0.125em currentColor solid line-through;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the line-through decoration has two green ends.
|
||||
<main class="highlight_reftest"><span class="green">p</span><span class="recolor">ppp</span><span class="green">p</span></main>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: 0.125em currentColor solid underline;
|
||||
/* try to keep decoration between ascent and baseline */
|
||||
text-underline-offset: -0.5em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a solid line through the “O” below.
|
||||
<main class="highlight_reftest">O</main>
|
||||
|
|
@ -1,43 +0,0 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-painting">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#painting">
|
||||
<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html#painting-order">
|
||||
<link rel="match" href="selection-decoration-p4-ref.html">
|
||||
<meta name="assert" value="originating decorations on selected parts are painted over ::selection background">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<style>
|
||||
/*
|
||||
This test verifies that originating decorations are correctly
|
||||
“lifted” to paint over the ::selection background.
|
||||
|
||||
Chromium fails this test before /c/2902289.
|
||||
*/
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font-size: 7em;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: 0.125em currentColor solid underline;
|
||||
/* try to keep decoration between ascent and baseline */
|
||||
text-underline-offset: -0.5em;
|
||||
}
|
||||
main::selection {
|
||||
background: white;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is a solid line through the “O” below.
|
||||
<main class="highlight_reftest">O</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 0);
|
||||
range.setEnd(target.childNodes[0], 1);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -7,8 +7,8 @@
|
|||
<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-selectors">
|
||||
<link rel="match" href="reference/selection-input-011-ref.html">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<!-- Allow different antialiased pixels on the focus ring. -->
|
||||
<meta name="fuzzy" content="0-5;0-255">
|
||||
|
||||
<style>
|
||||
input
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
main {
|
||||
font: 80px/1 Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
}
|
||||
main .black {
|
||||
color: black;
|
||||
text-decoration: 0.125em black solid line-through;
|
||||
}
|
||||
main .green {
|
||||
color: green;
|
||||
text-decoration: 0.125em green solid line-through;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there are two green lines of the same length.
|
||||
<main class="highlight_reftest"><span class="black">p</span><span class="green">ppp</span><span class="black">p</span></main>
|
||||
|
|
@ -1,32 +1,30 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
|
||||
<!-- see “Selection regression tests” in README.md -->
|
||||
<title>CSS Pseudo-Elements Test: originating decorations on unselected parts remain in originating text-decoration-color when selecting text</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="selection-decoration-p3-ref.html">
|
||||
<meta name="assert" value="originating decorations on unselected parts are in originating text-decoration-color, even when some of the text is selected">
|
||||
<link rel="match" href="selection-originating-decoration-color-ref.html">
|
||||
<meta name="assert" value="This test verifies that selecting text does not cause originating decorations on unselected parts, which should always paint in originating text-decoration-color, to paint in a different color. Such decorations should only recolor to ::selection color in the selected part.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
/*
|
||||
This test verifies that the originating decoration is not
|
||||
recolored in the unselected parts.
|
||||
|
||||
Chromium fails this test before /c/2903387.
|
||||
*/
|
||||
main {
|
||||
font: 7em Ahem;
|
||||
font: 80px/1 Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: 0.125em green solid line-through;
|
||||
color: black;
|
||||
text-decoration: 0.125em black solid line-through;
|
||||
}
|
||||
main::selection {
|
||||
background: transparent;
|
||||
color: green;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if the line-through decoration has two green ends.
|
||||
<p>Test passes if there are two green lines of the same length.
|
||||
<main class="highlight_reftest">ppppp</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
main {
|
||||
font: 80px/1 Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
color: black;
|
||||
text-decoration: 1em black solid line-through;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is one line of constant thickness below.
|
||||
<main class="highlight_reftest">ppppp</main>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<!-- see “Selection regression tests” in README.md -->
|
||||
<title>CSS Pseudo-Elements Test: originating line-through decorations paint over ::selection backgrounds on selected text</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="selection-originating-strikethrough-order-ref.html">
|
||||
<meta name="assert" value="This test verifies that originating line-through decorations on selected text are not obscured by ::selection background.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
main {
|
||||
font: 80px/1 Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
color: black;
|
||||
text-decoration: 1em black solid line-through;
|
||||
}
|
||||
main::selection {
|
||||
/*
|
||||
Safari on macOS: with an opaque selection background, the
|
||||
used value will be translucent. The ref shouldn’t need to
|
||||
take this into account, as the selected text and its
|
||||
decorations should entirely obscure the background.
|
||||
*/
|
||||
background: white;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is one line of constant thickness below.
|
||||
<main class="highlight_reftest">ppppp</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
selectRangeWith(range => {
|
||||
range.selectNodeContents(target);
|
||||
range.setStart(target.childNodes[0], 1);
|
||||
range.setEnd(target.childNodes[0], 4);
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<link rel="author" name="Delan Azabani" href="mailto:dazabani@igalia.com">
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font: 80px/1 Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
/*
|
||||
Edge on Windows anti-aliases Ahem for some reason, which
|
||||
allows the tip of the test underline to show through, so
|
||||
we still need this underline despite seeming unnecessary.
|
||||
*/
|
||||
text-decoration: 0.25em currentColor solid underline;
|
||||
/* try to keep decoration between ascent and descent */
|
||||
text-underline-offset: -0.5em;
|
||||
}
|
||||
main > span {
|
||||
color: blue;
|
||||
/*
|
||||
Edge on Windows anti-aliases Ahem for some reason, which
|
||||
allows the tip of the test underline to show through, so
|
||||
we still need this underline despite seeming unnecessary.
|
||||
*/
|
||||
text-decoration: 0.25em blue solid underline;
|
||||
/* try to keep decoration between ascent and descent */
|
||||
text-underline-offset: -0.5em;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is no red below and two squares, entirely blue (left) and entirely black (right).
|
||||
<main class="highlight_reftest"><span>X</span>X</main>
|
||||
|
|
@ -1,33 +1,23 @@
|
|||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: interactions between ::selection and text-decoration</title>
|
||||
<!-- see “Selection regression tests” in README.md -->
|
||||
<title>CSS Pseudo-Elements Test: originating underlines remain under unselected parts when selecting text</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="selection-decoration-p1-ref.html">
|
||||
<meta name="assert" value="originating underlines and overlines are never painted over text, even when some of the text is selected">
|
||||
<link rel="match" href="selection-originating-underline-order-ref.html">
|
||||
<meta name="assert" value="This test verifies that selecting text does not cause originating underline decorations, which should always paint under text, to paint over unselected parts.">
|
||||
<script src="support/selections.js"></script>
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
<link rel="stylesheet" href="/fonts/ahem.css">
|
||||
<style>
|
||||
/*
|
||||
The idea behind this test is that the underline should be
|
||||
completely obscured by both the selected and unselected text.
|
||||
|
||||
Note that the former is not yet actually tested here, because
|
||||
originating decoration recoloring essentially makes it
|
||||
impossible to tell whether the text or underline is on top
|
||||
(this can be fixed by highlighting the unselected text with
|
||||
some other highlight pseudo, so recoloring doesn’t apply).
|
||||
|
||||
Chromium fails in /c/2902289 and passes in /c/2903387.
|
||||
*/
|
||||
* {
|
||||
text-decoration-skip-ink: none;
|
||||
text-decoration-skip: none;
|
||||
}
|
||||
main {
|
||||
font: 7em Ahem;
|
||||
font: 80px/1 Ahem;
|
||||
margin: 0.5em;
|
||||
width: min-content;
|
||||
text-decoration: 0.25em red solid underline;
|
||||
|
|
@ -36,9 +26,10 @@
|
|||
}
|
||||
main::selection {
|
||||
background: transparent;
|
||||
color: blue;
|
||||
}
|
||||
</style>
|
||||
<p>Test passes if there is no red below.
|
||||
<p>Test passes if there is no red below and two squares, entirely blue (left) and entirely black (right).
|
||||
<main class="highlight_reftest">XX</main>
|
||||
<script>
|
||||
const target = document.querySelector("main");
|
||||
|
|
@ -10,7 +10,6 @@
|
|||
<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.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@
|
|||
<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.">
|
||||
|
||||
<link rel="stylesheet" href="support/highlights.css">
|
||||
|
|
|
|||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue