Move CSS some text-shadow reftests to WPT.
Differential Revision: https://phabricator.services.mozilla.com/D133503
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1745463
gecko-commit: f00d6b780e9ddd136bd875937aa23c12e5a6243d
gecko-reviewers: mstange
diff --git a/css/css-text-decor/text-shadow/basic-negcoord-ref.html b/css/css-text-decor/text-shadow/basic-negcoord-ref.html
new file mode 100644
index 0000000..79c3d99
--- /dev/null
+++ b/css/css-text-decor/text-shadow/basic-negcoord-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+
+<div style="position: absolute; top: 20px; left: 20px; color: green; z-index: 0;">Hello</div>
+<div style="position: absolute; top: 24px; left: 24px; color: black; z-index: 1;">Hello</div>
+
diff --git a/css/css-text-decor/text-shadow/basic-negcoord.html b/css/css-text-decor/text-shadow/basic-negcoord.html
new file mode 100644
index 0000000..1e29b42
--- /dev/null
+++ b/css/css-text-decor/text-shadow/basic-negcoord.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="basic-negcoord-ref.html">
+<div style="position: absolute; top: 24px; left: 24px; color: black; text-shadow: green -4px -4px;">Hello</div>
+
diff --git a/css/css-text-decor/text-shadow/basic-opacity-ref.html b/css/css-text-decor/text-shadow/basic-opacity-ref.html
new file mode 100644
index 0000000..11aa6d5
--- /dev/null
+++ b/css/css-text-decor/text-shadow/basic-opacity-ref.html
@@ -0,0 +1,2 @@
+<div style="position: absolute; top: 33px; left: 33px; color: rgba(0, 0, 255, 0.2); z-index: 0;">Hello</div>
+<div style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/basic-opacity.html b/css/css-text-decor/text-shadow/basic-opacity.html
new file mode 100644
index 0000000..a8cea6a
--- /dev/null
+++ b/css/css-text-decor/text-shadow/basic-opacity.html
@@ -0,0 +1,3 @@
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="basic-opacity-ref.html">
+<div style="position: absolute; top: 30px; left: 30px; color: green; text-shadow: rgba(0, 0, 255, 0.2) 3px 3px;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/basic-ref.html b/css/css-text-decor/text-shadow/basic-ref.html
new file mode 100644
index 0000000..26b07d2
--- /dev/null
+++ b/css/css-text-decor/text-shadow/basic-ref.html
@@ -0,0 +1,2 @@
+<div style="position: absolute; top: 33px; left: 33px; color: grey; z-index: 0;">Hello</div>
+<div style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/basic.html b/css/css-text-decor/text-shadow/basic.html
new file mode 100644
index 0000000..fc470ea
--- /dev/null
+++ b/css/css-text-decor/text-shadow/basic.html
@@ -0,0 +1,3 @@
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="basic-ref.html">
+<div style="position: absolute; top: 30px; left: 30px; color: green; text-shadow: grey 3px 3px;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/blur-notref.html b/css/css-text-decor/text-shadow/blur-notref.html
new file mode 100644
index 0000000..2840409
--- /dev/null
+++ b/css/css-text-decor/text-shadow/blur-notref.html
@@ -0,0 +1 @@
+<div style="text-shadow: blue 4px 4px">The shadow should be blurred</div>
diff --git a/css/css-text-decor/text-shadow/blur.html b/css/css-text-decor/text-shadow/blur.html
new file mode 100644
index 0000000..f6dd3cf
--- /dev/null
+++ b/css/css-text-decor/text-shadow/blur.html
@@ -0,0 +1,3 @@
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="mismatch" href="blur-notref.html">
+<div style="text-shadow: blue 4px 4px 2px">The shadow should be blurred</div>
diff --git a/css/css-text-decor/text-shadow/color-inherit-ref.html b/css/css-text-decor/text-shadow/color-inherit-ref.html
new file mode 100644
index 0000000..8fa2daf
--- /dev/null
+++ b/css/css-text-decor/text-shadow/color-inherit-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+
+<div style="position: absolute; top: 27px; left: 27px; color: blue; z-index: 0;">Hello</div>
+<div style="position: absolute; top: 24px; left: 24px; color: blue; z-index: 1;">Hello</div>
+
diff --git a/css/css-text-decor/text-shadow/color-inherit.html b/css/css-text-decor/text-shadow/color-inherit.html
new file mode 100644
index 0000000..abb2cff
--- /dev/null
+++ b/css/css-text-decor/text-shadow/color-inherit.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="color-inherit-ref.html">
+<div style="position: absolute; top: 24px; left: 24px; color: blue; text-shadow: 3px 3px;">Hello</div>
+
diff --git a/css/css-text-decor/text-shadow/color-parserorder-ref.html b/css/css-text-decor/text-shadow/color-parserorder-ref.html
new file mode 100644
index 0000000..16d53ce
--- /dev/null
+++ b/css/css-text-decor/text-shadow/color-parserorder-ref.html
@@ -0,0 +1 @@
+<div style="text-shadow: green 3px 3px 2px;">Parser test</div>
diff --git a/css/css-text-decor/text-shadow/color-parserorder.html b/css/css-text-decor/text-shadow/color-parserorder.html
new file mode 100644
index 0000000..829383b
--- /dev/null
+++ b/css/css-text-decor/text-shadow/color-parserorder.html
@@ -0,0 +1,3 @@
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="color-parserorder-ref.html">
+<div style="text-shadow: 3px 3px 2px green;">Parser test</div>
diff --git a/css/css-text-decor/text-shadow/decorations-multiple-zorder-ref.html b/css/css-text-decor/text-shadow/decorations-multiple-zorder-ref.html
new file mode 100644
index 0000000..5638673
--- /dev/null
+++ b/css/css-text-decor/text-shadow/decorations-multiple-zorder-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE HTML>
+<style>
+div {
+ text-decoration-skip-ink: none;
+}
+</style>
+<!-- Shadows -->
+<!-- Blue underline/text -->
+<div style="position: absolute; top: 22px; left: 22px;"><span style="color: blue; text-decoration: underline">test</span></div>
+<!-- Red overline/text -->
+<!--
+There are some additional pixels appearing when two red texts are overlap. We
+use transparent color for the first one to prevent the situation and the failure
+of reftest.
+-->
+<div style="position: absolute; top: 22px; left: 22px;"><span style="color: rgba(0, 0, 0, 0);">test</span><span style="color: transparent; text-decoration: red underline;">for</span></div>
+<div style="position: absolute; top: 22px; left: 22px;"><span style="color: rgba(0, 0, 0, 0);">test</span><span style="color: red; text-decoration: overline;">for</span></div>
+<!-- Green text/underline -->
+<!--
+There are some additional pixels appearing when two red texts are overlap. We
+use transparent color for the first one to prevent the situation and the failure
+of reftest.
+-->
+<div style="position: absolute; top: 22px; left: 22px;"><span style="color: rgba(0, 0, 0, 0);">testfor</span><span style="text-decoration: green underline; color: transparent;">quirks</span></div>
+<div style="position: absolute; top: 22px; left: 22px;"><span style="color: rgba(0, 0, 0, 0);">testfor</span><span style="text-decoration: overline; color: green;">quirks</span></div>
+
+<!-- "Real" text -->
+<!-- Blue underline/text -->
+<div style="position: absolute; top: 20px; left: 20px; color: blue; text-decoration: underline;"><span style="color: rgba(0, 0, 0, 0);">testforquirks</span></div>
+<div style="position: absolute; top: 20px; left: 20px;"><span style="color: blue;">test</span></div>
+<!-- Red overline/text -->
+<div style="position: absolute; top: 20px; left: 20px; color: rgba(0, 0, 0, 0);">test<span style="text-decoration: overline; color: red;"><span style="color: rgba(0, 0, 0, 0);">forquirks</span></span></div>
+<div style="position: absolute; top: 20px; left: 20px;"><span style="color: rgba(0, 0, 0, 0);">test</span><span style="color: red;">for</span></div>
+<!-- Green underline/text -->
+<div style="position: absolute; top: 20px; left: 20px;"><span style="color: rgba(0, 0, 0, 0);">testfor</span><span style="text-decoration: underline; color: green;"><span style="color: rgba(0, 0, 0, 0);">quirks</span></span></div>
+<div style="position: absolute; top: 20px; left: 20px;"><span style="color: rgba(0, 0, 0, 0);">testfor</span><span style="color: green;">quirks</span></div>
diff --git a/css/css-text-decor/text-shadow/decorations-multiple-zorder.html b/css/css-text-decor/text-shadow/decorations-multiple-zorder.html
new file mode 100644
index 0000000..2240653
--- /dev/null
+++ b/css/css-text-decor/text-shadow/decorations-multiple-zorder.html
@@ -0,0 +1,9 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="decorations-multiple-zorder-ref.html">
+<style>
+div {
+ text-decoration-skip-ink: none;
+}
+</style>
+<div style="text-shadow: 2px 2px; color: blue; text-decoration: underline; position: absolute; top: 20px; left: 20px;">test<span style="text-decoration: overline; color: red;">for<span style="text-decoration: underline; color: green;">quirks</span></span></div>
diff --git a/css/css-text-decor/text-shadow/dynamic-blur-ref.html b/css/css-text-decor/text-shadow/dynamic-blur-ref.html
new file mode 100644
index 0000000..779f4ad
--- /dev/null
+++ b/css/css-text-decor/text-shadow/dynamic-blur-ref.html
@@ -0,0 +1,5 @@
+<!DOCTYPE html>
+<html style='text-shadow: 0.6em 0.6em 0.1em green'>
+<body>I have a green shadow</body>
+</html>
+
diff --git a/css/css-text-decor/text-shadow/dynamic-blur.html b/css/css-text-decor/text-shadow/dynamic-blur.html
new file mode 100644
index 0000000..3f1f02b
--- /dev/null
+++ b/css/css-text-decor/text-shadow/dynamic-blur.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+<head>
+ <link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+ <link rel="match" href="dynamic-blur-ref.html">
+</head>
+<body onload="document.documentElement.style.textShadow = '0.6em 0.6em 0.1em green';">I have a green shadow</body>
+</html>
+
diff --git a/css/css-text-decor/text-shadow/lineoverflow-ref.html b/css/css-text-decor/text-shadow/lineoverflow-ref.html
new file mode 100644
index 0000000..07fad32
--- /dev/null
+++ b/css/css-text-decor/text-shadow/lineoverflow-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+
+<div style="position: absolute; top: 20px; left: 20px;"><span style="text-decoration: underline; text-shadow: 3px 3px 2px red; font-size: 40px;">Testingtestingtestingtesting</span></div>
diff --git a/css/css-text-decor/text-shadow/lineoverflow.html b/css/css-text-decor/text-shadow/lineoverflow.html
new file mode 100644
index 0000000..050ee65
--- /dev/null
+++ b/css/css-text-decor/text-shadow/lineoverflow.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="lineoverflow-ref.html">
+<div style="position: absolute; top: 20px; left: 20px; width: 50px; text-decoration: underline; text-shadow: 3px 3px 2px red; font-size: 40px;">Testingtestingtestingtesting</div>
diff --git a/css/css-text-decor/text-shadow/multiple-noblur-ref.html b/css/css-text-decor/text-shadow/multiple-noblur-ref.html
new file mode 100644
index 0000000..a5f125e
--- /dev/null
+++ b/css/css-text-decor/text-shadow/multiple-noblur-ref.html
@@ -0,0 +1,5 @@
+<div style="position: absolute; top: 33px; left: 33px; color: grey; z-index: 0;">Hello</div>
+<div style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div>
+<div style="position: absolute; top: 27px; left: 27px; color: red; z-index: 2;">Hello</div>
+<div style="position: absolute; top: 24px; left: 24px; color: purple; z-index: 3;">Hello</div>
+<div style="position: absolute; top: 20px; left: 20px; color: black; z-index: 4;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/multiple-noblur.html b/css/css-text-decor/text-shadow/multiple-noblur.html
new file mode 100644
index 0000000..cf86e4b
--- /dev/null
+++ b/css/css-text-decor/text-shadow/multiple-noblur.html
@@ -0,0 +1,3 @@
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="multiple-noblur-ref.html">
+<div style="position: absolute; top: 20px; left: 20px; color: black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref.html b/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref.html
new file mode 100644
index 0000000..642d101
--- /dev/null
+++ b/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+ height: 200px; width: 200px; overflow: hidden;
+ text-shadow: 210px 210px 2px gray;
+ font-size: 50px;
+}
+
+/* work around potential font overflow */
+span { margin-left: 5px }
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref2.html b/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref2.html
new file mode 100644
index 0000000..4ed3a46
--- /dev/null
+++ b/css/css-text-decor/text-shadow/overflow-not-scrollable-1-ref2.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+ height: 200px; width: 200px;
+ font-size: 50px;
+}
+
+/* work around potential font overflow */
+span { margin-left: 5px }
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/css/css-text-decor/text-shadow/overflow-not-scrollable-1.html b/css/css-text-decor/text-shadow/overflow-not-scrollable-1.html
new file mode 100644
index 0000000..ca9fc8c
--- /dev/null
+++ b/css/css-text-decor/text-shadow/overflow-not-scrollable-1.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="overflow-not-scrollable-1-ref.html">
+<link rel="match" href="overflow-not-scrollable-1-ref2.html">
+<style>
+div {
+ height: 200px; width: 200px; overflow: auto;
+ text-shadow: 210px 210px 2px gray;
+ font-size: 50px;
+}
+
+/* work around potential font overflow */
+span { margin-left: 5px }
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/css/css-text-decor/text-shadow/overflow-not-scrollable-2-ref.html b/css/css-text-decor/text-shadow/overflow-not-scrollable-2-ref.html
new file mode 100644
index 0000000..4d0e745
--- /dev/null
+++ b/css/css-text-decor/text-shadow/overflow-not-scrollable-2-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<style type="text/css">
+
+div {
+ height: 200px; width: 200px; overflow: hidden;
+ text-shadow: 100px 100px 30px black;
+ font-size: 50px;
+ font-weight: bold;
+}
+
+/* work around potential font overflow */
+span { margin-left: 5px }
+
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/css/css-text-decor/text-shadow/overflow-not-scrollable-2.html b/css/css-text-decor/text-shadow/overflow-not-scrollable-2.html
new file mode 100644
index 0000000..b532789
--- /dev/null
+++ b/css/css-text-decor/text-shadow/overflow-not-scrollable-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="overflow-not-scrollable-2-ref.html">
+<style>
+div {
+ height: 200px; width: 200px; overflow: auto;
+ text-shadow: 100px 100px 30px black;
+ font-size: 50px;
+ font-weight: bold;
+}
+
+/* work around potential font overflow */
+span { margin-left: 5px }
+</style>
+<div>
+<span>text</span>
+</div>
diff --git a/css/css-text-decor/text-shadow/padding-decoration-ref.html b/css/css-text-decor/text-shadow/padding-decoration-ref.html
new file mode 100644
index 0000000..1cc1f5e
--- /dev/null
+++ b/css/css-text-decor/text-shadow/padding-decoration-ref.html
@@ -0,0 +1 @@
+<!DOCTYPE HTML><div><a href="http://test" style="margin-left: 20px; text-shadow: 2px 2px 2px blue;">Hello world hello world</a></div>
diff --git a/css/css-text-decor/text-shadow/padding-decoration.html b/css/css-text-decor/text-shadow/padding-decoration.html
new file mode 100644
index 0000000..7512f28
--- /dev/null
+++ b/css/css-text-decor/text-shadow/padding-decoration.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="padding-decoration-ref.html">
+<div><a href="http://test" style="padding-left: 20px; text-shadow: 2px 2px 2px blue;">Hello world hello world</a></div>
diff --git a/css/css-text-decor/text-shadow/quirks-decor-noblur-ref.html b/css/css-text-decor/text-shadow/quirks-decor-noblur-ref.html
new file mode 100644
index 0000000..9644146
--- /dev/null
+++ b/css/css-text-decor/text-shadow/quirks-decor-noblur-ref.html
@@ -0,0 +1,11 @@
+<style>
+div {
+text-decoration: underline;
+}
+</style>
+
+<div style="position: absolute; top: 33px; left: 33px; color: grey; z-index: 0;">Hello</div>
+<div style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div>
+<div style="position: absolute; top: 27px; left: 27px; color: red; z-index: 2;">Hello</div>
+<div style="position: absolute; top: 24px; left: 24px; color: purple; z-index: 3;">Hello</div>
+<div style="position: absolute; top: 20px; left: 20px; color: black; z-index: 4;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/quirks-decor-noblur.html b/css/css-text-decor/text-shadow/quirks-decor-noblur.html
new file mode 100644
index 0000000..e5de43d
--- /dev/null
+++ b/css/css-text-decor/text-shadow/quirks-decor-noblur.html
@@ -0,0 +1,3 @@
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="quirks-decor-noblur-ref.html">
+<div style="position: absolute; top: 20px; left: 20px; color: black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px; text-decoration: underline;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/standards-decor-noblur-ref.html b/css/css-text-decor/text-shadow/standards-decor-noblur-ref.html
new file mode 100644
index 0000000..8a962a4
--- /dev/null
+++ b/css/css-text-decor/text-shadow/standards-decor-noblur-ref.html
@@ -0,0 +1,16 @@
+<!DOCTYPE HTML>
+<style>
+.underlined {
+text-decoration: underline;
+}
+
+span {
+color: rgba(0, 0, 0, 0);
+}
+</style>
+
+<div class="underlined" style="position: absolute; top: 33px; left: 33px; color: grey; z-index: 0;">Hello</div>
+<div class="underlined" style="position: absolute; top: 30px; left: 30px; color: green; z-index: 1;">Hello</div>
+<div class="underlined" style="position: absolute; top: 27px; left: 27px; color: red; z-index: 2;">Hello</div>
+<div class="underlined" style="position: absolute; top: 24px; left: 24px; color: purple; z-index: 3;">Hello</div>
+<div class="underlined" style="position: absolute; top: 20px; left: 20px; color: black; z-index: 4;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/standards-decor-noblur.html b/css/css-text-decor/text-shadow/standards-decor-noblur.html
new file mode 100644
index 0000000..d5a2f4e
--- /dev/null
+++ b/css/css-text-decor/text-shadow/standards-decor-noblur.html
@@ -0,0 +1,5 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="standards-decor-noblur-ref.html">
+<!-- Shadows are painted below text AND its decorations -->
+<div style="position: absolute; top: 20px; left: 20px; color: black; text-shadow: purple 4px 4px, red 7px 7px, green 10px 10px, grey 13px 13px; text-decoration: underline;">Hello</div>
diff --git a/css/css-text-decor/text-shadow/textindent-ref.html b/css/css-text-decor/text-shadow/textindent-ref.html
new file mode 100644
index 0000000..c3e3315
--- /dev/null
+++ b/css/css-text-decor/text-shadow/textindent-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE HTML>
+
+<div style="position:absolute; top: 20px; left: 60px; text-decoration: underline; text-shadow: 5px 5px 3px blue; font-size: 40px;">M</div>
diff --git a/css/css-text-decor/text-shadow/textindent.html b/css/css-text-decor/text-shadow/textindent.html
new file mode 100644
index 0000000..4b66f9d
--- /dev/null
+++ b/css/css-text-decor/text-shadow/textindent.html
@@ -0,0 +1,4 @@
+<!DOCTYPE HTML>
+<link rel="help" href="https://drafts.csswg.org/css-text-decor-3/#text-shadow-property">
+<link rel="match" href="textindent-ref.html">
+<div style="position:absolute; top: 20px; left: 120px; text-indent: -60px; text-decoration: underline; text-shadow: 5px 5px 3px blue; font-size: 40px;">M</div>
