diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/css-pseudo/reference | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-pseudo/reference')
24 files changed, 824 insertions, 0 deletions
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..4eef817d70 --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/first-letter-digraph-ref.html @@ -0,0 +1,41 @@ +<!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> + </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> + </div> + <div lang="nl"> + <p><span>I</span>jotalen</p> <!-- mixed case not treated as digraph --> + </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/reference/svg-text-selection-002-ref.html b/testing/web-platform/tests/css/css-pseudo/reference/svg-text-selection-002-ref.html new file mode 100644 index 0000000000..8703b313ea --- /dev/null +++ b/testing/web-platform/tests/css/css-pseudo/reference/svg-text-selection-002-ref.html @@ -0,0 +1,21 @@ +<!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"> + + <p>Test passes if the glyphs of "Selected text" are green and <strong>not red</strong>. + + <div> + + <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="460" height="180" style="border: black solid 3px;"> + + <text x="50" y="100" fill="green" font-size="48">Selected text</text> + + </svg> + + </div> |