diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-pseudo')
434 files changed, 15122 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-pseudo/META.yml b/testing/web-platform/tests/css/css-pseudo/META.yml new file mode 100644 index 0000000000..ae32225954 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/META.yml @@ -0,0 +1,4 @@ +spec: https://drafts.csswg.org/css-pseudo/ +suggested_reviewers: + - plinss + - frivoal diff --git a/testing/web-platform/tests/css/css-pseudo/README.md b/testing/web-platform/tests/css/css-pseudo/README.md new file mode 100644 index 0000000000..200d92cc59 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/README.md @@ -0,0 +1,69 @@ +## Highlight pseudos + +There are many subtle browser differences in rendering these pseudo-elements, +most of which comply with the specs, so here are some hints. + +Use the helpers in `support/highlights.css` and `support/selections.js` where +possible. They include rules and functions for “basic” but tricky tasks like +setting up a test area, selecting content, and triggering spellcheck. + +When creating complex layered references, start by wrapping your text in a +relative container, then prepend absolute layers with copies of that text, then +mark up those copies with spans. Make everything transparent initially, and set +visible styles on the spans only. The absolute layers will perfectly overlap +your original text, which you can keep for external layout. For example: + +```html +<div class="container"> + <div class="spelling-error"><span>Teh</span> <span>dgo</span> and + <span>teh</span> <span>sphixn</span>.</div> + <div class="selection">Teh d<span>go and te</span>h sphixn.</div> + Teh dgo and teh sphixn. +</div> +``` +```css +.container { position: relative; color: transparent; } +.container > * { position: absolute; } +.spelling-error > span { background: ...; color: ...; } +.selection > span { background: ...; text-shadow: ...; } +``` + +Simplify this pattern at your own peril! For example, if you set backgrounds +directly on layers as your highlight backgrounds, they will always be exactly +`line-height` tall, but even if your `line-height` is 1, the actual line boxes +and so on can still be taller (unless they contain Ahem text only). + + +## 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. diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-001-manual.html b/testing/web-platform/tests/css/css-pseudo/active-selection-001-manual.html new file mode 100644 index 0000000000..55001fe379 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-001-manual.html @@ -0,0 +1,37 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and color (basic)</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + + <meta content="interact" name="flags"> + + <style> + div + { + color: red; + font-size: 300%; + } + + div::selection + { + color: green; + } + </style> + + <p>Instructions: Select a few or all characters from the words "Text sample" using a variety of methods: + + <ul> + <li>Select by dragging (leftwardedly or rightwardedly) the mouse across the characters. + <li>Select by using shift + keyboard arrows when keyboard navigation / caret browsing is enabled. + <li>Double click a word to select it. + <li>Triple click the text to select it. + </ul> + + <p>Test passes if, in every case, the selected characters become green <em>and</em> if there is no background color for the characters selection. + + <div>Text sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-002-manual.html b/testing/web-platform/tests/css/css-pseudo/active-selection-002-manual.html new file mode 100644 index 0000000000..01cec72b2d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-002-manual.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and background-color (basic)</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + + <meta content="interact" name="flags"> + + <style> + div + { + background-color: red; + color: aqua; + display: inline; + font-size: 300%; + } + + div::selection + { + background-color: green; + } + + /* + Chromium 77.0.3855.0 creates a background-color #334C00 or rgb(51, 76, 0) + and not a green (#008000 or rgb(0, 128, 0)) background color. + + Issue 1018450: background-color of ::selection should be painted as specified + https://bugs.chromium.org/p/chromium/issues/detail?id=1018450 + */ + </style> + + <p>Instructions: Select a few or all characters from the words "Text sample" using a variety of methods: + + <ul> + <li>Select by dragging (leftwardedly or rightwardedly) the mouse across the characters. + <li>Select by using shift + keyboard arrows when keyboard navigation / caret browsing is enabled. + <li>Double click a word to select it. + <li>Triple click the text to select it. + </ul> + + <p>Test passes if, in every case, the background color of selected characters become green <em>and</em> if text color of selected characters remains aqua. + + <div>Text sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-004-manual.html b/testing/web-platform/tests/css/css-pseudo/active-selection-004-manual.html new file mode 100644 index 0000000000..ac7ba7da32 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-004-manual.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and text-decoration (basic)</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + + <meta content="interact should" name="flags"> + + <style> + div + { + font-size: 300%; + } + + div::selection + { + text-decoration: fuchsia underline dotted; + } + </style> + + <p>Instructions: Select a few or all characters from the words "Text sample" using a variety of methods: + + <ul> + <li>Select by dragging (leftwardedly or rightwardedly) the mouse across the characters. + <li>Select by using shift + keyboard arrows when keyboard navigation / caret browsing is enabled. + <li>Double click a word to select it. + <li>Triple click the text to select it. + </ul> + + <p>Test passes if, in every case, the selected glyphs of "Text sample" are underlined with a fuchsia dotted line <em>and</em> if the background color and color of the selected text are the same as when selecting text from these instructions. + + <div>Text sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-011.html b/testing/web-platform/tests/css/css-pseudo/active-selection-011.html new file mode 100644 index 0000000000..bdee22411d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-011.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and color (basic)</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="match" href="reference/active-selection-011-ref.html"> + + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + color: red; + font-size: 300%; + } + + div::selection + { + color: green; + } + </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 each glyph of "Selected Text" is green and <strong>not red</strong> while background color of each glyph of "Selected Text" is white. + + <div id="test" class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-012.html b/testing/web-platform/tests/css/css-pseudo/active-selection-012.html new file mode 100644 index 0000000000..e949f6862f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-012.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and background-color (basic)</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="match" href="reference/active-selection-012-ref.html"> + + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + background-color: red; + color: fuchsia; + display: inline; + font-size: 300%; + } + + div::selection + { + background-color: green; + color: aqua; + } + + /* + Chromium 77.0.3855.0 and above create a background-color #334C00 or + rgb(51, 76, 0) and not a green (#008000 or rgb(0, 128, 0)) background + color. + */ + </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 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> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-014.html b/testing/web-platform/tests/css/css-pseudo/active-selection-014.html new file mode 100644 index 0000000000..89f28a4ffb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-014.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and text-decoration</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting"> + <link rel="match" href="reference/active-selection-014-ref.html"> + + <meta content="should" name="flags"> + <meta name="assert" content="This test checks that 'text-decoration' applies to highlight pseudo-element. Since neither 'color' nor 'background-color' has been specified by the pseudo-element selector in this test, then OS-default highlight colors should be used. The consequence of this is that the highlight color determines also the color of the underline."> + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + font-size: 300%; + } + + div::selection + { + text-decoration: underline; + } + </style> + + <!-- + " + The element's own text decorations (both line decorations + and emphasis marks) are thus drawn in the pseudo-element's + own color when that is not currentColor, regardless of + their original color or fill specifications. + " + coming from + https://www.w3.org/TR/css-pseudo-4/#highlight-painting + --> + + <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 each glyph of "Selected Text" is underlined and if color and background color of "Selected Text" are the OS-default highlight colors. The underline color must also be the same as the highlight color of "Selected Text". + + <div id="test" class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-016.html b/testing/web-platform/tests/css/css-pseudo/active-selection-016.html new file mode 100644 index 0000000000..82a77d7498 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-016.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection of partial text and color</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="match" href="reference/active-selection-016-ref.html"> + + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + background-color: white; + color: white; + font-size: 300%; + } + + div::selection + { + color: green; + } + </style> + + <script> + function startTest() + { + var targetRange = document.createRange(); + /* We first create an empty range */ + targetRange.setStart(document.getElementById("test").childNodes[0], 5); + /* + Then we set the start boundary of the range inside div#test to + */ + targetRange.setEnd(document.getElementById("test").childNodes[0], 9); + /* And we set the end boundary of the range inside div#test right */ + window.getSelection().addRange(targetRange); + /* Finally, we now select such range of content */ + } + </script> + + <body onload="startTest();"> + + <div id="test" class="highlight_reftest">FAIL PASS FAIL</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-018.html b/testing/web-platform/tests/css/css-pseudo/active-selection-018.html new file mode 100644 index 0000000000..00826bb5f2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-018.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection, color and background-color</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="match" href="reference/active-selection-018-ref.html"> + + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + color: green; + font-size: 300%; + } + + span + { + color: red; + } + + div::selection + { + background-color: white; + } + /* + This div::selection rule is necessary. Without it, + "Selected Text" would be using the OS-default + highlight colors for ::selection + because neither color nor background-color would have + been specified by the author. + */ + + span::selection + { + color: white; + } + </style> + + <script> + function startTest() + { + var targetRange = document.createRange(); + /* We first create an empty range */ + targetRange.selectNodeContents(document.getElementById("parent")); + /* Then we set the range boundaries to the children of div#parent */ + window.getSelection().addRange(targetRange); + /* Finally, we now select such range of content */ + } + </script> + + <body onload="startTest();"> + + <p>Test passes if each glyph of "Selected Text" is green, if background color of each glyph of "Selected Text" is white and if there is <strong>no red</strong>. + + <div id="parent" class="highlight_reftest">Selected Text <span>FAIL</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-021.html b/testing/web-platform/tests/css/css-pseudo/active-selection-021.html new file mode 100644 index 0000000000..767366b8c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-021.html @@ -0,0 +1,55 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection, color and 'text-decoration: underline overline line-through'</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-styling"> + <link rel="match" href="reference/active-selection-021-ref.html"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + color: red; + font: 25px/1 Ahem; + text-decoration: underline overline line-through; + } + + div::selection + { + color: green; + } + </style> + + <!-- + " + The element's own text decorations (both line decorations + and emphasis marks) are thus drawn in the pseudo-element's + own color when that is not currentColor, regardless of + their original color or fill specifications. + " + coming from + https://www.w3.org/TR/css-pseudo-4/#highlight-painting + --> + + <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 each glyph of "Selected Text" is green and <strong>not red</strong> and if the underline, the overline and the line-through are also green and not red. + + <div id="test" class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-025.html b/testing/web-platform/tests/css/css-pseudo/active-selection-025.html new file mode 100644 index 0000000000..fd861008ee --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-025.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and first-letter pseudo-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-selectors"> + <link rel="match" href="reference/active-selection-025-ref.html"> + + <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."> + + <!-- + + More info: + [css-pseudo-4] Original color of highlight pseudo inside + ::first-letter/::first-line + https://github.com/w3c/csswg-drafts/issues/4625 + + RESOLVED: Whatever highlight being applied uses colors from before + even if came from pseudo element like ::first-letter/::first-line + + --> + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + color: green; + font-size: 300%; + } + + div::first-letter + { + color: purple; + } + + div::selection + { + background-color: yellow; + } + </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 background color of "Selected Text" is yellow, if the "S" glyph is purple and if the other glyphs are green. + + <div id="test" class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-027.html b/testing/web-platform/tests/css/css-pseudo/active-selection-027.html new file mode 100644 index 0000000000..899d23c488 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-027.html @@ -0,0 +1,60 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and first-line pseudo-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-selectors"> + <link rel="match" href="reference/active-selection-027-ref.html"> + + <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."> + + <!-- + + More info: + [css-pseudo-4] Original color of highlight pseudo inside + ::first-letter/::first-line + https://github.com/w3c/csswg-drafts/issues/4625 + + RESOLVED: Whatever highlight being applied uses colors from before + even if came from pseudo element like ::first-letter/::first-line + + --> + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + color: green; + font-size: 300%; + } + + div::first-line + { + color: purple; + } + + div::selection + { + background-color: yellow; + } + </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 both "selected text" have a yellow background, if the glyphs of "1st selected text" are purple and if the glyphs of "2nd selected text" are green. + + <div id="test" class="highlight_reftest">1st selected text<br>2nd selected text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-031.html b/testing/web-platform/tests/css/css-pseudo/active-selection-031.html new file mode 100644 index 0000000000..c7d79c8ac9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-031.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and vertical writing-modes</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-styling"> + <link rel="match" href="reference/active-selection-031-ref.html"> + + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div > div + { + color: red; + float: left; + font-size: 32px; + margin-left: 16px; + } + + div.vrl + { + writing-mode: vertical-rl; + } + + div.vlr + { + writing-mode: vertical-lr; + } + + div.mixed + { + text-orientation: mixed; + } + + div.sideways + { + text-orientation: sideways; + } + + div.upright + { + text-orientation: upright; + } + + div::selection + { + background-color: yellow; + color: green; + } + </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 contents of div#test */ + + window.getSelection().addRange(targetRange); + /* Finally, we now add such range of content into a selection */ + } + </script> + + <body onload="startTest();"> + + <p>Test passes if each glyph of the 6 "Selected Text" is green and if there is <strong>no red</strong>. + + <div id="test" class="highlight_reftest"> + + <div class="vrl mixed">Selected Text</div> + + <div class="vrl sideways">Selected Text</div> + + <div class="vrl upright">Selected Text</div> + + <div class="vlr mixed">Selected Text</div> + + <div class="vlr sideways">Selected Text</div> + + <div class="vlr upright">Selected Text</div> + + </div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-041.html b/testing/web-platform/tests/css/css-pseudo/active-selection-041.html new file mode 100644 index 0000000000..f437c8bb52 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-041.html @@ -0,0 +1,86 @@ +<!DOCTYPE html> + +<html class="reftest-wait"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and image</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting"> + <link rel="mismatch" href="reference/active-selection-041-notref.html"> + + <meta content="should" name="flags"> + <meta name="assert" content="In this test, a filled yellow image is selected and is overlaid with an opaque blue background color. The specification states that, for replaced content, the UA should create a semi-transparent wash to coat the content. But such semi-transparent wash could use a transparency of 0.3 or 0.5 or 0.7: so, we do not know. Therefore we can not predict the rendered end result. All we can be sure of is that the image, once selected, must not be identical to its original non-selected version. This test checks precisely and only this."> + + <!-- + " + (...) for replaced content, the UA should create + a semi-transparent wash to coat the content so + that it can show through the selection. + " + coming from + https://www.w3.org/TR/css-pseudo-4/#highlight-painting + --> + + <!-- + July 28th 2020 + + Firefox 68.10.0 ESR will create a resulting + background color of #7F7F80, which looks like + dark gray. + + Chrome 83.0.4103.116 will create a resulting + background color of #33CCCC which looks like + dark blue. + + July 28th 2020 + --> + + <style> + div + { + font-size: 300%; + } + + img + { + vertical-align: top; + } + + /* + Chromium 80+ will highlight space + below and above content box while + Firefox 72+ only highlights the image itself. + Therefore this 'vertical-align: top' declaration + to work around this possible behavior. + */ + + img::selection + { + background-color: blue; + /* + equivalent to rgb(0, 0, 255) or rgb(0%, 0%, 100%) + or rgba(0, 0, 255, 1) or #0000FF + */ + } + </style> + + <script> + function startTest() + { + var targetRange = document.createRange(); + /* We first create an empty range */ + targetRange.selectNodeContents(document.getElementById("test")); + /* Then we set the range boundaries to the children of div#test */ + window.getSelection().addRange(targetRange); + /* Finally, we now select such range of content */ + document.documentElement.className = ""; + } + </script> + + <body onload="startTest();"> + + <p>Test passes if there is a filled square which is <strong>not yellow</strong>. + + <div id="test"><img src="../support/swatch-yellow.png" width="100" height="100" alt="Image download support must be enabled"></div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-043.html b/testing/web-platform/tests/css/css-pseudo/active-selection-043.html new file mode 100644 index 0000000000..944bf5526e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-043.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> + +<html class="reftest-wait"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and image (complex)</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-bounds"> + <link rel="match" href="../reference/ref-nothing-below.xht"> + + <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."> + + <!-- + + " + For replaced content, the associated overlay must cover + at least the entire replaced object, and may extend + outward to include the element's entire content box. + The overlay may also include other other areas within + the border-box of an element (...) + " + coming from + https://www.w3.org/TR/css-pseudo-4/#highlight-bounds + + --> + + <style> + div + { + font-size: 300%; + } + + img + { + background-color: red; + /* so that the padding belt is painted red */ + border: red solid 10px; + padding: 10px; + } + + /* + Chromium 80+ highlights the descender space + below the baseline on which the image "sits" while + Firefox 72+ only highlights the image itself. + */ + + img::selection + { + background-color: red; + color: red; + } + + span#masking + { + background-color: white; + display: inline-block; + height: 100px; + position: relative; + right: 100px; + width: 100px; + } + </style> + + <script> + function startTest() + { + var targetRange = document.createRange(); + /* We first create an empty range */ + targetRange.selectNodeContents(document.getElementById("test")); + /* Then we set the range boundaries to the children of div#test */ + window.getSelection().addRange(targetRange); + /* Finally, we now select such range of content */ + document.documentElement.className = ""; + } + </script> + + <body onload="startTest();"> + + <p>Test passes if there is nothing below. + + <div id="test"><img src="support/60x60-red.png" alt="Image download support must be enabled"><span id="masking"></span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-045.html b/testing/web-platform/tests/css/css-pseudo/active-selection-045.html new file mode 100644 index 0000000000..59cdcc2d91 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-045.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> + +<html class="reftest-wait"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and image</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting"> + <link rel="match" href="../reference/ref-nothing-below.xht"> + + <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> + /* + Chromium 80+ highlights the + top of line box minus + content box and the bottom + of line box minus content + box. + Firefox 72+ consistently highlights + only the image content box itself. + */ + + div + { + font-size: 300px; + } + + img::selection + { + background-color: red; + } + + span#masking + { + background-color: white; + display: inline-block; + height: 100px; + position: relative; + right: 100px; + width: 100px; + } + </style> + + <script> + function startTest() + { + var targetRange = document.createRange(); + /* We first create an empty range */ + targetRange.selectNodeContents(document.getElementById("test")); + /* Then we set the range boundaries to the children of div#test */ + window.getSelection().addRange(targetRange); + /* Finally, we now select such range of content */ + document.documentElement.className = ""; + } + </script> + + <body onload="startTest();"> + + <p>Test passes if there is nothing below. + + <div id="test"><img src="support/100x100-red.png" alt="Image download support must be enabled"><span id="masking"></span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-051-ref.html b/testing/web-platform/tests/css/css-pseudo/active-selection-051-ref.html new file mode 100644 index 0000000000..77e2d2817f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-051-ref.html @@ -0,0 +1,32 @@ +<!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/"> + + <style> + div + { + font-size: 300%; + } + </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 "Selected Text" appears selected using the OS selection colors. + + <div id="test">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-051.html b/testing/web-platform/tests/css/css-pseudo/active-selection-051.html new file mode 100644 index 0000000000..caab01e392 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-051.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and invalid declaration block</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="active-selection-051-ref.html"> + + <meta content="invalid should" name="flags"> + <meta name="assert" content="In this test, the selector div::selection has an invalid declaration block. Therefore, it is ignored. In such case, the UA should use the OS-default highlight colors for div::selection."> + + <style> + div + { + color: transparent; + font-size: 300%; + } + + div::selection + { + foo: bar; + } + </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 "Selected Text" appears selected using the OS selection colors. + + <div id="test">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-052.html b/testing/web-platform/tests/css/css-pseudo/active-selection-052.html new file mode 100644 index 0000000000..88acf0106f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-052.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and empty declaration block</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="active-selection-051-ref.html"> + + <meta content="should" name="flags"> + <meta name="assert" content="In this test, neither color nor background-color have been specified for the selector div::selection. In such case, the UA should use the OS-default highlight colors for div::selection."> + + <style> + div + { + color: transparent; + font-size: 300%; + } + + div::selection + { + + } + </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 "Selected Text" appears selected using the OS selection colors. + + <div id="test">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-053.html b/testing/web-platform/tests/css/css-pseudo/active-selection-053.html new file mode 100644 index 0000000000..3b439d26dd --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-053.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and invalid color value</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="active-selection-051-ref.html"> + + <meta content="invalid should" name="flags"> + <meta name="assert" content="In this test, 'color' has an invalid value which makes the declaration invalid; therefore, it is ignored. Therefore, the div::selection selector has neither color nor background-color specified. In such case, the UA should use the OS-default highlight colors for div::selection."> + + <style> + div + { + color: transparent; + font-size: 300%; + } + + div::selection + { + color: foo; + } + </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 "Selected Text" appears selected using the OS selection colors. + + <div id="test">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-054.html b/testing/web-platform/tests/css/css-pseudo/active-selection-054.html new file mode 100644 index 0000000000..d16776e641 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-054.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and invalid background-color value</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="active-selection-051-ref.html"> + + <meta content="invalid should" name="flags"> + <meta name="assert" content="In this test, 'background-color' has an invalid value which makes the declaration invalid; therefore, it is ignored. Therefore, the div::selection selector has neither color nor background-color specified. In such case, the UA should use the OS-default highlight colors for div::selection."> + + <style> + div + { + color: transparent; + font-size: 300%; + } + + div::selection + { + background-color: bar; + } + </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 "Selected Text" appears selected using the OS selection colors. + + <div id="test">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-056.html b/testing/web-platform/tests/css/css-pseudo/active-selection-056.html new file mode 100644 index 0000000000..aa147f35d2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-056.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and 3 consecutive <br> elements</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-selectors"> + <link rel="match" href="../reference/ref-nothing-below.xht"> + + <!-- + + Issue 1018465: [CSS4-Pseudo] Active selection and hard wrap (or hard return) + line break: ::selection should not select <br> + https://bugs.chromium.org/p/chromium/issues/detail?id=1018465 + + --> + + <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> + div + { + font-size: 100px; + } + + div::selection + { + background-color: transparent; + color: red; + } + </style> + + <script> + function startTest() + { + var targetRange = document.createRange(); + /* We first create an empty range */ + targetRange.selectNodeContents(document.getElementById("test")); + /* Then we set the range boundaries to the children of div#test */ + window.getSelection().addRange(targetRange); + /* Finally, we now select such range of content */ + } + </script> + + <body onload="startTest();"> + + <p>Test passes if there is nothing below. + + <div id="test"> <br><br><br> </div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-057.html b/testing/web-platform/tests/css/css-pseudo/active-selection-057.html new file mode 100644 index 0000000000..34afda43ed --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-057.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and 3 empty elements</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-selectors"> + <link rel="match" href="../reference/ref-nothing-below.xht"> + + <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> + div#subtest1 , hr#subtest2 + { + background-color: transparent; /* or initial or unset */ + height: 100px; + } + + hr#subtest2 + { + border: none 0px; + } + + div#subtest1::selection , hr#subtest2::selection + { + color: red; + } + + div#subtest3 + { + background-color: transparent; /* or initial or unset */ + font-size: 100px; + white-space: pre; /* or pre-line or pre-wrap or break-spaces */ + } + + div#subtest3::selection + { + background-color: red; + } + </style> + + <script> + function startTest() + { + var targetRange = document.createRange(); + /* We first create an empty range */ + targetRange.selectNodeContents(document.getElementById("test")); + /* Then we set the range boundaries to the children of div#test */ + window.getSelection().addRange(targetRange); + /* Finally, we now select such range of content */ + } + </script> + + <body onload="startTest();"> + + <p>Test passes if there is nothing below.</p> + + <div id="test"> + + <div id="subtest1"> </div> + + <hr id="subtest2"> + + <div id="subtest3">

