diff --git a/layout/reftests/fonts/AwamiNastaliq-Regular.woff b/layout/reftests/fonts/AwamiNastaliq-Regular.woff
new file mode 100644
index 000000000000..5ea21ed74b05
Binary files /dev/null and b/layout/reftests/fonts/AwamiNastaliq-Regular.woff differ
diff --git a/layout/reftests/text-decoration/reftest.list b/layout/reftests/text-decoration/reftest.list
index f859b8f6bf07..6b97a7fec18b 100644
--- a/layout/reftests/text-decoration/reftest.list
+++ b/layout/reftests/text-decoration/reftest.list
@@ -114,3 +114,7 @@ fuzzy-if(skiaContent,0-4,0-2) == underline-select-1.html underline-select-1-ref.
 fuzzy-if(Android,0-238,0-36) == vertical-mode-decorations-2.html vertical-mode-decorations-2-ref.html
 != 1415214.html 1415214-notref.html
 test-pref(layout.css.text-decoration-thickness.enabled,false) == text-decoration-shorthands-001.html text-decoration-shorthands-001-ref.html
+# fails because of bug 1572302
+test-pref(layout.css.text-decoration-skip-ink.enabled,true) test-pref(layout.css.text-underline-offset.enabled,true) fails HTTP(..) == skip-ink-multiline-position.html skip-ink-multiline-position-ref.html
+# fails due to bug 1573711
+test-pref(layout.css.text-decoration-skip-ink.enabled,true) fails == skip-ink-vertical-align.html skip-ink-vertical-align-ref.html
diff --git a/layout/reftests/text-decoration/skip-ink-multiline-position-ref.html b/layout/reftests/text-decoration/skip-ink-multiline-position-ref.html
new file mode 100644
index 000000000000..7089fd27f918
--- /dev/null
+++ b/layout/reftests/text-decoration/skip-ink-multiline-position-ref.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Reference case for text-decoration-skip-ink: text on the second line should not change the position of the first line's underline</title>
+    <style>
+     @font-face {
+         font-family: awami;
+         src: url("../fonts/AwamiNastaliq-Regular.woff");
+     }
+     div{
+         font: 36px/2 awami, sans-serif;
+         unicode-bidi:bidi-override;
+         width: 70px;
+         height: 70px;
+         overflow: hidden;
+         text-decoration: red underline;
+         text-underline-offset: -0.5em;
+     }
+    </style>
+  </head>
+  <body>
+      <p>Adding more characters on the second line should not affect the position of the underline on line one. <br>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1572302"> Bug 1572303</a> </p>
+      <div dir="rtl">fی sعلي</div>
+  </body>
+</html>
diff --git a/layout/reftests/text-decoration/skip-ink-multiline-position.html b/layout/reftests/text-decoration/skip-ink-multiline-position.html
new file mode 100644
index 000000000000..95d7d90552e1
--- /dev/null
+++ b/layout/reftests/text-decoration/skip-ink-multiline-position.html
@@ -0,0 +1,26 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Test case for text-decoration-skip-ink: text on the second line should not change the position of the first line's underline</title>
+    <style>
+     @font-face {
+         font-family: awami;
+         src: url("../fonts/AwamiNastaliq-Regular.woff");
+     }
+     div{
+         font: 36px/2 awami, sans-serif;
+         unicode-bidi:bidi-override;
+         width: 70px;
+         height: 70px;
+         overflow: hidden;
+         text-decoration: red underline;
+         text-underline-offset: -0.5em;
+     }
+    </style>
+  </head>
+  <body>
+      <p>Adding more characters on the second line should not affect the position of the underline on line one. <br>See <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1572302"> Bug 1572303</a> </p>
+      <div dir="rtl">fی علي</div>
+  </body>
+</html>
diff --git a/layout/reftests/text-decoration/skip-ink-vertical-align-ref.html b/layout/reftests/text-decoration/skip-ink-vertical-align-ref.html
new file mode 100644
index 000000000000..ea4952ab2948
--- /dev/null
+++ b/layout/reftests/text-decoration/skip-ink-vertical-align-ref.html
@@ -0,0 +1,20 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Reference case for text-decoration-skip-ink: skip-ink should detect and work with vertical-align</title>
+    <style>
+     div{
+         font: 48px/2 Times;
+         text-decoration: purple underline;
+         text-decoration-skip-ink: none;
+     }
+     span{
+         vertical-align: super;
+     }
+    </style>
+  </head>
+  <body>
+      <p>Ink should not be skipped when vertical-align moves text away from the underline</p>
+      <div>test <span>pgqy</span> test</div>
+  </body>
+</html>
diff --git a/layout/reftests/text-decoration/skip-ink-vertical-align.html b/layout/reftests/text-decoration/skip-ink-vertical-align.html
new file mode 100644
index 000000000000..72932f95ef5d
--- /dev/null
+++ b/layout/reftests/text-decoration/skip-ink-vertical-align.html
@@ -0,0 +1,19 @@
+<!DOCTYPE HTML>
+<html>
+  <head>
+    <title>Test case for text-decoration-skip-ink: skip-ink should detect and work with vertical-align</title>
+    <style>
+     div{
+         font: 48px/2 Times;
+         text-decoration: purple underline;
+     }
+     span{
+         vertical-align: super;
+     }
+    </style>
+  </head>
+  <body>
+    <p>Ink should not be skipped when vertical-align moves text away from the underline</p>
+    <div>test <span>pgqy</span> test</div>
+  </body>
+</html>
