1 files changed, 83 insertions, 0 deletions
diff --git a/layout/reftests/text-decoration/decoration-color-standards.html b/layout/reftests/text-decoration/decoration-color-standards.html
new file mode 100644
index 0000000000..3f8c5938e4
--- /dev/null
+++ b/layout/reftests/text-decoration/decoration-color-standards.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<style>
+ *{
+    text-decoration-skip-ink: none;
+ }
+</style>
+<p style="color: blue;
+          text-decoration: underline line-through overline;
+          text-decoration-color: green;">
+  This blue text has green decoration lines
+</p>
+<p style="color: #ff0000;
+          text-decoration: underline line-through overline;
+          text-decoration-color: #ffff00;">
+  This red text has yellow decoration lines
+</p>
+<p style="color: rgb(0%, 0%, 100%);
+          text-decoration: underline line-through overline;
+          text-decoration-color: rgb(100%, 0%, 0%);">
+  This blue text has red lines
+</p>
+<p style="color: orange;
+          text-decoration: underline line-through overline;
+          text-decoration-color: transparent;">
+  This orange text has transparent lines
+</p>
+<p>
+  Here is no decoration lines, but
+  <span style="font-size: 2em; color: blue;
+               text-decoration: underline line-through overline;
+               text-decoration-color: green;">
+    this blue text has green decoration lines</span>,
+  and here is no decoration lines too.
+</p>
+<p style="color: red;">
+  This is red paragraph and here is no decoration lines, but
+  <span style="font-size: 2em;
+               text-decoration: underline line-through overline;
+               text-decoration-color: green;">
+    here are green decoration lines</span>,
+  and here is no decoration lines too.</p>
+<p style="color: purple;
+          text-decoration: underline line-through overline;">
+  This is purple paragraph and here are decoration lines of current color, but
+  <span style="font-size: 2em;
+               text-decoration: underline line-through overline;
+               text-decoration-color: red;">
+    here are red decoration lines</span>,
+  and here are current color decoration lines.
+</p>
+<p style="color: green;
+          text-decoration: underline line-through overline;">
+  This is green paragraph and here are decoration lines of current color, and
+  <span style="font-size: 2em;
+               text-decoration-color: red;">
+    here is specified red decoration color but has current color lines</span>,
+  and here are current color decoration lines.
+</p>
+<p style="color: blue;">
+  This is blue paragraph,
+  <span style="font-size:2em;
+               color: red;
+               text-decoration: underline line-through overline;
+               text-decoration-color: inherit;">
+    here is red text with red decoration lines</span>,
+  and here is blue text without decoration lines.
+</p>
+<p style="color: blue;
+          text-decoration-color: green;">
+  This is blue paragraph and decoration color is specified as green,
+  <span style="font-size:2em;
+               color: red;
+               text-decoration: underline line-through overline;
+               text-decoration-color: inherit;">
+    here is red text with green decoration lines</span>,
+  and here is blue text without decoration lines.
+</p>
+<p style="color: blue;
+          text-decoration-color: red;
+          text-decoration: underline line-through overline;">
+  Here has blue decoration lines even though its color is specified as red
+  before text-decoration.
+</p>