</div> + + </div> diff --git a/testing/web-platform/tests/css/css-pseudo/active-selection-063.html b/testing/web-platform/tests/css/css-pseudo/active-selection-063.html new file mode 100644 index 0000000000..0c151cf4e6 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/active-selection-063.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and consecutive preserved &Tab;</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#tab-size-property"> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> + + <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> + div + { + background-color: red; + color: red; + float: left; /* or display: inline-block or position: absolute or width: 4em */ + font-family: Ahem; + font-size: 25px; + line-height: 1; + /* -moz-tab-size: 4; */ + /* + Implement 'tab-size' (dropping the -moz- prefix) + https://bugzilla.mozilla.org/show_bug.cgi?id=737785 + */ + tab-size: 4; + white-space: pre; + } + + div::selection + { + background-color: green; + } + </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 there is a filled green square and <strong>no red</strong>. + + <div id="test">	 +	 +	 +	</div> diff --git a/testing/web-platform/tests/css/css-pseudo/backdrop-animate-002-ref.html b/testing/web-platform/tests/css/css-pseudo/backdrop-animate-002-ref.html new file mode 100644 index 0000000000..b4f0ebd4b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/backdrop-animate-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/backdrop-animate-002.html b/testing/web-platform/tests/css/css-pseudo/backdrop-animate-002.html new file mode 100644 index 0000000000..6fd153becd --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/backdrop-animate-002.html @@ -0,0 +1,19 @@ +<!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> +<!-- 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(); +target.animate({ + opacity: [0.1, 0.1], + backgroundColor: ["green", "green"] +}, { + pseudoElement: "::backdrop", + duration: Infinity +}); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/backdrop-animate.html b/testing/web-platform/tests/css/css-pseudo/backdrop-animate.html new file mode 100644 index 0000000000..73bf6bf6f6 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/backdrop-animate.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/before-after-dynamic-custom-property-001-ref.html b/testing/web-platform/tests/css/css-pseudo/before-after-dynamic-custom-property-001-ref.html new file mode 100644 index 0000000000..c15156138e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/before-after-dynamic-custom-property-001-ref.html @@ -0,0 +1,7 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<p>Test passes if you see two PASS lines below:</p> +<div>PASS</div> +<div>PASS</div> diff --git a/testing/web-platform/tests/css/css-pseudo/before-after-dynamic-custom-property-001.html b/testing/web-platform/tests/css/css-pseudo/before-after-dynamic-custom-property-001.html new file mode 100644 index 0000000000..dcbd60786b --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/before-after-dynamic-custom-property-001.html @@ -0,0 +1,23 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: Dynamic ::before and ::after generation by a custom property reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="match" href="before-after-dynamic-custom-property-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#generated-content"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1660804"> +<style> +.first::before { + content: var(--variable-1); +} +.second::after { + content: var(--variable-2); +} +</style> +<p>Test passes if you see two PASS lines below:</p> +<div class="first">SS</div> +<div class="second">PA</div> +<script> +document.querySelector(".second").getBoundingClientRect(); +document.documentElement.style.setProperty("--variable-1", "\"PA\""); +document.documentElement.style.setProperty("--variable-2", "\"SS\""); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/before-dynamic-display-none.html b/testing/web-platform/tests/css/css-pseudo/before-dynamic-display-none.html new file mode 100644 index 0000000000..d8844f9c96 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/before-dynamic-display-none.html @@ -0,0 +1,22 @@ +<!doctype html> +<title>CSS Test: ::before box removed when display set to 'none'.</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#generated-content"> +<link rel="match" href="../reference/pass_if_pass_below.html"> +<style> + #id::before { + content: "FAIL"; + position: absolute; + width: 100px; + height: 100px; + background-color: red; + } + #id.none::before { + display: none; + } +</style> +<p>Test passes if there is the word "PASS" below.</p> +<div id="id" class="open">PASS</div> +<script> + id.offsetTop; + id.className = "none"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/before-in-display-none-thcrash.html b/testing/web-platform/tests/css/css-pseudo/before-in-display-none-thcrash.html new file mode 100644 index 0000000000..5759089a50 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/before-in-display-none-thcrash.html @@ -0,0 +1,19 @@ +<!doctype html> +<title>CSS Test: Invalidating style inside display:none with ::before should not crash.</title> +<link rel="help" href="https://crbug.com/1013570"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #outer { display: none } + #outer::before { content: " "; } +</style> +<div id="outer"> + <div id="inner"></div> +</div> +<script> + test(() => { + assert_equals(getComputedStyle(inner).color, "rgb(0, 0, 0)"); + inner.style.color = "green"; + assert_equals(getComputedStyle(inner).color, "rgb(0, 128, 0)"); + }, "Invalidating style inside display:none with ::before should not crash."); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html new file mode 100644 index 0000000000..25dbeadb2e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001-ref.html @@ -0,0 +1,22 @@ +<!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%; + } + </style> + + <p>Test passes if background color of "Text sample" is green and <strong>not red</strong>. + + <div class="highlight_reftest">Text sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html new file mode 100644 index 0000000000..6068a076f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-001.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: higher specificity of selectors (Example 11)</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="cascade-highlight-001-ref.html"> + + <!-- + Example 11 is + https://www.w3.org/TR/css-pseudo-4/#example-c35bf49a + --> + + <meta name="assert" content="This test is an adaptation (or modified version) of Example 11 (#example-c35bf49a). The 'div > span::selection' selector has an higher specificity than the 'span::selection' selector."> + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + font-size: 300%; + } + + div::selection + { + background-color: green; + color: yellow; + } + + div > span::selection + /* + count the number of element names and pseudo-elements in the selector (= d) + a=0 b=0 c=0 d=3 -> specificity = 0,0,0,3 + */ + { + background-color: green; + } + + span::selection + /* + count the number of element names and pseudo-elements in the selector (= d) + a=0 b=0 c=0 d=2 -> specificity = 0,0,0,2 + */ + { + background-color: red; + color: yellow; + } + </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 background color of "Text sample" is green and <strong>not red</strong>. + + <div id="test" class="highlight_reftest">Text <span>sample</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html new file mode 100644 index 0000000000..50be805f01 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-002.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: tag selector missing (Example 12)</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="cascade-highlight-001-ref.html"> + + <!-- + Example 12 is + https://www.w3.org/TR/css-pseudo-4/#example-97480f68 + --> + + <meta name="assert" content="This test is an adaptation (or modified version) of Example 12 (#example-97480f68). In this test, <span> element's ::selection matches the ::selection { background-color: green; } rule and not the div#test::selection rule because '*' is implied when a tag selector is missing."> + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + font-size: 300%; + } + + ::selection + { + background-color: green; + color: yellow; + } + + div#test::selection + { + background-color: red; + color: black; + } + </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 background color of "Text sample" is green and <strong>not red</strong>. + + <div id="test" class="highlight_reftest"><span>Text sample</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html new file mode 100644 index 0000000000..e755283a32 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004-ref.html @@ -0,0 +1,22 @@ +<!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: yellow; + color: green; + display: inline; + font-size: 300%; + } + </style> + + <p>Test passes if "Text sample" is green and if its background color is yellow. + + <div class="highlight_reftest">Text sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html new file mode 100644 index 0000000000..56abba7156 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-004.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: inheritance of selection highlight colors 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="cascade-highlight-004-ref.html"> + + <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."> + + <!-- + 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: yellow; + color: green; + } + </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 sample" is green and if its background color is yellow. + + <div id="test" class="highlight_reftest"><span>Text sample</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html new file mode 100644 index 0000000000..2c6ba60270 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/cascade-highlight-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/chrome-bug-1299142-crash.html b/testing/web-platform/tests/css/css-pseudo/chrome-bug-1299142-crash.html new file mode 100644 index 0000000000..8a4b7553a2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/chrome-bug-1299142-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/chrome-first-letter-inside-replaced-crash.html b/testing/web-platform/tests/css/css-pseudo/chrome-first-letter-inside-replaced-crash.html new file mode 100644 index 0000000000..cf9e2d7163 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/chrome-first-letter-inside-replaced-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/dir-pseudo-on-bdi-element.html b/testing/web-platform/tests/css/css-pseudo/dir-pseudo-on-bdi-element.html new file mode 100644 index 0000000000..434434461d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/dir-pseudo-on-bdi-element.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/dir-pseudo-on-input-element.html b/testing/web-platform/tests/css/css-pseudo/dir-pseudo-on-input-element.html new file mode 100644 index 0000000000..b61a829b30 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/dir-pseudo-on-input-element.html @@ -0,0 +1,180 @@ +<!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); + + // Insert the element into the document so that we can also check for + // 'direction' in computed style. + document.body.appendChild(container); + + assert_true(input.matches(':dir(ltr)')); + assert_false(input.matches(':dir(rtl)')); + // Per https://html.spec.whatwg.org/multipage/rendering.html#bidi-rendering: + assert_equals(getComputedStyle(input).direction, 'ltr'); + + // Changing to a different type causes the special type=tel rule to no longer apply. + input.type = 'text'; + assert_false(input.matches(':dir(ltr)')); + assert_true(input.matches(':dir(rtl)')); + assert_equals(getComputedStyle(input).direction, 'rtl'); + + // And restoring type=tel brings back that behavior. + input.type = 'tel'; + assert_true(input.matches(':dir(ltr)')); + assert_false(input.matches(':dir(rtl)')); + assert_equals(getComputedStyle(input).direction, 'ltr'); + + document.body.removeChild(container); +}, '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> diff --git a/testing/web-platform/tests/css/css-pseudo/file-selector-button-001-notref.html b/testing/web-platform/tests/css/css-pseudo/file-selector-button-001-notref.html new file mode 100644 index 0000000000..e137ba0510 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/file-selector-button-001-notref.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>CSS Test Reference</title> +<input type="file"> diff --git a/testing/web-platform/tests/css/css-pseudo/file-selector-button-001.html b/testing/web-platform/tests/css/css-pseudo/file-selector-button-001.html new file mode 100644 index 0000000000..48b2852de8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/file-selector-button-001.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>::file-selector-button allows to customize the button in <input type=file></title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5049"> +<link rel="mismatch" href="file-selector-button-001-notref.html"> +<style> + input::file-selector-button { + background: green; + color: white; + } +</style> +<input type="file"> diff --git a/testing/web-platform/tests/css/css-pseudo/file-selector-button-after-part.html b/testing/web-platform/tests/css/css-pseudo/file-selector-button-after-part.html new file mode 100644 index 0000000000..0bd28fa5d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/file-selector-button-after-part.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>::file-selector-button allows to customize the button in <input type=file></title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5049"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#file-selector-button-pseudo"> +<link rel="mismatch" href="file-selector-button-001-notref.html"> +<style> +#host::part(file-input)::file-selector-button { + border: 1px solid green; +} +</style> +<div id="host"></div> +<script> + document.getElementById("host").attachShadow({ mode: "open" }).innerHTML = ` + <input type=file part=file-input> + `; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/file-selector-button-display-none-overflow-crash.html b/testing/web-platform/tests/css/css-pseudo/file-selector-button-display-none-overflow-crash.html new file mode 100644 index 0000000000..81051741c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/file-selector-button-display-none-overflow-crash.html @@ -0,0 +1,5 @@ +<link rel="author" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1679682"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5049"> +<style>input{width:1px}::file-selector-button{display: none;}</style> +<input type="file"> diff --git a/testing/web-platform/tests/css/css-pseudo/file-selector-button-display-toggle-crash.html b/testing/web-platform/tests/css/css-pseudo/file-selector-button-display-toggle-crash.html new file mode 100644 index 0000000000..bc9f24ae01 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/file-selector-button-display-toggle-crash.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>Shouldn't assert when re-creating a ::file-selector-button pseudo-element after it being display: none</title> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5049"> +<style> + .tweak::file-selector-button { + display: none; + } +</style> +<input type="file"> +<script> + let input = document.querySelector("input"); + input.getBoundingClientRect().top; + input.classList.add("tweak"); + input.getBoundingClientRect().top; + input.classList.remove("tweak"); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/file-selector-button-inherit.html b/testing/web-platform/tests/css/css-pseudo/file-selector-button-inherit.html new file mode 100644 index 0000000000..4947e5e353 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/file-selector-button-inherit.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-001-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-001-ref.html new file mode 100644 index 0000000000..f5af1227aa --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-001-ref.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference File</title> + <link rel="author" title="Florian Rivoal" href="mailto:florian@rivoal.net"> + <style> + div { + font-size: 50px; + position: absolute; + left: 30px; + top: 50px; + } + div span { + color: green; + background: green; + float: left; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p> + <div><span>a</span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-001.html b/testing/web-platform/tests/css/css-pseudo/first-letter-001.html new file mode 100644 index 0000000000..b1dc5860a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-001.html @@ -0,0 +1,32 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: ::first-letter formatting</title> + <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="assert" content="Test checks that a floated ::first-letter follows the usual formating rules for floats."> + <style> + div { + font-size: 50px; + position: absolute; + left: 30px; + top: 50px; + background: red; + } + span { + background : white; + } + div::first-letter { + color: green; + background: green; + float: left; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p> + <div>a<span> </span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-002.html b/testing/web-platform/tests/css/css-pseudo/first-letter-002.html new file mode 100644 index 0000000000..4ee147699a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-002.html @@ -0,0 +1,34 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: ::first-letter formatting</title> + <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="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content."> + <style> + div { + font-size: 50px; + position: absolute; + left: 30px; + top: 50px; + } + #d1 span { + color: red; + background: red; + float: left; + } + #d2::first-letter { + color: green; + background: green; + float: left; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p> + <div id="d1"><span>a</span></div> + <div id="d2">a</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-003.html b/testing/web-platform/tests/css/css-pseudo/first-letter-003.html new file mode 100644 index 0000000000..95b2471fc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-003.html @@ -0,0 +1,34 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: ::first-letter formatting</title> + <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="assert" content="Test checks that a floated ::first-letter is formatted identically to a floated non-pseudo element with the same content."> + <style> + div { + font-size: 50px; + position: absolute; + left: 30px; + top: 50px; + } + #d1::first-letter { + color: red; + background: red; + float: left; + } + #d2 span { + color: green; + background: green; + float: left; + } + </style> +</head> +<body> + <p>Test passes if there is a <strong>filled green rectangle</strong> and <strong>no red</strong>.</p> + <div id="d1">a</div> + <div id="d2"><span>a</span></div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-004-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-004-ref.html new file mode 100644 index 0000000000..75a0149a8f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-004-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + div { + font-size: 36px; + } + span { + color: green; + } +</style> +<body> + <p>Test passes if the "T" and surrounding punctuation below are green.</p> + <div><span>၎̀T̀၎̀</span>est</div> +</body> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-004.html b/testing/web-platform/tests/css/css-pseudo/first-letter-004.html new file mode 100644 index 0000000000..33c14feb60 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-004.html @@ -0,0 +1,23 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: ::first-letter formatting</title> + <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="assert" content="Test checks that punctuation and letters with combining characters still have proper ::first-letter styling."> + <style> + div { + font-size: 36px; + } + div::first-letter { + color: green; + } + </style> +</head> +<body> + <p>Test passes if the "T" and surrounding punctuation below are green.</p> + <div>၎̀T̀၎̀est</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-005-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-005-ref.html new file mode 100644 index 0000000000..4e9b962bce --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-005-ref.html @@ -0,0 +1,22 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference: ::first-letter formatting</title> + <style> + div { + font-size: 36px; + } + span { + color: green; + } + </style> +</head> +<body> + <p>Test passes if the "$", "(£)", "₹" and "©" symbols are green.</p> + <div><span>$</span>1,234.56</div> + <div><span>(£)</span>78.90</div> + <div><span>₹</span>10,000</div> + <div><span>©</span>2021</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-005.html b/testing/web-platform/tests/css/css-pseudo/first-letter-005.html new file mode 100644 index 0000000000..60e36eab8f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-005.html @@ -0,0 +1,26 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: ::first-letter formatting</title> + <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + <link rel="match" href="first-letter-005-ref.html"> + <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo"> + <meta name="assert" content="Checks that symbols such as currency signs have proper ::first-letter styling."> + <style> + div { + font-size: 36px; + } + div::first-letter { + color: green; + } + </style> +</head> +<body> + <p>Test passes if the "$", "(£)", "₹" and "©" symbols are green.</p> + <div>$1,234.56</div> + <div>(£)78.90</div> + <div>₹10,000</div> + <div>©2021</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-allowed-properties.html b/testing/web-platform/tests/css/css-pseudo/first-letter-allowed-properties.html new file mode 100644 index 0000000000..3adc772d44 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-allowed-properties.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<title>CSS Test: Properties allowed on ::first-letter pseudo elements</title> +<link rel="author" title="Chris Nardi" href="mailto:cnardi@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#target::first-letter {} +#target { visibility: hidden; } +</style> +<div id="target">text</div> +<script> +'use strict'; +var style; +const target = document.querySelector("#target"); +var defaultComputedStyle = getComputedStyle(target); + +test(function() { + var styleRule = document.styleSheets[0].cssRules[0]; + assert_equals(styleRule.selectorText, '#target::first-letter', 'make sure we have the correct style rule'); + style = styleRule.style; +}, 'pre test setup'); + +var validProperties = { + backgroundAttachment: 'fixed', + backgroundBlendMode: 'hue', + backgroundClip: 'padding-box', + backgroundColor: 'rgb(10, 20, 30)', + backgroundImage: 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))', + backgroundOrigin: 'border-box', + backgroundPosition: '10px 20px', + backgroundRepeat: 'no-repeat', + backgroundSize: '10px 20px', + border: '40px dotted rgb(10, 20, 30)', + borderImage: 'linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 10% / 20 / 30px repeat', + borderRadius: '10px 20px', + boxShadow: 'rgb(10, 20, 30) 10px 20px 30px 40px inset', + color: 'rgba(10, 20, 30, 0.4)', + float: 'right', + font: 'italic small-caps 900 10px / 20px sans-serif', + fontFeatureSettings: '"vert" 2', + fontSizeAdjust: '0.5', + fontKerning: 'none', + fontVariationSettings: '"XHGT" 0.7', + letterSpacing: '12px', + margin: '10px 20px 30px 40px', + padding: '10px 20px 30px 40px', + opacity: '0.5', + textDecoration: 'overline wavy rgb(10, 20, 30)', + textJustify: 'inter-word', + textShadow: 'rgb(10, 20, 30) 10px 20px 30px', + textTransform: 'capitalize', + textUnderlinePosition: 'under', + verticalAlign: '12%', + wordSpacing: '12px' +}; + +var invalidProperties = { + position: 'absolute', + transition: 'transform 1s', + transform: 'rotate(45deg)', + wordBreak: 'break-all' +}; + +function testFirstLetterProperty(property, rule, expected, reason) { + test(function() { + style[property] = ""; + style[property] = rule; + assert_equals(getComputedStyle(target, '::first-letter')[property], expected); + style[property] = ""; + }, reason); +} + +for (var property in validProperties) { + testFirstLetterProperty(property, validProperties[property], validProperties[property], + property + " should be applied to first-letter pseudo elements."); +} + +for (var property in invalidProperties) { + testFirstLetterProperty(property, invalidProperties[property], defaultComputedStyle[property], + property + " should not be applied to first-letter pseudo elements."); +} +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-and-sibling-display-change.html b/testing/web-platform/tests/css/css-pseudo/first-letter-and-sibling-display-change.html new file mode 100644 index 0000000000..29bdc5bbbe --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-and-sibling-display-change.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Test: Changing ::first-letter color while sibling changes display type.</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="first-letter-block-to-inline-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo"> +<style> + div { color: green } + div::first-letter { color: red } + .green::first-letter { color: green } +</style> +<div>This text should be green.<span></span></div> +<script> + document.body.offsetTop; + document.querySelector("span").style.display = "block"; + document.querySelector("div").className = "green"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-and-whitespace-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-and-whitespace-ref.html new file mode 100644 index 0000000000..d193306fe4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-and-whitespace-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Reference File</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<p>Pass if no space between "A", space between "B".</p> +<div><span style="float:left">A</span>A</div> +<div><span style="float:left">A</span>A</div> +<div>B B</div> +<div>B B</div> +<div>AAB B</div> +<div>AAB B</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-and-whitespace.html b/testing/web-platform/tests/css/css-pseudo/first-letter-and-whitespace.html new file mode 100644 index 0000000000..a10612ac97 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-and-whitespace.html @@ -0,0 +1,31 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test: White-spaces around floated ::first-letter</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="first-letter-and-whitespace-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> +<meta name="assert" content="Test checks that white-spaces are correctly rendered for floated ::first-letter changes"> +<style> + div::first-letter { + color: black; + } + .floatLetter::first-letter { + float: left; + } +</style> +<p>Pass if no space between "A", space between "B".</p> +<div id="t1"> <!---->AA</div> +<div id="t2"> <!---->A<!----> <!---->A</div> +<div id="t3" class="floatLetter"> <!---->B<!----> <!---->B</div> +<div id="t4" class="floatLetter"> <!---->B <!---->B</div> +<div id="t5" class="floatLetter"> <!---->AAB<!----> <!---->B</div> +<div id="t6" class="floatLetter"> <!---->AAB<!----> B</div> +<script> + document.body.offsetTop; + t1.className = "floatLetter"; + t2.className = "floatLetter"; + t3.className = ""; + t4.className = ""; + t5.className = ""; + t6.className = ""; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-background-image-dynamic.html b/testing/web-platform/tests/css/css-pseudo/first-letter-background-image-dynamic.html new file mode 100644 index 0000000000..6f8a9378c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-background-image-dynamic.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Test: ::first-letter correctly applies background-image dynamically</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1528451"> +<link rel="match" href="first-letter-background-image-ref.html"> +<style> + div::first-letter { + color: lime; + } + div.image::first-letter { + /* Lime background */ + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg=='); + } +</style> +<div> + A letter +</div> +<script> + let div = document.querySelector("div"); + getComputedStyle(div).color; + div.classList.add('image'); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-background-image-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-background-image-ref.html new file mode 100644 index 0000000000..c235ba6eef --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-background-image-ref.html @@ -0,0 +1,13 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<style> + div::first-letter { + color: lime; + background-color: lime; + } +</style> +<div> + A letter +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-background-image.html b/testing/web-platform/tests/css/css-pseudo/first-letter-background-image.html new file mode 100644 index 0000000000..aa9341df1b --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-background-image.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>CSS Test: ::first-letter correctly applies background-image</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://mozilla.org" title="Mozilla"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1528451"> +<link rel="match" href="first-letter-background-image-ref.html"> +<style> + div::first-letter { + color: lime; + /* Lime background */ + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M/wHwAEBgIApD5fRAAAAABJRU5ErkJggg=='); + } +</style> +<div> + A letter +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-block-to-inline-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-block-to-inline-ref.html new file mode 100644 index 0000000000..5c777f1a92 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-block-to-inline-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<span style="color:green">This text should be green.</span> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-block-to-inline.html b/testing/web-platform/tests/css/css-pseudo/first-letter-block-to-inline.html new file mode 100644 index 0000000000..94f27e6a66 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-block-to-inline.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>CSS Test: ::first-letter stops applying to element becoming inline.</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="first-letter-block-to-inline-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-pseudo"> +<style> + #outer.block::first-letter { color: red } + #outer.block { display: block } +</style> +<span id="outer" class="block"> + <span id="inner">This text should be green.</span> +</span> +<script> + outer.offsetTop; + outer.className = ""; + inner.style.color = "green"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-crash.html b/testing/web-platform/tests/css/css-pseudo/first-letter-crash.html new file mode 100644 index 0000000000..683d2a7766 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-crash.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/967194"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> +#target:first-letter{ + float:right; +} +</style> +The test passes if it does not CRASH. +<div id="target"> + <textarea style="display: block;">A</textarea> +</div> +<script>test(() => { });</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-digraph.html b/testing/web-platform/tests/css/css-pseudo/first-letter-digraph.html new file mode 100644 index 0000000000..b9bc10016d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-digraph.html @@ -0,0 +1,43 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: ::first-letter digraph recognition</title> + <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + <link rel="match" href="reference/first-letter-digraph-ref.html"> + <link rel="help" href="https://drafts.csswg.org/selectors-3/#first-letter"> + <meta name="assert" content="Test checks that ::first-letter respects the Dutch 'ij' digraph."> + <style> + div { + font-size: 32px; + } + div p { + margin: 0; + color: lightgray; + } + div p::first-letter { + color: green; + } + </style> +</head> +<body> + <p>Test passes if both "I" and "J" are green in these examples:</p> + <div lang="nl"> + <p>IJsselmeer</p> + <p>ijsselmeer</p> + <p>“IJsselmeer”</p> + <p>Ijsselmeer</p> <!-- mixed case within the digraph is unlikely in practice --> + </div> + <div lang="en"> + <p lang="nl-NL">IJsselmeer</p> <!-- lang tag with country code should also work --> + <p lang="nl-SR">IJsselmeer</p> + </div> + <p>But only "I" should be green in these examples:</p> + <div lang="en"> + <p>IJsselmeer</p> + <p>ijsselmeer</p> + <p>“IJsselmeer”</p> + <p>Ijsselmeer</p> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-block-child-marker-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-block-child-marker-ref.html new file mode 100644 index 0000000000..46bc0f000d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-block-child-marker-ref.html @@ -0,0 +1,27 @@ +<!DOCTYPE HTML> +<title>Reference: A child's ::marker should be excluded when finding the ::first-letter content</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +body { margin-left: 5em; font-size: 12px; } +li, o { list-style-position: inside } +li:first-child > * { list-style-type: lower-alpha; list-style-type: 'marker ' } +li:last-child > ::marker { content: 'marker ' } +span, o { display:list-item; } +first-letter { color: green } +</style> +<ol> + <li><span><first-letter>i</first-letter>tem</span>after</li> + <li><span><first-letter>i</first-letter>tem</span></span>after</li> +</ol> +<ul> + <li><span><first-letter>i</first-letter>tem</span>after</li> + <li><span><first-letter>i</first-letter>tem</span></span>after</li> +</ul> +<ol> + <li><o><first-letter>i</first-letter>tem</o>after</li> + <li><o><first-letter>i</first-letter>tem</o>after</li> +</ol> +<ul> + <li><o><first-letter>i</first-letter>tem</o>after</li> + <li><o><first-letter>i</first-letter>tem</o>after</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-block-child-marker.html b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-block-child-marker.html new file mode 100644 index 0000000000..ecd0fd5b46 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-block-child-marker.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<title>CSS Test: A child's ::marker should be excluded when finding the ::first-letter content</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css"> +<link rel="match" href="first-letter-exclude-block-child-marker-ref.html"> +<style> +body { margin-left: 5em; font-size: 12px; } +li, o { list-style-position: inside } +li::first-letter { color: green } +li:first-child > * { list-style-type: lower-alpha; list-style-type: 'marker ' } +li:last-child > ::marker { content: 'marker ' } +span, o { display:list-item; } +</style> +<ol> + <li><span>item</span>after</li> + <li><span>item</span>after</li> +</ol> +<ul> + <li><span>item</span>after</li> + <li><span>item</span>after</li> +</ul> +<ol> + <li><o>item</o>after</li> + <li><o>item</o>after</li> +</ol> +<ul> + <li><o>item</o>after</li> + <li><o>item</o>after</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-child-marker-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-child-marker-ref.html new file mode 100644 index 0000000000..ee53375617 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-child-marker-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<title>Reference: A child's ::marker should be excluded when finding the ::first-letter content</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +body { margin-left: 5em; } +li { list-style-position: inside } +li:first-child > * { list-style-type: 'marker '; } +li:last-child > ::marker { content: 'marker '; } +span { display:inline list-item; } +ibi { display:inline flow-root list-item; list-style-position: inside; } +ibo { display:inline flow-root list-item; list-style-position: outside; } +first-letter { color:green; } +</style> +<ol> + <li><span><first-letter>i</first-letter>tem</span>after</li> + <li><span><first-letter>i</first-letter>tem</span></span>after</li> +</ol> +<ul> + <li><span><first-letter>i</first-letter>tem</span>after</li> + <li><span><first-letter>i</first-letter>tem</span></span>after</li> +</ul> +<ol> + <li><ibi>item</ibi>after</li> + <li><ibi>item</ibi></ibi>after</li> +</ol> +<ul> + <li><ibi>item</ibi>after</li> + <li><ibi>item</ibi></ibi>after</li> +</ul> +<ol> + <li><ibo>item</ibo>after</li> + <li><ibo>item</ibo></ibo>after</li> +</ol> +<ul> + <li><ibo>item</ibo>after</li> + <li><ibo>item</ibo></ibo>after</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-child-marker.html b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-child-marker.html new file mode 100644 index 0000000000..027f145679 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-child-marker.html @@ -0,0 +1,39 @@ +<!DOCTYPE HTML> +<title>CSS Test: A child's ::marker should be excluded when finding the ::first-letter content</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css"> +<link rel="match" href="first-letter-exclude-inline-child-marker-ref.html"> +<style> +body { margin-left: 5em; } +li, span, ibi { list-style-position: inside } +li::first-letter { color: green } +li:first-child > * { list-style-type: 'marker ' } +li:last-child > ::marker { content: 'marker ' } +span { display:inline list-item; } +ibi { display:inline flow-root list-item; } +ibo { display:inline flow-root list-item; list-style-position: outside; } +</style> +<ol> + <li><span>item</span>after</li> + <li><span>item</span>after</li> +</ol> +<ul> + <li><span>item</span>after</li> + <li><span>item</span>after</li> +</ul> +<ol> + <li><ibi>item</ibi>after</li> + <li><ibi>item</ibi>after</li> +</ol> +<ul> + <li><ibi>item</ibi>after</li> + <li><ibi>item</ibi>after</li> +</ul> +<ol> + <li><ibo>item</ibo>after</li> + <li><ibo>item</ibo>after</li> +</ol> +<ul> + <li><ibo>item</ibo>after</li> + <li><ibo>item</ibo>after</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-marker-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-marker-ref.html new file mode 100644 index 0000000000..080cef2019 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-marker-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<title>Reference: The element's own ::marker should be skipped when finding the ::first-letter content</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +body { margin-left: 5em; } +li:first-child > * { list-style-type: lower-alpha; list-style-type: 'marker '; } +li:last-child > ::marker { content: 'marker '; } +span { display:inline list-item; } +ibi { display:inline flow-root list-item; list-style-position: inside; } +ibo { display:inline flow-root list-item; list-style-position: outside; } +first-letter { color:green; } +</style> +<ol> + <li><ibi><first-letter>i</first-letter>tem</ibi>after</li> + <li><ibi><first-letter>i</first-letter>tem</ibi></ibi>after</li> +</ol> +<ul> + <li><ibi><first-letter>i</first-letter>tem</ibi>after</li> + <li><ibi><first-letter>i</first-letter>tem</ibi></ibi>after</li> +</ul> +<ol> + <li><ibo><first-letter>i</first-letter>tem</ibo>after</li> + <li><ibo><first-letter>i</first-letter>tem</ibo></ibo>after</li> +</ol> +<ul> + <li><ibo><first-letter>i</first-letter>tem</ibo>after</li> + <li><ibo><first-letter>i</first-letter>tem</ibo></ibo>after</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-marker.html b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-marker.html new file mode 100644 index 0000000000..e95393f449 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-exclude-inline-marker.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<title>CSS Test: The element's own ::marker should be skipped when finding the ::first-letter content</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css"> +<link rel="match" href="first-letter-exclude-inline-marker-ref.html"> +<style> +body { margin-left: 5em; } +ibi::first-letter, ibo::first-letter { color: green } +li:first-child > * { list-style-type: lower-alpha; list-style-type: 'marker ' } +li:last-child > ::marker { content: 'marker ' } +ibi { display:inline flow-root list-item; list-style-position: inside; } +ibo { display:inline flow-root list-item; list-style-position: outside; } +</style> +<ol> + <li><ibi>item</ibi>after</li> + <li><ibi>item</ibi>after</li> +</ol> +<ul> + <li><ibi>item</ibi>after</li> + <li><ibi>item</ibi>after</li> +</ul> +<ol> + <li><ibo>item</ibo>after</li> + <li><ibo>item</ibo>after</li> +</ol> +<ul> + <li><ibo>item</ibo>after</li> + <li><ibo>item</ibo>after</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-hi-001-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-hi-001-ref.html new file mode 100644 index 0000000000..d0decf8bf4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-hi-001-ref.html @@ -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>क्रस diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-hi-001.html b/testing/web-platform/tests/css/css-pseudo/first-letter-hi-001.html new file mode 100644 index 0000000000..9ea51f8bc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-hi-001.html @@ -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>ङ्क्रस diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-hi-002-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-hi-002-ref.html new file mode 100644 index 0000000000..4d573a04a9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-hi-002-ref.html @@ -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>डक्रंब diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-hi-002.html b/testing/web-platform/tests/css/css-pseudo/first-letter-hi-002.html new file mode 100644 index 0000000000..c810968f30 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-hi-002.html @@ -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>ब्रेडक्रंब diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-list-item-dynamic-001-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-list-item-dynamic-001-ref.html new file mode 100644 index 0000000000..26d50ade62 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-list-item-dynamic-001-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<title>CSS Test Reference</title> +<p>The X below should be green.</p> +<div style="color:green">X</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-list-item-dynamic-001.html b/testing/web-platform/tests/css/css-pseudo/first-letter-list-item-dynamic-001.html new file mode 100644 index 0000000000..f990cd2bb7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-list-item-dynamic-001.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Test: Move ::first-letter text node (required: list item, float, fixed, contenteditable).</title> +<link rel="match" href="first-letter-list-item-dynamic-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-letter-pseudo"> +<link rel="help" href="https://crbug.com/977044"> +<style> + #outer { + display: list-item; + overflow: auto; /* Triggers a crash in Blink see link to issue 977044 */ + } + #outer::first-letter { + float: left; + color: green; + } + #fixed { position: fixed; } + #inner { float: left; } +</style> +<p>The X below should be green.</p> +<div id="outer" contenteditable="true">X<div id="fixed"></div><div id="inner"></div></div> +<script> + document.body.offsetTop; + inner.appendChild(outer.removeChild(outer.firstChild)); + inner.removeAttribute("id"); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-of-html-root-crash-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-of-html-root-crash-ref.html new file mode 100644 index 0000000000..f63dd580aa --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-of-html-root-crash-ref.html @@ -0,0 +1,3 @@ +<!DOCTYPE html> +<title>CSS Test Reference</title> +<body style="margin:0">PASS</body> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-of-html-root-refcrash.html b/testing/web-platform/tests/css/css-pseudo/first-letter-of-html-root-refcrash.html new file mode 100644 index 0000000000..4233dd1dc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-of-html-root-refcrash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>CSS Test: ::first-letter of html root element crash in combination with removal of body</title> +<link rel="help" href="https://crbug.com/993764"> +<link rel="match" href="first-letter-of-html-root-crash-ref.html"> +<style id="sheet"> + html::first-letter { font-size: initial } +</style>FAIL +<script> + const sel = window.getSelection(); + sel.selectAllChildren(document.documentElement); + const range = sel.getRangeAt(0); + document.body.remove(); + document.documentElement.appendChild(document.createTextNode("PASS")); + document.documentElement.offsetTop; + range.surroundContents(sheet); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001-not-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001-not-ref.html new file mode 100644 index 0000000000..d1844499ba --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001-not-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<head> +<title>Reference mismatch: ::first-letter supports opacity.</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1639664"> +</head> +<body> + <p>First</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001-ref.html new file mode 100644 index 0000000000..37e4dd5a2c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<title>Reference: ::first-letter supports opacity.</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1639664"> +<link rel="mismatch" href="first-letter-opacity-001-not-ref.html"> + <style> + fl { + opacity: 0; + } + </style> +</head> +<body> + <p><fl>F</fl>irst</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001.html b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001.html new file mode 100644 index 0000000000..0a867e541a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: ::first-letter supports opacity.</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1639664"> +<link rel="match" href="first-letter-opacity-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> + <style> + p::first-letter { + opacity: 0; + } + </style> +</head> +<body> + <p>First</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-float-001-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-float-001-ref.html new file mode 100644 index 0000000000..38c230045b --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-float-001-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<style> +/* Disable kerning because kerning may differ for different node tree. */ +html { font-kerning: none; font-feature-settings: "kern" off; } +</style> +<div><span style="opacity:0.5">P</span>ASS</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-float-001.html b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-float-001.html new file mode 100644 index 0000000000..fb939fa0cb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-opacity-float-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<title>CSS Test: floating ::first-letter with opacity</title> +<link rel="author" title="Rune Lillesveen" href="mailto:futhark@chromium.org"> +<link rel="match" href="first-letter-opacity-float-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> +<meta name="assert" content="Test checks that a floated ::first-letter with opacity is rendered correctly with dynamic changes."> +<style> + #one::first-letter { float: left; opacity: 0.5 } + #two { opacity: 0.5 } +/* Disable kerning because kerning may differ for different node tree. */ +html { font-kerning: none; font-feature-settings: "kern" off; } +</style> +<div id="one">PASS</div> +<div id="two"></div> +<script> + requestAnimationFrame(() => + requestAnimationFrame(() => { + // This used to crash the compositing code in Blink. + one.appendChild(two); + })); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-and-space-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-and-space-ref.html new file mode 100644 index 0000000000..fe9d6b03bc --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-and-space-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference</title> +<style> + div { + font-size: 36px; + } + span { + color: green; + } +</style> +<body> + <p>Test passes if the "T"s and preceding punctuation below are green.</p> + <div><span>– T</span>est</div> + <div><span>« T</span>est</div> + <div><span>« T</span>est</div> +</body> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-and-space.html b/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-and-space.html new file mode 100644 index 0000000000..2e5a353c17 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-and-space.html @@ -0,0 +1,25 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Test: ::first-letter formatting</title> + <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="assert" content="Test checks that punctuation, intervening space separators and letters still have proper ::first-letter styling."> + <style> + div { + font-size: 36px; + } + div::first-letter { + color: green; + } + </style> +</head> +<body> + <p>Test passes if the "T"s and preceding punctuation below are green.</p> + <div>– Test</div> + <div>« Test</div> + <div>« Test</div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-dynamic-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-dynamic-ref.html new file mode 100644 index 0000000000..c02b8bfbb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-dynamic-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Test Reference</title> +<p>Only the 'A' below should be green.</p> +<span style="color:green">A</span> .B diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-dynamic.html b/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-dynamic.html new file mode 100644 index 0000000000..0a7295602a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-punctuation-dynamic.html @@ -0,0 +1,14 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: ::first-letter modified text node with punctuation</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-letter-pseudo"> +<link rel="match" href="first-letter-punctuation-dynamic-ref.html"> +<style> + #target::first-letter { color: green; } +</style> +<p>Only the 'A' below should be green.</p> +<div id="target"> .<span>B</span></div> +<script> + target.offsetTop; + target.firstChild.insertData(0, 'A'); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-nested-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-nested-ref.html new file mode 100644 index 0000000000..95c2f94a6b --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-nested-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<title>Reference: The nested empty span should be skipped when finding the ::first-letter content</title> +<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com"> +<style> +first-letter { color: green } +</style> +<div> + <span><first-letter>F</first-letter>irst letter should be green</span> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-nested.html b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-nested.html new file mode 100644 index 0000000000..e57700bbbd --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-nested.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>CSS Test: The nested empty span should be skipped when finding the ::first-letter content</title> +<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css"> +<link rel="match" href="first-letter-skip-empty-span-nested-ref.html"> +<style> + div::first-letter { color: green } +</style> +<div> + <span></span> + <span><span></span>First letter should be green</span> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-ref.html new file mode 100644 index 0000000000..27a364546e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<title>Reference: The empty span should be skipped when finding the ::first-letter content</title> +<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com"> +<style> +first-letter { color: green } +</style> +<div> + <span><first-letter>F</first-letter>irst letter should be green</span> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span.html b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span.html new file mode 100644 index 0000000000..d3914050ad --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-empty-span.html @@ -0,0 +1,12 @@ +<!DOCTYPE HTML> +<title>CSS Test: The empty span should be skipped when finding the ::first-letter content</title> +<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css"> +<link rel="match" href="first-letter-skip-empty-span-ref.html"> +<style> + div::first-letter { color: green } +</style> +<div> + <span></span> + <span>First letter should be green</span> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-skip-marker-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-marker-ref.html new file mode 100644 index 0000000000..82c5074fd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-marker-ref.html @@ -0,0 +1,19 @@ +<!DOCTYPE HTML> +<title>Reference: The element's own ::marker should be skipped when finding the ::first-letter content</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +body { margin-left:100px; } +ol > li { list-style-position: inside } +first-letter { color: green } +li:first-child { list-style-type: lower-alpha; list-style-type: '::marker ' } +li:last-child::marker { content: '::marker ' } +</style> +<ol> + <li><first-letter>i</first-letter>tem</li> + <li><first-letter>i</first-letter>tem</li> +</ol> + +<ul> + <li><first-letter>i</first-letter>tem</li> + <li><first-letter>i</first-letter>tem</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-skip-marker.html b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-marker.html new file mode 100644 index 0000000000..fb9fe25847 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-skip-marker.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<title>CSS Test: The element's own ::marker should be skipped when finding the ::first-letter content</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css"> +<link rel="match" href="first-letter-skip-marker-ref.html"> +<style> +body { margin-left:100px; } +ol > li { list-style-position: inside } +li::first-letter { color: green } +li:first-child { list-style-type: lower-alpha; list-style-type: '::marker ' } +li:last-child::marker { content: '::marker ' } +</style> +<ol> + <li>item</li> + <li>item</li> +</ol> + +<ul> + <li>item</li> + <li>item</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-text-and-display-change.html b/testing/web-platform/tests/css/css-pseudo/first-letter-text-and-display-change.html new file mode 100644 index 0000000000..d50da5f5c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-text-and-display-change.html @@ -0,0 +1,18 @@ +<!doctype html> +<title>CSS Test: Change display for the ::first-letter container while replacing text node</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#first-letter-pseudo"> +<link rel="match" href="../reference/pass_if_letter_uppercase.html"> +<style> + #container::first-letter { text-transform: uppercase } + #container.ib { display: inline-block } +</style> +<body> + <p>Test passes if the letter "F" in the words "Filler Text" below is in upper-case.</p> + <div id="container">Test not run</div> +</body> +<script> + container.offsetTop; + container.className = "ib"; + container.appendChild(document.createTextNode("filler Text")); + container.firstChild.remove(); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-width-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-width-ref.html new file mode 100644 index 0000000000..8ebb00b9dc --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-width-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html lang="en"> +<head> + <title>initial-letter width test</title> + <style> + span { + position: absolute; + color: transparent; + } + #control { + background-color: green; + } + </style> +</head> +<body> + <p>There should be no red</p> + <span id="control">Test.</span> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-width.html b/testing/web-platform/tests/css/css-pseudo/first-letter-width.html new file mode 100644 index 0000000000..fedf917c62 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-width.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<html lang="en"> +<head> + <title>initial-letter width test</title> + <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=362880"> + <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-letter-styling"> + <link rel="match" href="first-letter-width-ref.html"> + <meta name="assert" content="The width of an element with first-letter styling should render correctly."> + <style> + div { + position: relative; + } + span { + position: absolute; + color: transparent; + } + #control { + background-color: green; + } + #test { + background-color: red; + line-height: 1; + top: 1px; + } + #test::first-letter { + text-transform: uppercase; + } + </style> +</head> +<body> + <p>There should be no red</p> + <div> + <span id="test">Test</span> + <span id="control">Test.</span> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-with-quote-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-with-quote-ref.html new file mode 100644 index 0000000000..0eebf0a51f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-with-quote-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<title>Reference: The ::first-letter should work with quote element</title> +<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com"> +<style> + span { color: red } +</style> +<p> + <span>“</span>abc” +</p> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-with-quote.html b/testing/web-platform/tests/css/css-pseudo/first-letter-with-quote.html new file mode 100644 index 0000000000..9a8e0426bd --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-with-quote.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<title>CSS Test: The ::first-letter should work with quote element</title> +<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css"> +<link rel="match" href="first-letter-with-quote-ref.html"> +<style> + p::first-letter { color: red } +</style> +<p> + <q lang="en">abc</q> +</p> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-with-span-ref.html b/testing/web-platform/tests/css/css-pseudo/first-letter-with-span-ref.html new file mode 100644 index 0000000000..05ecbc169d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-with-span-ref.html @@ -0,0 +1,9 @@ +<!DOCTYPE HTML> +<title>Reference: The ::first-letter should work with quote text span element</title> +<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com"> +<style> + span { color: red } +</style> +<p> + <span>"</span>abc" +</p> diff --git a/testing/web-platform/tests/css/css-pseudo/first-letter-with-span.html b/testing/web-platform/tests/css/css-pseudo/first-letter-with-span.html new file mode 100644 index 0000000000..cbb258837a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-letter-with-span.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<title>CSS Test: The ::first-letter should work with quote text span element</title> +<link rel="author" title="Jaeyong Bae" href="jdragon.bae@gmail.com"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#application-in-css"> +<link rel="match" href="first-letter-with-span-ref.html"> +<style> + p::first-letter { color: red } +</style> +<p> + <span>"</span>abc" +</p> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-allowed-properties.html b/testing/web-platform/tests/css/css-pseudo/first-line-allowed-properties.html new file mode 100644 index 0000000000..57aab39d37 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-allowed-properties.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<title>CSS Test: Properties allowed on ::first-line pseudo elements</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-styling"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + #target::first-line {} + #target { visibility: hidden; } +</style> +<div id="target">text</div> +<script> + let style; + const target = document.querySelector("#target"); + const defaultComputedStyle = getComputedStyle(target); + + test(() => { + var styleRule = document.styleSheets[0].cssRules[0]; + assert_equals(styleRule.selectorText, "#target::first-line", "make sure we have the correct style rule"); + style = styleRule.style; + }, "retrieve style rule"); + + const validProperties = { + backgroundAttachment: "fixed", + backgroundBlendMode: "hue", + backgroundClip: "padding-box", + backgroundColor: "rgb(10, 20, 30)", + backgroundImage: "linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255))", + backgroundOrigin: "border-box", + backgroundPosition: "50% 50%", + backgroundRepeat: "no-repeat", + backgroundSize: "10px 20px", + color: "rgba(10, 20, 30, 0.4)", + fontFamily: "sans-serif", + fontFeatureSettings: '"vert" 2', + fontKerning: "none", + fontSize: "30px", + fontSizeAdjust: "0.5", + fontStyle: "italic", + fontVariant: "small-caps", + fontWeight: "900", + fontVariationSettings: '"XHGT" 0.7', + letterSpacing: "12px", + opacity: "0.5", + textDecoration: "overline wavy rgb(10, 20, 30)", + textJustify: "none", + textShadow: "rgb(10, 20, 30) 10px 20px 30px", + textTransform: "capitalize", + textUnderlinePosition: "under", + verticalAlign: "12%", + wordSpacing: "12px" + }; + + const invalidProperties = { + border: "40px dotted rgb(10, 20, 30)", + borderImage: "linear-gradient(rgb(0, 0, 0), rgb(255, 255, 255)) 10% / 20 / 30px repeat", + borderRadius: "10px 20px", + margin: "10px 20px 30px 40px", + padding: "10px 20px 30px 40px", + position: "absolute", + transition: "transform 1s", + transform: "rotate(45deg)", + wordBreak: "break-all" + }; + + function testFirstLineProperty(property, rule, expected, reason) { + test(function() { + style[property] = ""; + style[property] = rule; + assert_equals(getComputedStyle(target, "::first-line")[property], expected); + style[property] = ""; + }, reason); + } + + for (let property in validProperties) { + testFirstLineProperty(property, validProperties[property], validProperties[property], + property + " should be applied to first-line pseudo elements."); + } + + for (let property in invalidProperties) { + testFirstLineProperty(property, invalidProperties[property], defaultComputedStyle[property], + property + " should not be applied to first-line pseudo elements."); + } +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-and-marker-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-and-marker-ref.html new file mode 100644 index 0000000000..8095d5ca01 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-and-marker-ref.html @@ -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> +span { + background: cyan; +} +.none { + list-style-type: none; +} +.string { + list-style-type: "2. "; +} +.content::marker { + content: "3. "; +} +</style> +<ol class="none"> + <li><span>1. inside decimal</span></li> + <li><span>2. inside string</span></li> + <li><span>3. inside content</span></li> +</ol> +<ol class="outside"> + <li class="decimal"><span>outside decimal</span></li> + <li class="string"><span>outside string</span></li> + <li class="content"><span>outside content</span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-and-marker.html b/testing/web-platform/tests/css/css-pseudo/first-line-and-marker.html new file mode 100644 index 0000000000..f0a994438f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-and-marker.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Interaction of ::first-line and ::marker</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="match" href="first-line-and-marker-ref.html"> +<meta name="assert" content="Tests ::marker interaction with ::first-line pseudo element"> +<style> +li::first-line { + background: cyan; +} +.inside { + list-style-position: inside; +} +.string { + list-style-type: "2. "; +} +.content::marker { + content: "3. "; +} +</style> +<ol class="inside"> + <li class="decimal">inside decimal</li> + <li class="string">inside string</li> + <li class="content">inside content</li> +</ol> +<ol class="outside"> + <li class="decimal">outside decimal</li> + <li class="string">outside string</li> + <li class="content">outside content</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-and-placeholder-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-and-placeholder-ref.html new file mode 100644 index 0000000000..dbadd365c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-and-placeholder-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<style> +input::placeholder { + color: red; +} +</style> +<form> + <input placeholder="this text should be red"> +</form> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-and-placeholder.html b/testing/web-platform/tests/css/css-pseudo/first-line-and-placeholder.html new file mode 100644 index 0000000000..2db3480feb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-and-placeholder.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Interaction of ::first-line and ::placeholder</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="first-line-and-placeholder-ref.html"> +<meta name="assert" content="Tests ::placeholder interaction with ::first-line pseudo element"> +<style> +input::first-line { + background-color: initial; +} + +input::placeholder { + color: red; +} +</style> +<form> + <input placeholder="this text should be red"> +</form> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-nested-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-nested-ref.html new file mode 100644 index 0000000000..84becd9a78 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-nested-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<p style="color: blue">Blue <span style="color: green">This text should be green.</span> Blue</p> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-nested.html b/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-nested.html new file mode 100644 index 0000000000..4a58f1ea5b --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-nested.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="first-line-change-inline-color-nested-ref.html"> +<style> + #block { color: green; } + #block::first-line { color: blue; } + .green { color: green; } +</style> +<div id="block"> + <div> + <p>Blue <span id="target"><span>This text should be green.</span></span> Blue</p> + </div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.className = 'green'; + document.documentElement.removeAttribute('class'); + }); +}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-ref.html new file mode 100644 index 0000000000..84becd9a78 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color-ref.html @@ -0,0 +1,2 @@ +<!DOCTYPE html> +<p style="color: blue">Blue <span style="color: green">This text should be green.</span> Blue</p> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color.html b/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color.html new file mode 100644 index 0000000000..2a5be916b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-change-inline-color.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="first-line-change-inline-color-ref.html"> +<style> + #block { color: green; } + #block::first-line { color: blue; } + .green { color: green; } +</style> +<div id="block"> + <div> + <p>Blue <span id="target">This text should be green.</span> Blue</p> + </div> +</div> +<script> +requestAnimationFrame(() => { + requestAnimationFrame(() => { + target.className = 'green'; + document.documentElement.removeAttribute('class'); + }); +}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-first-letter-insert-crash.html b/testing/web-platform/tests/css/css-pseudo/first-line-first-letter-insert-crash.html new file mode 100644 index 0000000000..bc22aae409 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-first-letter-insert-crash.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<title>Should not crash when inserting an element inside a :first-line pseudo.</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<style> +p:first-line, p:first-letter { + font-family: serif; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<p id=target> + test<sup>sup</sup> +</p> +<script> +test(()=>{ + const target = document.getElementById('target'); + target.insertBefore(document.createElement('img'), target.lastChild) +}); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-green-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-green-ref.html new file mode 100644 index 0000000000..99e9c334bf --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-green-ref.html @@ -0,0 +1,3 @@ +<!doctype html> +<title>CSS Test Reference</title> +<div style="color:green">This text should be green.</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-line-height-001-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-line-height-001-ref.html new file mode 100644 index 0000000000..13e9b20f34 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-line-height-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-line-height-001.html b/testing/web-platform/tests/css/css-pseudo/first-line-line-height-001.html new file mode 100644 index 0000000000..f1dd69807e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-line-height-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-line-height-002-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-line-height-002-ref.html new file mode 100644 index 0000000000..904d5dad18 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-line-height-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-line-height-002.html b/testing/web-platform/tests/css/css-pseudo/first-line-line-height-002.html new file mode 100644 index 0000000000..7d1112fbb2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-line-height-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-nested-gcs.html b/testing/web-platform/tests/css/css-pseudo/first-line-nested-gcs.html new file mode 100644 index 0000000000..6777e5468f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-nested-gcs.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-on-ancestor-block-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-on-ancestor-block-ref.html new file mode 100644 index 0000000000..7193bf25eb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-on-ancestor-block-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div> + <span style="color: green">This text should be green.</span><br> + <span style="color: blue">This text should be blue.</span> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-on-ancestor-block.html b/testing/web-platform/tests/css/css-pseudo/first-line-on-ancestor-block.html new file mode 100644 index 0000000000..6b797107df --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-on-ancestor-block.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="first-line-on-ancestor-block-ref.html"> +<style> + #block::first-line { color: green; } +</style> +<div id="block"> + <div> + <div style="color: blue"> + <div> + <span><span>This text should be green.</span></span><br> + This text should be blue. + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001-not-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001-not-ref.html new file mode 100644 index 0000000000..d020842a24 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001-not-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html> +<head> +<title>Reference mismatch: ::first-line supports opacity.</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1639664"> +</head> +<body> + <p>First<br>Second</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001-ref.html new file mode 100644 index 0000000000..b4f4ddc185 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<html> +<head> +<title>Reference: ::first-line supports opacity.</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1639664"> +<link rel="mismatch" href="first-line-opacity-001-not-ref.html"> + <style> + fl { + opacity: 0; + } + </style> +</head> +<body> + <p><fl>First</fl><br>Second</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001.html b/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001.html new file mode 100644 index 0000000000..83f90824b8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-opacity-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> +<head> +<title>CSS Test: ::first-line supports opacity.</title> +<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1639664"> +<link rel="match" href="first-line-opacity-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-styling"> + <style> + p::first-line { + opacity: 0; + } + </style> +</head> +<body> + <p>First<br>Second</p> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-replaced-001-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-replaced-001-ref.html new file mode 100644 index 0000000000..acd0530c89 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-replaced-001-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +.inner { + display: inline-block; + margin: 10px; +} +</style> +<body> + <div>A<span class=inner></span>C</div> +</body> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-replaced-001.html b/testing/web-platform/tests/css/css-pseudo/first-line-replaced-001.html new file mode 100644 index 0000000000..453c55e4a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-replaced-001.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="match" href="first-line-replaced-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-styling"> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<style> +.inner { + display: inline-block; + margin: 10px; +} +*::first-line { visibility: visible; } +</style> +<body> + <div>A<span class=inner></span>C</div> +</body> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-before-after-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-before-after-ref.html new file mode 100644 index 0000000000..fcee799505 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-before-after-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> + #target::first-line { font-size: 150%; } +</style> + +<div id="target"><span style='color:red'>red</span> <span style='color:green'>green</span> <span style='color:blue'>blue</span><br /> + <span style='color:red'>red</span> <span style='color:green'>green</span> <span style='color:blue'>blue</span> +</div> + +<p>Both lines above (inside and outside <code>::first-line</code>) should have the same colors.</p> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-before-after.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-before-after.html new file mode 100644 index 0000000000..f91a22a4a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-before-after.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<title>::before and ::after styles should apply inside ::first-line</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#generated-content"> +<link rel="match" href="first-line-with-before-after-ref.html"> +<style> + #target::first-line { + font-size: 150%; + } + #target::before, #child2::before { + content: "red "; + color: red; + } + #child1, #child2 { + color: green; + } + #child1::after, #target::after { + content: " blue"; + color: blue; + } +</style> + +<div id="target"> + <span id='child1'>green</span> + <br /> + <span id='child2'>green</span> +</div> + +<p>Both lines above (inside and outside <code>::first-line</code>) should have the same colors.</p> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block-before-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block-before-ref.html new file mode 100644 index 0000000000..8cfe779766 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block-before-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div> + <span style="color: green">green</span><span style="color: red">red</span> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block-before.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block-before.html new file mode 100644 index 0000000000..8b454faeda --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block-before.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>inline block ::before styles should apply inside ::first-line</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#generated-content"> +<link rel="match" href="first-line-with-inline-block-before-ref.html"> +<style> + #target::first-line { + color: red; + } + #target::before { + content: "green"; + color: green; + display: inline-block; + } +</style> +<div id="target">red</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block.html new file mode 100644 index 0000000000..12e11a3d2e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-inline-block.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-text-line"> +<link rel="match" href="reference/first-line-with-inline-block-ref.html"> +<style> +.fl:first-line { + color: red; +} +.fl-atomic { + display: inline-block; +} +.fl-atomic:first-line { + color: lime; +} +</style> +<div class="fl"> +FIRST <div class="fl-atomic">first</span><br>second</div> FIRST +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-and-nested-div.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-and-nested-div.html new file mode 100644 index 0000000000..e277e9ce1c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-and-nested-div.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="first-line-with-out-of-flow-ref.html"> +<title>CSS Test: ::first-line with out of flow and nested div</title> +<style> + #block::first-line { color: green; } +</style> +<div id="block"> + <div style="position: absolute"><br></div> + <div style="float: right"><br></div> + <div> + <div style="position: absolute"><br></div> + <div style="float: right"><br></div> + <div style="color: blue"> + <div> + <div style="position: absolute"></div><span>This text <div style="position: absolute"></div></span><span>should be green.</span><br> + This text should be blue. + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-and-nested-span.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-and-nested-span.html new file mode 100644 index 0000000000..c0fe55cbc5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-and-nested-span.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="first-line-with-out-of-flow-ref.html"> +<title>CSS Test: ::first-line with out of flow and nested span</title> +<style> + #block::first-line { color: green; } +</style> +<div id="block"> + <div style="position: absolute"><br></div> + <div style="float: right"><br></div> + <div> + <div style="position: absolute"><br></div> + <div style="float: right"><br></div> + <div style="color: blue"> + <div> + <span style="position: absolute"></span><span>This text </span><span style="position: absolute"></span><span>should be green.</span><br> + This text should be blue. + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-ref.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-ref.html new file mode 100644 index 0000000000..7193bf25eb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow-ref.html @@ -0,0 +1,5 @@ +<!DOCTYPE html> +<div> + <span style="color: green">This text should be green.</span><br> + <span style="color: blue">This text should be blue.</span> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow.html b/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow.html new file mode 100644 index 0000000000..76d5025450 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/first-line-with-out-of-flow.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-pseudo"> +<link rel="match" href="first-line-with-out-of-flow-ref.html"> +<title>CSS Test: ::first-line with out of flow</title> +<style> + #block::first-line { color: green; } +</style> +<div id="block"> + <div style="position: absolute"><br></div> + <div style="float: right"><br></div> + <div> + <div style="position: absolute"><br></div> + <div style="float: right"><br></div> + <div style="color: blue"> + <div> + <span><span>This text should be green.</span></span><br> + This text should be blue. + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/grammar-error-001-ref.html b/testing/web-platform/tests/css/css-pseudo/grammar-error-001-ref.html new file mode 100644 index 0000000000..ecdb308f2f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/grammar-error-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-size: 300%; + } + + span + { + color: maroon; + text-decoration: underline dotted fuchsia; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes if each glyph of "thing" is maroon and if "thing" is underlined with a fuchsia dotted line. + + <div contenteditable="true">Many <span>thing</span> can happen.</div> diff --git a/testing/web-platform/tests/css/css-pseudo/grammar-error-001.html b/testing/web-platform/tests/css/css-pseudo/grammar-error-001.html new file mode 100644 index 0000000000..b7eaa6b20f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/grammar-error-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: highlighting of grammar error (basic)</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="match" href="grammar-error-001-ref.html"> + + + <style> + div + { + font-size: 300%; + } + + div::grammar-error + { + color: maroon; + text-decoration: underline dotted fuchsia; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes if each glyph of "thing" is maroon and if "thing" is underlined with a fuchsia dotted line. + + <div contenteditable="true">Many thing can happen.</div> diff --git a/testing/web-platform/tests/css/css-pseudo/grammar-error-002-manual.html b/testing/web-platform/tests/css/css-pseudo/grammar-error-002-manual.html new file mode 100644 index 0000000000..baba5cd449 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/grammar-error-002-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: highlighting of grammar error</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + + + <style> + input + { + font-size: 300%; + } + + input::grammar-error + { + color: maroon; + text-decoration: underline dotted red; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes if each glyph of "thing" is maroon and if "thing" is underlined with a red dotted line. + + <div><input type="text" value="Many thing can happen"></div> diff --git a/testing/web-platform/tests/css/css-pseudo/grammar-error-003-manual.html b/testing/web-platform/tests/css/css-pseudo/grammar-error-003-manual.html new file mode 100644 index 0000000000..4946033e49 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/grammar-error-003-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: highlighting of grammar error</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + + + <style> + textarea + { + font-size: 300%; + } + + textarea::grammar-error + { + color: maroon; + text-decoration: underline dotted red; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes if each glyph of "thing" is maroon and if "thing" is underlined with a red dotted line. + + <div><textarea cols="20" rows="2">Many thing can happen</textarea></div> diff --git a/testing/web-platform/tests/css/css-pseudo/grammar-spelling-errors-001.html b/testing/web-platform/tests/css/css-pseudo/grammar-spelling-errors-001.html new file mode 100644 index 0000000000..66df551a23 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/grammar-spelling-errors-001.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: ::spelling-error overlay drawn over the ::grammar-error overlay</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting"> + <link rel="match" href="reference/grammar-spelling-errors-001-ref.html"> + + <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> + div + { + font-size: 300%; + } + + div::spelling-error + { + background-color: yellow; + } + + div::grammar-error + { + background-color: red; + color: green; + } + </style> + + <script type="text/javascript"> + function startTest() + { + document.getElementById("target").focus(); + } + </script> + + <body onload="startTest();"> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module and an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>This test also requires that the targeted editable text element must receive system focus. + + <p>Test passes if each glyph of "dificultly" is green and if the background of "dificultly" is yellow. + + <div contenteditable="true" id="target">This is dificultly.</div> diff --git a/testing/web-platform/tests/css/css-pseudo/grammar-spelling-errors-002.html b/testing/web-platform/tests/css/css-pseudo/grammar-spelling-errors-002.html new file mode 100644 index 0000000000..3a89e54c42 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/grammar-spelling-errors-002.html @@ -0,0 +1,48 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: ::spelling-error overlay drawn over the ::grammar-error overlay</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting"> + <link rel="match" href="reference/grammar-spelling-errors-002-ref.html"> + + <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> + div + { + font-size: 300%; + } + + div::spelling-error + { + color: green; + } + + div::grammar-error + { + background-color: yellow; + color: red; + } + </style> + + <script type="text/javascript"> + function startTest() + { + document.getElementById("target").focus(); + } + </script> + + <body onload="startTest();"> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module and an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>This test also requires that the targeted editable text element must receive system focus. + + <p>Test passes if each glyph of "wolks" is green and if the background of "wolks" is yellow. + + <div contenteditable="true" id="target">I wolks on the sidewalk.</div> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html new file mode 100644 index 0000000000..a18690962f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html new file mode 100644 index 0000000000..f237e9eca7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html new file mode 100644 index 0000000000..17629a6dba --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html new file mode 100644 index 0000000000..c01d3c796e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html new file mode 100644 index 0000000000..256c28ba0c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html new file mode 100644 index 0000000000..61bc46d4c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html new file mode 100644 index 0000000000..f9bf83f9c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html new file mode 100644 index 0000000000..eb181096ce --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-004.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html new file mode 100644 index 0000000000..20d2b0bdb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html new file mode 100644 index 0000000000..008f56aded --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-005.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml new file mode 100644 index 0000000000..df0a56123e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006-ref.xhtml @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml new file mode 100644 index 0000000000..fb6d07f8f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-006.xhtml @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html new file mode 100644 index 0000000000..de0322d910 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-cascade-007.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html new file mode 100644 index 0000000000..d67ae82881 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-inheritance.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html new file mode 100644 index 0000000000..207cb7b7dd --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed-visited.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html new file mode 100644 index 0000000000..97c31809df --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-computed.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html new file mode 100644 index 0000000000..93e2002f4a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html new file mode 100644 index 0000000000..8f347f119e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-001.html @@ -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> + diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html new file mode 100644 index 0000000000..11ca501065 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html new file mode 100644 index 0000000000..bd5d5f4abb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-properties-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html new file mode 100644 index 0000000000..d6ee33cda7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html new file mode 100644 index 0000000000..141556f935 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html new file mode 100644 index 0000000000..fb2696a55a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html new file mode 100644 index 0000000000..77858729af --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-painting-text-shadow-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html new file mode 100644 index 0000000000..794796a88f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html new file mode 100644 index 0000000000..a1512f014d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html new file mode 100644 index 0000000000..3175948317 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html new file mode 100644 index 0000000000..fc5698faa1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-explicit-default-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html new file mode 100644 index 0000000000..ecf787b9b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html new file mode 100644 index 0000000000..420cc5ba15 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html new file mode 100644 index 0000000000..67ecb8df64 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-currentcolor-root-implicit-default-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-001-ref.html new file mode 100644 index 0000000000..c5d8814a82 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-001-ref.html @@ -0,0 +1,24 @@ +<!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 { + font-size: 7em; + text-shadow: 0.2500em 0.2500em #C0C000; + position: relative; + color: transparent; + } + p > span { + color: initial; + text-shadow: none; + position: absolute; + } + p > span > span { + background: #C0C0C0; + text-shadow: 0.5000em 0.5000em #3838E0; + /* force blue to paint over red */ + position: relative; + } +</style> +<p class="highlight_reftest"><span>q<span>uic</span>k</span>quick diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-001.html new file mode 100644 index 0000000000..ef253e6117 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-001.html @@ -0,0 +1,30 @@ +<!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"> +<link rel="match" href="highlight-painting-001-ref.html"> +<meta name="assert" value="::selection overlay is painted in the correct order, including both the element’s shadows and the highlight’s shadows"> +<script src="support/selections.js"></script> +<link rel="stylesheet" href="support/highlights.css"> +<style> + p { + font-size: 7em; + text-shadow: 0.2500em 0.2500em #C0C000; + } + p::selection { + background: #C0C0C0; + text-shadow: 0.5000em 0.5000em #3838E0; + } +</style> +<p class="highlight_reftest">quick +<script> + const target = document.querySelector("p"); + selectRangeWith(range => { + range.selectNodeContents(target); + range.setStart(target.childNodes[0], 1); + range.setEnd(target.childNodes[0], 4); + }); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-002-ref.html new file mode 100644 index 0000000000..1582318382 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-002-ref.html @@ -0,0 +1,28 @@ +<!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 { + writing-mode: vertical-rl; + } + p { + font-size: 7em; + text-shadow: 0.1250em 0.1250em #C0C000C0; + position: relative; + color: transparent; + } + p > span { + color: #E03838C0; + text-shadow: none; + position: absolute; + } + p > span > span { + color: #707070C0; + background: #38E038C0; + text-shadow: 0.2500em 0.2500em #3838E0C0; + /* force blue to paint over red */ + position: relative; + } +</style> +<p class="highlight_reftest"><span>q<span>uic</span>k</span>quick diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-002.html new file mode 100644 index 0000000000..a00f64d5b6 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-002.html @@ -0,0 +1,35 @@ +<!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"> +<link rel="match" href="highlight-painting-002-ref.html"> +<meta name="assert" value="::selection overlay is painted in the correct order, including originating element shadows (but not text proper) where selected"> +<script src="support/selections.js"></script> +<link rel="stylesheet" href="support/highlights.css"> +<style> + :root { + writing-mode: vertical-rl; + } + p { + font-size: 7em; + color: #E03838C0; + text-shadow: 0.1250em 0.1250em #C0C000C0; + } + p::selection { + color: #707070C0; + background: #38E038C0; + text-shadow: 0.2500em 0.2500em #3838E0C0; + } +</style> +<p class="highlight_reftest">quick +<script> + const target = document.querySelector("p"); + selectRangeWith(range => { + range.selectNodeContents(target); + range.setStart(target.childNodes[0], 1); + range.setEnd(target.childNodes[0], 4); + }); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-003-ref.html new file mode 100644 index 0000000000..66bacc27de --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-003-ref.html @@ -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> + * { + text-decoration-skip-ink: none; + text-decoration-skip: none; + } + main { + font-size: 7em; + margin: 0.5em; + width: min-content; + } + .background { + width: 100%; + height: 0.25em; + background: #707070C0; + } + .unselected { + color: #E03838C0; + text-decoration: #C0C000C0 solid line-through; + } + .selected { + background: #38E038C0; + text-decoration: #663399C0 solid line-through; + } + .selected, .selected * { + color: #663399C0; + } + .selection { + text-decoration: #3838E0C0 solid underline; + } +</style> +<main class="highlight_reftest"> + <div class="hrt_layers"> + <div class="background"></div> + <div>qui<span class="unselected">ck</span></div> + <div><span class="selected"><span class="selection">qui</span></span>ck</div> + quick + </div> +</main> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-003.html new file mode 100644 index 0000000000..b09ef52dd7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-003.html @@ -0,0 +1,55 @@ +<!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"> +<link rel="match" href="highlight-painting-003-ref.html"> +<meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, and originating element decorations lose their colour"> +<script src="support/selections.js"></script> +<link rel="stylesheet" href="support/highlights.css"> +<style> + /* + Topmost last: + 1. originating background (grey) + 2. unselected text (red) + 3. originating line-through on unselected text (yellow) + 4. ::selection background (green) + 5. ::selection underline on selected text (blue) + 6. selected text (purple) + 7. originating line-through on selected text (purple!) + + Decoration paints are ordered by text-decoration-line + (underline, overline, text, line-through), then by highlight + overlay (originating, ::grammar-error, ::spelling-error, + ::target-text, ::selection). + */ + *, *::selection { + text-decoration-skip-ink: none; + text-decoration-skip: none; + } + main { + font-size: 7em; + margin: 0.5em; + width: min-content; + height: 0.25em; + background: #707070C0; + color: #E03838C0; + text-decoration: #C0C000C0 solid line-through; + } + main::selection { + background: #38E038C0; + text-decoration: #3838E0C0 solid underline; + color: #663399C0; + } +</style> +<main class="highlight_reftest">quick</main> +<script> + const target = document.querySelector("main"); + selectRangeWith(range => { + range.selectNodeContents(target); + range.setStart(target.childNodes[0], 0); + range.setEnd(target.childNodes[0], 3); + }); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref1.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref1.html new file mode 100644 index 0000000000..9bfe1a5f47 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref1.html @@ -0,0 +1,40 @@ +<!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> + * { + text-decoration-skip-ink: none; + text-decoration-skip: none; + } + main { + font-size: 7em; + margin: 0.5em; + width: min-content; + } + .unselected { + text-decoration: #E03838C0 wavy underline; + color: #C0C000C0; + } + .selected { + background: #38E038C0; + text-decoration: #3838E0C0 wavy underline; + } + .selected, .selected * { + color: #3838E0C0; + } + .selection { + text-decoration: #663399C0 wavy line-through; + } +</style> +<!-- + In this ref, three separate wavy lines are painted, with two + spanning the selected part and one spanning the unselected part. +--> +<main class="highlight_reftest"> + <div class="hrt_layers"> + <div>qui<span class="unselected">ck</span></div> + <div><span class="selected"><span class="selection">qui</span></span>ck</div> + quick + </div> +</main> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref2.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref2.html new file mode 100644 index 0000000000..b9084ad543 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref2.html @@ -0,0 +1,50 @@ +<!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> + * { + text-decoration-skip-ink: none; + text-decoration-skip: none; + } + main { + font-size: 7em; + margin: 0.5em; + width: min-content; + } + .unselected { + text-decoration: #E03838C0 wavy underline; + color: #C0C000C0; + } + .selected { + background: #38E038C0; + text-decoration: #3838E0C0 wavy underline; + } + .selected, .selected * { + color: #3838E0C0; + } + .selection { + text-decoration: #663399C0 wavy line-through; + } +</style> +<!-- + In this ref, two wavy lines appear to be painted, with one + spanning the selected part and one spanning the whole text. The + latter changes color where selected and unselected meet. +--> +<main class="highlight_reftest"> + <div class="hrt_layers"> + <!-- + While the selection starts from the very first letter, we + still include a layer for the left unselected part, just + in case the wavy line has a long tip like in Blink. + --> + <div><span class="unselected">quick</span></div> + <div><span class="hrt_cover">quick</span>quick</div> + <div><span class="hrt_hider"><div><span class="selected">quick</span></div>quick</span></div> + <div><span class="hrt_cover">ck</span>quick</div> + <div>qui<span class="hrt_hider"><span class="unselected">quick</span>ck</span></div> + <div><span class="selection">qui</span>ck</div> + quick + </div> +</main> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref3.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref3.html new file mode 100644 index 0000000000..732f6bfe0d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004-ref3.html @@ -0,0 +1,49 @@ +<!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> + * { + text-decoration-skip-ink: none; + text-decoration-skip: none; + } + main { + font-size: 7em; + margin: 0.5em; + width: min-content; + } + .unselected { + text-decoration: #E03838C0 wavy underline; + color: #C0C000C0; + } + .selected { + background: #38E038C0; + text-decoration: #3838E0C0 wavy underline; + } + .selected, .selected * { + color: #3838E0C0; + } + .selection { + text-decoration: #663399C0 wavy line-through; + } +</style> +<!-- + In this ref, two wavy lines appear to be painted, with one + clipped to the selected part and one spanning the whole text. The + latter changes color where selected and unselected meet. +--> +<main class="highlight_reftest"> + <div class="hrt_layers"> + <!-- + While the selection starts from the very first letter, we + still include a layer for the left unselected part, just + in case the wavy line has a long tip like in Blink. + --> + <div><span class="unselected">quick</span></div> + <div><span class="hrt_cover">quick</span>quick</div> + <div><span class="hrt_hider"><div><span class="selected"><span class="selection">quick</span></span></div>quick</span></div> + <div><span class="hrt_cover">ck</span>quick</div> + <div>qui<span class="hrt_hider"><span class="unselected">quick</span>ck</span></div> + quick + </div> +</main> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004.html new file mode 100644 index 0000000000..26ded65f87 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-004.html @@ -0,0 +1,54 @@ +<!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"> +<link rel="match" href="highlight-painting-004-ref1.html"> +<link rel="match" href="highlight-painting-004-ref2.html"> +<link rel="match" href="highlight-painting-004-ref3.html"> +<meta name="assert" value="::selection overlay background and decorations are independent of those of the originating element, and originating element decorations lose their colour"> +<script src="support/selections.js"></script> +<link rel="stylesheet" href="support/highlights.css"> +<style> + /* + Topmost last: + 1. originating underline on unselected text (red) + 2. unselected text (yellow) + 3. ::selection background (green) + 4. originating underline on selected text (blue!) + 5. selected text (blue) + 6. ::selection line-through on selected text (purple) + + Decoration paints are ordered by text-decoration-line + (underline, overline, text, line-through), then by highlight + overlay (originating, ::grammar-error, ::spelling-error, + ::target-text, ::selection). + */ + * { + text-decoration-skip-ink: none; + text-decoration-skip: none; + } + main { + font-size: 7em; + margin: 0.5em; + width: min-content; + text-decoration: #E03838C0 wavy underline; + color: #C0C000C0; + } + main::selection { + background: #38E038C0; + color: #3838E0C0; + text-decoration: #663399C0 wavy line-through; + } +</style> +<main class="highlight_reftest">quick</main> +<script> + const target = document.querySelector("main"); + selectRangeWith(range => { + range.selectNodeContents(target); + range.setStart(target.childNodes[0], 0); + range.setEnd(target.childNodes[0], 3); + }); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-currentcolor-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-currentcolor-005-ref.html new file mode 100644 index 0000000000..39d26e8387 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-currentcolor-005-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-currentcolor-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-currentcolor-005.html new file mode 100644 index 0000000000..f5c15aafa9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-currentcolor-005.html @@ -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> + diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-001-ref.html new file mode 100644 index 0000000000..f1485ca922 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-001-ref.html @@ -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­Quick­Brown­Fox­Jumps­Over­The­Lazy­Dog­The­Quick­Brown­Fox­Jumps­Over­The­Lazy­Dog­The­Quick­Brown­Fox­Jumps­Over­The­Lazy­Dog</main> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-001.html new file mode 100644 index 0000000000..17b5f6a37c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-001.html @@ -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­Quick­Brown­Fox­Jumps­Over­The­Lazy­Dog­The­Quick­Brown­Fox­Jumps­Over­The­Lazy­Dog­The­Quick­Brown­Fox­Jumps­Over­The­Lazy­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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-002-crash.html b/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-002-crash.html new file mode 100644 index 0000000000..eb80d48909 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-painting-soft-hyphens-002-crash.html @@ -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­a +<script> + document.body.style.width = 0; + document.execCommand("selectall"); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html new file mode 100644 index 0000000000..14687acb84 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html new file mode 100644 index 0000000000..09e5abf9a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html new file mode 100644 index 0000000000..48eb9911a1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html new file mode 100644 index 0000000000..affbe95629 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html new file mode 100644 index 0000000000..18885fdc89 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html new file mode 100644 index 0000000000..250e320210 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html new file mode 100644 index 0000000000..63472b6758 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004-notref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html new file mode 100644 index 0000000000..61e2b7d7f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-004.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html new file mode 100644 index 0000000000..0ac5c02b20 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html new file mode 100644 index 0000000000..50677c811e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-005.html @@ -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 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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html new file mode 100644 index 0000000000..18885fdc89 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html new file mode 100644 index 0000000000..20c03282c8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-paired-cascade-006.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html new file mode 100644 index 0000000000..f0d848e19c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-computed.html @@ -0,0 +1,58 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: highlight selectors 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> +<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; + } + #target::highlight(bar) { + background-color: blue; + color: yellow; + } +</style> +<div id="target"></div> +<script> + for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error", "::highlight(foo)"]) { + test(() => { + let style = getComputedStyle(target, pseudo); + assert_equals(style.backgroundColor, "rgb(0, 128, 0)", "Background color is green."); + assert_equals(style.color, "rgb(0, 255, 0)", "Color is lime."); + }, `getComputedStyle() for ${pseudo}`); + + for (illFormedPseudo of [`${pseudo}:`, `${pseudo})`, `${pseudo}(`, `${pseudo}(foo)`, `${pseudo}()`, `:${pseudo}`, `${pseudo}.`]) { + test(() => { + let style = getComputedStyle(target, illFormedPseudo); + let defaultStyle = getComputedStyle(target); + assert_equals(style.backgroundColor, defaultStyle.backgroundColor, "Background color is element's default."); + assert_equals(style.color, defaultStyle.color, "Color is element's default."); + }, `getComputedStyle() for ${illFormedPseudo} should be element's default`); + } + } + + const pseudo = "::highlight(bar)"; + test(() => { + let style = getComputedStyle(target, pseudo); + assert_equals(style.backgroundColor, "rgb(0, 0, 255)", "Background color is blue."); + assert_equals(style.color, "rgb(255, 255, 0)", "Color is yellow."); + }, `Different getComputedStyle() for ${pseudo} and same element`); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html new file mode 100644 index 0000000000..84c4045a54 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-inheritance-computed-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html new file mode 100644 index 0000000000..a2b18effcc --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-pseudos-visited-computed-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001-ref.html new file mode 100644 index 0000000000..0ea90d7434 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html new file mode 100644 index 0000000000..63d8ee1eda --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002-ref.html new file mode 100644 index 0000000000..0ea90d7434 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html new file mode 100644 index 0000000000..2f7cc29128 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-003-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-003-ref.html new file mode 100644 index 0000000000..d6db9cfdd2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-003-ref.html @@ -0,0 +1,16 @@ +<!doctype html> +<meta charset="utf-8"> +<link rel="author" title="Delan Azabani" href="mailto:dazabani@igalia.com"> +<link rel="stylesheet" href="support/highlights.css"> +<style> + main { + font-size: 7em; + margin: 0.5em; + color: white; + -webkit-text-fill-color: yellow; + -webkit-text-stroke-color: green; + -webkit-text-stroke-width: 4px; + } +</style> +<p>Test passes if the text below is yellow with a green outline. +<main class="highlight_reftest">quick</main> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-styling-003.tentative.html b/testing/web-platform/tests/css/css-pseudo/highlight-styling-003.tentative.html new file mode 100644 index 0000000000..70d3dc63e5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-styling-003.tentative.html @@ -0,0 +1,25 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: highlight styling: compat stroke/fill properties</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="help" href="https://compat.spec.whatwg.org/#text-fill-and-stroking"> +<link rel="match" href="highlight-styling-003-ref.html"> +<meta name="assert" value="This test verifies that the compat stroke/fill properties are applicable to ::selection."> +<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; + -webkit-text-fill-color: yellow; + -webkit-text-stroke-color: green; + -webkit-text-stroke-width: 4px; + } +</style> +<p>Test passes if the text below is yellow with a green outline. +<main class="highlight_reftest">quick</main> +<script>selectNodeContents(document.querySelector("main"));</script> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-z-index-001-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-001-ref.html new file mode 100644 index 0000000000..0e9f9c252b --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-001-ref.html @@ -0,0 +1,24 @@ +<!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/"> + + <style> + div + { + background-color: yellow; + color: green; + display: inline-block; + font-size: 48px; + line-height: 1.25; /* computes to 60px */ + position: relative; + top: 1.25em; + } + </style> + + <p>Test passes if "Text sample" is green and if its background color is yellow. + + <div>Test sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-z-index-001.html b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-001.html new file mode 100644 index 0000000000..45b83ae81e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-001.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: highlight pseudo-element drawn below positioned 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-painting"> + <link rel="match" href="highlight-z-index-001-ref.html"> + + <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> + div + { + font-size: 48px; + line-height: 1.25; /* computes to 60px */ + } + + div#rel-positioned-sibling + { + background-color: yellow; + color: green; + display: inline-block; + position: relative; + top: 1.25em; + } + + div#test::selection + { + background-color: red; + color: yellow; + } + </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 sample" is green and if its background color is yellow. + + <div id="rel-positioned-sibling">Test sample</div> + + <div id="test">Test sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-z-index-002-ref.html b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-002-ref.html new file mode 100644 index 0000000000..652c8d9d92 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-002-ref.html @@ -0,0 +1,22 @@ +<!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/"> + + <style> + div + { + background-color: yellow; + color: green; + display: inline-block; + font-size: 48px; + line-height: 1.25; /* computes to 60px */ + } + </style> + + <p>Test passes if "Text sample" is green and if its background color is yellow. + + <div>Test sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/highlight-z-index-002.html b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-002.html new file mode 100644 index 0000000000..26c9650865 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/highlight-z-index-002.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: highlight pseudo-element drawn below positioned 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-painting"> + <link rel="match" href="highlight-z-index-002-ref.html"> + + <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> + div + { + font-size: 48px; + line-height: 1.25; /* computes to 60px */ + } + + div#abs-positioned-sibling + { + background-color: yellow; + color: green; + position: absolute; + } + + div#test::selection + { + background-color: red; + color: yellow; + } + </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 sample" is green and if its background color is yellow. + + <div id="abs-positioned-sibling">Test sample</div> + + <div id="test">Test sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/idlharness.html b/testing/web-platform/tests/css/css-pseudo/idlharness.html new file mode 100644 index 0000000000..514d31f6b3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/idlharness.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>CSS Pseudo Element API IDL tests</title> +<meta name="timeout" content="long"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#cssom"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/WebIDLParser.js"></script> +<script src="/resources/idlharness.js"></script> +<script> +'use strict'; + +idl_test( + ['css-pseudo'], + ['cssom', 'html', 'dom'], + idl_array => { + idl_array.add_objects({ + Window: ['window'], + CSSPseudoElementList: ['beforeElements'], + CSSPseudoElement: ['beforeElements.item(0)'], + }); + + window.beforeElements = + window.getPseudoElements(document.body, 'before'); + } +); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/lang-pseudo-class-across-shadow-boundaries-ref.html b/testing/web-platform/tests/css/css-pseudo/lang-pseudo-class-across-shadow-boundaries-ref.html new file mode 100644 index 0000000000..eda713a7ed --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/lang-pseudo-class-across-shadow-boundaries-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/lang-pseudo-class-across-shadow-boundaries.html b/testing/web-platform/tests/css/css-pseudo/lang-pseudo-class-across-shadow-boundaries.html new file mode 100644 index 0000000000..ec1e156498 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/lang-pseudo-class-across-shadow-boundaries.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-and-other-pseudo-elements-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-and-other-pseudo-elements-ref.html new file mode 100644 index 0000000000..796acbf759 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-and-other-pseudo-elements-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker interaction with ::before, ::after, and ::first-letter pseudo elements reference file</title> +<link rel="author" title="Daniel Bates" href="mailto:dbates@webkit.org"> +<style> +li { + color: green; + font-size: 20px; +} + +.first-letter { + color: white; + background-color: green; +} +</style> +</head> +<body> +<ol> + <li><span class="first-letter">P</span>ASSED if the list marker is green.</li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-and-other-pseudo-elements.html b/testing/web-platform/tests/css/css-pseudo/marker-and-other-pseudo-elements.html new file mode 100644 index 0000000000..f393db58fe --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-and-other-pseudo-elements.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker interaction with ::before, ::after, and ::first-letter pseudo elements</title> +<link rel="author" title="Daniel Bates" href="mailto:dbates@webkit.org"> +<link rel="match" href="marker-and-other-pseudo-elements-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<meta name="assert" content="Tests ::marker interaction with ::before, ::after, and ::first-letter pseudo elements"> +<style> +li { + color: red; + font-size: 20px; +} + +li::before { + color: green; + content: "PA"; +} + +li::after { + color: green; + content: "SSED if the list marker is green."; +} + +li::marker { + color: green; +} + +li::first-letter { + color: white; + background-color: green; +} +</style> +</head> +<body> +<ol> + <li></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-animate-002-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-animate-002-ref.html new file mode 100644 index 0000000000..e31774ae37 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-animate-002-ref.html @@ -0,0 +1,10 @@ +<!doctype html> +<meta charset=utf-8> +<style> +li::marker { + color: green; +} +</style> +<ul> + <li>Item</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-animate-002.html b/testing/web-platform/tests/css/css-pseudo/marker-animate-002.html new file mode 100644 index 0000000000..0ed8dbf05e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-animate-002.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset=utf-8> +<title>CSS Test: A Web Animations only apply to restricted properties on ::marker pseudo-elements</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="match" href="marker-animate-002-ref.html"> +<ul> + <li>Item</li> +</ul> +<script> +document.querySelector('li').animate({ + opacity: [0.1, 0.1], + color: ['green', 'green'] +}, { + pseudoElement: '::marker', + duration: Infinity +}); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-animate.html b/testing/web-platform/tests/css/css-pseudo/marker-animate.html new file mode 100644 index 0000000000..d4cd09ae96 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-animate.html @@ -0,0 +1,59 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Reverted styles for ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/web-animations-1/"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that ::marker can be animated with Web Animations, but only the supported properties." /> +<div id="log"></div> +<ul> + <li id="target">list item</li> +</ul> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const target = document.getElementById("target"); +const cs = getComputedStyle(target, "::marker"); +const options = { + pseudoElement: "::marker", + duration: 2, + delay: -1, +}; + +// 'color' applies to ::marker so it should be animatable +test(function() { + const anim = target.animate([ + {color: "rgb(0, 100, 200)"}, + {color: "rgb(200, 0, 100)"}, + ], options); + this.add_cleanup(() => anim.cancel()); + assert_equals(cs.color, "rgb(100, 50, 150)", "color"); +}, "'color' animation"); + +// 'opacity' doesn't apply to ::marker so it shouldn't be animatable +test(function() { + const anim = target.animate([ + {opacity: .2}, + {opacity: .8}, + ], options); + this.add_cleanup(() => anim.cancel()); + assert_equals(cs.opacity, "1", "opacity"); +}, "'opacity' animation"); + +// When both 'color' and 'opacity' are specified, only the former should be animated. +test(function() { + const anim = target.animate([ + { + color: "rgb(0, 100, 200)", + opacity: .2, + }, + { + color: "rgb(200, 0, 100)", + opacity: .8, + }, + ], options); + this.add_cleanup(() => anim.cancel()); + assert_equals(cs.color, "rgb(100, 50, 150)", "color"); + assert_equals(cs.opacity, "1", "opacity"); +}, "'color' + 'opacity' animation"); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-color-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-color-ref.html new file mode 100644 index 0000000000..f2269f7f78 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-color-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker formatting with color property reference file</title> +<link rel="author" title="Daniel Bates" href="mailto:dbates@webkit.org"> +<style> +li { + color: green; + font-size: 40px; + list-style-type: square; +} +</style> +</head> +<body> +<ol> + <li><!-- The list marker should be a green square.--></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-color.html b/testing/web-platform/tests/css/css-pseudo/marker-color.html new file mode 100644 index 0000000000..d45c76696e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-color.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker formatting with color property</title> +<link rel="author" title="Daniel Bates" href="mailto:dbates@webkit.org"> +<link rel="match" href="marker-color-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<meta name="assert" content="Tests ::marker rendering with color property"> +<style> +li { + color: red; + font-size: 40px; + list-style-type: square; +} + +li::marker { + color: green; +} +</style> +</head> +<body> +<ol> + <li><!-- The list marker should be a green square.--></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-computed-content.html b/testing/web-platform/tests/css/css-pseudo/marker-computed-content.html new file mode 100644 index 0000000000..b2df337adc --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-computed-content.html @@ -0,0 +1,64 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Computed size of ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-content/#content-property"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that 'content' resolves correctly in ::marker." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.no-list > li { + display: block; +} +.normal::marker { + content: normal; +} +.string::marker { + content: "string"; +} +.image::marker { + content: url("about:invalid"); +} +.none::marker { + content: none; +} +</style> +<div id="log"></div> +<ol class="list"> + <li class="default">item</li> + <li class="normal">item</li> + <li class="string">item</li> + <li class="image">item</li> + <li class="none">item</li> +</ol> +<ol class="no-list"> + <li class="default">item</li> + <li class="normal">item</li> + <li class="string">item</li> + <li class="image">item</li> + <li class="none">item</li> +</ol> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const expectations = { + default: 'normal', + normal: 'normal', + string: '"string"', + image: 'url("about:invalid")', + none: 'none', +}; +for (const target of document.querySelectorAll('.list > li')) { + const {content} = getComputedStyle(target, '::marker'); + test(() => { + debugger; + assert_equals(content, expectations[target.className]); + }, `Computed 'content' for list-item ::marker, variant ${target.className}`); +} +for (const target of document.querySelectorAll('.no-list > li')) { + const {content} = getComputedStyle(target, '::marker'); + test(() => { + assert_equals(content, expectations[target.className]); + }, `Computed 'content' for non-list-item ::marker, variant ${target.className}`); +} +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-computed-size.html b/testing/web-platform/tests/css/css-pseudo/marker-computed-size.html new file mode 100644 index 0000000000..76851369ab --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-computed-size.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Computed size of ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#content-property"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that getComputedStyle exposes the resolved sizes of a ::marker." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +:root { + --image: url('/images/green-100x50.png'); +} +:root::after { + /* Preload image */ + content: var(--image); +} +#target { + font: 10px/1 Ahem; + --content: normal; +} +#target::marker { + content: var(--content); +} +</style> +<div id="log"></div> +<ul> + <li id="target"></li> +</ul> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +const target = document.getElementById("target"); +function checkMarkerSize(expectedWidth, expectedHeight) { + const {width, height} = getComputedStyle(target, "::marker"); + assert_equals(width, expectedWidth, "width"); + assert_equals(height, expectedHeight, "height"); +} +setup({explicit_done: true}); +addEventListener("load", () => { + test(() => { + // Marker string: "1. " + target.style.listStyleType = "decimal"; + checkMarkerSize("30px", "10px"); + }, "Decimal ::marker"); + test(() => { + // Marker string: "10. " + target.setAttribute("value", "10"); + checkMarkerSize("40px", "10px"); + }, "Decimal ::marker with custom value"); + test(() => { + // Marker string: "st" + target.style.listStyleType = "'st'"; + checkMarkerSize("20px", "10px"); + }, "String ::marker"); + test(() => { + // No marker box + target.style.listStyleType = "none"; + checkMarkerSize("auto", "auto"); + }, "::marker with no box due to 'list-style'"); + test(() => { + // Marker contents: "foo", "bar" + target.style.setProperty("--content", "'foo' 'bar'"); + checkMarkerSize("60px", "10px"); + }, "::marker with custom string contents"); + test(() => { + // Marker contents: 100x50 image (+2px due to baseline alignment) + target.style.setProperty("--content", "var(--image)"); + checkMarkerSize("100px", "52px"); + }, "::marker with custom image contents"); + test(() => { + // Marker contents: "foo", 100x50 image (+2px due to baseline alignment) + target.style.setProperty("--content", "'foo' var(--image)"); + checkMarkerSize("130px", "52px"); + }, "::marker with custom string and image contents"); + test(() => { + // No marker box + target.style.listStyleType = ""; + target.style.setProperty("--content", "none"); + checkMarkerSize("auto", "auto"); + }, "::marker with no box due to 'content'"); + done(); +}, {once: true}); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-001-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-001-ref.html new file mode 100644 index 0000000000..e2c2daa176 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-001-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-001.html b/testing/web-platform/tests/css/css-pseudo/marker-content-001.html new file mode 100644 index 0000000000..5e5bfe1c23 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-001.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li::marker { + content: "1.\00a0"; +} +li:nth-of-type(2)::marker { + content: "2.\00a0"; +} +li:nth-child(3)::marker { + content: "3.\00a0"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-001b.html b/testing/web-platform/tests/css/css-pseudo/marker-content-001b.html new file mode 100644 index 0000000000..6ab87a31d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-001b.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li::marker { + content: "1.\00a0"; + display: block; +} +li:nth-of-type(2)::marker { + content: "2.\00a0"; +} +li:nth-child(3)::marker { + content: "3.\00a0"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-001c.html b/testing/web-platform/tests/css/css-pseudo/marker-content-001c.html new file mode 100644 index 0000000000..0a32b2ada0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-001c.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li::marker { + content: "1.\00a0"; + display: block; + margin: 0 auto 0 auto; +} +li:nth-of-type(2)::marker { + content: "2.\00a0"; +} +li:nth-child(3)::marker { + content: "3.\00a0"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-002-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-002-ref.html new file mode 100644 index 0000000000..5886f4216b --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-002-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li style="list-style-type:'a1b'"></li><li style="list-style-type:'a2b'">B</li><li style="list-style-type:'a3b'"><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-002.html b/testing/web-platform/tests/css/css-pseudo/marker-content-002.html new file mode 100644 index 0000000000..4c46c4b0b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-002.html @@ -0,0 +1,19 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-002-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li::marker { + content: "a" counters(list-item, ".") "b"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-003-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-003-ref.html new file mode 100644 index 0000000000..5214d853c1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-003-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property and display:grid</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +li { + list-style-type: 'X'; + background: grey; +} +li::marker { + padding-right: 10px; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-003.html b/testing/web-platform/tests/css/css-pseudo/marker-content-003.html new file mode 100644 index 0000000000..b4a41ce6d8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-003.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property and display:grid</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-003-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li::marker { + content: "X"; + display: grid; + grid-template-columns: auto 10px; +} +li { background: grey; } +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-003b.html b/testing/web-platform/tests/css/css-pseudo/marker-content-003b.html new file mode 100644 index 0000000000..da7a2723ce --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-003b.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property and display:inline-grid</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-003-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li::marker { + content: "X"; + display: inline-grid; + grid-template-columns: auto 10px; +} +li { background: grey; } +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-004-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-004-ref.html new file mode 100644 index 0000000000..3d706d9d62 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-004-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property and display:flex</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +body { margin-left: 100px; } +li { + list-style-type: 'FAIL'; + background: grey; +} +li::marker { + content: "X"; + display: block; + width: 100px; + text-align: start; + background: lime; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-004.html b/testing/web-platform/tests/css/css-pseudo/marker-content-004.html new file mode 100644 index 0000000000..24dbaae123 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-004.html @@ -0,0 +1,25 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property and display:flex</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-004-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +body { margin-left: 100px; } +li { background: grey; } +li::marker { + content: "X"; + display: flex; + width: 100px; + align-content: start; + background: lime; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-005-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-005-ref.html new file mode 100644 index 0000000000..46e77ddc27 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-005-ref.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li style="list-style-type:'105'"><li style="list-style-type:'210'">B<li style="list-style-type:'315'"><span>C</span></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-005.html b/testing/web-platform/tests/css/css-pseudo/marker-content-005.html new file mode 100644 index 0000000000..ad37a65738 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-005.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-005-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li { + counter-increment: foo 5; +} +li::marker { + content: counters(list-item, ".") counter(foo, decimal-leading-zero); +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-006-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-006-ref.html new file mode 100644 index 0000000000..f258c88731 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-006-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +li { + list-style-position: inside; + list-style-type: none; +} +li::before { + content: "ab"; +} +li::after { + content: "d"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li>c</li><li>cB</li><li>c<span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-006.html b/testing/web-platform/tests/css/css-pseudo/marker-content-006.html new file mode 100644 index 0000000000..bf941ef3b1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-006.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-006-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li { + list-style-position: inside; +} +li::marker { + content: "a" "b"; +} +li::before { + content: "c"; +} +li::after { + content: "d"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-007-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-007-ref.html new file mode 100644 index 0000000000..8cec2799c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-007-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property and display:inline-grid</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +li { + list-style-position: inside; + list-style-type: none; +} +li::before { + content: "ab"; + display: inline-block; + width: 50px; + text-align: right; + padding-right: 60px; +} +li::after { + content: "d"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li>c</li><li>cB</li><li>c<span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-007.tentative.html b/testing/web-platform/tests/css/css-pseudo/marker-content-007.tentative.html new file mode 100644 index 0000000000..fb452666e3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-007.tentative.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property and display:inline-grid</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-007-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li { + list-style-position: inside; +} +li::marker { + content: "a" "b"; + display: inline-grid; + grid-template-columns: 50px 60px; +} +li::before { + content: "c"; +} +li::after { + content: "d"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-008-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-008-ref.html new file mode 100644 index 0000000000..3e80d5ff54 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-008-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +li { list-style-type: "ab"; } +#t1 > li { list-style-type: "ab"; } +#t2 > li::before { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D); margin-left: -24px; } +li::after { + content: "d"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol id="t1"><li>c</li><li>cB</li><li>c<span>C</span></li></ol> +<ol id="t2"><li>c</li><li>cB</li><li>c<span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-008.tentative.html b/testing/web-platform/tests/css/css-pseudo/marker-content-008.tentative.html new file mode 100644 index 0000000000..155b50ab6f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-008.tentative.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-008-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +li { + list-style-position: outside; +} +#t1 > li::marker { content: "a" "b"; } +#t2 > li::marker { content: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAMCAIAAAD3UuoiAAAAGklEQVQoz2Nk%2BP%2BfgRqAiYFKYNSgUYOGp0EA%2BQMCFrJdTgsAAAAASUVORK5CYII%3D); } +li::before { + content: "c"; +} +li::after { + content: "d"; +} +span { font-size: 32pt; } +</style> +</head> +<body> +<ol id="t1"><li></li><li>B</li><li><span>C</span></li></ol> +<ol id="t2"><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-009-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-009-ref.html new file mode 100644 index 0000000000..a3db09f078 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-009-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 40px; } +.h m { display:inline-block; width:0; line-height:0; height:0; position:relative; left: -2ch; } +.v m { writing-mode: vertical-lr; width:0; position:relative; left: -1em; height:0; text-indent:-2ch; } +.lr { writing-mode: vertical-lr; } +.big { font-size:xx-large; } +.big-marker m { font-size:xx-large; } +li { display: block; } +</style> +</head><body> +<ol class="h"> + <li><div class="big"><m style="font-size:initial">AB</m>C<br>D</div></li> + <li><div></div><div class="big"><m style="font-size:initial">AB</m>C<br>D</div> + </li> +</ol> +<ol class="big-marker h"> + <li><div><m>AB</m>C<br>D</div></li> + <li><div></div><div><m>AB</m>C<br>D</div></li> +</ol> +<ol class="v"> + <li><div><m>AB</m>C<br>D</div></li> + <li><div></div><div><m>AB</m>C<br>D</div></li> + <li><div class="big"><m style="font-size:initial">AB</m>C<br>D</div></li> +</ol> +<ol class="v big-marker"> + <li><div><m>AB</m>C<br>D</div></li> +</ol> +</body></html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-009.tentative.html b/testing/web-platform/tests/css/css-pseudo/marker-content-009.tentative.html new file mode 100644 index 0000000000..b3627cca75 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-009.tentative.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-009-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 40px; } +li::marker { content: 'AB'; } +.v > li::marker { writing-mode: vertical-lr; } +.lr { writing-mode: vertical-lr; } +.big { font-size:xx-large; } +.big-marker > li::marker { font-size:xx-large; } +f { float: left; margin-right: 20px; } +</style> +</head><body> +<ol> + <li><div class="big">C<br>D</div></li> + <li><div></div><div class="big">C<br>D</div> + </li> +</ol> +<ol class="big-marker"> + <li><div>C<br>D</div></li> + <li><div></div><div>C<br>D</div></li> +</ol> +<ol class=v> + <li><div>C<br>D</div></li> + <li><div></div><div>C<br>D</div></li> + <li><div class="big">C<br>D</div></li> +</ol> +<ol class="v big-marker"> + <li><div>C<br>D</div></li> +</ol> +</body></html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-010-ref-001.html b/testing/web-platform/tests/css/css-pseudo/marker-content-010-ref-001.html new file mode 100644 index 0000000000..9135f90241 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-010-ref-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 40px; } +.h m { display:inline-block; width:0; height:0; position:relative; left: -3ch; font-size: 16px; line-height:0; } +.big { font-size:xx-large; } +.big-marker m { font-size:xx-large; } +li { display: block; } +</style> +</head><body> +<ol class="h"> + <li><div class="big"><m>1.</m>C<br>D</div></li> + <li><div></div><div class="big"><m>2.</m>C<br>D</div> + </li> +</ol> +<ol class="big-marker h"> + <li><div><m>1.</m>C<br>D</div></li> + <li><div></div><div><m>2.</m>C<br>D</div></li> +</ol> +</body></html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-010-ref-002.html b/testing/web-platform/tests/css/css-pseudo/marker-content-010-ref-002.html new file mode 100644 index 0000000000..b85ccfbaeb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-010-ref-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 40px; } +.h m { display:inline-block; width:0; height:0; position:relative; left: -3ch; font-size: 16px; } +.big { font-size:xx-large; } +.big-marker m { font-size:xx-large; } +li { display: block; } +</style> +</head><body> +<ol class="h"> + <li><div class="big"><m>1.</m>C<br>D</div></li> + <li><div></div><div class="big"><m>2.</m>C<br>D</div> + </li> +</ol> +<ol class="big-marker h"> + <li><div><m>1.</m>C<br>D</div></li> + <li><div></div><div><m>2.</m>C<br>D</div></li> +</ol> +</body></html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-010.html b/testing/web-platform/tests/css/css-pseudo/marker-content-010.html new file mode 100644 index 0000000000..dcd27df148 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-010.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<!-- Outside markers may affect the height of the first line of the list item. + In the 1st reference the line height isn't affected, in the 2nd one it is. + Both are valid behaviors, the test passes if one of them matches --> +<link rel="match" href="marker-content-010-ref-001.html"> +<link rel="match" href="marker-content-010-ref-002.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 40px; } +.big { font-size:xx-large; } +.big-marker > li::marker { font-size:xx-large; } +</style> +</head><body> +<ol> + <li><div class="big">C<br>D</div></li> + <li><div></div><div class="big">C<br>D</div> + </li> +</ol> +<ol class="big-marker"> + <li><div>C<br>D</div></li> + <li><div></div><div>C<br>D</div></li> +</ol> +</body></html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-011-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-011-ref.html new file mode 100644 index 0000000000..62a64a1e5e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-011-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 40px; } +.h m { display:inline-block; width:0; line-height:0; height:0; position:relative; left: -3ch; } +.v m { writing-mode: vertical-lr; width:0; position:relative; left: -2em; height:0; text-indent:-3ch; } +.lr { writing-mode: vertical-lr; } +.big { font-size:xx-large; } +.big-marker m { font-size:xx-large; } +li { display: block; } +</style> +</head><body> +<ol class="h"> + <li><div class="big"><m style="font-size:initial">AB</m>C<br>D</div></li> + <li><div></div><div class="big"><m style="font-size:initial">AB</m>C<br>D</div> + </li> +</ol> +<ol class="big-marker h"> + <li><div><m>AB</m>C<br>D</div></li> + <li><div></div><div><m>AB</m>C<br>D</div></li> +</ol> +<ol class="v"> + <li><div><m>AB</m>C<br>D</div></li> + <li><div></div><div><m>AB</m>C<br>D</div></li> + <li><div class="big"><m style="font-size:initial">AB</m>C<br>D</div></li> +</ol> +<ol class="v big-marker"> + <li><div><m>AB</m>C<br>D</div></li> +</ol> +</body></html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-011.tentative.html b/testing/web-platform/tests/css/css-pseudo/marker-content-011.tentative.html new file mode 100644 index 0000000000..0cc20b0cdc --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-011.tentative.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<link rel="match" href="marker-content-011-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<style> +html,body { + color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0; +} +body { margin-left: 40px; } +li::marker { content: 'AB'; margin-bottom: 1ch; margin-right: 1ch; } +.v > li::marker { writing-mode: vertical-lr; margin-right: 1em; } +.lr { writing-mode: vertical-lr; } +.big { font-size:xx-large; } +.big-marker > li::marker { font-size:xx-large; } +f { float: left; margin-right: 20px; } +</style> +</head><body> +<ol> + <li><div class="big">C<br>D</div></li> + <li><div></div><div class="big">C<br>D</div> + </li> +</ol> +<ol class="big-marker"> + <li><div>C<br>D</div></li> + <li><div></div><div>C<br>D</div></li> +</ol> +<ol class=v> + <li><div>C<br>D</div></li> + <li><div></div><div>C<br>D</div></li> + <li><div class="big">C<br>D</div></li> +</ol> +<ol class="v big-marker"> + <li><div>C<br>D</div></li> +</ol> +</body></html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-012-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-012-ref.html new file mode 100644 index 0000000000..d40c55c736 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-012-ref.html @@ -0,0 +1,72 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +:root { + --red-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: red"></svg>'); + --green-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: green"></svg>'); +} +ul { + float: left; +} +.inside { + list-style-position: inside; +} +.text, .image { + list-style-type: none; + list-style-image: none; +} +.outside.text::before, .outside.image::before { + display: inline-block; + direction: rtl; + width: 0; +} +.text::before { + content: "text"; +} +.image::before { + content: var(--green-image); +} +</style> +<ul style="list-style-type: none"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> +<ul style="list-style-type: decimal"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> +<ul style="list-style-type: disc"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> +<ul style="list-style-type: 'string'"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> +<ul style="list-style-image: var(--red-image)"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-012.html b/testing/web-platform/tests/css/css-pseudo/marker-content-012.html new file mode 100644 index 0000000000..f36228719a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-012.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-012-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#content-property"> +<meta name="assert" content="Checks that ::marker's 'content' takes precendence over 'list-style-type' and 'list-style-image'"> +<style> +:root { + --red-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: red"></svg>'); + --green-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="16" style="background: green"></svg>'); +} +ul { + float: left; +} +.inside { + list-style-position: inside; +} +.text::marker { + content: "text"; +} +.image::marker { + content: var(--green-image); +} +</style> +<ul style="list-style-type: none"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> +<ul style="list-style-type: decimal"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> +<ul style="list-style-type: disc"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> +<ul style="list-style-type: 'string'"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> +<ul style="list-style-image: var(--red-image)"> + <li class="outside normal">item</li> + <li class="outside text">item</li> + <li class="outside image">item</li> + <li class="inside normal">item</li> + <li class="inside text">item</li> + <li class="inside image">item</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-013-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-013-ref.html new file mode 100644 index 0000000000..c46f8db136 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-013-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<html><head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +.inside { + list-style-position: inside; +} +.string { + list-style-type: "string"; +} +.content::marker { + content: "content"; +} +.before, .after { + display: contents; +} +.before::before, .after::after { + content: "item"; + display: list-item; + list-style-type: "nested"; +} +</style> +<ol class="outside"> + <li class="decimal">item</li> + <li class="string">item</li> + <li class="content">item</li> + <li class="before"></li> + <li class="after"></li> +</ol> +<ol class="inside"> + <li class="decimal">item</li> + <li class="string">item</li> + <li class="content">item</li> + <li class="before"></li> + <li class="after"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-013.html b/testing/web-platform/tests/css/css-pseudo/marker-content-013.html new file mode 100644 index 0000000000..3b2ce6fa50 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-013.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-013-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#list-style-position-property"> +<meta name="assert" content="Checks that ::marker is updated when 'list-style-position' changes dynamically."> +<style> +.inside { + list-style-position: inside; +} +.string { + list-style-type: "string"; +} +.content::marker { + content: "content"; +} +.before, .after { + display: contents; +} +.before::before, .after::after { + content: "item"; + display: list-item; + list-style-type: "nested"; +} +</style> +<ol class="inside"> + <li class="decimal">item</li> + <li class="string">item</li> + <li class="content">item</li> + <li class="before"></li> + <li class="after"></li> +</ol> +<ol class="outside"> + <li class="decimal">item</li> + <li class="string">item</li> + <li class="content">item</li> + <li class="before"></li> + <li class="after"></li> +</ol> +<script src="/common/reftest-wait.js"></script> +<script> +"use strict"; +addEventListener("load", function() { + requestAnimationFrame(() => { + for (const list of document.querySelectorAll("ol")) { + list.classList.toggle("inside"); + list.classList.toggle("outside"); + } + takeScreenshot(); + }); +}, {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-014-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-014-ref.html new file mode 100644 index 0000000000..a4d269444e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-014-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +iframe { + width: 600px; + border: none; +} +</style> +<body> +<script src="/common/reftest-wait.js"></script> +<script> +"use strict"; +const code = ` + <!DOCTYPE html> + <style> + ::marker { + font-size: 3vw; + } + ol { + float: left; + } + .inside { + list-style-position: inside; + } + .decimal { + list-style-type: decimal; + } + .string { + list-style-type: "1. "; + } + .marker::marker { + content: "1. "; + } + </style> + <ol> + <li class="decimal">item</li> + <li class="string">item</li> + <li class="marker">item</li> + </ol> + <ol class="inside"> + <li class="decimal">item</li> + <li class="string">item</li> + <li class="marker">item</li> + </ol> +`; +const iframe = document.createElement("iframe"); +iframe.src = "data:text/html," + encodeURI(code); +iframe.addEventListener("load", function() { + takeScreenshot(); +}, {once: true}); +document.body.appendChild(iframe); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-014.html b/testing/web-platform/tests/css/css-pseudo/marker-content-014.html new file mode 100644 index 0000000000..f1ebbe86c4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-014.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-014-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-values/#viewport-relative-lengths"> +<meta name="assert" content="Checks that viewport units in ::marker are recalculated when viewport size changes."> +<style> +iframe { + width: 300px; + border: none; +} +iframe.big { + width: 600px; +} +</style> +<body> +<script src="/common/reftest-wait.js"></script> +<script> +"use strict"; +const code = ` + <!DOCTYPE html> + <style> + ::marker { + font-size: 3vw; + } + ol { + float: left; + } + .inside { + list-style-position: inside; + } + .decimal { + list-style-type: decimal; + } + .string { + list-style-type: "1. "; + } + .marker::marker { + content: "1. "; + } + </style> + <ol> + <li class="decimal">item</li> + <li class="string">item</li> + <li class="marker">item</li> + </ol> + <ol class="inside"> + <li class="decimal">item</li> + <li class="string">item</li> + <li class="marker">item</li> + </ol> +`; +const iframe = document.createElement("iframe"); +iframe.src = "data:text/html," + encodeURI(code); +iframe.addEventListener("load", function() { + requestAnimationFrame(() => { + iframe.classList.add("big"); + takeScreenshot(); + }); +}, {once: true}); +document.body.appendChild(iframe); +</script> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-015-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-015-ref.html new file mode 100644 index 0000000000..f2e7a708c3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-015-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +li { + margin-left: 100px; +} +.outside { + list-style-position: outside; +} +.inside { + list-style-position: inside; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "[marker]"; +} +</style> +<!-- Note: Chromium and WebKit force all these markers to be inside --> +<li class="outside decimal">outside</li> +<li class="outside string">outside</li> +<li class="inside decimal">inside</li> +<li class="inside string">inside</li> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-015.html b/testing/web-platform/tests/css/css-pseudo/marker-content-015.html new file mode 100644 index 0000000000..6e1ec40af1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-015.html @@ -0,0 +1,29 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-015-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<meta name="assert" content="Checks that the position of a ::marker originated by a <li> which is not in a list is not affected by the 'content' property."> +<style> +li { + margin-left: 100px; +} +.outside { + list-style-position: outside; +} +.inside { + list-style-position: inside; +} +.decimal { + list-style-type: decimal; +} +.marker::marker { + content: "[marker]"; +} +</style> +<!-- Note: Chromium and WebKit force all these markers to be inside --> +<li class="outside decimal">outside</li> +<li class="outside marker">outside</li> +<li class="inside decimal">inside</li> +<li class="inside marker">inside</li> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-016-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-016-ref.html new file mode 100644 index 0000000000..963049765a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-016-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +ol { + list-style-type: "[marker]"; + text-decoration: underline; + padding-left: 100px; +} +.inside { + list-style-position: inside; +} +</style> +<ol> + <li class="outside">outside</li> + <li class="inside">inside</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-016.html b/testing/web-platform/tests/css/css-pseudo/marker-content-016.html new file mode 100644 index 0000000000..9a0585db72 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-016.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-016-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#line-decoration"> +<meta name="assert" content="Checks that the 'content' property of a ::marker doesn't affect the propagation of text decorations."> +<style> +::marker { + content: "[marker]"; +} +ol { + text-decoration: underline; + padding-left: 100px; +} +.inside { + list-style-position: inside; +} +</style> +<ol> + <li class="outside">outside</li> + <li class="inside">inside</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-017-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-017-ref.html new file mode 100644 index 0000000000..9628123611 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-017-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +img { + display: list-item; + list-style-type: "[marker]"; +} +img.inside { + list-style-position: inside; +} +</style> +<ol> + <img src="about:invalid" alt="alt" class="inside" /> + <img src="about:invalid" alt="alt" /> + <li value="3">item</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-017.html b/testing/web-platform/tests/css/css-pseudo/marker-content-017.html new file mode 100644 index 0000000000..267e519fee --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-017.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-017-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#declaring-a-list-item"> +<meta name="assert" content="Checks that ::marker can be created inside a non-replaced <img>."> +<style> +img { + display: list-item; +} +img.inside { + list-style-position: inside; +} +img::marker { + content: '[marker]'; +} +</style> +<ol> + <img src="about:invalid" alt="alt" class="inside" /> + <img src="about:invalid" alt="alt" /> + <li>item</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-018-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-018-ref.html new file mode 100644 index 0000000000..8107d4297d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-018-ref.html @@ -0,0 +1,61 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +ol { + float: left; + width: 100px; +} +.inside { + list-style-position: inside; +} +li:nth-child(1) { list-style-type: "1" } +li:nth-child(2) { list-style-type: "1 " } +li:nth-child(3) { list-style-type: "1 " } +li:nth-child(4) { list-style-type: " 1" } +li:nth-child(5) { list-style-type: " 1" } +li:nth-child(6) { list-style-type: " 1 " } +li:nth-child(7) { list-style-type: "1\9 2" } +li:nth-child(8) { list-style-type: "1\a 2" } +</style> +<ol class="inside"> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> +</ol> +<ol class="inside"> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> +</ol> +<ol class="outside"> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> +</ol> +<ol class="outside"> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-018.html b/testing/web-platform/tests/css/css-pseudo/marker-content-018.html new file mode 100644 index 0000000000..0a4a73cd50 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-018.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-018-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#white-space-rules"> +<meta name="assert" content="Checks that the 'content' property of a ::marker doesn't affect white space."> +<style> +ol { + float: left; + width: 100px; +} +.inside { + list-style-position: inside; +} +li:nth-child(1)::marker { content: "1" } +li:nth-child(2)::marker { content: "1 " } +li:nth-child(3)::marker { content: "1 " } +li:nth-child(4)::marker { content: " 1" } +li:nth-child(5)::marker { content: " 1" } +li:nth-child(6)::marker { content: " 1 " } +li:nth-child(7)::marker { content: "1\9 2" } +li:nth-child(8)::marker { content: "1\a 2" } +</style> +<ol class="inside"> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> +</ol> +<ol class="inside"> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> +</ol> +<ol class="outside"> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> + <li>item</li> +</ol> +<ol class="outside"> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> + <li> item</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-019-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-019-ref.html new file mode 100644 index 0000000000..4b96577253 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-019-ref.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +li { + display: block; +} +</style> +<ol> + <li>inside symbol</li> + <li>inside decimal</li> + <li>inside string</li> + <li>inside image</li> +</ol> +<ol> + <li>outside symbol</li> + <li>outside decimal</li> + <li>outside string</li> + <li>outside image</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-019.html b/testing/web-platform/tests/css/css-pseudo/marker-content-019.html new file mode 100644 index 0000000000..4921ca7d28 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-019.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-019-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-content/#content-property"> +<meta name="assert" content="Checks that the 'content: none' hides the ::marker."> +<style> +::marker { + content: none +} +.inside { + list-style-position: inside; +} +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "string"; +} +.image { + list-style-image: url("/images/green-100x50.png"); +} +</style> +<ol class="inside"> + <li class="symbol">inside symbol</li> + <li class="decimal">inside decimal</li> + <li class="string">inside string</li> + <li class="image">inside image</li> +</ol> +<ol class="outside"> + <li class="symbol">outside symbol</li> + <li class="decimal">outside decimal</li> + <li class="string">outside string</li> + <li class="image">outside image</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-020-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-020-ref.html new file mode 100644 index 0000000000..902c842515 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-020-ref.html @@ -0,0 +1,52 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +.no-marker ::marker { + content: none; +} +.inside { + list-style-position: inside; +} +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "string"; +} +.image { + list-style-image: url("/images/green-100x50.png"); +} +</style> +<div> + <ol class="inside"> + <li class="symbol">inside symbol</li> + <li class="decimal">inside decimal</li> + <li class="string">inside string</li> + <li class="image">inside image</li> + </ol> + <ol class="outside"> + <li class="symbol">outside symbol</li> + <li class="decimal">outside decimal</li> + <li class="string">outside string</li> + <li class="image">outside image</li> + </ol> +</div> +<div class="no-marker"> + <ol class="inside"> + <li class="symbol">inside symbol</li> + <li class="decimal">inside decimal</li> + <li class="string">inside string</li> + <li class="image">inside image</li> + </ol> + <ol class="outside"> + <li class="symbol">outside symbol</li> + <li class="decimal">outside decimal</li> + <li class="string">outside string</li> + <li class="image">outside image</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-020.html b/testing/web-platform/tests/css/css-pseudo/marker-content-020.html new file mode 100644 index 0000000000..5211506d8a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-020.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-020-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-content/#content-property"> +<meta name="assert" content="Checks that the ::marker is updated when 'content: none' is applied or unapplied dynamically."> +<style> +.no-marker ::marker { + content: none; +} +.inside { + list-style-position: inside; +} +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "string"; +} +.image { + list-style-image: url("/images/green-100x50.png"); +} +</style> +<div class="no-marker"> + <ol class="inside"> + <li class="symbol">inside symbol</li> + <li class="decimal">inside decimal</li> + <li class="string">inside string</li> + <li class="image">inside image</li> + </ol> + <ol class="outside"> + <li class="symbol">outside symbol</li> + <li class="decimal">outside decimal</li> + <li class="string">outside string</li> + <li class="image">outside image</li> + </ol> +</div> +<div> + <ol class="inside"> + <li class="symbol">inside symbol</li> + <li class="decimal">inside decimal</li> + <li class="string">inside string</li> + <li class="image">inside image</li> + </ol> + <ol class="outside"> + <li class="symbol">outside symbol</li> + <li class="decimal">outside decimal</li> + <li class="string">outside string</li> + <li class="image">outside image</li> + </ol> +</div> +<script src="/common/reftest-wait.js"></script> +<script> +"use strict"; +addEventListener("load", function() { + requestAnimationFrame(() => { + for (const div of document.querySelectorAll("div")) { + div.classList.toggle("no-marker"); + } + takeScreenshot(); + }); +}, {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-021-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-021-ref.html new file mode 100644 index 0000000000..93c0540ca4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-021-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +::marker { + content: "[m]"; +} +.inside { + list-style-position: inside; +} +</style> +<ol class="inside"> + <li>inside none→symbol</li> + <li>inside symbol→decimal</li> + <li>inside decimal→roman</li> + <li>inside roman→string</li> + <li>inside string→none</li> +</ol> +<ol class="outside"> + <li>outside none→symbol</li> + <li>outside symbol→decimal</li> + <li>outside decimal→roman</li> + <li>outside roman→string</li> + <li>outside string→none</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-021.html b/testing/web-platform/tests/css/css-pseudo/marker-content-021.html new file mode 100644 index 0000000000..fc3fe851e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-021.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-021-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#content-property"> +<meta name="assert" content="Checks that non-normal ::marker is not updated when 'list-style-type' changes dynamically."> +<style> +::marker { + content: "[m]"; +} +.inside { + list-style-position: inside; +} +.none { + list-style-type: none; +} +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.roman { + list-style-type: lower-roman; +} +.string { + list-style-type: "string"; +} +</style> +<ol class="inside"> + <li class="none">inside none→symbol</li> + <li class="symbol">inside symbol→decimal</li> + <li class="decimal">inside decimal→roman</li> + <li class="roman">inside roman→string</li> + <li class="string">inside string→none</li> +</ol> +<ol class="outside"> + <li class="none">outside none→symbol</li> + <li class="symbol">outside symbol→decimal</li> + <li class="decimal">outside decimal→roman</li> + <li class="roman">outside roman→string</li> + <li class="string">outside string→none</li> +</ol> +<script src="/common/reftest-wait.js"></script> +<script> +"use strict"; +// Use a "load" event listener and requestAnimationFrame to ensure that +// the markers will have been laid out. +addEventListener("load", function() { + requestAnimationFrame(() => { + for (let list of document.querySelectorAll("ol")) { + // Rotate class names among list items + const firstClass = list.firstElementChild.className; + for (let item of list.children) { + const next = item.nextElementSibling; + item.className = next ? next.className : firstClass; + } + } + takeScreenshot(); + }); +}, {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-022-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-022-ref.html new file mode 100644 index 0000000000..1342b0621f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-022-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "string"; +} +.content::marker { + content: "content"; +} +</style> +<ol> + <li class="symbol"><span><div>foo</div></span></li> + <li class="decimal"><span><div>foo</div></span></li> + <li class="string"><span><div>foo</div></span></li> + <li class="content"><span><div>foo</div></span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-022.html b/testing/web-platform/tests/css/css-pseudo/marker-content-022.html new file mode 100644 index 0000000000..56863bee70 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-022.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-022-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#list-style-position-outside"> +<meta name="assert" content="When a list item with an outside marker only has an inline child + with a block grandchild, some browsers insert a newline between the marker and the block, + and some don't. It's not clear what should happen, but this test checks that the behavior + is consistent whether the block is inserted dynamically or was there from the beginning."> +<style> +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "string"; +} +.content::marker { + content: "content"; +} +</style> +<ol> + <li class="symbol"><span></span></li> + <li class="decimal"><span></span></li> + <li class="string"><span></span></li> + <li class="content"><span></span></li> +</ol> +<script src="/common/reftest-wait.js"></script> +<script> +// Use a "load" event listener and requestAnimationFrame to ensure that +// the markers will have been laid out. +addEventListener("load", () => requestAnimationFrame(() => { + const div = document.createElement("div"); + div.appendChild(document.createTextNode("foo")); + for (let span of document.querySelectorAll("li > span")) { + span.appendChild(div.cloneNode(true)); + } + takeScreenshot(); +}), {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-023-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-023-ref.html new file mode 100644 index 0000000000..d0ce5c1fad --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-023-ref.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +.disc { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "3. "; +} +.content::marker { + content: "4. "; +} +.rtl-marker ::marker { + direction: rtl; +} +</style> +<ol> + <li class="disc"><div>disc</div></li> + <li class="decimal"><div>decimal</div></li> + <li class="string"><div>string</div></li> + <li class="content"><div>content</div></li> +</ol> +<ol class="rtl-marker"> + <li class="disc"><div>disc</div></li> + <li class="decimal"><div>decimal</div></li> + <li class="string"><div>string</div></li> + <li class="content"><div>content</div></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-023.html b/testing/web-platform/tests/css/css-pseudo/marker-content-023.html new file mode 100644 index 0000000000..9ec0ca46e4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-023.html @@ -0,0 +1,46 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-023-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text/#text-indent-property"> +<meta name="assert" content="Checks that 'text-indent' doesn't apply nor inherit to ::marker."> +<style> +li { + text-indent: 100px; /* Should not be inherited by ::marker */ +} +::marker { + text-indent: 100px; /* Should have no effect */ +} +li > div { + text-indent: 0; +} +.disc { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "3. "; +} +.content::marker { + content: "4. "; +} +.rtl-marker ::marker { + direction: rtl; +} +</style> +<ol> + <li class="disc"><div>disc</div></li> + <li class="decimal"><div>decimal</div></li> + <li class="string"><div>string</div></li> + <li class="content"><div>content</div></li> +</ol> +<ol class="rtl-marker"> + <li class="disc"><div>disc</div></li> + <li class="decimal"><div>decimal</div></li> + <li class="string"><div>string</div></li> + <li class="content"><div>content</div></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-024-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-content-024-ref.html new file mode 100644 index 0000000000..9ee03ee9f3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-024-ref.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + white-space: pre; + font: 25px/1 Ahem; + text-emphasis-style: circle; + -webkit-text-emphasis-style: circle; +} +</style> +<div>XÉ pÉ + Ép pp + XÉ pÉ + Ép pp +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-content-024.html b/testing/web-platform/tests/css/css-pseudo/marker-content-024.html new file mode 100644 index 0000000000..8a6ab0b5a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-content-024.html @@ -0,0 +1,41 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'content' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-content-024-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-multicol/"> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#emphasis-marks"> +<link rel="help" href="https://html.spec.whatwg.org/multipage/interaction.html#contenteditable"> +<meta name="assert" content="Checks ::marker in a multi-column can have emphasis marks and doesn't crash when made editable."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +ol { + margin: 0; + padding-left: 25px; + font: 25px/1 Ahem; +} +li { + width: 150px; + column-count: 2; + column-gap: 0; + text-emphasis-style: circle; + -webkit-text-emphasis-style: circle; +} +li + li { + list-style-position: inside; +} +::marker { + content: 'X'; +} +</style> +<ol> + <li>É<br>Ép<br>pÉ<br>pp</li> + <li>É<br>Ép<br>pÉ<br>pp</li> +</ol> +<script> +// Force layout +document.body.offsetLeft; +// Enabling editability shouldn't crash +document.querySelector("ol").contentEditable = "true"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-default-styles.html b/testing/web-platform/tests/css/css-pseudo/marker-default-styles.html new file mode 100644 index 0000000000..0f988d8eb0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-default-styles.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Default styles for ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that ::marker gets assigned some styles in UA origin." /> +<style> +.outside { list-style-position: outside } +.inside { list-style-position: inside } +.symbol { list-style-type: symbol } +.decimal { list-style-type: decimal } +.string { list-style-type: "string" } +.marker::marker { content: "marker" } +li { + /* These inheritable properties should not be inherited by ::marker */ + text-transform: lowercase; + text-indent: 1px; +} +</style> +<div id="log"></div> +<ul> + <li class="outside symbol">outside symbol</li> + <li class="outside decimal">outside decimal</li> + <li class="outside string">outside string</li> + <li class="outside marker">outside marker</li> + <li class="inside symbol">inside symbol</li> + <li class="inside decimal">inside decimal</li> + <li class="inside string">inside string</li> + <li class="inside marker">inside marker</li> +</ul> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script> +const defaultStyles = [ + ["unicode-bidi", "isolate"], + ["font-variant-numeric", "tabular-nums"], + ["text-transform", "none"], + ["text-indent", "0px"], +]; +for (const target of document.querySelectorAll("li")) { + const cs = getComputedStyle(target, "::marker"); + for (const [prop, value] of defaultStyles) { + test(function() { + assert_equals(cs.getPropertyValue(prop), value); + }, `Computed value of '${prop}' for ${target.className}`); + } +} +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-display-computed.html b/testing/web-platform/tests/css/css-pseudo/marker-display-computed.html new file mode 100644 index 0000000000..089f0fb39e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-display-computed.html @@ -0,0 +1,56 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Supported properties in ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-lists/#list-style-position"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks the computed 'display' value of ::marker pseudo-elements." /> +<style> +.inside { + list-style-position: inside; +} +.color::marker { + color: blue; +} +.string { + list-style-type: "string"; +} +.content::marker { + content: "content"; +} +</style> +<div id="log"></div> +<ol class="inside"> + <li class="default">item</li> + <li class="color">item</li> + <li class="string">item</li> + <li class="content">item</li> +</ol> +<ol class="outside"> + <li class="default">item</li> + <li class="color">item</li> + <li class="string">item</li> + <li class="content">item</li> +</ol> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script> +const inside = document.querySelectorAll(".inside > li"); +for (const target of inside) { + const {display} = getComputedStyle(target, "::marker"); + test(() => { + assert_equals(display, "inline", "Inside markers should be inline"); + }, `Computed 'display' for inside ::marker, variant ${target.className}`); +} + +const outside = document.querySelectorAll(".outside > li"); +const firstDisplay = getComputedStyle(outside[0], "::marker").display; +for (const target of outside) { + const {display} = getComputedStyle(target, "::marker"); + test(() => { + assert_in_array(display, ["inline-block", "block"], "Outside markers should be block containers"); + assert_equals(display, firstDisplay, "The 'display' value shouldn't vary"); + }, `Computed 'display' for outside ::marker, variant ${target.className}`); +} +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-display-dynamic-001.html b/testing/web-platform/tests/css/css-pseudo/marker-display-dynamic-001.html new file mode 100644 index 0000000000..c06da7ca80 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-display-dynamic-001.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker is created dynamically properly</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="author" title="Mozilla" href="https://mozilla.org"> +<link rel="match" href="marker-color-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1538589"> +<style> +li { + color: green; + font-size: 40px; + list-style-type: square; +} +::marker { + display: none; +} +.tweak::marker { + display: initial; +} +</style> +<ol> + <li><!-- The list marker should be a green square.--></li> +</ol> +<script> + onload = function() { + let li = document.querySelector("li"); + li.offsetTop; + li.classList.add("tweak"); + } +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-font-properties-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-font-properties-ref.html new file mode 100644 index 0000000000..a8fb980ff0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-font-properties-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker formatting with font properties reference file</title> +<link rel="author" title="Daniel Bates" href="mailto:dbates@webkit.org"> +<style> +ol { + line-height: 30px; +} + +li { + font-family: sans-serif; + font-size: 24px; + font-style: italic; + font-variant: small-caps; + font-weight: bold; + list-style-type: lower-alpha; + font-variant-numeric: tabular-nums; +} +</style> +</head> +<body> +<ol> + <li></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-font-properties.html b/testing/web-platform/tests/css/css-pseudo/marker-font-properties.html new file mode 100644 index 0000000000..4dd7806798 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-font-properties.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker formatting with font properties</title> +<link rel="author" title="Daniel Bates" href="mailto:dbates@webkit.org"> +<link rel="match" href="marker-font-properties-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<meta name="assert" content="Tests ::marker rendering with font properties"> +<style> +ol { + line-height: 30px; +} + +li { + list-style-type: lower-alpha; +} + +li::marker, span { + font-family: sans-serif; + font-size: 24px; + font-style: italic; + font-variant: small-caps; + font-weight: bold; +} +</style> +</head> +<body> +<ol> + <li><span><!-- FIXME: Needed to ensure consistent baseline position with expected result in Chromium and WebKit (why?). --></span></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-default-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-default-ref.html new file mode 100644 index 0000000000..be932213b0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-default-ref.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="mismatch" href="marker-font-variant-numeric-normal-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +@font-face { + /* This font looks different with 'font-variant-numeric: tabular-nums' */ + font-family: 'Exo 2'; + src: local('Exo 2'), + url('/css/css-fonts/support/fonts/Exo2-SemiBold.otf') format("opentype"); +} +ol { + float: left; + width: 50px; + line-height: 25px; + list-style-position: inside; + font-family: "Exo 2"; +} +li:first-child::after { + content: 'X X X X X X X X X'; + display: inline-block; + font: 25px/1 Ahem; + vertical-align: top; + height: 0; + width: 25px; +} +</style> +<ol> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> +</ol> +<ol> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> +</ol> +<ol> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> +</ol> +<ol> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> +</ol> +<ol> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> + <li></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-default.html b/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-default.html new file mode 100644 index 0000000000..21840697c7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-default.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker has 'font-variant-numeric: tabular-nums' by default</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="match" href="marker-font-variant-numeric-default-ref.html"> +<meta name="assert" content="Checks that the markers have the same width thanks to 'font-variant-numeric: tabular-nums', and thus the black boxes are perfectly aligned"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +@font-face { + /* This font looks different with 'font-variant-numeric: tabular-nums' */ + font-family: 'Exo 2'; + src: local('Exo 2'), + url('/css/css-fonts/support/fonts/Exo2-SemiBold.otf') format("opentype"); +} +ol { + float: left; + width: 50px; + line-height: 25px; + list-style-position: inside; + font-family: "Exo 2"; +} +span { + display: inline-block; + font: 25px/1 Ahem; + vertical-align: top; +} + +li:nth-child(1) { --marker: "1. " } +li:nth-child(2) { --marker: "2. " } +li:nth-child(3) { --marker: "3. " } +li:nth-child(4) { --marker: "4. " } +li:nth-child(5) { --marker: "5. " } +li:nth-child(6) { --marker: "6. " } +li:nth-child(7) { --marker: "7. " } +li:nth-child(8) { --marker: "8. " } +li:nth-child(9) { --marker: "9. " } + +.string > li { + list-style-type: var(--marker); +} +.marker > li::marker { + content: var(--marker); +} +.before > li, .after > li { + display: block; +} +.before > li::before, .after > li::after { + content: "\200B"; /* zero-width space */ + display: list-item; + float: left; +} +</style> +<ol class="decimal"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> +<ol class="string"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> +<ol class="marker"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> +<ol class="before"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> +<ol class="after"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-normal-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-normal-ref.html new file mode 100644 index 0000000000..b730a24e55 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-normal-ref.html @@ -0,0 +1,83 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="mismatch" href="marker-font-variant-numeric-default-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +@font-face { + /* This font looks different with 'font-variant-numeric: tabular-nums' */ + font-family: 'Exo 2'; + src: local('Exo 2'), + url('/css/css-fonts/support/fonts/Exo2-SemiBold.otf') format("opentype"); +} +ol { + float: left; + width: 50px; + line-height: 25px; + list-style-type: none; + font-family: "Exo 2"; +} +span { + display: inline-block; + font: 25px/1 Ahem; + vertical-align: top; + width: 25px; + height: 25px; +} +</style> +<ol> + <li>1. <span>X</span></li> + <li>2. <span>X</span></li> + <li>3. <span>X</span></li> + <li>4. <span>X</span></li> + <li>5. <span>X</span></li> + <li>6. <span>X</span></li> + <li>7. <span>X</span></li> + <li>8. <span>X</span></li> + <li>9. <span>X</span></li> +</ol> +<ol> + <li>1. <span>X</span></li> + <li>2. <span>X</span></li> + <li>3. <span>X</span></li> + <li>4. <span>X</span></li> + <li>5. <span>X</span></li> + <li>6. <span>X</span></li> + <li>7. <span>X</span></li> + <li>8. <span>X</span></li> + <li>9. <span>X</span></li> +</ol> +<ol> + <li>1. <span>X</span></li> + <li>2. <span>X</span></li> + <li>3. <span>X</span></li> + <li>4. <span>X</span></li> + <li>5. <span>X</span></li> + <li>6. <span>X</span></li> + <li>7. <span>X</span></li> + <li>8. <span>X</span></li> + <li>9. <span>X</span></li> +</ol> +<ol> + <li>1. <span>X</span></li> + <li>2. <span>X</span></li> + <li>3. <span>X</span></li> + <li>4. <span>X</span></li> + <li>5. <span>X</span></li> + <li>6. <span>X</span></li> + <li>7. <span>X</span></li> + <li>8. <span>X</span></li> + <li>9. <span>X</span></li> +</ol> +<ol> + <li>1. <span>X</span></li> + <li>2. <span>X</span></li> + <li>3. <span>X</span></li> + <li>4. <span>X</span></li> + <li>5. <span>X</span></li> + <li>6. <span>X</span></li> + <li>7. <span>X</span></li> + <li>8. <span>X</span></li> + <li>9. <span>X</span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-normal.html b/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-normal.html new file mode 100644 index 0000000000..e763f2871c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-font-variant-numeric-normal.html @@ -0,0 +1,115 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker accepts 'font-variant-numeric: normal'</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="match" href="marker-font-variant-numeric-normal-ref.html"> +<meta name="assert" content="Checks that the marker default 'font-variant-numeric: tabular-nums' can be overridden with 'font-variant-numeric: normal'"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +@font-face { + /* This font looks different with 'font-variant-numeric: tabular-nums' */ + font-family: 'Exo 2'; + src: local('Exo 2'), + url('/css/css-fonts/support/fonts/Exo2-SemiBold.otf') format("opentype"); +} +ol { + float: left; + width: 50px; + line-height: 25px; + list-style-position: inside; + font-family: "Exo 2"; +} +span { + display: inline-block; + font: 25px/1 Ahem; + vertical-align: top; +} + +li:nth-child(1) { --marker: "1. " } +li:nth-child(2) { --marker: "2. " } +li:nth-child(3) { --marker: "3. " } +li:nth-child(4) { --marker: "4. " } +li:nth-child(5) { --marker: "5. " } +li:nth-child(6) { --marker: "6. " } +li:nth-child(7) { --marker: "7. " } +li:nth-child(8) { --marker: "8. " } +li:nth-child(9) { --marker: "9. " } + +.string > li { + list-style-type: var(--marker); +} +.marker > li::marker { + content: var(--marker); +} +.before > li, .after > li { + display: block; +} +.before > li::before, .after > li::after { + content: "\200B"; /* zero-width space */ + display: list-item; + float: left; +} + +::marker { + font-variant-numeric: normal; +} +::before::marker, ::after::marker { + font-variant-numeric: normal; +} +</style> +<ol class="decimal"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> +<ol class="string"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> +<ol class="marker"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> +<ol class="before"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> +<ol class="after"> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> + <li><span>X</span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-hit-testing.html b/testing/web-platform/tests/css/css-pseudo/marker-hit-testing.html new file mode 100644 index 0000000000..05913c0a3d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-hit-testing.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Hit testing ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that hit-testing a ::marker, the APIs provide the nearest element ancestor." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +ol { + display: inline-block; + padding-left: 100px; +} +li { + font: 50px/100px Ahem; + width: 50px; +} +.inside { + list-style-position: inside; +} +.image { + list-style-image: url("/images/green-100x50.png"); +} +.string { + list-style-type: "X"; +} +.marker::marker { + content: "X"; +} +.nested { + display: block; +} +.nested::before { + content: ''; + display: list-item; +} +</style> +<!-- The <li> are 50px wide, and the ::marker are at least 50px wide. + Since they are outside, try to locate them at -40px to the left of + the <li>, i.e. -65px from the center of the <li> --> +<ol class="outside" data-x="-65"> + <li class="image"></li> + <li class="string"></li> + <li class="marker"></li> + <li class="nested image"></li> + <li class="nested string"></li> +</ol> +<!-- The <li> are 50px wide, and the inside ::marker are at least 50px, + so locate them at the horizontal center of the <li> --> +<ol class="inside" data-x="0"> + <li class="image"></li> + <li class="string"></li> + <li class="marker"></li> + <li class="nested image"></li> + <li class="nested string"></li> +</ol> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script> +function check(event, li) { + assert_equals(event.target, li, "event.target"); + if (event.path) { + assert_equals(event.path[0], li, "event.path"); + } + const el = document.elementFromPoint(event.clientX, event.clientY); + assert_equals(el, li, "elementFromPoint"); +} +(async function() { + setup({ explicit_done: true }); + for (let list of document.querySelectorAll("ol")) { + for (let li of list.querySelectorAll("li")) { + const listener = e => check(e, li); + async_test(function(t) { + document.addEventListener("mousedown", t.step_func_done(listener)); + }, list.className + " " + li.className + " ::marker's content"); + async_test(function(t) { + document.addEventListener("mouseup", t.step_func_done(listener)); + }, list.className + " " + li.className + " ::marker"); + await new test_driver.Actions() + // Send an event at the vertical middle of the <li>, this should + // hit the contents of the ::marker + .pointerMove(+list.dataset.x, 0, {origin: li}) + .pointerDown() + // The ::marker is 100px tall but its contents only 50px tall. + // Send an event inside the ::marker but above its contents. + .pointerMove(+list.dataset.x, -40, {origin: li}) + .pointerUp() + .send(); + } + } + done(); +})(); +</script> + diff --git a/testing/web-platform/tests/css/css-pseudo/marker-hyphens-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-hyphens-ref.html new file mode 100644 index 0000000000..3f29ce441f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-hyphens-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<style> +li { + width: 0; + list-style-type: none; +} +</style> +<ol> + <li>foo­bar</li> + <li>foo­bar</li> +</ol> +<ol> + <li>foo­bar</li> + <li>foo­bar</li> +</ol> +<ol> + <li>foobar</li> + <li>foobar</li> +</ol> +<ol> + <li>foobar</li> + <li>foobar</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-hyphens.html b/testing/web-platform/tests/css/css-pseudo/marker-hyphens.html new file mode 100644 index 0000000000..a63e3deaf9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-hyphens.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'hyphens'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#hyphenation"> +<link rel="match" href="marker-hyphens-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'hyphens', both explicitly set or inherited from an ancestor"> +<style> +li { + list-style-position: inside; + width: 0; +} +.hyphens-manual.explicit ::marker, +.hyphens-manual.inherit { + hyphens: manual; +} +.hyphens-none.explicit ::marker, +.hyphens-none.inherit { + hyphens: none; +} +.marker-string { + list-style-type: "foo\AD bar"; +} +.marker-content::marker { + content: "foo\AD bar"; +} +</style> +<ol class="hyphens-manual explicit"> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="hyphens-manual inherit"> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="hyphens-none explicit"> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="hyphens-none inherit"> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-inherit-line-height-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-inherit-line-height-ref.html new file mode 100644 index 0000000000..9bd8ca874a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-inherit-line-height-ref.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>Reference: Check that :marker inherits line-height</title> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font: 128px/1 Ahem; + border: 2px solid blue; + background: orange; + color: black; +} +</style> + +<p>There should be two black rectangles below with no space between them and + the border above/below.</p> +<div> + 1. X +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-inherit-line-height.html b/testing/web-platform/tests/css/css-pseudo/marker-inherit-line-height.html new file mode 100644 index 0000000000..de34c2f7ae --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-inherit-line-height.html @@ -0,0 +1,30 @@ +<!doctype html> +<title>Check that :marker inherits line-height</title> +<link rel=help href="https://drafts.csswg.org/css-pseudo-4/#tree-abiding"> +<link rel=help href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel=help href="https://drafts.csswg.org/css-display-3/#list-items"> +<link rel=help href="https://bugzilla.mozilla.org/show_bug.cgi?id=1415759"> +<link rel=match href=marker-inherit-line-height-ref.html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + font: 128px/1 Ahem; + border: 2px solid blue; + background: orange; + color: black; +} +ol { + margin: 0; + padding: 0; + list-style-position: inside; + list-style-type: decimal; +} +</style> + +<p>There should be two black rectangles below with no space between them and + the border above/below.</p> +<div> + <ol> + <li>X + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-inherit-values-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-inherit-values-ref.html new file mode 100644 index 0000000000..6cce146ab3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-inherit-values-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker inherits values from originating element reference file</title> +<link rel="author" title="Daniel Bates" href="mailto:dbates@webkit.org"> +<style> +li { + color: green; + font-family: sans-serif; + font-size: x-large; + font-style: italic; + font-variant: small-caps; + font-weight: bold; + list-style-type: lower-alpha; +} +</style> +</head> +<body> +<ol> + <li></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-inherit-values.html b/testing/web-platform/tests/css/css-pseudo/marker-inherit-values.html new file mode 100644 index 0000000000..82456afb6c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-inherit-values.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker inherits values from originating element</title> +<link rel="author" title="Daniel Bates" href="mailto:dbates@webkit.org"> +<link rel="match" href="marker-inherit-values-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<meta name="assert" content="Tests ::marker inherits values from originating element"> +<style> +ol { + color: red; +} + +li { /* Originating element */ + color: green; + font-family: sans-serif; + font-size: x-large; + font-style: italic; + font-variant: small-caps; + font-weight: bold; + list-style-type: lower-alpha; +} + +li::marker { + color: inherit; + font-family: inherit; + font-size: inherit; + font-style: inherit; + font-variant: inherit; + font-weight: inherit; +} +</style> +</head> +<body> +<ol> + <li></li> +</ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-001.html b/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-001.html new file mode 100644 index 0000000000..db492e3156 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-001.html @@ -0,0 +1,70 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: intrinsic contribution of ::marker</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-sizing-3/#intrinsic"> +<meta name="assert" content="Checks that that outside markers have an intrinsic contribution of 0, and inside markers greater than 0."> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +li { + font: 10px/1 Ahem; + border: 5px solid orange; + float: left; + clear: left; +} +.inside { + list-style-position: inside; +} +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "string"; +} +.content::marker { + content: "content"; +} +</style> +<div id="log"></div> +<ol class="outside"> + <li class="symbol" data-width="0"></li> + <li class="decimal" data-width="0"></li> + <li class="string" data-width="0"></li> + <li class="content" data-width="0"></li> +</ol> +<ol class="inside"> + <li class="symbol" data-min-width="0"></li> + <li class="decimal" data-width="30"></li> + <li class="string" data-width="60"></li> + <li class="content" data-width="70"></li> +</ol> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> +"use strict"; +function check(item, msg) { + test(function() { + if (item.dataset.width) { + assert_equals(item.clientWidth, +item.dataset.width, "clientWidth"); + } else { + assert_greater_than(item.clientWidth, +item.dataset.minWidth, "clientWidth"); + } + }, msg); +} + +setup({ explicit_done: true }); + +document.fonts.ready.then(() => { + for (let item of document.querySelectorAll(".outside > li")) { + check(item, `Intrinsic contribution of outside ${item.className} marker`); + } + for (let item of document.querySelectorAll(".inside > li")) { + check(item, `Intrinsic contribution of inside ${item.className} marker`); + } + done(); +}); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-002-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-002-ref.html new file mode 100644 index 0000000000..bfae577499 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-002-ref.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: intrinsic contribution of ::marker</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +li { + border: 5px solid; + float: left; + clear: left; +} +.inside { + list-style-position: inside; +} +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "string"; +} +.content::marker { + content: "content"; +} +</style> +<ol class="inside"> + <li class="symbol"></li> + <li class="decimal"></li> + <li class="string"></li> + <li class="content"></li> +</ol> +<ol> + <li class="symbol"></li> + <li class="decimal"></li> + <li class="string"></li> + <li class="content"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-002.html b/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-002.html new file mode 100644 index 0000000000..1430270b34 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-intrinsic-contribution-002.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: intrinsic contribution of ::marker</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-intrinsic-contribution-002-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#intrinsic"> +<meta name="assert" content="Checks that that the intrinsic contribution of a ::marker is updated when 'list-style-position' changes."> +<style> +li { + border: 5px solid; + float: left; + clear: left; +} +.inside { + list-style-position: inside; +} +.symbol { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "string"; +} +.content::marker { + content: "content"; +} +</style> +<ol> + <li class="symbol"></li> + <li class="decimal"></li> + <li class="string"></li> + <li class="content"></li> +</ol> +<ol class="inside"> + <li class="symbol"></li> + <li class="decimal"></li> + <li class="string"></li> + <li class="content"></li> +</ol> +<script src="/common/reftest-wait.js"></script> +<script> +"use strict"; +// Use a "load" event listener and requestAnimationFrame to ensure that +// the markers will have been laid out. +addEventListener("load", function() { + requestAnimationFrame(() => { + for (let list of document.querySelectorAll("ol")) { + list.classList.toggle("inside"); + } + takeScreenshot(); + }); +}, {once: true}); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing-ref-001.html b/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing-ref-001.html new file mode 100644 index 0000000000..e5f4aedfba --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing-ref-001.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + float: left; + font: 25px/1 Ahem; +} +.inside { + list-style-position: inside; + width: 250px; +} +.outside { + list-style-position: outside; + width: 100px; + margin-left: 150px; +} +ol { + padding: 0; +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: "2 . \A0 "; +} +.marker-string { + list-style-type: "X p"; +} +.marker-content::marker { + content: "X p p"; +} +</style> +<div class="inside"> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> +<div class="outside"> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing-ref-002.html b/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing-ref-002.html new file mode 100644 index 0000000000..b402269906 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing-ref-002.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + float: left; + font: 25px/1 Ahem; +} +.inside { + list-style-position: inside; + width: 250px; +} +.outside { + list-style-position: outside; + width: 100px; + margin-left: 150px; +} +ol { + padding: 0; +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: "2 . \A0 "; +} +.marker-string { + list-style-type: "X p "; +} +.marker-content::marker { + content: "X p p "; +} +</style> +<div class="inside"> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> +<div class="outside"> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing.html b/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing.html new file mode 100644 index 0000000000..8a89e17921 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-letter-spacing.html @@ -0,0 +1,74 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'letter-spacing'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#letter-spacing-property"> +<!-- It's unclear whether letter-spacing should add trailing spacing (https://github.com/w3c/csswg-drafts/issues/1518). + The 1st reference assumes no trailing spacing, the 2nd one does. --> +<link rel="match" href="marker-letter-spacing-ref-001.html"> +<link rel="match" href="marker-letter-spacing-ref-002.html"> +<meta name="assert" content="Checks that ::marker supports 'letter-spacing', both explicitly set or inherited from an ancestor"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + float: left; + font: 25px/1 Ahem; +} +.inside { + list-style-position: inside; + width: 250px; +} +.outside { + list-style-position: outside; + width: 100px; + margin-left: 150px; +} +ol { + padding: 0; +} +.letter-spacing.explicit ::marker, +.letter-spacing.inherit { + letter-spacing: 25px; +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: decimal; +} +.marker-string { + list-style-type: "Xp"; +} +.marker-content::marker { + content: "Xpp"; +} +</style> +<div class="inside"> + <ol class="letter-spacing explicit"> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol class="letter-spacing inherit"> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> +<div class="outside"> + <ol class="letter-spacing explicit"> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol class="letter-spacing inherit"> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-line-break-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-line-break-ref.html new file mode 100644 index 0000000000..75625c1ea2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-line-break-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<style> +ul { + float: left; + width: 50px; + list-style-position: inside; +} +</style> +<ul> + <li><br>2.<br>ab<br>cd</li> +</ul> +<ul> + <li><br>2.<br>ab<br>cd</li> +</ul> +<ul> + <li><br>2<br>.<br>a<br>b<br>c<br>d</li> +</ul> +<ul> + <li><br>2<br>.<br>a<br>b<br>c<br>d</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-line-break.html b/testing/web-platform/tests/css/css-pseudo/marker-line-break.html new file mode 100644 index 0000000000..7577822bce --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-line-break.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'line-break'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#line-break-property"> +<link rel="match" href="marker-line-break-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'line-break', both explicitly set or inherited from an ancestor"> +<style> +ol { + float: left; + width: 50px; +} +li { + list-style-position: inside; + width: 0; +} +.line-break-strict.explicit ::marker, +.line-break-strict.inherit { + line-break: strict; +} +.line-break-anywhere.explicit ::marker, +.line-break-anywhere.inherit { + line-break: anywhere; +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: decimal; +} +.marker-string { + list-style-type: "ab"; +} +.marker-content::marker { + content: "cd"; +} +</style> +<ol class="line-break-strict explicit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="line-break-strict inherit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="line-break-anywhere explicit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="line-break-anywhere inherit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-line-height-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-line-height-ref.html new file mode 100644 index 0000000000..a32fb812f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-line-height-ref.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<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; + list-style-position: inside; + line-height: 3; +} +li:first-child { + list-style-type: disc; +} +div { + line-height: 1; +} +</style> +<ol> + <li></li> + <li></li> + <li></li> + <li></li> +</ol> +<ol> + <li></li> + <li></li> + <li></li> + <li></li> +</ol> +<ol> + <li><div>x</div></li> + <li><div>x</div></li> + <li><div>x</div></li> + <li><div>x</div></li> +</ol> +<ol> + <li><div>x</div></li> + <li><div>x</div></li> + <li><div>x</div></li> + <li><div>x</div></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-line-height.html b/testing/web-platform/tests/css/css-pseudo/marker-line-height.html new file mode 100644 index 0000000000..ee32f3bb6d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-line-height.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'line-height'</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-inline/#propdef-line-height"> +<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; + list-style-position: inside; +} +ol, ol div { + line-height: 1; + font-size: 1rem; +} +.line-height.explicit ::marker, +.line-height.inherit { + line-height: 3; +} +.line-height.inherit li { + font-size: 0; /* Remove the strut, which would defeat the test */ +} +.line-height.inherit ::marker { + font-size: 1rem; /* Restore the font-size */ +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: decimal; +} +.marker-string { + list-style-type: "3. "; +} +.marker-content::marker { + content: "4. "; +} +</style> +<ol class="line-height explicit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="line-height inherit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="line-height explicit"> + <li class="marker-disc"><div>x</div></li> + <li class="marker-decimal"><div>x</div></li> + <li class="marker-string"><div>x</div></li> + <li class="marker-content"><div>x</div></li> +</ol> +<ol class="line-height inherit"> + <li class="marker-disc"><div>x</div></li> + <li class="marker-decimal"><div>x</div></li> + <li class="marker-string"><div>x</div></li> + <li class="marker-content"><div>x</div></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-list-style-position-ref-001.html b/testing/web-platform/tests/css/css-pseudo/marker-list-style-position-ref-001.html new file mode 100644 index 0000000000..2593194d29 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-list-style-position-ref-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'list-style-position' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +body { color: black; background: white; } +#t1 > li { list-style-position: inside; } +#t2 > li { list-style-position: outside; } +#t3 > li { list-style-position: inside; } +#t4 > li { list-style-position: inside; } + +#t1, #t2, #t3, blue { color: blue; } +black { color: black; } + +span { font-size: 32pt; } +</style> +</head> +<body> +<ol id="t1"><li></li><li><black>B</black></li><li><span><black>C</black></span></li></ol> +<ol id="t2"><li></li><li><black>B</black></li><li><span><black>C</black></span></li></ol> +<ol id="t3"><li></li><li>B</li><li><span>C</span></li></ol> +<ol id="t4"><li></li><li><blue>B</blue></li><li><span><blue>C</blue></span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-list-style-position-ref-002.html b/testing/web-platform/tests/css/css-pseudo/marker-list-style-position-ref-002.html new file mode 100644 index 0000000000..1c21789c07 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-list-style-position-ref-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'list-style-position' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<style> +body { color: black; background: white; } +#t1 > li { list-style-position: inside; } +#t2 > li { list-style-position: outside; } +#t3 > li { list-style-position: inside; } +#t4 > li { list-style-position: inside; } + +#t1, #t2, blue { color: blue; } +black { color: black; } + +span { font-size: 32pt; } +</style> +</head> +<body> +<ol id="t1"><li></li><li><black>B</black></li><li><span><black>C</black></span></li></ol> +<ol id="t2"><li></li><li><black>B</black></li><li><span><black>C</black></span></li></ol> +<ol id="t3"><li></li><li><blue>B</blue></li><li><span><blue>C</blue></span></li></ol> +<ol id="t4"><li></li><li><blue>B</blue></li><li><span><blue>C</blue></span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-list-style-position.html b/testing/web-platform/tests/css/css-pseudo/marker-list-style-position.html new file mode 100644 index 0000000000..9b122bc3e9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-list-style-position.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<html> +<head> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'list-style-position' property</title> +<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +<!-- It's not clear whether inside ::marker should be affected by ::first-line. + In the 1st reference, #t3 markers inherit the blue color (like Firefox), + and in the 2nd reference they don't (like Chromium and WebKit). + See https://github.com/w3c/csswg-drafts/issues/4506 --> +<link rel="match" href="marker-list-style-position-ref-001.html"> +<link rel="match" href="marker-list-style-position-ref-002.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<meta name="assert" content="It's the list-style-position on the list item element that decides where its ::marker is placed, not the value on the ::marker itself."> +<style> +body { color: black; background: white; } +#t1 > li { list-style-position: inside; } +#t1 li::marker { list-style-position: outside; color: blue; } + +#t2 > li { list-style-position: outside; } +#t2 li::marker { list-style-position: inside; color: blue; } + +#t3 > li { list-style-position: inside; } +#t3 > li::first-line { list-style-position: outside; color: blue; } +#t3 li::marker { list-style-position: outside; } + +#t4 > li { list-style-position: inside; } +#t4 > li::first-letter { list-style-position: outside; color: blue; } +#t4 li::marker { list-style-position: outside; } + +span { font-size: 32pt; } +</style> +</head> +<body> +<ol id="t1"><li></li><li>B</li><li><span>C</span></li></ol> +<ol id="t2"><li></li><li>B</li><li><span>C</span></li></ol> +<ol id="t3"><li></li><li>B</li><li><span>C</span></li></ol> +<ol id="t4"><li></li><li>B</li><li><span>C</span></li></ol> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-overflow-wrap.html b/testing/web-platform/tests/css/css-pseudo/marker-overflow-wrap.html new file mode 100644 index 0000000000..29d9cf7784 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-overflow-wrap.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'overflow-wrap'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#overflow-wrap-property"> +<link rel="match" href="marker-line-break-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'overflow-wrap', both explicitly set or inherited from an ancestor"> +<style> +ol { + float: left; + width: 50px; +} +li { + list-style-position: inside; + width: 0; +} +.overflow-wrap-normal.explicit ::marker, +.overflow-wrap-normal.inherit { + overflow-wrap: strict; +} +.overflow-wrap-anywhere.explicit ::marker, +.overflow-wrap-anywhere.inherit { + overflow-wrap: anywhere; +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: decimal; +} +.marker-string { + list-style-type: "ab"; +} +.marker-content::marker { + content: "cd"; +} +</style> +<ol class="overflow-wrap-normal explicit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="overflow-wrap-normal inherit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="overflow-wrap-anywhere explicit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="overflow-wrap-anywhere inherit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-reverted-styles.html b/testing/web-platform/tests/css/css-pseudo/marker-reverted-styles.html new file mode 100644 index 0000000000..4e8b1228c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-reverted-styles.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Reverted styles for ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-cascade-4/#default"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that ::marker styles can be reverted to UA origin." /> +<style> +.revert::marker { all: revert } +.outside { list-style-position: outside } +.inside { list-style-position: inside } +.symbol { list-style-type: symbol } +.decimal { list-style-type: decimal } +.string { list-style-type: "string" } +.marker::marker { content: "marker" } +</style> +<div id="log"></div> +<ul> + <li class="outside symbol">outside symbol</li> + <li class="outside decimal">outside decimal</li> + <li class="outside string">outside string</li> + <li class="outside marker">outside marker</li> + <li class="inside symbol">inside symbol</li> + <li class="inside decimal">inside decimal</li> + <li class="inside string">inside string</li> + <li class="inside marker">inside marker</li> +</ul> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<script> +function getStyles(style) { + const obj = {}; + for (let i = 0; i < style.length; ++i) { + const prop = style.item(i); + obj[prop] = style.getPropertyValue(prop); + } + return obj; +} +for (const target of document.querySelectorAll("li")) { + test(function() { + const cs = getComputedStyle(target, "::marker"); + const defaultStyles = getStyles(cs); + target.classList.add("revert"); + const revertedStyles = getStyles(cs); + assert_object_equals(revertedStyles, defaultStyles); + }, `Reverted computed values for ${target.className}`); +} +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-tab-size-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-tab-size-ref.html new file mode 100644 index 0000000000..2985ac2eeb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-tab-size-ref.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + float: left; + font: 25px/1 Ahem; +} +.inside { + list-style-position: inside; + width: 250px; +} +.outside { + list-style-position: outside; + width: 100px; + margin-left: 150px; +} +ol { + padding: 0; +} +.marker-string { + list-style-type: "X p"; +} +.marker-content::marker { + content: "X p p"; +} +</style> +<div class="inside"> + <ol> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> +<div class="outside"> + <ol> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-tab-size.html b/testing/web-platform/tests/css/css-pseudo/marker-tab-size.html new file mode 100644 index 0000000000..a521f58bc8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-tab-size.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'tab-size'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#propdef-tab-size"> +<link rel="match" href="marker-tab-size-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'tab-size', both explicitly set or inherited from an ancestor"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + float: left; + font: 25px/1 Ahem; +} +.inside { + list-style-position: inside; + width: 250px; +} +.outside { + list-style-position: outside; + width: 100px; + margin-left: 150px; +} +ol { + padding: 0; +} +.tab-size.explicit ::marker, +.tab-size.inherit { + tab-size: 1; +} +.marker-string { + list-style-type: "X\9p"; +} +.marker-content::marker { + content: "X\9p\9p"; +} +</style> +<div class="inside"> + <ol class="tab-size explicit"> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol class="tab-size inherit"> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> +<div class="outside"> + <ol class="tab-size explicit"> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol class="tab-size inherit"> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-align-001-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-align-001-ref.html new file mode 100644 index 0000000000..2355fab2e7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-align-001-ref.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker pseudo elements styled with 'text-align' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<style> +li { + /* Should not be inherited by ::marker */ + text-align: end; + text-align-all: end; + text-align-last: end; +} +::marker { + /* Should have no effect */ + text-align: end; + text-align-all: end; + text-align-last: end; +} +li > div { + text-align: initial; + text-align-all: initial; + text-align-last: initial; +} +ol { + padding-left: 13ch; +} +li { + line-height: 16px; + height: 32px; + white-space: pre; +} +.disc { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "[m]\a longtext"; +} +.content::marker { + content: "[m]\a longtext"; +} +.rtl-marker ::marker { + direction: rtl; +} +</style> +<ol> + <li class="disc"><div>disc</div></li> + <li class="decimal"><div>decimal</div></li> + <li class="string"><div>string</div></li> + <li class="content"><div>content</div></li> +</ol> +<ol class="rtl-marker"> + <li class="disc"><div>disc</div></li> + <li class="decimal"><div>decimal</div></li> + <li class="string"><div>string</div></li> + <li class="content"><div>content</div></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-align-001.html b/testing/web-platform/tests/css/css-pseudo/marker-text-align-001.html new file mode 100644 index 0000000000..5ef1d8d75d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-align-001.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'text-align' property</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-text-align-001-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property"> +<meta name="assert" content="Checks that 'text-align' doesn't apply nor inherit to ::marker."> +<style> +li { + /* Should not be inherited by ::marker */ + text-align: start; + text-align-all: start; + text-align-last: start; +} +::marker { + /* Should have no effect */ + text-align: start; + text-align-all: start; + text-align-last: start; +} +li > div { + text-align: initial; + text-align-all: initial; + text-align-last: initial; +} +ol { + padding-left: 13ch; +} +li { + line-height: 16px; + height: 32px; + white-space: pre; +} +.disc { + list-style-type: disc; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "[m]\a longtext"; +} +.content::marker { + content: "[m]\a longtext"; +} +.rtl-marker ::marker { + direction: rtl; +} +</style> +<ol> + <li class="disc"><div>disc</div></li> + <li class="decimal"><div>decimal</div></li> + <li class="string"><div>string</div></li> + <li class="content"><div>content</div></li> +</ol> +<ol class="rtl-marker"> + <li class="disc"><div>disc</div></li> + <li class="decimal"><div>decimal</div></li> + <li class="string"><div>string</div></li> + <li class="content"><div>content</div></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-align-002-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-align-002-ref.html new file mode 100644 index 0000000000..04fd8c20ef --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-align-002-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'text-align' property</title> +<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-properties"> +<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1805603"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +ul { + width: 300px; + border: 1px solid black; + font-family: Ahem; +} +li { + /* Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1808393 */ + list-style-type: "A"; +} +</style> +<ul class="ul"> + <li><div style="text-align: right;">AAA</div></li> +</ul> +<ul class="ul"> + <li><div style="text-align: end;">AAA</div></li> +</ul> +<ul class="ul"> + <li><div style="text-align: center;">AAA</div></li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-align-002.html b/testing/web-platform/tests/css/css-pseudo/marker-text-align-002.html new file mode 100644 index 0000000000..6fe05b728d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-align-002.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'text-align' property</title> +<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-properties"> +<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1805603"> +<link rel="match" href="marker-text-align-002-ref.html"> +<meta name="assert" content="Checks that 'text-align' does not shift the ::marker element."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +ul { + width: 300px; + border: 1px solid black; + font-family: Ahem; +} +li { + /* Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1808393 */ + list-style-type: "A"; +} +</style> +<ul class="ul"> + <li style="text-align: right;">AAA</li> +</ul> +<ul class="ul"> + <li style="text-align: end;">AAA</li> +</ul> +<ul class="ul"> + <li style="text-align: center;">AAA</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-align-003-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-align-003-ref.html new file mode 100644 index 0000000000..98d52645f0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-align-003-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'text-align' property</title> +<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-properties"> +<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1805603"> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + direction: rtl; +} +ul { + width: 300px; + border: 1px solid black; + font-family: Ahem; +} +li { + /* Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1808393 */ + list-style-type: "A"; +} +</style> +<ul class="ul"> + <li><div style="text-align: left;">AAA</div></li> +</ul> +<ul class="ul"> + <li><div style="text-align: end;">AAA</div></li> +</ul> +<ul class="ul"> + <li><div style="text-align: center;">AAA</div></li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-align-003.html b/testing/web-platform/tests/css/css-pseudo/marker-text-align-003.html new file mode 100644 index 0000000000..38c513d7ae --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-align-003.html @@ -0,0 +1,33 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker pseudo elements styled with 'text-align' property</title> +<link rel="author" title="David Shin" href="mailto:dshin@mozilla.com"> +<link rel="help" href="https://drafts.csswg.org/css-lists-3/#marker-properties"> +<link rel="help" href="https://drafts.csswg.org/css-text/#text-align-property"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1805603"> +<link rel="match" href="marker-text-align-003-ref.html"> +<meta name="assert" content="Checks that 'text-align' does not shift the ::marker element."> +<link rel="stylesheet" href="/fonts/ahem.css"> +<style> +body { + direction: rtl; +} +ul { + width: 300px; + border: 1px solid black; + font-family: Ahem; +} +li { + /* Workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=1808393 */ + list-style-type: "A"; +} +</style> +<ul class="ul"> + <li style="text-align: left;">AAA</li> +</ul> +<ul class="ul"> + <li style="text-align: end;">AAA</li> +</ul> +<ul class="ul"> + <li style="text-align: center;">AAA</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-combine-upright-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-combine-upright-ref.html new file mode 100644 index 0000000000..2ad96e37bb --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-combine-upright-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Reference: ::marker supports 'text-combine-upright'</title> +<style> +body { + writing-mode: vertical-lr; +} +ol, ul { + display: flow-root; + list-style-type: none; +} +.symbol { + list-style-type: disc; +} +ul { + list-style-position: inside; +} +ol span { + display: inline-block; + margin-top: -50px; + height: 50px; + text-align: end; +} +span { + text-combine-upright: all; +} +</style> +<ol><li><span>1. </span>outside decimal</li></ol> +<ol><li><span>2. </span>outside string</li></ol> +<ol><li><span>3. </span>outside content</li></ol> +<ol class="symbol"><li>outside symbol</li></ol> + +<ul><li><span>1. </span>inside decimal</li></ul> +<ul><li><span>2. </span>inside string</li></ul> +<ul><li><span>3. </span>inside content</li></ul> +<ul class="symbol"><li>inside symbol</li></ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-combine-upright.html b/testing/web-platform/tests/css/css-pseudo/marker-text-combine-upright.html new file mode 100644 index 0000000000..64b37a0c7d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-combine-upright.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Test: ::marker supports 'text-combine-upright'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<link rel="match" href="marker-text-combine-upright-ref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-writing-modes-4/#propdef-text-combine-upright"> +<meta name="assert" content="Checks that 'text-combine-upright' works well in ::marker, and doesn't crash."> +<style> +body { + writing-mode: vertical-lr; +} +ol, ul { + display: flow-root; +} +ul { + list-style-position: inside; +} +.decimal { + list-style-type: decimal; +} +.string { + list-style-type: "2. "; +} +.content ::marker { + content: "3. "; +} +.symbol { + list-style-type: disc; +} +::marker { + text-combine-upright: all; +} +</style> +<ol class="decimal"><li>outside decimal</li></ol> +<ol class="string"><li>outside string</li></ol> +<ol class="content"><li>outside content</li></ol> +<ol class="symbol"><li>outside symbol</li></ol> + +<ul class="decimal"><li>inside decimal</li></ul> +<ul class="string"><li>inside string</li></ul> +<ul class="content"><li>inside content</li></ul> +<ul class="symbol"><li>inside symbol</li></ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-decoration-skip-ink-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-decoration-skip-ink-ref.html new file mode 100644 index 0000000000..9bf2cf2f50 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-decoration-skip-ink-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +ol { + float: left; + width: 50px; + list-style: none; + text-decoration: underline; +} +.text-decoration-skip-ink-auto { + text-decoration-skip-ink: auto; +} +.text-decoration-skip-ink-none { + text-decoration-skip-ink: none; +} +</style> +<ol class="text-decoration-skip-ink-auto"> + <li>g. </li> + <li>p. </li> + <li>q. </li> +</ol> +<ol class="text-decoration-skip-ink-auto"> + <li>g. </li> + <li>p. </li> + <li>q. </li> +</ol> +<ol class="text-decoration-skip-ink-none"> + <li>g. </li> + <li>p. </li> + <li>q. </li> +</ol> +<ol class="text-decoration-skip-ink-none"> + <li>g. </li> + <li>p. </li> + <li>q. </li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-decoration-skip-ink.html b/testing/web-platform/tests/css/css-pseudo/marker-text-decoration-skip-ink.html new file mode 100644 index 0000000000..153e9221a3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-decoration-skip-ink.html @@ -0,0 +1,53 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'text-decoration-skip-ink'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-decoration-skip-ink-property"> +<link rel="match" href="marker-text-decoration-skip-ink-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'text-decoration-skip-ink', both explicitly set or inherited from an ancestor"> +<style> +ol { + float: left; + width: 50px; + list-style-position: inside; + text-decoration: underline; +} +.text-decoration-skip-ink-auto.explicit ::marker, +.text-decoration-skip-ink-auto.inherit { + text-decoration-skip-ink: auto; +} +.text-decoration-skip-ink-none.explicit ::marker, +.text-decoration-skip-ink-none.inherit { + text-decoration-skip-ink: none; +} +.marker-alpha { + list-style-type: lower-alpha; +} +.marker-string { + list-style-type: "p. "; +} +.marker-content::marker { + content: "q. "; +} +</style> +<ol class="text-decoration-skip-ink-auto explicit"> + <li class="marker-alpha" value="7"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="text-decoration-skip-ink-auto inherit"> + <li class="marker-alpha" value="7"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="text-decoration-skip-ink-none explicit"> + <li class="marker-alpha" value="7"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="text-decoration-skip-ink-none inherit"> + <li class="marker-alpha" value="7"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-emphasis-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-emphasis-ref.html new file mode 100644 index 0000000000..aad3614c69 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-emphasis-ref.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +ol { + float: left; + width: 50px; + list-style: none; +} +.text-emphasis-shorthand { + -webkit-text-emphasis: circle green; + text-emphasis: circle green; +} +.text-emphasis-longhands { + -webkit-text-emphasis-style: circle; + -webkit-text-emphasis-color: green; + -webkit-text-emphasis-position: under right; + text-emphasis-style: circle; + text-emphasis-color: green; + text-emphasis-position: under right; +} +</style> +<ol class="text-emphasis-shorthand"> + <li>1. </li> + <li>2. </li> + <li>3. </li> +</ol> +<ol class="text-emphasis-shorthand"> + <li>1. </li> + <li>2. </li> + <li>3. </li> +</ol> +<ol class="text-emphasis-longhands"> + <li>1. </li> + <li>2. </li> + <li>3. </li> +</ol> +<ol class="text-emphasis-longhands"> + <li>1. </li> + <li>2. </li> + <li>3. </li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-emphasis.html b/testing/web-platform/tests/css/css-pseudo/marker-text-emphasis.html new file mode 100644 index 0000000000..db9fb3d525 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-emphasis.html @@ -0,0 +1,58 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'text-emphasis'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#emphasis-marks"> +<link rel="match" href="marker-text-emphasis-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'text-emphasis', both explicitly set or inherited from an ancestor"> +<style> +ol { + float: left; + width: 50px; + list-style-position: inside; +} +.text-emphasis-shorthand.explicit ::marker, +.text-emphasis-shorthand.inherit { + -webkit-text-emphasis: circle green; + text-emphasis: circle green; +} +.text-emphasis-longhands.explicit ::marker, +.text-emphasis-longhands.inherit { + -webkit-text-emphasis-style: circle; + -webkit-text-emphasis-color: green; + -webkit-text-emphasis-position: under right; + text-emphasis-style: circle; + text-emphasis-color: green; + text-emphasis-position: under right; +} +.marker-decimal { + list-style-type: decimal; +} +.marker-string { + list-style-type: "2. "; +} +.marker-content::marker { + content: "3. "; +} +</style> +<ol class="text-emphasis-shorthand explicit"> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="text-emphasis-shorthand inherit"> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="text-emphasis-longhands explicit"> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="text-emphasis-longhands inherit"> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-shadow-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-shadow-ref.html new file mode 100644 index 0000000000..62627d64b7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-shadow-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +ol { + float: left; + width: 50px; + list-style: none; + text-shadow: #0f0 1px 2px 3px; +} +</style> +<ol> + <li>1. </li> + <li>2. </li> + <li>3. </li> +</ol> +<ol> + <li>1. </li> + <li>2. </li> + <li>3. </li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-shadow.html b/testing/web-platform/tests/css/css-pseudo/marker-text-shadow.html new file mode 100644 index 0000000000..3f8ae566f1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-shadow.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'text-shadow'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-decor-4/#text-shadow-property"> +<link rel="match" href="marker-text-shadow-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'text-shadow', both explicitly set or inherited from an ancestor"> +<style> +ol { + float: left; + width: 50px; + list-style-position: inside; +} +.text-shadow.explicit ::marker, +.text-shadow.inherit { + text-shadow: #0f0 1px 2px 3px; +} +.marker-decimal { + list-style-type: decimal; +} +.marker-string { + list-style-type: "2. "; +} +.marker-content::marker { + content: "3. "; +} +</style> +<ol class="text-shadow explicit"> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="text-shadow inherit"> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-transform-default-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-default-ref.html new file mode 100644 index 0000000000..ceec36dd36 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-default-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<style> +.outside { list-style-position: outside } +.inside { list-style-position: inside } +.type-roman { list-style-type: lower-roman } +.type-string { list-style-type: "ii. " } +.content-counter::marker { content: counter(list-item, lower-roman) ". " } +.content-string::marker { content: "iv. " } +</style> +<ol class="outside"> + <li class="type-roman">TYPE-ROMAN</li> + <li class="type-string">TYPE-STRING</li> + <li class="content-counter">CONTENT-COUNTER</li> + <li class="content-string">CONTENT-STRING</li> +</ol> +<ol class="inside"> + <li class="type-roman">TYPE-ROMAN</li> + <li class="type-string">TYPE-STRING</li> + <li class="content-counter">CONTENT-COUNTER</li> + <li class="content-string">CONTENT-STRING</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-transform-default.html b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-default.html new file mode 100644 index 0000000000..922c5b0de2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-default.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker has 'text-transform: none' by default</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="match" href="marker-text-transform-default-ref.html"> +<meta name="assert" content="Checks that ::marker does not inherit the text-transform of the list item"> +<style> +.outside { list-style-position: outside } +.inside { list-style-position: inside } +.type-roman { list-style-type: lower-roman } +.type-string { list-style-type: "ii. " } +.content-counter::marker { content: counter(list-item, lower-roman) ". " } +.content-string::marker { content: "iv. " } +li { + text-transform: uppercase; +} +</style> +<ol class="outside"> + <li class="type-roman">type-roman</li> + <li class="type-string">type-string</li> + <li class="content-counter">content-counter</li> + <li class="content-string">content-string</li> +</ol> +<ol class="inside"> + <li class="type-roman">type-roman</li> + <li class="type-string">type-string</li> + <li class="content-counter">content-counter</li> + <li class="content-string">content-string</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-transform-dynamic-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-dynamic-ref.html new file mode 100644 index 0000000000..8e67569ff5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-dynamic-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-transform-dynamic.html b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-dynamic.html new file mode 100644 index 0000000000..f10b42ead6 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-dynamic.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-transform-uppercase-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-uppercase-ref.html new file mode 100644 index 0000000000..6f959dad67 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-uppercase-ref.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<style> +.outside { list-style-position: outside } +.inside { list-style-position: inside } +.type-roman { list-style-type: upper-roman } +.type-string { list-style-type: "II. " } +.content-counter::marker { content: counter(list-item, upper-roman) ". " } +.content-string::marker { content: "IV. " } +</style> +<ol class="outside"> + <li class="type-roman">type-roman</li> + <li class="type-string">type-string</li> + <li class="content-counter">content-counter</li> + <li class="content-string">content-string</li> +</ol> +<ol class="inside"> + <li class="type-roman">type-roman</li> + <li class="type-string">type-string</li> + <li class="content-counter">content-counter</li> + <li class="content-string">content-string</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-text-transform-uppercase.html b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-uppercase.html new file mode 100644 index 0000000000..d77f4e7de2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-text-transform-uppercase.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker accepts 'text-transform: uppercase'</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="match" href="marker-text-transform-uppercase-ref.html"> +<meta name="assert" content="Checks that the marker default 'text-transform: none' can be overridden with 'text-transform: uppercase'"> +<style> +.outside { list-style-position: outside } +.inside { list-style-position: inside } +.type-roman { list-style-type: lower-roman } +.type-string { list-style-type: "ii. " } +.content-counter::marker { content: counter(list-item, lower-roman) ". " } +.content-string::marker { content: "iv. " } +::marker { + text-transform: uppercase; +} +</style> +<ol class="outside"> + <li class="type-roman">type-roman</li> + <li class="type-string">type-string</li> + <li class="content-counter">content-counter</li> + <li class="content-string">content-string</li> +</ol> +<ol class="inside"> + <li class="type-roman">type-roman</li> + <li class="type-string">type-string</li> + <li class="content-counter">content-counter</li> + <li class="content-string">content-string</li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-default-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-default-ref.html new file mode 100644 index 0000000000..c3c6ee8a63 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-default-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="mismatch" href="marker-unicode-bidi-normal-ref.html"> +<style> +ol { + float: left; + list-style-type: none; +} +.rtl { + direction: rtl; +} +.marker { + unicode-bidi: isolate; + color: blue; +} +.text { + background: yellow; +} +</style> +<ol class="ltr"> + <li><span class="marker">ال</span><span class="text">0</span></li> + <li><span class="marker">aال</span><span class="text">0</span></li> + <li><span class="marker">الb</span><span class="text">0</span></li> + <li><span class="marker">aالb</span><span class="text">0</span></li> + <li><span class="marker">abال</span><span class="text">0</span></li> + <li><span class="marker">الab</span><span class="text">0</span></li> + <li><span class="marker">1ال</span><span class="text">0</span></li> + <li><span class="marker">ال2</span><span class="text">0</span></li> + <li><span class="marker">1ال2</span><span class="text">0</span></li> +</ol> +<ol class="rtl"> + <li><span class="marker">ال</span><span class="text">0</span></li> + <li><span class="marker">aال</span><span class="text">0</span></li> + <li><span class="marker">الb</span><span class="text">0</span></li> + <li><span class="marker">aالb</span><span class="text">0</span></li> + <li><span class="marker">abال</span><span class="text">0</span></li> + <li><span class="marker">الab</span><span class="text">0</span></li> + <li><span class="marker">1ال</span><span class="text">0</span></li> + <li><span class="marker">ال2</span><span class="text">0</span></li> + <li><span class="marker">1ال2</span><span class="text">0</span></li> +</ol> +<ol class="ltr"> + <li><span class="marker">ال</span><span class="text">0</span></li> + <li><span class="marker">aال</span><span class="text">0</span></li> + <li><span class="marker">الb</span><span class="text">0</span></li> + <li><span class="marker">aالb</span><span class="text">0</span></li> + <li><span class="marker">abال</span><span class="text">0</span></li> + <li><span class="marker">الab</span><span class="text">0</span></li> + <li><span class="marker">1ال</span><span class="text">0</span></li> + <li><span class="marker">ال2</span><span class="text">0</span></li> + <li><span class="marker">1ال2</span><span class="text">0</span></li> +</ol> +<ol class="rtl"> + <li><span class="marker">ال</span><span class="text">0</span></li> + <li><span class="marker">aال</span><span class="text">0</span></li> + <li><span class="marker">الb</span><span class="text">0</span></li> + <li><span class="marker">aالb</span><span class="text">0</span></li> + <li><span class="marker">abال</span><span class="text">0</span></li> + <li><span class="marker">الab</span><span class="text">0</span></li> + <li><span class="marker">1ال</span><span class="text">0</span></li> + <li><span class="marker">ال2</span><span class="text">0</span></li> + <li><span class="marker">1ال2</span><span class="text">0</span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-default.html b/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-default.html new file mode 100644 index 0000000000..e732009a57 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-default.html @@ -0,0 +1,84 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker has 'unicode-bidi: isolate' by default</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="match" href="marker-unicode-bidi-default-ref.html"> +<meta name="assert" content="Checks that the markers are isolated from the list items by the bidi algorithm"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +ol { + float: left; + list-style-position: inside; +} +.rtl { + direction: rtl; +} + +li:nth-child(1) { --marker: "\627 \644 " } +li:nth-child(2) { --marker: "\61 \627 \644 " } +li:nth-child(3) { --marker: "\627 \644 \62 " } +li:nth-child(4) { --marker: "\61 \627 \644 \62 " } +li:nth-child(5) { --marker: "\61 \62 \627 \644 " } +li:nth-child(6) { --marker: "\627 \644 \61 \62 " } +li:nth-child(7) { --marker: "\31 \627 \644 " } +li:nth-child(8) { --marker: "\627 \644 \32 " } +li:nth-child(9) { --marker: "\31 \627 \644 \32 " } + +.string > li { + list-style-type: var(--marker); +} +.marker > li::marker { + content: var(--marker); +} +::marker { + color: blue; +} +span { + background: yellow; +} +</style> +<ol class="string ltr"> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> +</ol> +<ol class="string rtl"> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> +</ol> +<ol class="marker ltr"> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> +</ol> +<ol class="marker rtl"> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-normal-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-normal-ref.html new file mode 100644 index 0000000000..292fd01bb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-normal-ref.html @@ -0,0 +1,65 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="mismatch" href="marker-unicode-bidi-default-ref.html"> +<style> +ol { + float: left; + list-style-type: none; +} +.rtl { + direction: rtl; +} +.marker { + unicode-bidi: normal; + color: blue; +} +.text { + background: yellow; +} +</style> +<ol class="ltr"> + <li><span class="marker">ال</span><span class="text">0</span></li> + <li><span class="marker">aال</span><span class="text">0</span></li> + <li><span class="marker">الb</span><span class="text">0</span></li> + <li><span class="marker">aالb</span><span class="text">0</span></li> + <li><span class="marker">abال</span><span class="text">0</span></li> + <li><span class="marker">الab</span><span class="text">0</span></li> + <li><span class="marker">1ال</span><span class="text">0</span></li> + <li><span class="marker">ال2</span><span class="text">0</span></li> + <li><span class="marker">1ال2</span><span class="text">0</span></li> +</ol> +<ol class="rtl"> + <li><span class="marker">ال</span><span class="text">0</span></li> + <li><span class="marker">aال</span><span class="text">0</span></li> + <li><span class="marker">الb</span><span class="text">0</span></li> + <li><span class="marker">aالb</span><span class="text">0</span></li> + <li><span class="marker">abال</span><span class="text">0</span></li> + <li><span class="marker">الab</span><span class="text">0</span></li> + <li><span class="marker">1ال</span><span class="text">0</span></li> + <li><span class="marker">ال2</span><span class="text">0</span></li> + <li><span class="marker">1ال2</span><span class="text">0</span></li> +</ol> +<ol class="ltr"> + <li><span class="marker">ال</span><span class="text">0</span></li> + <li><span class="marker">aال</span><span class="text">0</span></li> + <li><span class="marker">الb</span><span class="text">0</span></li> + <li><span class="marker">aالb</span><span class="text">0</span></li> + <li><span class="marker">abال</span><span class="text">0</span></li> + <li><span class="marker">الab</span><span class="text">0</span></li> + <li><span class="marker">1ال</span><span class="text">0</span></li> + <li><span class="marker">ال2</span><span class="text">0</span></li> + <li><span class="marker">1ال2</span><span class="text">0</span></li> +</ol> +<ol class="rtl"> + <li><span class="marker">ال</span><span class="text">0</span></li> + <li><span class="marker">aال</span><span class="text">0</span></li> + <li><span class="marker">الb</span><span class="text">0</span></li> + <li><span class="marker">aالb</span><span class="text">0</span></li> + <li><span class="marker">abال</span><span class="text">0</span></li> + <li><span class="marker">الab</span><span class="text">0</span></li> + <li><span class="marker">1ال</span><span class="text">0</span></li> + <li><span class="marker">ال2</span><span class="text">0</span></li> + <li><span class="marker">1ال2</span><span class="text">0</span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-normal.html b/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-normal.html new file mode 100644 index 0000000000..4cdc86522a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-unicode-bidi-normal.html @@ -0,0 +1,85 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker accepts 'unicode-bidi: normal'</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="match" href="marker-unicode-bidi-normal-ref.html"> +<meta name="assert" content="Checks that the marker default 'unicode-bidi: isolate' can be overridden with 'unicode-bidi: normal'"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +ol { + float: left; + list-style-position: inside; +} +.rtl { + direction: rtl; +} + +li:nth-child(1) { --marker: "\627 \644 " } +li:nth-child(2) { --marker: "\61 \627 \644 " } +li:nth-child(3) { --marker: "\627 \644 \62 " } +li:nth-child(4) { --marker: "\61 \627 \644 \62 " } +li:nth-child(5) { --marker: "\61 \62 \627 \644 " } +li:nth-child(6) { --marker: "\627 \644 \61 \62 " } +li:nth-child(7) { --marker: "\31 \627 \644 " } +li:nth-child(8) { --marker: "\627 \644 \32 " } +li:nth-child(9) { --marker: "\31 \627 \644 \32 " } + +.string > li { + list-style-type: var(--marker); +} +.marker > li::marker { + content: var(--marker); +} +::marker { + unicode-bidi: normal; + color: blue; +} +span { + background: yellow; +} +</style> +<ol class="string ltr"> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> +</ol> +<ol class="string rtl"> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> +</ol> +<ol class="marker ltr"> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> +</ol> +<ol class="marker rtl"> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> + <li><span>0</span></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-variable-computed-style.html b/testing/web-platform/tests/css/css-pseudo/marker-variable-computed-style.html new file mode 100644 index 0000000000..c50ee33ae9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-variable-computed-style.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<html lang="en"> + +<head> + <meta charset="UTF-8" /> + <link rel="author" title="Karl Dubost" href="https://github.com/karlcow" /> + <link rel="help" href="https://w3c.github.io/csswg-drafts/css-pseudo/#marker-pseudo" /> + <link rel="help" href="https://w3c.github.io/csswg-drafts/css-variables/#defining-variables" /> + <script src="/resources/testharness.js"></script> + <script src="/resources/testharnessreport.js"></script> + <title>::marker with variables</title> + <style> + .firstTest::marker { + --alpha: 0.75; + color: rgba(0 128 0 / var(--alpha)); + } + + .secondTest::marker { + --color: rgb(0 128 0); + color: var(--color); + } + </style> +</head> + +<body> + <ul> + <li class="firstTest">Item 1</li> + <li class="secondTest">Item 2</li> + </ul> + <script> + test(() => { + let firstTest = document.querySelector('.firstTest'); + let markerStyle = getComputedStyle(firstTest, '::marker'); + assert_equals(markerStyle.color, "rgba(0, 128, 0, 0.75)", "color is green with 0.75 opacity."); + }, `getComputedStyle() for opacity defined by variable in ::marker`); + test(() => { + let secondTest = document.querySelector('.secondTest'); + let markerStyle = getComputedStyle(secondTest, '::marker'); + assert_equals(markerStyle.color, "rgb(0, 128, 0)", "color is green."); + }, `getComputedStyle() for color defined by variable in ::marker`); + </script> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-pseudo/marker-variable-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-variable-ref.html new file mode 100644 index 0000000000..d966437560 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-variable-ref.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<html lang="en"> + <head> + <meta charset="UTF-8" /> + <link rel="author" title="Karl Dubost" href="https://github.com/karlcow" /> + <link + rel="help" + href="https://w3c.github.io/csswg-drafts/css-pseudo/#marker-pseudo" + /> + <link + rel="help" + href="https://w3c.github.io/csswg-drafts/css-variables/#defining-variables" + /> + <title>::marker with variables</title> + <style> + .firstTest::marker { + color: rgb(255 119 0 / 0.75); + } + + .secondTest::marker { + color: rgb(255 119 0); + } + </style> + </head> + <body> + <ul> + <li class="firstTest">Item 1</li> + <li class="secondTest">Item 2</li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-variable.html b/testing/web-platform/tests/css/css-pseudo/marker-variable.html new file mode 100644 index 0000000000..3d0a7c8596 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-variable.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8" /> + <link rel="author" title="Karl Dubost" href="https://github.com/karlcow" /> + <link rel="help" href="https://w3c.github.io/csswg-drafts/css-pseudo/#marker-pseudo" /> + <link rel="help" href="https://w3c.github.io/csswg-drafts/css-variables/#defining-variables" /> + <link rel="match" href="marker-variable-ref.html"> + <title>::marker with variables</title> + <style> + .firstTest::marker { + --alpha: 0.75; + color: rgb(255 119 0 / var(--alpha)); + } + + .secondTest::marker { + --color: rgb(255 119 0); + color: var(--color); + } + </style> +</head> + +<body> + <ul> + <li class="firstTest">Item 1</li> + <li class="secondTest">Item 2</li> + </ul> +</body> + +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/css-pseudo/marker-word-break-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-word-break-ref.html new file mode 100644 index 0000000000..683eaf1c7f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-word-break-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<style> +ul { + float: left; + width: 50px; + list-style-position: inside; +} +</style> +<ul> + <li><br>2.<br>ab<br>cd</li> +</ul> +<ul> + <li><br>2.<br>ab<br>cd</li> +</ul> +<ul> + <li><br>2.<br>a<br>b<br>c<br>d</li> +</ul> +<ul> + <li><br>2.<br>a<br>b<br>c<br>d</li> +</ul> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-word-break.html b/testing/web-platform/tests/css/css-pseudo/marker-word-break.html new file mode 100644 index 0000000000..4e3aeaebd8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-word-break.html @@ -0,0 +1,62 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'word-break'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-break-property"> +<link rel="match" href="marker-word-break-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'word-break', both explicitly set or inherited from an ancestor"> +<style> +ol { + float: left; + width: 50px; +} +li { + list-style-position: inside; + width: 0; +} +.word-break-keep-all.explicit ::marker, +.word-break-keep-all.inherit { + word-break: keep-all; +} +.word-break-break-all.explicit ::marker, +.word-break-break-all.inherit { + word-break: break-all; +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: decimal; +} +.marker-string { + list-style-type: "ab"; +} +.marker-content::marker { + content: "cd"; +} +</style> +<ol class="word-break-keep-all explicit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="word-break-keep-all inherit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="word-break-break-all explicit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> +<ol class="word-break-break-all inherit"> + <li class="marker-disc"></li> + <li class="marker-decimal"></li> + <li class="marker-string"></li> + <li class="marker-content"></li> +</ol> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-word-spacing-ref.html b/testing/web-platform/tests/css/css-pseudo/marker-word-spacing-ref.html new file mode 100644 index 0000000000..a81aeee44d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-word-spacing-ref.html @@ -0,0 +1,63 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Reftest Reference</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + float: left; + font: 25px/1 Ahem; +} +.inside { + list-style-position: inside; + width: 250px; +} +.outside { + list-style-position: outside; + width: 100px; + margin-left: 150px; +} +ol { + padding: 0; +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: "2.\A0 \A0 "; +} +.marker-string { + list-style-type: "X\A0 \A0 p"; +} +.marker-content::marker { + content: "Xp\A0 \A0 p"; +} +</style> +<div class="inside"> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> +<div class="outside"> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/marker-word-spacing.html b/testing/web-platform/tests/css/css-pseudo/marker-word-spacing.html new file mode 100644 index 0000000000..a98f0bd776 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/marker-word-spacing.html @@ -0,0 +1,71 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>::marker supports 'word-spacing'</title> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com" /> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-text-3/#word-spacing-property"> +<link rel="match" href="marker-word-spacing-ref.html"> +<meta name="assert" content="Checks that ::marker supports 'word-spacing', both explicitly set or inherited from an ancestor"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +div { + float: left; + font: 25px/1 Ahem; +} +.inside { + list-style-position: inside; + width: 250px; +} +.outside { + list-style-position: outside; + width: 100px; + margin-left: 150px; +} +ol { + padding: 0; +} +.word-spacing.explicit ::marker, +.word-spacing.inherit { + word-spacing: 25px; +} +.marker-disc { + list-style-type: disc; +} +.marker-decimal { + list-style-type: decimal; +} +.marker-string { + list-style-type: "X p"; +} +.marker-content::marker { + content: "Xp p"; +} +</style> +<div class="inside"> + <ol class="word-spacing explicit"> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol class="word-spacing inherit"> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> +<div class="outside"> + <ol class="word-spacing explicit"> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> + <ol class="word-spacing inherit"> + <li class="marker-disc">É</li> + <li class="marker-decimal">É</li> + <li class="marker-string">É</li> + <li class="marker-content">É</li> + </ol> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/outside-marker-paint-order-ref.html b/testing/web-platform/tests/css/css-pseudo/outside-marker-paint-order-ref.html new file mode 100644 index 0000000000..441a354732 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/outside-marker-paint-order-ref.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Pseduo: painting order of outside ::marker box</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style> +li { + list-style-type: none; + margin-left: 100px; + text-indent: -100px; + font: 20px/1 Ahem; +} + +x { color: grey; } + + </style> +</head> +<body> + +<pre>There should be no red areas.<pre> +<ol><li><x>XXXXXXXX</x></ol> +<ol><li><x>XXXXXXXX</x></ol> +<ol><li><x>XXXXXXXX</x></ol> +<ol><li><x>XXXXXXXX</x></ol> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/outside-marker-paint-order.html b/testing/web-platform/tests/css/css-pseudo/outside-marker-paint-order.html new file mode 100644 index 0000000000..94d0c42eca --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/outside-marker-paint-order.html @@ -0,0 +1,36 @@ +<!DOCTYPE HTML> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <meta charset="utf-8"> + <title>CSS Pseduo: painting order of outside ::marker box</title> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.org"> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> + <link rel="match" href="outside-marker-paint-order-ref.html"> + <style> +li { + margin-left: 100px; + text-indent: -100px; + font: 20px/1 Ahem; + color: red; +} + +x { color: grey; } +.before::before { content: "XXXXXXXX"; color: grey; } +.after::after { content: "XXXXXXXX"; color: grey; } +.both::before,.both::after {content: "XXXX"; color: grey; } + </style> +</head> +<body> + +<pre>There should be no red areas.<pre> +<ol><li><x>XXXXXXXX</x></ol> +<ol><li class="before"></ol> +<ol><li class="after"></ol> +<ol><li class="both"></ol> + +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/parsing/highlight-pseudos.html b/testing/web-platform/tests/css/css-pseudo/parsing/highlight-pseudos.html new file mode 100644 index 0000000000..aa3c4e20aa --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/parsing/highlight-pseudos.html @@ -0,0 +1,22 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: highlight selectors parsing</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> +<script src="/css/support/parsing-testcommon.js"></script> +<script> + for (const pseudo of ["::selection", "::target-text", "::spelling-error", "::grammar-error"]) { + test_valid_selector(`${pseudo}`); + test_valid_selector(`.a${pseudo}`); + test_valid_selector(`div ${pseudo}`); + test_valid_selector(`::part(my-part)${pseudo}`); + + test_invalid_selector(`::before${pseudo}`); + test_invalid_selector(`${pseudo}.a`); + test_invalid_selector(`${pseudo} div`); + test_invalid_selector(`${pseudo}::after`); + test_invalid_selector(`${pseudo}:hover`); + test_invalid_selector(`:not(${pseudo})`); + } +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties-in-animation.html b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties-in-animation.html new file mode 100644 index 0000000000..e581a78636 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties-in-animation.html @@ -0,0 +1,397 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Supported properties in ::marker animations</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes"> +<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#transitions"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks ::marker supports animations and transitions, but only for the properties that apply to ::marker." /> +<style id="style"></style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div id="log"></div> +<ul> + <li id="target">target</li> +</ul> +<script> +const interpolationTests = [ + // ::marker supports all font properties. + { + property: "font", + from: "oblique normal 100 ultra-condensed 5px / 20px serif", + to: "italic small-caps 900 ultra-expanded 25px / 50px Ahem", + midPoint: ["italic small-caps 500 expanded 15px / 35px Ahem", "italic small-caps 500 expanded 15px/35px Ahem"], + }, + { + property: "font-family", + from: "serif", + to: "Ahem", + midPoint: "Ahem", + }, + { + property: "font-feature-settings", + from: "'c2sc'", + to: "'smcp'", + midPoint: "\"smcp\"", + }, + { + property: "font-kerning", + from: "normal", + to: "none", + midPoint: "none", + }, + { + property: "font-size", + from: "5px", + to: "25px", + midPoint: "15px", + }, + { + property: "font-size-adjust", + from: "1", + to: "3", + midPoint: "2", + }, + { + property: "font-stretch", + from: "ultra-condensed", + to: "ultra-expanded", + midPoint: ["expanded", "125%"], + }, + { + property: "font-style", + from: "oblique", + to: "italic", + midPoint: "italic", + }, + { + property: "font-synthesis", + from: "weight", + 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", + to: "small-caps", + midPoint: "small-caps", + }, + { + property: "font-variant-caps", + from: "unicase", + to: "small-caps", + midPoint: "small-caps", + }, + { + property: "font-variant-east-asian", + from: "proportional-width", + to: "full-width", + midPoint: "full-width", + }, + { + property: "font-variant-ligatures", + from: "no-historical-ligatures", + to: "historical-ligatures", + midPoint: "historical-ligatures", + }, + { + property: "font-variant-numeric", + from: "ordinal", + to: "slashed-zero", + midPoint: "slashed-zero", + }, + { + property: "font-variant-position", + from: "super", + to: "sub", + midPoint: "sub", + }, + { + property: "font-weight", + from: "100", + to: "900", + midPoint: "500", + }, + + // `line-height` is not a font property but is a longhand of `font`, and is also supported. + { + property: "line-height", + from: "20px", + to: "50px", + midPoint: "35px", + }, + + // ::marker supports `white-space` + { + property: "white-space", + from: "pre-line", + to: "nowrap", + midPoint: "nowrap", + }, + + // ::marker supports `color` + { + property: "color", + from: "rgb(0, 100, 200)", + to: "rgb(100, 200, 0)", + midPoint: "rgb(50, 150, 100)", + }, + + // ::marker supports `text-combine-upright`, `unicode-bidi` and `direction`, + // but they are not animatable. + { + property: "text-combine-upright", + from: "all", + to: "all", + midPoint: null, + }, + { + property: "unicode-bidi", + from: "embed", + to: "plaintext", + midPoint: null, + }, + { + property: "direction", + from: "rtl", + to: "rtl", + midPoint: null, + }, + + // ::marker supports `content` + { + property: "content", + from: "'foo'", + to: "'bar'", + midPoint: "\"bar\"", + }, + + // ::marker supports text properties. + { + property: "hyphens", + from: "manual", + to: "none", + midPoint: "none", + }, + { + property: "letter-spacing", + from: "0px", + to: "20px", + midPoint: "10px", + }, + { + property: "line-break", + from: "strict", + to: "anywhere", + midPoint: "anywhere", + }, + { + property: "overflow-wrap", + from: "break-word", + to: "anywhere", + midPoint: "anywhere", + }, + { + property: "tab-size", + from: "0px", + to: "20px", + midPoint: "10px", + }, + { + property: "text-transform", + from: "lowercase", + to: "uppercase", + midPoint: "uppercase", + }, + { + property: "word-break", + from: "break-all", + to: "break-word", + midPoint: "break-word", + }, + { + property: "word-spacing", + from: "0px", + to: "20px", + midPoint: "10px", + }, + + // ::marker supports inherited text decoration properties. + { + property: "text-decoration-skip-ink", + from: "auto", + to: "none", + midPoint: "none", + }, + { + property: "text-emphasis", + from: "dot rgb(0, 200, 0)", + to: "triangle rgb(100, 0, 200)", + midPoint: "triangle rgb(50, 100, 100)", + }, + { + property: "text-emphasis-color", + from: "rgb(0, 200, 0)", + to: "rgb(100, 0, 200)", + midPoint: "rgb(50, 100, 100)", + }, + { + property: "text-emphasis-position", + from: "over right", + to: "under left", + midPoint: "under left", + }, + { + property: "text-emphasis-style", + from: "filled dot", + to: "filled triangle", + midPoint: "triangle", + }, + { + property: "text-shadow", + from: "rgb(0, 200, 0) 1px 2px 3px", + to: "rgb(100, 0, 200) 3px 2px 1px", + midPoint: "rgb(50, 100, 100) 2px 2px 2px", + }, + + // ::marker does NOT support layout properties + { + property: "display", + from: "flex", + to: "none", + midPoint: ["block", "inline", "inline-block"], + }, + { + property: "position", + from: "fixed", + to: "absolute", + midPoint: "static", + }, + { + property: "float", + from: "left", + to: "right", + midPoint: "none", + }, + + // ::marker does NOT support list properties despite being affected by them, + // they apply to the list item instead. + { + property: "list-style", + from: "inside url('foo') square", + to: "inside url('bar') decimal", + midPoint: "outside none disc", + }, + { + property: "list-style-image", + from: "url('foo')", + to: "url('bar')", + midPoint: "none", + }, + { + property: "list-style-position", + from: "inside", + to: "inside", + midPoint: "outside", + }, + { + property: "list-style-type", + from: "square", + to: "decimal", + midPoint: "disc", + }, +]; + +const target = document.getElementById("target"); +const styleElement = document.getElementById("style"); +const markerStyle = getComputedStyle(target, "::marker"); + +function check({property, from, to, midPoint}) { + assert_true(property in markerStyle, property + " doesn't seem to be supported in the computed style"); + assert_true(CSS.supports(property, from), `'${from}' is a supported value for ${property}.`); + assert_true(CSS.supports(property, to), `'${to}' is a supported value for ${property}.`); + const computed = markerStyle.getPropertyValue(property); + if (Array.isArray(midPoint)) { + assert_in_array(computed, midPoint); + } else { + assert_equals(computed, midPoint); + } +} + +function testAnimations(interpolationTests) { + styleElement.textContent = ` + ::marker { + animation: anim 2s -1s paused linear; + } + @keyframes anim { + from {} + to {} + } + `; + const keyframes = styleElement.sheet.cssRules[1]; + const fromStyle = keyframes.cssRules[0].style; + const toStyle = keyframes.cssRules[1].style; + for (let {property, from, to, midPoint} of interpolationTests) { + fromStyle.cssText = ""; + toStyle.cssText = ""; + if (midPoint == null) { + midPoint = markerStyle.getPropertyValue(property); + } + fromStyle.setProperty(property, from); + toStyle.setProperty(property, to); + test(() => { + check({property, from, to, midPoint}); + }, `Animation of ${property} in ::marker`); + } +} + +function testTransitions(interpolationTests) { + styleElement.textContent = ` + .transition::marker { + transition: all 2s -1s linear; + } + .from::marker {} + .to::marker {} + `; + const fromStyle = styleElement.sheet.cssRules[1].style; + const toStyle = styleElement.sheet.cssRules[2].style; + for (let {property, from, to, midPoint} of interpolationTests) { + fromStyle.cssText = ""; + toStyle.cssText = ""; + if (midPoint == null) { + midPoint = to; + } + fromStyle.setProperty(property, from); + toStyle.setProperty(property, to); + target.className = "from"; + markerStyle.width; + target.classList.add("transition"); + markerStyle.width; + target.classList.add("to"); + test(() => { + check({property, from, to, midPoint}); + }, `Transition of ${property} in ::marker`); + } +} + +testAnimations(interpolationTests); +testTransitions(interpolationTests); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html new file mode 100644 index 0000000000..700d04aa83 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/parsing/marker-supported-properties.html @@ -0,0 +1,102 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Supported properties in ::marker</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that only certain properties apply to ::marker pseudo-elements." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/computed-testcommon.js"></script> +<div id="log"></div> +<ul> + <li id="target">target</li> +</ul> +<script> +// ::marker supports all font properties. +test_pseudo_computed_value("::marker", "font", "italic small-caps 900 expanded 25px / 50px Ahem", + ["italic small-caps 900 expanded 25px / 50px Ahem", "italic small-caps 900 expanded 25px/50px Ahem"]); +test_pseudo_computed_value("::marker", "font-family", "Ahem"); +test_pseudo_computed_value("::marker", "font-feature-settings", "\"smcp\""); +test_pseudo_computed_value("::marker", "font-kerning", "none"); +test_pseudo_computed_value("::marker", "font-size", "25px"); +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"); +test_pseudo_computed_value("::marker", "font-variant-ligatures", "historical-ligatures"); +test_pseudo_computed_value("::marker", "font-variant-numeric", "slashed-zero"); +test_pseudo_computed_value("::marker", "font-variant-position", "sub"); +test_pseudo_computed_value("::marker", "font-weight", "900"); + +// `line-height` is not a font property but is a longhand of `font`, and is also supported. +test_pseudo_computed_value("::marker", "line-height", "50px", "50px"); + +// ::marker supports `white-space` +test_pseudo_computed_value("::marker", "white-space", "nowrap"); + +// ::marker supports `color` +test_pseudo_computed_value("::marker", "color", "rgb(0, 100, 200)"); + +// ::marker supports `text-combine-upright`, `unicode-bidi` and `direction` +test_pseudo_computed_value("::marker", "text-combine-upright", "all"); +test_pseudo_computed_value("::marker", "unicode-bidi", "plaintext"); +test_pseudo_computed_value("::marker", "direction", "rtl"); + +// ::marker supports `content` +test_pseudo_computed_value("::marker", "content", "\"foo\""); + +// ::marker supports animation properties. +test_pseudo_computed_value("::marker", "animation", "1s linear 2s infinite alternate forwards paused anim"); +test_pseudo_computed_value("::marker", "animation-delay", "1s"); +test_pseudo_computed_value("::marker", "animation-direction", "alternate"); +test_pseudo_computed_value("::marker", "animation-duration", "2s"); +test_pseudo_computed_value("::marker", "animation-fill-mode", "forwards"); +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"); +test_pseudo_computed_value("::marker", "transition-delay", "1s"); +test_pseudo_computed_value("::marker", "transition-duration", "2s"); +test_pseudo_computed_value("::marker", "transition-property", "display"); +test_pseudo_computed_value("::marker", "transition-timing-function", "linear"); + +// ::marker supports text properties. +test_pseudo_computed_value("::marker", "hyphens", "none"); +test_pseudo_computed_value("::marker", "letter-spacing", "10px"); +test_pseudo_computed_value("::marker", "line-break", "anywhere"); +test_pseudo_computed_value("::marker", "overflow-wrap", "anywhere"); +test_pseudo_computed_value("::marker", "tab-size", "10px"); +test_pseudo_computed_value("::marker", "text-transform", "uppercase"); +test_pseudo_computed_value("::marker", "word-break", "break-word"); +test_pseudo_computed_value("::marker", "word-spacing", "10px"); + +// ::marker supports inherited text decoration properties. +test_pseudo_computed_value("::marker", "text-decoration-skip-ink", "none"); +test_pseudo_computed_value("::marker", "text-emphasis", "dot rgb(0, 255, 0)"); +test_pseudo_computed_value("::marker", "text-emphasis-color", "rgb(0, 255, 0)"); +test_pseudo_computed_value("::marker", "text-emphasis-position", "under left"); +test_pseudo_computed_value("::marker", "text-emphasis-style", "dot"); +test_pseudo_computed_value("::marker", "text-shadow", "rgb(0, 255, 0) 1px 2px 3px"); + +// ::marker does NOT support layout properties +test_pseudo_computed_value("::marker", "display", "none", ["block", "inline", "inline-block"]); +test_pseudo_computed_value("::marker", "position", "absolute", "static"); +test_pseudo_computed_value("::marker", "float", "right", "none"); + +// ::marker does NOT support list properties despite being affected by them, +// they apply to the list item instead. +test_pseudo_computed_value("::marker", "list-style", "inside url('foo') decimal", "outside none disc"); +test_pseudo_computed_value("::marker", "list-style-image", "url('foo')", "none"); +test_pseudo_computed_value("::marker", "list-style-position", "inside", "outside"); +test_pseudo_computed_value("::marker", "list-style-type", "decimal", "disc"); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/parsing/tree-abiding-pseudo-elements.html b/testing/web-platform/tests/css/css-pseudo/parsing/tree-abiding-pseudo-elements.html new file mode 100644 index 0000000000..7839a38049 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/parsing/tree-abiding-pseudo-elements.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Parsing tree-abiding pseudo-elements</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks the validity of various selectors containing tree-abiding pseudo-elements." /> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/parsing-testcommon.js"></script> +<script> +// Generated content pseudo-elements +test_valid_selector("::before"); +test_valid_selector("*::before", "::before"); +test_valid_selector("foo.bar[baz]::before"); +test_invalid_selector("::before *"); + +test_valid_selector("::after"); +test_valid_selector("*::after", "::after"); +test_valid_selector("foo.bar[baz]::after"); +test_invalid_selector("::after *"); + +// List marker pseudo-element +test_valid_selector("::marker"); +test_valid_selector("*::marker", "::marker"); +test_valid_selector("foo.bar[baz]::marker"); +test_invalid_selector("::marker *"); + +// Placeholder input pseudo-element +test_valid_selector("::placeholder"); +test_valid_selector("*::placeholder", "::placeholder"); +test_valid_selector("foo.bar[baz]::placeholder"); +test_invalid_selector("::placeholder *"); + +// ::file-selector-button +test_valid_selector("::file-selector-button"); +test_valid_selector("::file-selector-button:hover"); +test_valid_selector("::file-selector-button:focus"); +test_valid_selector("::file-selector-button:active"); +test_valid_selector("::file-selector-button:is(:hover)"); + +test_invalid_selector("::file-selector-button::before"); +test_invalid_selector("::file-selector-button#id"); +test_invalid_selector("::file-selector-button#class"); +test_invalid_selector("::file-selector-button:host"); + +// Combinations of the above +test_invalid_selector("::before::before"); +test_invalid_selector("::after::before"); +test_invalid_selector("::marker::before"); +test_invalid_selector("::placeholder::before"); + +test_invalid_selector("::before::after"); +test_invalid_selector("::after::after"); +test_invalid_selector("::marker::after"); +test_invalid_selector("::placeholder::after"); + +test_valid_selector("::before::marker"); +test_valid_selector("::after::marker"); +test_invalid_selector("::marker::marker"); +test_invalid_selector("::placeholder::marker"); + +test_invalid_selector("::before::placeholder"); +test_invalid_selector("::after::placeholder"); +test_invalid_selector("::marker::placeholder"); +test_invalid_selector("::placeholder::placeholder"); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/placeholder-as-multicol-crash.html b/testing/web-platform/tests/css/css-pseudo/placeholder-as-multicol-crash.html new file mode 100644 index 0000000000..8407f95d7f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/placeholder-as-multicol-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/placeholder-excluded-properties.html b/testing/web-platform/tests/css/css-pseudo/placeholder-excluded-properties.html new file mode 100644 index 0000000000..dc5718164c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/placeholder-excluded-properties.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>::placeholder should not support 'writing-mode', 'direction', and 'text-orientation'</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#first-line-styling"> +<link rel="match" href="reference/placeholder-excluded-properties-ref.html"> +<style> +.horizontal::placeholder { + writing-mode: vertical-rl; + direction: rtl; +} + +.vertical { + writing-mode: vertical-rl; +} +.vertical::placeholder { + text-orientation: upright; +} +</style> +<body> +<input class="horizontal" placeholder="placeholder"> +<input class="vertical" placeholder="placeholder"> +</body> diff --git a/testing/web-platform/tests/css/css-pseudo/placeholder-inherit.html b/testing/web-platform/tests/css/css-pseudo/placeholder-inherit.html new file mode 100644 index 0000000000..cf1c100fda --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/placeholder-inherit.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/placeholder-input-dynamic-crash.html b/testing/web-platform/tests/css/css-pseudo/placeholder-input-dynamic-crash.html new file mode 100644 index 0000000000..28ab898a6d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/placeholder-input-dynamic-crash.html @@ -0,0 +1,10 @@ +<!doctype html> +<title>Dynamic placeholder attribute changes after addition shouldn't crash</title> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1662483"> +<input type="text"> +<script> + let input = document.querySelector("input"); + input.getBoundingClientRect(); + input.placeholder = "Foo"; + input.placeholder = "Bar"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/placeholder-input-number-notref.html b/testing/web-platform/tests/css/css-pseudo/placeholder-input-number-notref.html new file mode 100644 index 0000000000..92ae71d83f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/placeholder-input-number-notref.html @@ -0,0 +1,9 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<style> +#number::placeholder { + color: blue; +} +</style> +<input id="number" type="number" placeholder="Placeholder"> diff --git a/testing/web-platform/tests/css/css-pseudo/placeholder-input-number.html b/testing/web-platform/tests/css/css-pseudo/placeholder-input-number.html new file mode 100644 index 0000000000..a557f1091e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/placeholder-input-number.html @@ -0,0 +1,11 @@ +<!doctype html> +<title>CSS Test: ::placeholder applies to input type="number"</title> +<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> +<link rel="mismatch" href="placeholder-input-number-notref.html"> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#placeholder-pseudo"> +<style> +#number::placeholder { + color: green; +} +</style> +<input id="number" type="number" placeholder="Placeholder"> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-011-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-011-ref.html new file mode 100644 index 0000000000..f655188892 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-011-ref.html @@ -0,0 +1,20 @@ +<!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 + { + color: green; + font-size: 300%; + } + </style> + + <p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> while background color of each glyph of "Selected Text" is white. + + <div class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-012-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-012-ref.html new file mode 100644 index 0000000000..d212344c12 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-012-ref.html @@ -0,0 +1,22 @@ +<!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: 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 aqua and <strong>not fuchsia</strong>. + + <div class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-014-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-014-ref.html new file mode 100644 index 0000000000..d4761bb9a0 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-014-ref.html @@ -0,0 +1,48 @@ +<!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: Highlight; + color: HighlightText; + display: inline; + font-size: 300%; + text-decoration: HighlightText underline; + } + </style> + + <!-- + " + The element's own text decorations (both line decorations + and emphasis marks) are thus drawn in the pseudo-element's + own color when that is not currentColor, regardless of + their original color or fill specifications. + " + coming from + https://www.w3.org/TR/css-pseudo-4/#highlight-painting + + Highlight + Background of item(s) selected in a control. + https://www.w3.org/TR/css-color-4/#valdef-system-color-highlight + + HighlightText + Text of item(s) selected in a control. + https://www.w3.org/TR/css-color-4/#valdef-system-color-highlighttext + + CSS4 Color Module + 5.2 System Colors + https://www.w3.org/TR/css-color-4/#css-system-colors + --> + + <body> + + <p>Test passes if each glyph of "Selected Text" is underlined and if color and background color of "Selected Text" are the OS-default highlight colors. The underline color must also be the same as the highlight color of "Selected Text". + + <div id="test" class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-016-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-016-ref.html new file mode 100644 index 0000000000..7e650c2338 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-016-ref.html @@ -0,0 +1,23 @@ +<!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 + { + color: white; + font-size: 300%; + } + + span + { + color: green; + } + </style> + + <div class="highlight_reftest">FAIL <span>PASS</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-018-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-018-ref.html new file mode 100644 index 0000000000..a8f4fc1a05 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-018-ref.html @@ -0,0 +1,20 @@ +<!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 + { + color: green; + font-size: 300%; + } + </style> + + <p>Test passes if each glyph of "Selected Text" is green, if background color of each glyph of "Selected Text" is white and if there is <strong>no red</strong>. + + <div class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-021-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-021-ref.html new file mode 100644 index 0000000000..1a178ddae5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-021-ref.html @@ -0,0 +1,22 @@ +<!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" type="text/css" href="/fonts/ahem.css" /> + + <link rel="stylesheet" href="../support/highlights.css"> + <style> + div + { + color: green; + font: 25px/1 Ahem; + text-decoration: underline overline line-through; + } + </style> + + <p>Test passes if each glyph of "Selected Text" is green and <strong>not red</strong> and if the underline, the overline and the line-through are also green and not red. + + <div class="highlight_reftest">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-025-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-025-ref.html new file mode 100644 index 0000000000..f2cf946041 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-025-ref.html @@ -0,0 +1,27 @@ +<!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: yellow; + color: green; + display: inline; + font-size: 300%; + } + + span + { + color: purple; + } + </style> + + <p>Test passes if background color of "Selected Text" is yellow, if the "S" glyph is purple and if the other glyphs are green. + + <div class="highlight_reftest"><span>S</span>elected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-027-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-027-ref.html new file mode 100644 index 0000000000..565e2cac80 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-027-ref.html @@ -0,0 +1,36 @@ +<!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 + { + font-size: 300%; + } + + span + { + background-color: yellow; + } + + span#first + { + color: purple; + } + + span#second + { + color: green; + } + </style> + + <p>Test passes if both "selected text" have a yellow background, if the glyphs of "1st selected text" are purple and if the glyphs of "2nd selected text" are green. + + <div class="highlight_reftest"><span id="first">1st selected text</span></div> + + <div class="highlight_reftest"><span id="second">2nd selected text</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-031-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-031-ref.html new file mode 100644 index 0000000000..3bb7c329d4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-031-ref.html @@ -0,0 +1,68 @@ +<!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 > div + { + color: green; + float: left; + font-size: 32px; + margin-left: 16px; + } + + div.vrl + { + writing-mode: vertical-rl; + } + + div.vlr + { + writing-mode: vertical-lr; + } + + div.mixed + { + background-color: yellow; + text-orientation: mixed; + } + + div.sideways + { + background-color: yellow; + text-orientation: sideways; + } + + div.upright + { + text-orientation: upright; + } + + div.upright > span + { + background-color: yellow; + } + </style> + + <p>Test passes if each glyph of the 6 "Selected Text" is green and if there is <strong>no red</strong>. + + <div class="highlight_reftest"> + + <div class="vrl mixed">Selected Text</div> + + <div class="vrl sideways">Selected Text</div> + + <div class="vrl upright"><span>Selected Text</span></div> + + <div class="vlr mixed">Selected Text</div> + + <div class="vlr sideways">Selected Text</div> + + <div class="vlr upright"><span>Selected Text</span></div> + + </div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/active-selection-041-notref.html b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-041-notref.html new file mode 100644 index 0000000000..17d69f306d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/active-selection-041-notref.html @@ -0,0 +1,11 @@ +<!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/"> + + <p>Test passes if there is a filled square which is <strong>not yellow</strong>. + + <div><img src="../../support/swatch-yellow.png" width="100" height="100" alt="Image download support must be enabled"></div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html new file mode 100644 index 0000000000..d1e597e05b --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/cascade-highlight-005-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/first-letter-digraph-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/first-letter-digraph-ref.html new file mode 100644 index 0000000000..7dbefc9dbd --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/first-letter-digraph-ref.html @@ -0,0 +1,40 @@ +<!doctype html> +<html> +<head> + <meta charset="utf-8"> + <title>CSS Reference: ::first-letter digraph recognition</title> + <link rel="author" title="Jonathan Kew" href="mailto:jkew@mozilla.com"> + <style> + div { + font-size: 32px; + } + div p { + margin: 0; + color: lightgray; + } + div p span { + color: green; + } + </style> +</head> +<body> + <p>Test passes if both "I" and "J" are green in these examples:</p> + <div lang="nl"> + <p><span>IJ</span>sselmeer</p> + <p><span>ij</span>sselmeer</p> + <p><span>“IJ</span>sselmeer”</p> + <p><span>Ij</span>sselmeer</p> + </div> + <div lang="en"> + <p lang="nl-NL"><span>IJ</span>sselmeer</p> + <p lang="nl-SR"><span>IJ</span>sselmeer</p> + </div> + <p>But only "I" should be green in these examples:</p> + <div lang="en"> + <p><span>I</span>Jsselmeer</p> + <p><span>i</span>jsselmeer</p> + <p><span>“I</span>Jsselmeer”</p> + <p><span>I</span>jsselmeer</p> + </div> +</body> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/first-line-with-inline-block-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/first-line-with-inline-block-ref.html new file mode 100644 index 0000000000..31717d4171 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/first-line-with-inline-block-ref.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<style> +.outer-f { + color: red; +} +.fl-atomic { + display: inline-block; +} +.inner-f { + color: lime; +} +</style> +<div> +<span class="outer-f">FIRST</span> <div class="fl-atomic"><span class="inner-f">first</span><br>second</div> <span class="outer-f">FIRST</span> +</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/grammar-spelling-errors-001-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/grammar-spelling-errors-001-ref.html new file mode 100644 index 0000000000..48498e688f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/grammar-spelling-errors-001-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-size: 300%; + } + + span + { + background-color: yellow; + color: green; + } + </style> + + <script type="text/javascript"> + function startTest() + { + document.getElementById("target").focus(); + } + </script> + + <body onload="startTest();"> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module and an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>This test also requires that the targeted editable text element must receive system focus. + + <p>Test passes if each glyph of "dificultly" is green and if the background of "dificultly" is yellow. + + <div contenteditable="true" id="target">This is <span>dificultly</span>.</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/grammar-spelling-errors-002-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/grammar-spelling-errors-002-ref.html new file mode 100644 index 0000000000..b3c8917759 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/grammar-spelling-errors-002-ref.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-size: 300%; + } + + span + { + background-color: yellow; + color: green; + } + </style> + + <script type="text/javascript"> + function startTest() + { + document.getElementById("target").focus(); + } + </script> + + <body onload="startTest();"> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module and an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>This test also requires that the targeted editable text element must receive system focus. + + <p>Test passes if each glyph of "wolks" is green and if the background of "wolks" is yellow. + + <div contenteditable="true" id="target">I <span>wolks</span> on the sidewalk.</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/placeholder-excluded-properties-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/placeholder-excluded-properties-ref.html new file mode 100644 index 0000000000..0e573cb3d6 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/placeholder-excluded-properties-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<style> +.vertical { + writing-mode: vertical-rl; +} +</style> +<body> +<input placeholder="placeholder"> +<input class="vertical" placeholder="placeholder"> +</body> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/selection-contenteditable-011-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/selection-contenteditable-011-ref.html new file mode 100644 index 0000000000..c13bf4d84c --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-contenteditable-011-ref.html @@ -0,0 +1,48 @@ +<!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/"> + + <style> + div + { + background-color: yellow; + color: green; + display: inline; + font-size: 300%; + } + </style> + + <script> + function startReference() + { + document.getElementById("ref").focus(); + /* + Some browsers, like Chromium 80+, will transfer focus + to a selected element like a contenteditable div and + therefore style the border of such element according + to the user agent stylesheet rule: + :focus {outline: -webkit-focus-ring-color auto 1px;} . + So, we deliberately trigger such focus with the focus() + method in the reference file. + */ + document.getElementById("ref").style.caretColor = "yellow"; + /* + When a contenteditable element is focused in Firefox + 82+, then the caret becomes visible and blinking and + it is painted with the ::selected's color which is + the green color in this case. We therefore counter, + neutralize this by resetting the caret's color to the + background color. + */ + } + </script> + + <body onload="startReference();"> + + <p>Test passes if each glyph of "Selected Text" is green with a yellow background and if there is <strong>no red</strong>. + + <div contenteditable="true" id="ref">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/selection-input-011-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/selection-input-011-ref.html new file mode 100644 index 0000000000..ce9f129e11 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-input-011-ref.html @@ -0,0 +1,54 @@ +<!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/"> + + <style> + input + { + background-color: yellow; + color: green; + font-family: monospace; + font-size: 48px; + line-height: 56px; + padding: 0px; + width: 13ch; + } + </style> + + <script> + function startReference() + { + /* + Some browsers, like Chromium 80+ or Safari 14+, will + transfer focus to a selected element like a text input + and therefore style the border of such element according + to an user agent stylesheet rule, such as: + :focus {outline: -webkit-focus-ring-color auto 1px;} . + So, we deliberately trigger such focus with the focus() + method in the reference file. + */ + + document.getElementById("ref").focus(); + + /* + When a text input element is focused in Firefox + 82+, then the caret becomes visible and blinking and + it is painted with the ::selected's color which is + the green color in this case. We therefore counter, + neutralize this by resetting the caret's color to the + background color. + */ + + document.getElementById("ref").style.caretColor = "yellow"; + } + </script> + + <body onload="startReference();"> + + <p>Test passes if each glyph of "Selected Text" is green with a yellow background and if there is <strong>no red</strong>. + + <div><input id="ref" type="text" value="Selected Text"></div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-011-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-011-ref.html new file mode 100644 index 0000000000..21a88ebb02 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-011-ref.html @@ -0,0 +1,30 @@ +<!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 + { + font-size: 48px; + letter-spacing: 1em; + } + + span#yellow + { + background-color: yellow; + } + + span#orange + { + background-color: orange; + } + </style> + + <p>Test passes if the background of characters "c" and "t" is orange (and only those 2 characters) and if the space between those 2 characters is also orange. + + <div class="highlight_reftest"><span id="yellow">Sele<span id="orange">ct</span>ed</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-012-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-012-ref.html new file mode 100644 index 0000000000..86165ac064 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-intercharacter-012-ref.html @@ -0,0 +1,30 @@ +<!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 + { + font-size: 48px; + letter-spacing: 1em; + } + + span#yellow + { + background-color: yellow; + } + + span.orange + { + background-color: orange; + } + </style> + + <p>Test passes if the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange). + + <div class="highlight_reftest"><span id="yellow">Sele<span class="orange">c</span> <span class="orange">t</span>ed</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-grammar-001-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-grammar-001-ref.html new file mode 100644 index 0000000000..5aa91d6705 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-grammar-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <link rel="stylesheet" href="../support/highlights.css"> + <style> + #ref + { + font-size: 60px; + position: relative; + color: transparent; + } + + #ref > div + { + position: absolute; + } + + #grammar-error > span + { + background-color: yellow; + } + + #selection > span + { + background-color: rgba(0%, 50%, 100%, 0.5); + /* + a very lite blue color + according to + https://www.colorhexa.com/7fbfff + */ + color: yellow; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes + + <ul> + <li>if each glyph of the sentence is yellow + <li>if "thing" has a desaturated lime green background + <li>if the other words have a very lite blue background and + <li>if there is no red. + </ul> + + <div id="ref" class="highlight_reftest"> + <div id="grammar-error">Many <span>thing</span> can happen.</div> + <div id="selection"><span>Many thing can happen.</span></div> + Many thing can happen. + </div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-spelling-001-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-spelling-001-ref.html new file mode 100644 index 0000000000..d30ce035c5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-overlay-and-spelling-001-ref.html @@ -0,0 +1,57 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <link rel="stylesheet" href="../support/highlights.css"> + <style> + #ref + { + font-size: 60px; + position: relative; + color: transparent; + } + + #ref > div + { + position: absolute; + } + + #spelling-error > span + { + background-color: yellow; + } + + #selection > span + { + background-color: rgba(0%, 50%, 100%, 0.5); + /* + a very lite blue color + according to + https://www.colorhexa.com/7fbfff + */ + color: yellow; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes + + <ul> + <li>if each glyph of "Txet sample" is yellow + <li>if "Txet" has a desaturated lime green background + <li>if " sample" has a very lite blue background and + <li>if there is no red. + </ul> + + <div id="ref" class="highlight_reftest"> + <div id="spelling-error"><span>Txet</span> sample</div> + <div id="selection"><span>Txet sample</span></div> + Txet sample + </div> diff --git a/testing/web-platform/tests/css/css-pseudo/reference/selection-textarea-011-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/selection-textarea-011-ref.html new file mode 100644 index 0000000000..34b9913cf3 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/selection-textarea-011-ref.html @@ -0,0 +1,58 @@ +<!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/"> + + <style> + textarea + { + background-color: yellow; + color: green; + font-family: monospace; + font-size: 48px; + height: 112px; + line-height: 56px; + padding: 0px; + resize: none; + width: 8ch; + outline: none; + } + </style> + + <script> + function startReference() + { + /* + Some browsers, like Chromium 80+ or Safari 14+, will + transfer focus to a selected element like a textarea + and therefore style the border of such element according + to an user agent stylesheet rule, such as: + :focus {outline: -webkit-focus-ring-color auto 1px;} . + So, we deliberately trigger such focus with the focus() + method in the reference file. + */ + + document.getElementById("ref").focus(); + + /* + When a textarea element is focused in Firefox + 82+, then the caret becomes visible and blinking and + it is painted with the ::selected's color which is + the green color in this case. We therefore counter, + neutralize this by resetting the caret's color to the + background color. + */ + + document.getElementById("ref").style.caretColor = "yellow"; + + } + </script> + + <body onload="startReference();"> + + <p>Test passes if each glyph of both "Selected" is green with a yellow background and if there is <strong>no red</strong>. + + <div><textarea id="ref" rows="2" cols="8">Selected Selected </textarea></div> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref1.html b/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref1.html new file mode 100644 index 0000000000..ca2b08ccbd --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref1.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref2.html b/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref2.html new file mode 100644 index 0000000000..120324d3f4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order-ref2.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order.html b/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order.html new file mode 100644 index 0000000000..a21cfe8ab7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-background-painting-order.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-contenteditable-011.html b/testing/web-platform/tests/css/css-pseudo/selection-contenteditable-011.html new file mode 100644 index 0000000000..bbefe0910f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-contenteditable-011.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and contenteditable 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-selectors"> + <link rel="match" href="reference/selection-contenteditable-011-ref.html"> + <!-- Allow different antialiased pixels on the focus ring. --> + <meta name="fuzzy" content="0-5;0-255"> + + <style> + div + { + background-color: red; + color: yellow; + display: inline; + font-size: 300%; + } + + div::selection + { + background-color: yellow; + color: green; + } + </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 each glyph of "Selected Text" is green with a yellow background and if there is <strong>no red</strong>. + + <div contenteditable="true" id="test">Selected Text</div> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-input-011.html b/testing/web-platform/tests/css/css-pseudo/selection-input-011.html new file mode 100644 index 0000000000..e5d1858b82 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-input-011.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and input type="text" 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-selectors"> + <link rel="match" href="reference/selection-input-011-ref.html"> + <!-- Allow different antialiased pixels on the focus ring. --> + <meta name="fuzzy" content="0-5;0-255"> + + <style> + input + { + background-color: red; + color: yellow; + font-family: monospace; + font-size: 48px; + line-height: 56px; + padding: 0px; + width: 13ch; + } + + input::selection + { + background-color: yellow; + color: green; + } + </style> + + <script> + function startTest() + { + document.getElementById("test").select(); + } + </script> + + <body onload="startTest();"> + + <p>Test passes if each glyph of "Selected Text" is green with a yellow background and if there is <strong>no red</strong>. + + <div><input type="text" value="Selected Text" id="test"></div> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-011.html b/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-011.html new file mode 100644 index 0000000000..3b73bd854a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-011.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and inter-character spacing</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-bounds"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property"> + <link rel="match" href="reference/selection-intercharacter-011-ref.html"> + + <meta content="may" name="flags"> + <meta name="assert" content="This test verifies that intercharacter spacing may be part of the overlay area. When intercharacter spacing is part of the overlay area, then it belongs to the innermost element which contains both characters and which contains such spacing when both characters are selected. In this test, the 'c' and the 't' characters and the space between these characters belong to the same element. Therefore, the 'c' character, the 't' character and the space between these characters have the same orange background color painting."> + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + font-size: 48px; + letter-spacing: 1em; + } + + div::selection + { + background-color: yellow; + } + + span::selection + { + background-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 the background of characters "c" and "t" is orange (and only those 2 characters) and if the space between those 2 characters is also orange. + + <div id="test" class="highlight_reftest">Sele<span>ct</span>ed</div> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-012.html b/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-012.html new file mode 100644 index 0000000000..090697054a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-intercharacter-012.html @@ -0,0 +1,50 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and inter-character spacing</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-bounds"> + <link rel="help" href="https://www.w3.org/TR/css-text-3/#letter-spacing-property"> + <link rel="match" href="reference/selection-intercharacter-012-ref.html"> + + <meta content="may" name="flags"> + <meta name="assert" content="In this test, the 'c' and the 't' characters share the same level in the containment hierarchy but the space between these characters does not. Therefore, only the 'c' and the 't' characters themselves have an orange background color painting."> + + <link rel="stylesheet" href="support/highlights.css"> + <style> + div + { + font-size: 48px; + letter-spacing: 1em; + } + + div::selection + { + background-color: yellow; + } + + span::selection + { + background-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 the background of characters "c" and "t" is orange and if the space between those 2 characters is yellow (and not orange). + + <div id="test" class="highlight_reftest">Sele<span>c</span> <span>t</span>ed</div> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-link-001-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-link-001-ref.html new file mode 100644 index 0000000000..b51f889d11 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-link-001-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-link-001.html b/testing/web-platform/tests/css/css-pseudo/selection-link-001.html new file mode 100644 index 0000000000..08bc5e7323 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-link-001.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-link-002-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-link-002-ref.html new file mode 100644 index 0000000000..e634c3a3df --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-link-002-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-link-002.html b/testing/web-platform/tests/css/css-pseudo/selection-link-002.html new file mode 100644 index 0000000000..52c2ae1ec2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-link-002.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-link-003-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-link-003-ref.html new file mode 100644 index 0000000000..9b09f06466 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-link-003-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-link-003.html b/testing/web-platform/tests/css/css-pseudo/selection-link-003.html new file mode 100644 index 0000000000..e935531997 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-link-003.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-originating-decoration-color-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-originating-decoration-color-ref.html new file mode 100644 index 0000000000..d6d9382303 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-originating-decoration-color-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-originating-decoration-color.html b/testing/web-platform/tests/css/css-pseudo/selection-originating-decoration-color.html new file mode 100644 index 0000000000..7f03c19b6d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-originating-decoration-color.html @@ -0,0 +1,36 @@ +<!doctype html> +<meta charset="utf-8"> +<!-- 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-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> + main { + font: 80px/1 Ahem; + margin: 0.5em; + width: min-content; + color: black; + text-decoration: 0.125em black solid line-through; + } + main::selection { + background: transparent; + color: green; + } +</style> +<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"); + selectRangeWith(range => { + range.selectNodeContents(target); + range.setStart(target.childNodes[0], 1); + range.setEnd(target.childNodes[0], 4); + }); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-originating-strikethrough-order-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-originating-strikethrough-order-ref.html new file mode 100644 index 0000000000..b3ecfb2100 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-originating-strikethrough-order-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-originating-strikethrough-order.html b/testing/web-platform/tests/css/css-pseudo/selection-originating-strikethrough-order.html new file mode 100644 index 0000000000..69d331b457 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-originating-strikethrough-order.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-originating-underline-order-ref.html b/testing/web-platform/tests/css/css-pseudo/selection-originating-underline-order-ref.html new file mode 100644 index 0000000000..c93e8cb924 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-originating-underline-order-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-originating-underline-order.html b/testing/web-platform/tests/css/css-pseudo/selection-originating-underline-order.html new file mode 100644 index 0000000000..43141a0b6a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-originating-underline-order.html @@ -0,0 +1,41 @@ +<!doctype html> +<meta charset="utf-8"> +<!-- 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-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> + * { + text-decoration-skip-ink: none; + text-decoration-skip: none; + } + main { + font: 80px/1 Ahem; + margin: 0.5em; + width: min-content; + text-decoration: 0.25em red solid underline; + /* try to keep decoration between ascent and descent */ + text-underline-offset: -0.5em; + } + main::selection { + background: transparent; + color: blue; + } +</style> +<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"); + selectRangeWith(range => { + range.selectNodeContents(target); + range.setStart(target.childNodes[0], 0); + range.setEnd(target.childNodes[0], 1); + }); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-grammar-001.html b/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-grammar-001.html new file mode 100644 index 0000000000..19768c7389 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-grammar-001.html @@ -0,0 +1,68 @@ +<!DOCTYPE html> + + <html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: ::selection overlay drawn over the ::grammar-error overlay</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting"> + <link rel="match" href="reference/selection-overlay-and-grammar-001-ref.html"> + + <meta 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"> + <style> + div + { + font-size: 60px; + line-height: 90px; + } + + div::selection + { + background-color: rgba(0%, 50%, 100%, 0.5); + /* + a very lite blue color + according to + https://www.colorhexa.com/7fbfff + */ + color: yellow; + } + + div::grammar-error + { + background-color: yellow; + color: red; + } + </style> + + <script src="support/selections.js"></script> + + <p>PREREQUISITE: User agent needs to have an enabled and capable grammar error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes + + <ul> + <li>if each glyph of the sentence is yellow + <li>if "thing" has a desaturated lime green background + <li>if the other words have a very lite blue background and + <li>if there is no red. + </ul> + + <!-- + The grammar mistakes in the text below are intentional and part of this test. + + https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking + • contenteditable makes the text “checkable for the purposes of [spelling and grammar checking]” + • spellcheck tries to enable spelling and grammar checking (subject to user preferences) + • lang tries to guide the UA towards checking the text in English (but the UA may ignore this) + --> + <div id="test" class="highlight_reftest" contenteditable="true" spellcheck="true" lang="en">Many thing can happen.</div> + + <script> + const test = document.querySelector("#test"); + selectNodeContents(test); + trySpellcheck(test); + </script> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-spelling-001.html b/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-spelling-001.html new file mode 100644 index 0000000000..13f9a2caf8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-overlay-and-spelling-001.html @@ -0,0 +1,67 @@ +<!DOCTYPE html> + + <html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: ::selection overlay drawn over the ::spelling-error overlay</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-painting"> + <link rel="match" href="reference/selection-overlay-and-spelling-001-ref.html"> + + <meta 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"> + <style> + div + { + font-size: 60px; + } + + div::selection + { + background-color: rgba(0%, 50%, 100%, 0.5); + /* + a very lite blue color + according to + https://www.colorhexa.com/7fbfff + */ + color: yellow; + } + + div::spelling-error + { + background-color: yellow; + color: red; + } + </style> + + <script src="support/selections.js"></script> + + <p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes + + <ul> + <li>if each glyph of "Txet sample" is yellow + <li>if "Txet" has a desaturated lime green background + <li>if " sample" has a very lite blue background and + <li>if there is no red. + </ul> + + <!-- + The bad spelling of Txet is intentional and part of this test. + + https://html.spec.whatwg.org/multipage/interaction.html#spelling-and-grammar-checking + • contenteditable makes the text “checkable for the purposes of [spelling and grammar checking]” + • spellcheck tries to enable spelling and grammar checking (subject to user preferences) + • lang tries to guide the UA towards checking the text in English (but the UA may ignore this) + --> + <div id="test" class="highlight_reftest" contenteditable="true" spellcheck="true" lang="en">Txet sample</div> + + <script> + const test = document.querySelector("#test"); + selectNodeContents(test); + trySpellcheck(test); + </script> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-paint-image-notref.html b/testing/web-platform/tests/css/css-pseudo/selection-paint-image-notref.html new file mode 100644 index 0000000000..ba1e97dffd --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-paint-image-notref.html @@ -0,0 +1,4 @@ +<!doctype html> +<title>CSS Test Reference</title> +<p>The red image to the right should shine through the green selection.</p> +<div style="background:green;width:200px;height:100px"></div> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-paint-image.html b/testing/web-platform/tests/css/css-pseudo/selection-paint-image.html new file mode 100644 index 0000000000..f5e2383ca8 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-paint-image.html @@ -0,0 +1,17 @@ +<!doctype html> +<title>CSS Pseudo-Elements Test: Replaced content shown through selection</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#highlight-replaced"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<link rel="mismatch" href="selection-paint-image-notref.html"> +<style> + div { font: 100px/1 Ahem; } + img { vertical-align: top; } + ::selection { background-color: green; } +</style> +<p>The red image to the right should shine through the green selection.</p> +<div> <img src="support/100x100-red.png"></div> +<script> + let range = document.createRange(); + range.selectNodeContents(document.querySelector("div")); + window.getSelection().addRange(range); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-textarea-011.html b/testing/web-platform/tests/css/css-pseudo/selection-textarea-011.html new file mode 100644 index 0000000000..0152b957c2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-textarea-011.html @@ -0,0 +1,45 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: active selection and textarea 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-selectors"> + <link rel="match" href="reference/selection-textarea-011-ref.html"> + + + <style> + textarea + { + background-color: red; + color: yellow; + font-family: monospace; + font-size: 48px; + height: 112px; + line-height: 56px; + padding: 0px; + resize: none; + width: 8ch; + outline: none; + } + + textarea::selection + { + background-color: yellow; + color: green; + } + </style> + + <script> + function startTest() + { + document.getElementById("test").select(); + } + </script> + + <body onload="startTest();"> + + <p>Test passes if each glyph of both "Selected" is green with a yellow background and if there is <strong>no red</strong>. + + <div><textarea id="test" rows="2" cols="8">Selected Selected </textarea></div> diff --git a/testing/web-platform/tests/css/css-pseudo/selection-universal-shadow-dom.html b/testing/web-platform/tests/css/css-pseudo/selection-universal-shadow-dom.html new file mode 100644 index 0000000000..738e799543 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/selection-universal-shadow-dom.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/spelling-error-001-ref.html b/testing/web-platform/tests/css/css-pseudo/spelling-error-001-ref.html new file mode 100644 index 0000000000..1e06826278 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/spelling-error-001-ref.html @@ -0,0 +1,28 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> + + <style> + div + { + font-size: 300%; + } + + span + { + color: maroon; + text-decoration: underline dotted fuchsia; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes if each glyph of "txet" is maroon and if "txet" is underlined with a fuchsia dotted line. + + <div contenteditable="true">A <span>txet</span> sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/spelling-error-001.html b/testing/web-platform/tests/css/css-pseudo/spelling-error-001.html new file mode 100644 index 0000000000..1654611bd1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/spelling-error-001.html @@ -0,0 +1,32 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: highlighting of spelling error (basic)</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="match" href="spelling-error-001-ref.html"> + + + <style> + div + { + font-size: 300%; + } + + div::spelling-error + { + color: maroon; + text-decoration: underline dotted fuchsia; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes if each glyph of "txet" is maroon and if "txet" is underlined with a fuchsia dotted line. + + <div contenteditable="true">A txet sample</div> diff --git a/testing/web-platform/tests/css/css-pseudo/spelling-error-002-manual.html b/testing/web-platform/tests/css/css-pseudo/spelling-error-002-manual.html new file mode 100644 index 0000000000..18c0c9dcee --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/spelling-error-002-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: highlighting of spelling error</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + + + <style> + input + { + font-size: 300%; + } + + input::spelling-error + { + color: maroon; + text-decoration: underline dotted red; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes if each glyph of "txet" is maroon and if "txet" is underlined with a red dotted line. + + <div><input type="text" value="A txet sample"></div> diff --git a/testing/web-platform/tests/css/css-pseudo/spelling-error-003-manual.html b/testing/web-platform/tests/css/css-pseudo/spelling-error-003-manual.html new file mode 100644 index 0000000000..95c564cace --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/spelling-error-003-manual.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> + + <html lang="en"> + + <meta charset="UTF-8"> + + <title>CSS Pseudo-Elements Test: highlighting of spelling error</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + + + <style> + textarea + { + font-size: 300%; + } + + textarea::spelling-error + { + color: maroon; + text-decoration: underline dotted red; + } + </style> + + <p>PREREQUISITE: User agent needs to have an enabled and capable spelling error module. If it does not, then this test does not apply to such user agent. + + <p>Test passes if each glyph of "txet" is maroon and if "txet" is underlined with a red dotted line. + + <div><textarea rows="2" cols="20">A txet sample</textarea></div> diff --git a/testing/web-platform/tests/css/css-pseudo/spelling-error-004-crash.html b/testing/web-platform/tests/css/css-pseudo/spelling-error-004-crash.html new file mode 100644 index 0000000000..d8222233d5 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/spelling-error-004-crash.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/spelling-error-005-crash.html b/testing/web-platform/tests/css/css-pseudo/spelling-error-005-crash.html new file mode 100644 index 0000000000..39b1aaf734 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/spelling-error-005-crash.html @@ -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.body.focus(); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/spelling-error-006-notref.html b/testing/web-platform/tests/css/css-pseudo/spelling-error-006-notref.html new file mode 100644 index 0000000000..76e8310ff1 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/spelling-error-006-notref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/spelling-error-006.html b/testing/web-platform/tests/css/css-pseudo/spelling-error-006.html new file mode 100644 index 0000000000..e5e99f4260 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/spelling-error-006.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/support/100x100-red.png b/testing/web-platform/tests/css/css-pseudo/support/100x100-red.png Binary files differnew file mode 100644 index 0000000000..57bf3ddc52 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/support/100x100-red.png diff --git a/testing/web-platform/tests/css/css-pseudo/support/60x60-red.png b/testing/web-platform/tests/css/css-pseudo/support/60x60-red.png Binary files differnew file mode 100644 index 0000000000..823f125b8e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/support/60x60-red.png diff --git a/testing/web-platform/tests/css/css-pseudo/support/highlights.css b/testing/web-platform/tests/css/css-pseudo/support/highlights.css new file mode 100644 index 0000000000..3ec7e0dd31 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/support/highlights.css @@ -0,0 +1,68 @@ +/** + * Container for the interesting part of a highlight reftest, to be + * used on both the test page and any reference pages. + */ +.highlight_reftest { + /* + https://drafts.csswg.org/css-pseudo-4/#highlight-bounds + For text, the corresponding overlay must cover at least + the entire em box and may extend further above/below the + em box to the line box edges. + */ + line-height: 1; +} + +/** + * Container for layers. All text is transparent by default, and each direct + * child creates a layer that overlaps any text content. + */ +.hrt_layers, +.hrt_layers * { + color: transparent; +} +.hrt_layers { + position: relative; +} +.hrt_layers > * { + position: absolute; +} + +/** + * Cover to clip text from the right. Usage: + * + * <div class="hrt_layers"> + * <div><!-- content to clip to “foo” from right --></div> + * <div><span class="hrt_cover">bar</span>foobar</div> + * foobar + * </div> + */ +.hrt_cover { + background: white; + position: absolute; + padding: 0.5em 0; + top: -0.5em; + right: 0; +} + +/** + * Hider to clip text from the left. Usage: + * + * <div class="hrt_layers"> + * <div>foo<span class="hrt_hider"> + * <div><!-- content to clip to “bar” from left --></div> + * bar + * </span></div> + * foobar + * </div> + */ +.hrt_hider { + display: inline-block; + overflow: hidden; + position: relative; + padding: 0.5em 0; + top: -0.5em; +} +.hrt_hider > * { + position: absolute; + right: 0; +} diff --git a/testing/web-platform/tests/css/css-pseudo/support/selections.js b/testing/web-platform/tests/css/css-pseudo/support/selections.js new file mode 100644 index 0000000000..d0cd3409a7 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/support/selections.js @@ -0,0 +1,72 @@ +/** + * Replaces the current selection (if any) with a new range, after + * it’s configured by the given function. + * + * See also: selectNodeContents + * Example: + * + * selectRangeWith(range => { + * range.selectNodeContents(foo); + * range.setStart(foo.childNodes[0], 3); + * range.setEnd(foo.childNodes[0], 5); + * }); + */ +function selectRangeWith(fun) { + const selection = getSelection(); + + // Deselect any ranges that happen to be selected, to prevent the + // Selection#addRange call from ignoring our new range (see + // <https://www.chromestatus.com/feature/6680566019653632> for + // more details). + selection.removeAllRanges(); + + // Create and configure a range. + const range = document.createRange(); + fun(range); + + // Select our new range. + selection.addRange(range); +} + +/** + * Replaces the current selection (if any) with a new range, spanning + * the contents of the given node. + */ +function selectNodeContents(node) { + const previousActive = document.activeElement; + + selectRangeWith(range => range.selectNodeContents(node)); + + // If the selection update causes the node or an ancestor to be + // focused (Chromium 80+), unfocus it, to avoid any focus-related + // styling such as outlines. + if (document.activeElement != previousActive) { + document.activeElement.blur(); + } +} + +/** + * Tries to convince a UA with lazy spellcheck to check and highlight + * the contents of the given nodes (form fields or @contenteditables). + * + * Each node is focused then immediately unfocused. Both focus and + * selection can be used for this purpose, but only focus works for + * @contenteditables. + */ +function trySpellcheck(...nodes) { + // This is inherently a flaky test risk, but Chromium (as of 87) + // seems to cancel spellcheck on a node if it wasn’t the last one + // focused for “long enough” (though immediate unfocus is ok). + // Using requestAnimationFrame or setInterval(0) are usually not + // long enough (see <https://bucket.daz.cat/work/igalia/0/0.html> + // under “trySpellcheck strategy” for an example). + const interval = setInterval(() => { + if (nodes.length > 0) { + const node = nodes.shift(); + node.focus(); + node.blur(); + } else { + clearInterval(interval); + } + }, 250); +} diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-001.html b/testing/web-platform/tests/css/css-pseudo/target-text-001.html new file mode 100644 index 0000000000..6fa529aef9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-001.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: ::target-text color rendering - basic</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> +<link rel="match" href="target-text-lime-green-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + .ahem { font-family: Ahem; } + p::target-text { + color: lime; + background-color: green; + } +</style> +<p>PASS if there are two segments of lime squares with a green square between below.</p> +<p class="ahem">match me</p> +<script> + window.location.hash = "#:~:text=match%20me"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-002.html b/testing/web-platform/tests/css/css-pseudo/target-text-002.html new file mode 100644 index 0000000000..f93efaa548 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-002.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: ::target-text color rendering - match across elements</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> +<link rel="match" href="target-text-lime-green-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + .ahem { font-family: Ahem; } + ::target-text { + color: lime; + background-color: green; + } +</style> +<p>PASS if there are two segments of lime squares with a green square between below.</p> +<p class="ahem">ma<span>tch </span>me</p> +<script> + window.location.hash = "#:~:text=match%20me"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-003.html b/testing/web-platform/tests/css/css-pseudo/target-text-003.html new file mode 100644 index 0000000000..410e636df6 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-003.html @@ -0,0 +1,18 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: ::target-text color rendering - two matches</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> +<link rel="match" href="target-text-lime-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + .ahem { font-family: Ahem; } + p::target-text { + color: lime; + background-color: green; + } +</style> +<p>PASS if there are two segments of lime squares below.</p> +<p class="ahem">match me</p> +<script> + window.location.hash = "#:~:text=match&text=me"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-004.html b/testing/web-platform/tests/css/css-pseudo/target-text-004.html new file mode 100644 index 0000000000..2cd84d5be9 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-004.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: ::target-text color rendering - with selection</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> +<link rel="match" href="target-text-lime-green-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + p::target-text { + background-color: red; + color: lime; + } + p::selection { + background-color: green; + color: currentColor; + } + #sel { + font-family: Ahem; + } +</style> +<p>PASS if there are two segments of lime squares with a green square between below.</p> +<p id="sel">match me</p> +<script> + window.location.hash = "#:~:text=match%20me"; + let range = document.createRange(); + range.selectNodeContents(sel); + window.getSelection().addRange(range); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-005.html b/testing/web-platform/tests/css/css-pseudo/target-text-005.html new file mode 100644 index 0000000000..0f43e5d717 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-005.html @@ -0,0 +1,27 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: ::target-text color rendering - with transparent selection</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> +<link rel="match" href="target-text-lime-green-ref.html"> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + p::target-text { + background-color: green; + color: transparent; + } + p::selection { + background-color: transparent; + color: lime; + } + #sel { + font-family: Ahem; + } +</style> +<p>PASS if there are two segments of lime squares with a green square between below.</p> +<p id="sel">match me</p> +<script> + window.location.hash = "#:~:text=match%20me"; + let range = document.createRange(); + range.selectNodeContents(sel); + window.getSelection().addRange(range); +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-006.html b/testing/web-platform/tests/css/css-pseudo/target-text-006.html new file mode 100644 index 0000000000..6c73ebd028 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-006.html @@ -0,0 +1,17 @@ +<!doctype html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: ::target-text color rendering - text rendered once</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> +<link rel="match" href="target-text-two-words-ref.html"> +<style> + p.white { color: white; } + p::target-text { + color: black; + background-color: orange; + } +</style> +<p>PASS if the text below is rendered black on an orange background.</p> +<p class="white">match me</p> +<script> + window.location.hash = "#:~:text=match%20me"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-007.html b/testing/web-platform/tests/css/css-pseudo/target-text-007.html new file mode 100644 index 0000000000..17d4236e39 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-007.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset="utf-8" /> +<title>CSS Pseudo-Elements Test: ::target-text text color with transparent originating color</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"> +<link rel="help" href="https://crbug.com/1273943"> +<meta name="assert" content="This test checks that ::target-text pseudo-element uses the specified color even when the originating element text color was trasnparent."> +<link rel="match" href="/css/reference/pass_if_pass_below.html"> +<style> + div { + color: transparent; + } + ::target-text { + color: black; + } +</style> + +<p>Test passes if there is the word "PASS" below.</p> +<div>PASS </div> + +<script> + window.location.hash = "#:~:text=PASS%20"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-008-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-008-ref.html new file mode 100644 index 0000000000..d9082b822f --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-008-ref.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-008.html b/testing/web-platform/tests/css/css-pseudo/target-text-008.html new file mode 100644 index 0000000000..b1759124be --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-008.html @@ -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> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-001-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-001-ref.html new file mode 100644 index 0000000000..ab3fcdf58d --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-001-ref.html @@ -0,0 +1,13 @@ +<!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> + span { + background-color: magenta; + } +</style> + +<p>The test passes if the following word has a magenta background.</p> +<div><span>Example</span></div> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-001.html b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-001.html new file mode 100644 index 0000000000..63cbaa52b2 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-001.html @@ -0,0 +1,27 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8" /> +<title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</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="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element."> +<link rel="match" href="target-text-dynamic-001-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style> + ::target-text { + background-color: cyan; + } +</style> + +<p>The test passes if the following word has a magenta background.</p> +<div>Example</div> + +<script> + location.href = "#:~:text=Example"; + requestAnimationFrame(() => requestAnimationFrame(() => { + if (document.styleSheets[0].cssRules[0]) + document.styleSheets[0].cssRules[0].style.backgroundColor = "magenta"; + takeScreenshot(); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-002.html b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-002.html new file mode 100644 index 0000000000..95d5eda543 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-002.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8" /> +<title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</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="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element."> +<link rel="match" href="target-text-dynamic-001-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style> + .magenta::target-text { + background-color: magenta; + } +</style> + +<p>The test passes if the following word has a magenta background.</p> +<div id="target">Example</div> + +<script> + location.href = "#:~:text=Example"; + requestAnimationFrame(() => requestAnimationFrame(() => { + target.classList.add("magenta"); + takeScreenshot(); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-003.html b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-003.html new file mode 100644 index 0000000000..7916fa2e29 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-003.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8" /> +<title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</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="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element."> +<link rel="match" href="target-text-dynamic-001-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style> + span::target-text { + background-color: cyan; + } + + span { + background-color: magenta; + } +</style> + +<p>The test passes if the following word has a magenta background.</p> +<div><span>Example</span></div> + +<script> + location.href = "#:~:text=Example"; + requestAnimationFrame(() => requestAnimationFrame(() => { + document.styleSheets[0].cssRules[0].style.backgroundColor = "magenta"; + takeScreenshot(); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html new file mode 100644 index 0000000000..279ec674b4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-dynamic-004.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<html lang="en" class="reftest-wait"> +<meta charset="utf-8" /> +<title>CSS Pseudo-Elements Test: Dynamic change ::target-text background color</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="This test checks that it's possible to modify dinamically the background color of a targeted text through ::target-text pseudo-element."> +<link rel="match" href="target-text-dynamic-001-ref.html"> +<script src="/common/reftest-wait.js"></script> +<style> + span::target-text { + background-color: cyan; + } + + span { + background-color: cyan; + } +</style> + +<p>The test passes if the following word has a magenta background.</p> +<div>Example</div> + +<script> + location.href = "#:~:text=Example"; + requestAnimationFrame(() => requestAnimationFrame(() => { + document.styleSheets[0].cssRules[0].style.backgroundColor = "magenta"; + takeScreenshot(); + })); +</script> +</html> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-lime-green-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-lime-green-ref.html new file mode 100644 index 0000000000..dd29ab3705 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-lime-green-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<p>PASS if there are two segments of lime squares with a green square between below.</p> +<p style="font-family:Ahem"><span style="color:lime;background:green">match me</span></p> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-lime-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-lime-ref.html new file mode 100644 index 0000000000..bd94d69435 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-lime-ref.html @@ -0,0 +1,11 @@ +<!doctype html> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> +<style> + .ahem { font-family: Ahem; } + span { + color: lime; + background-color: green; + } +</style> +<p>PASS if there are two segments of lime squares below.</p> +<p class="ahem"><span>match</span> <span>me</span></p> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-text-decoration-001-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-text-decoration-001-ref.html new file mode 100644 index 0000000000..0ee37b1e8a --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-text-decoration-001-ref.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Reference ::target-text text-decoration-color</title> +<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> +<div>Example</div> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-text-decoration-001.html b/testing/web-platform/tests/css/css-pseudo/target-text-text-decoration-001.html new file mode 100644 index 0000000000..d90d5d9663 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-text-decoration-001.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: ::target-text text-decoration</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo/#selectordef-target-text"> +<link rel="match" href="target-text-text-decoration-001-ref.html"> +<meta name="assert" content="This test checks that ::target-text pseudo-element paints text-decorations defined by the pseudo-element."> +<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> +<div>Example</div> +<script> + location.href = "#:~:text=Example"; +</script> diff --git a/testing/web-platform/tests/css/css-pseudo/target-text-two-words-ref.html b/testing/web-platform/tests/css/css-pseudo/target-text-two-words-ref.html new file mode 100644 index 0000000000..47583b5abf --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/target-text-two-words-ref.html @@ -0,0 +1,4 @@ +<!doctype html> +<title>CSS Test Reference</title> +<p>PASS if the text below is rendered black on an orange background.</p> +<p><span style="color:black;background:orange">match me<span></p> diff --git a/testing/web-platform/tests/css/css-pseudo/text-selection.html b/testing/web-platform/tests/css/css-pseudo/text-selection.html new file mode 100644 index 0000000000..42acd0aa52 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/text-selection.html @@ -0,0 +1,87 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>CSS Pseudo-Elements Test: Text selection</title> +<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#treelike"> +<link rel="help" href="https://drafts.csswg.org/css-ui/#user-interaction"> +<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> +<meta name="assert" content="This test checks that text in a ::before or ::marker pseudo-element can't be selected." /> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.test { + font: 10px/1 Ahem; + margin-left: 200px; +} +#before::before { + content: "::before"; + display: inline-block; + margin-left: -80px; +} +#marker { + display: list-item; + list-style-type: "::marker"; +} +#before-marker::before { + content: ""; + display: list-item; + list-style-type: "::marker"; + height: 0; +} +</style> +<div class="test" id="before"><span>helloworld</span></div> +<div class="test" id="marker"><span>helloworld</span></div> +<div class="test" id="before-marker"><span>helloworld</span></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/testdriver.js"></script> +<script src="/resources/testdriver-actions.js"></script> +<script src="/resources/testdriver-vendor.js"></script> +<script> +function createSelection(element, start, end, step) { + getSelection().empty(); + step = Math.abs(step); + const actions = new test_driver.Actions(); + actions.pointerMove(start, 0, {origin: element}); + actions.pointerDown(); + if (start < end) { + for (let x = start + step; x < end; x += step) + actions.pointerMove(x, 0, {origin: element}); + } else { + for (let x = start - step; x > end; x -= step) + actions.pointerMove(x, 0, {origin: element}); + } + actions.pointerMove(end, 0, {origin: element}); + actions.pointerUp(); + return actions.send(); +} +(async function() { + setup({ explicit_done: true }); + for (let target of document.querySelectorAll(".test")) { + const contents = target.querySelector("span"); + const text = contents.firstChild; + const s = getSelection(); + + // Create a selection that starts in the middle of the element contents + // and ends in the middle of the pseudo-element + await createSelection(contents, 0, -90, 10); + test(function(t) { + assert_equals(s.toString(), "hello", "toString"); + assert_equals(s.anchorNode, text, "anchorNode"); + assert_equals(s.anchorOffset, 5, "anchorOffset"); + assert_equals(s.focusNode, text, "focusNode"); + assert_equals(s.focusOffset, 0, "focusOffset"); + }, "Selection ending in ::" + target.id); + + // Create a selection that starts and ends inside the pseudo-element. + await createSelection(contents, -80, -110, 10); + test(function(t) { + assert_equals(s.toString(), "", "toString"); + assert_in_array(s.anchorNode, [text, null], "anchorNode"); + assert_equals(s.anchorOffset, 0, "anchorOffset"); + assert_in_array(s.focusNode, [text, null], "focusNode"); + assert_equals(s.focusOffset, 0, "focusOffset"); + }, "Selection contained in ::" + target.id); + } + done(); +})(); +</script> + diff --git a/testing/web-platform/tests/css/css-pseudo/textpath-selection-011-ref.html b/testing/web-platform/tests/css/css-pseudo/textpath-selection-011-ref.html new file mode 100644 index 0000000000..6d07c71bc4 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/textpath-selection-011-ref.html @@ -0,0 +1,51 @@ +<!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/"> + + <meta content="svg" name="flags"> + + <style> + text + { + background-color: transparent; + /* + color suppresses UA default background-color, + but fill and stroke do not, so set explicitly + */ + fill: green; + /* + fill is the shorthand form for fill-color, + fill-image, fill-origin, fill-position, fill-size + and fill-repeat + https://www.w3.org/TR/fill-stroke-3/#fill-shorthand + */ + stroke: yellow; + /* + stroke is the shorthand form for stroke-color, + stroke-image, stroke-origin, stroke-position, + stroke-size, and stroke-repeat + https://www.w3.org/TR/fill-stroke-3/#stroke-shorthand + */ + stroke-width: 2px; + } + </style> + + <p>Test passes if the glyphs of "Curvy text sample" are green with a yellow outline. + + <div> + + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="550" height="300"> + + <path id="pathToApply" + d="M 100 200 + C 100 100 200 0 500 200" fill="none" /> + + <text style="font-size: 48px;"><textPath xlink:href="#pathToApply" id="test">Curvy text sample</textPath></text> + + </svg> + + </div> diff --git a/testing/web-platform/tests/css/css-pseudo/textpath-selection-011.html b/testing/web-platform/tests/css/css-pseudo/textpath-selection-011.html new file mode 100644 index 0000000000..1e84519b0e --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/textpath-selection-011.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> + + <meta charset="UTF-8"> + + <title>CSS Test: active selection of text following a path (complex)</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-selectors"> + <link rel="help" href="https://www.w3.org/TR/css-pseudo-4/#highlight-styling"> + <link rel="help" href="https://www.w3.org/TR/fill-stroke-3/#fill-shorthand"> + <link rel="help" href="https://www.w3.org/TR/fill-stroke-3/#stroke-shorthand"> + <link rel="match" href="textpath-selection-011-ref.html"> + + <meta content="svg" name="flags"> + <meta content="This test checks that an SVG application with a text following a text path can be selected and then be styled." name="assert"> + + <style> + ::selection + { + background-color: transparent; + /* + color suppresses UA default background-color, + but fill and stroke do not, so set explicitly + */ + fill: green; + /* + fill is the shorthand form for fill-color, + fill-image, fill-origin, fill-position, fill-size + and fill-repeat + https://www.w3.org/TR/fill-stroke-3/#fill-shorthand + */ + stroke: yellow; + /* + stroke is the shorthand form for stroke-color, + stroke-image, stroke-origin, stroke-position, + stroke-size, and stroke-repeat + https://www.w3.org/TR/fill-stroke-3/#stroke-shorthand + */ + stroke-width: 2px; + } + </style> + + <p>Test passes if the glyphs of "Curvy text sample" are green with a yellow outline. + + <div> + + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="550" height="300"> + + <path id="pathToApply" + d="M 100 200 + C 100 100 200 0 500 200" fill="none" /> + + <text fill="red" style="font-size: 48px;"><textPath xlink:href="#pathToApply" id="test">Curvy text sample</textPath></text> + + </svg> + + </div> + + <script> + var targetRange = document.createRange(); + /* We first create an empty range */ + + targetRange.setStart(document.getElementById("test").childNodes[0], 0); + /* + Then we set the start boundary of the range inside textPath#test to + the 1st character, which is "C" + */ + + targetRange.setEnd(document.getElementById("test").childNodes[0], 17); + /* And we set the end boundary of the range inside textPath#test + right after the 18th character which is "e" */ + + window.getSelection().addRange(targetRange); + /* Finally, we now select such range of content */ + </script> |
