Bug 1572800: Part 0: Add text-decoration-skip-ink: none to currently failing test cases r=dholbert
authorCharlie Marlow <cmarlow@mozilla.com>
Wed, 14 Aug 2019 17:14:20 +0000
changeset 488088 97d2c247864301ab241167615ddeee864297aa8b
parent 488087 dd05adb4c48bc9191cfee2a2f21010f2ac4a47f0
child 488089 ac9ebd3dead055213bc09572a1afe54b1530d988
push id113900
push usercbrindusan@mozilla.com
push dateThu, 15 Aug 2019 09:53:50 +0000
treeherdermozilla-inbound@0db07ff50ab5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1572800
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1572800: Part 0: Add text-decoration-skip-ink: none to currently failing test cases r=dholbert Differential Revision: https://phabricator.services.mozilla.com/D41880
layout/reftests/bugs/456147-ref.html
layout/reftests/bugs/456147.css
layout/reftests/selection/rtl-selection-with-decoration-ref.html
layout/reftests/selection/rtl-selection-with-decoration.html
layout/reftests/selection/semitransparent-decoration-line-ref.html
layout/reftests/selection/semitransparent-decoration-line.html
layout/reftests/svg/text/pseudo-first-line-2-ref.svg
layout/reftests/svg/text/pseudo-first-line-2.svg
layout/reftests/text-decoration/decoration-color-quirks-ref.html
layout/reftests/text-decoration/decoration-color-quirks.html
layout/reftests/text-decoration/decoration-color-standards-ref.html
layout/reftests/text-decoration/decoration-color-standards.html
layout/reftests/text-decoration/decoration-css21-ref.html
layout/reftests/text-decoration/decoration-css21.html
layout/reftests/text-decoration/decoration-style-quirks-ref.html
layout/reftests/text-decoration/decoration-style-quirks.html
layout/reftests/text-decoration/text-decoration-propagation-1-quirks-ref.html
layout/reftests/text-decoration/text-decoration-propagation-1-quirks.html
layout/reftests/text-decoration/text-decoration-propagation-1-standards-ref.html
layout/reftests/text-decoration/text-decoration-propagation-1-standards.html
layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
layout/reftests/text-decoration/underline-block-propagation-2-standards.html
layout/reftests/text-overflow/block-padding-ref.html
layout/reftests/text-overflow/block-padding.html
layout/reftests/text-overflow/vertical-decorations-3-ref.html
layout/reftests/text-overflow/vertical-decorations-3.html
layout/reftests/text-shadow/decorations-multiple-zorder-ref.html
layout/reftests/text-shadow/decorations-multiple-zorder.html
testing/web-platform/meta/css/css-text-decor/inheritance.html.ini
testing/web-platform/tests/css/CSS2/text/text-decoration-va-length-002-ref.xht
testing/web-platform/tests/css/CSS2/text/text-decoration-va-length-002.xht
testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html
testing/web-platform/tests/css/css-text/shaping/shaping-014.html
--- a/layout/reftests/bugs/456147-ref.html
+++ b/layout/reftests/bugs/456147-ref.html
@@ -1,18 +1,19 @@
 <!doctype html>
 <html><head><title>Colored strikethrough test</title>
 <style>
 /* In order to ensure consistency between the HTML reference and XUL
    test case, we explicitly specify all relevant style properties.  */
-* { 
+* {
   margin: 0;
   padding: 0;
-  border: none; 
-  background-color: transparent; 
+  border: none;
+  background-color: transparent;
+  text-decoration-skip-ink: none;
 }
 body {
   padding: 8px;
   background-color: white;
 }
 span {
   color: black;
   font: normal normal normal 12pt/14pt serif;
--- a/layout/reftests/bugs/456147.css
+++ b/layout/reftests/bugs/456147.css
@@ -1,25 +1,27 @@
 /* In order to ensure consistency between the HTML reference and XUL
    test case, we explicitly specify all relevant style properties.  */
-* { 
+* {
   margin: 0;
   padding: 0;
-  border: none; 
-  background-color: transparent; 
+  border: none;
+  background-color: transparent;
 }
 window {
   padding: 8px;
   background-color: white;
 }
 label, text, description {
   color: black;
   font: normal normal normal 12pt/14pt serif;
   height: 30px;
 }
 vbox#under {
   text-decoration: underline;
+  text-decoration-skip-ink: none;
   color: orange;
 }
 vbox#strike {
   text-decoration: line-through;
+  text-decoration-skip-ink: none;
   color: blue;
 }
--- a/layout/reftests/selection/rtl-selection-with-decoration-ref.html
+++ b/layout/reftests/selection/rtl-selection-with-decoration-ref.html
@@ -2,16 +2,17 @@
 <html>
   <head>
     <meta charset="utf-8" />
     <title>rtl-selection-with-decoration-ref</title>
     <style>
       p {
         font-size: 2em;
         text-decoration-color: rgba(0, 0, 0, 0.3);
+        text-decoration-skip-ink: none;
       }
       #text1 {
         text-decoration-line: line-through underline;
       }
       #text2 {
         text-decoration-line: line-through overline;
       }
     </style>
--- a/layout/reftests/selection/rtl-selection-with-decoration.html
+++ b/layout/reftests/selection/rtl-selection-with-decoration.html
@@ -2,16 +2,17 @@
 <html>
   <head>
     <meta charset="utf-8" />
     <title>rtl-selection-with-decoration</title>
     <style>
       p {
         font-size: 2em;
         text-decoration-color: rgba(0, 0, 0, 0.3);
+        text-decoration-skip-ink: none;
       }
       #text1 {
         text-decoration-line: line-through underline;
       }
       #text2 {
         text-decoration-line: line-through overline;
       }
       ::-moz-selection {
--- a/layout/reftests/selection/semitransparent-decoration-line-ref.html
+++ b/layout/reftests/selection/semitransparent-decoration-line-ref.html
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>semitransparent-decoration-line-ref</title>
     <style>
+      *{
+         text-decoration-skip-ink: none;
+      }
       .underline {
         text-decoration: underline rgba(0,0,0,0.3);
         font-size: 2em;
       }
       .overline {
         text-decoration: overline rgba(0,0,0,0.3);
         font-size: 2em;
       }
--- a/layout/reftests/selection/semitransparent-decoration-line.html
+++ b/layout/reftests/selection/semitransparent-decoration-line.html
@@ -1,14 +1,17 @@
 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8" />
     <title>semitransparent-decoration-line</title>
     <style>
+      * {
+         text-decoration-skip-ink: none;
+      }
       .underline {
         text-decoration: underline rgba(0,0,0,0.3);
         font-size: 2em;
       }
       .overline {
         text-decoration: overline rgba(0,0,0,0.3);
         font-size: 2em;
       }
--- a/layout/reftests/svg/text/pseudo-first-line-2-ref.svg
+++ b/layout/reftests/svg/text/pseudo-first-line-2-ref.svg
@@ -1,10 +1,10 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
-  <g style="font: 16px sans-serif">
+  <g style="font: 16px sans-serif; text-decoration-skip-ink: none;">
     <text x="100" y="100" text-decoration="underline">hello there everyone</text>
     <text x="100" y="120">and good night</text>
   </g>
 </svg>
--- a/layout/reftests/svg/text/pseudo-first-line-2.svg
+++ b/layout/reftests/svg/text/pseudo-first-line-2.svg
@@ -1,11 +1,14 @@
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <svg xmlns="http://www.w3.org/2000/svg" width="700" height="200">
   <style>
-    text::first-line { text-decoration: underline }
+    text::first-line {
+       text-decoration: underline;
+       text-decoration-skip-ink: none;
+    }
   </style>
   <text x="100" y="100" style="font: 16px sans-serif; white-space: pre-line; line-height: 20px">hello there everyone
     and good night</text>
 </svg>
--- a/layout/reftests/text-decoration/decoration-color-quirks-ref.html
+++ b/layout/reftests/text-decoration/decoration-color-quirks-ref.html
@@ -1,8 +1,13 @@
+<style>
+ *{
+     text-decoration-skip-ink: none;
+ }
+</style>
 <p style="color: #008000;
           text-decoration: underline line-through overline;">
   <span style="color: #0000FF;">This blue text has green decoration lines</span>
 </p>
 <p style="color: yellow;
           text-decoration: underline line-through overline;">
   <span style="color: red;">This red text has yellow decoration lines</span>
 </p>
--- a/layout/reftests/text-decoration/decoration-color-quirks.html
+++ b/layout/reftests/text-decoration/decoration-color-quirks.html
@@ -1,8 +1,13 @@
+<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;">
--- a/layout/reftests/text-decoration/decoration-color-standards-ref.html
+++ b/layout/reftests/text-decoration/decoration-color-standards-ref.html
@@ -1,9 +1,14 @@
 <!DOCTYPE html>
+<style>
+ *{
+     text-decoration-skip-ink: none;
+ }
+</style>
 <p style="color: #008000;
           text-decoration: underline line-through overline;">
   <span style="color: #0000FF;">This blue text has green decoration lines</span>
 </p>
 <p style="color: yellow;
           text-decoration: underline line-through overline;">
   <span style="color: red;">This red text has yellow decoration lines</span>
 </p>
--- a/layout/reftests/text-decoration/decoration-color-standards.html
+++ b/layout/reftests/text-decoration/decoration-color-standards.html
@@ -1,9 +1,14 @@
 <!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;">
--- a/layout/reftests/text-decoration/decoration-css21-ref.html
+++ b/layout/reftests/text-decoration/decoration-css21-ref.html
@@ -3,16 +3,17 @@
 		<style>
 			.sup {vertical-align: super;}
 			.transparent {color: transparent;}
 			.alllines {text-decoration:line-through overline underline; color: purple;}
 			.highRel {position: relative; top: -4em;}
 			.lowRel {position: relative; top: 4em;}
 			.lowVert {vertical-align: -4em;}
 			.highVert {vertical-align: 4em;}
+      * { text-decoration-skip-ink: none;}
 		</style>
 	</head>
 	<body>
 		<p>
 			<span style="text-decoration: underline">Underlined <span class="transparent">still underlined</span></span>
 			<span style="text-decoration: underline">Underlined <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
 			<span class="sup transparent">Offset</span>
 		</p>
--- a/layout/reftests/text-decoration/decoration-css21.html
+++ b/layout/reftests/text-decoration/decoration-css21.html
@@ -3,16 +3,17 @@
 		<style>
 			.sup {vertical-align: super;}
 			.transparent {color: transparent;}
 			.alllines {text-decoration:line-through overline underline; color: purple;}
 			.highRel {position: relative; top: -4em;}
 			.lowRel {position: relative; top: 4em;}
 			.lowVert {vertical-align: -4em;}
 			.highVert {vertical-align: 4em;}
+      * { text-decoration-skip-ink: none;}
 		</style>
 	</head>
 	<body>
 		<p>
 			<span style="text-decoration: underline">Underlined <span class="sup transparent">still underlined</span></span>
 			<span style="text-decoration: underline">Underlined <span class="sup">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
 		</p>
 		<p>
--- a/layout/reftests/text-decoration/decoration-style-quirks-ref.html
+++ b/layout/reftests/text-decoration/decoration-style-quirks-ref.html
@@ -1,8 +1,13 @@
+<style>
+ p{
+     text-decoration-skip-ink: none;
+ }
+</style>
 <p>
   Here is specified the decoration style as dotted but no decoration lines,
   however,
   <span style="font-size: 2em;
                text-decoration: underline line-through overline;
                text-decoration-style: solid;">
     here has solid decoration lines</span>,
   and here has no decoration lines.
--- a/layout/reftests/text-decoration/decoration-style-quirks.html
+++ b/layout/reftests/text-decoration/decoration-style-quirks.html
@@ -1,8 +1,13 @@
+<style>
+ p{
+     text-decoration-skip-ink: none;
+ }
+</style>
 <p style="text-decoration-style: dotted;">
   Here is specified the decoration style as dotted but no decoration lines, however,
   <span style="font-size: 2em;
                text-decoration: underline line-through overline;">
     here has solid decoration lines</span>,
   and here has no decoration lines.
 </p>
 <p style="text-decoration-style: dashed;">
--- a/layout/reftests/text-decoration/text-decoration-propagation-1-quirks-ref.html
+++ b/layout/reftests/text-decoration/text-decoration-propagation-1-quirks-ref.html
@@ -1,10 +1,14 @@
 <title>text-decoration</title>
-
+<style>
+ *{
+     text-decoration-skip-ink: none;
+ }
+</style>
 <h1>text-decoration on a block</h1>
 
   <u>text directly in parent</u>
 
   <div><u>text in block</u></div>
 
   <div style="float:left; clear: left">text in float</div>
   <div style="clear:left"></div>
--- a/layout/reftests/text-decoration/text-decoration-propagation-1-quirks.html
+++ b/layout/reftests/text-decoration/text-decoration-propagation-1-quirks.html
@@ -1,10 +1,14 @@
 <title>text-decoration</title>
-
+<style>
+ *{
+     text-decoration-skip-ink: none;
+ }
+</style>
 <h1>text-decoration on a block</h1>
 
 <div style="text-decoration: underline">
 
   text directly in parent
 
   <div>text in block</div>
 
--- a/layout/reftests/text-decoration/text-decoration-propagation-1-standards-ref.html
+++ b/layout/reftests/text-decoration/text-decoration-propagation-1-standards-ref.html
@@ -1,11 +1,15 @@
 <!DOCTYPE HTML>
 <title>text-decoration</title>
-
+<style>
+ *{
+     text-decoration-skip-ink: none;
+ }
+</style>
 <h1>text-decoration on a block</h1>
 
   <u>text directly in parent</u>
 
   <div><u>text in block</u></div>
 
   <div style="float:left; clear: left">text in float</div>
   <div style="clear:left"></div>
--- a/layout/reftests/text-decoration/text-decoration-propagation-1-standards.html
+++ b/layout/reftests/text-decoration/text-decoration-propagation-1-standards.html
@@ -1,11 +1,15 @@
 <!DOCTYPE html>
 <title>text-decoration</title>
-
+<style>
+ *{
+     text-decoration-skip-ink: none;
+ }
+</style>
 <h1>text-decoration on a block</h1>
 
 <div style="text-decoration: underline">
 
   text directly in parent
 
   <div>text in block</div>
 
--- a/layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-standards-ref.html
@@ -1,14 +1,15 @@
 <!DOCTYPE HTML>
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
 textarea { -moz-appearance: none }
 textarea + textarea { margin-left: 10px }
+* { text-decoration-skip-ink: none }
 </style>
 </head>
 <body>
 <!-- t-d should not propagate to the content of a form control -->
 <form>
 <span style="text-decoration:underline">This text should be underlined.</span><br>
 <textarea rows="2" cols="40">This text should not be underlined.</textarea
 ><textarea rows="2" cols="40" style="text-decoration:line-through"
--- a/layout/reftests/text-decoration/underline-block-propagation-2-standards.html
+++ b/layout/reftests/text-decoration/underline-block-propagation-2-standards.html
@@ -1,14 +1,15 @@
 <!DOCTYPE HTML>
 <html><head>
 <title>More tests of propagation of text-decoration</title>
 <style>
 textarea { -moz-appearance: none }
 textarea + textarea { margin-left: 10px }
+* { text-decoration-skip-ink: none }
 </style>
 </head>
 <body>
 <!-- t-d should not propagate to the content of a form control -->
 <form style="text-decoration:underline">
 This text should be underlined.<br>
 <textarea rows="2" cols="40">This text should not be underlined.</textarea
 ><textarea rows="2" cols="40" style="text-decoration:line-through"
--- a/layout/reftests/text-overflow/block-padding-ref.html
+++ b/layout/reftests/text-overflow/block-padding-ref.html
@@ -8,22 +8,22 @@
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>text-overflow: text-overflow block padding </title>
 <style type="text/css">
 @font-face {
   font-family: DejaVuSansMono;
   src: url(../fonts/DejaVuSansMono.woff);
 }
 html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; text-decoration-skip-ink: none;
 }
 body { width:24ch; overflow:hidden; }
 
-.test { 
-  overflow: hidden; 
+.test {
+  overflow: hidden;
   white-space: nowrap;
   padding-left: 1ch;
   padding-right: 3ch;
   height: 3em;
   margin-bottom:1em;
 }
 .s {
   overflow: auto; position:relative;
--- a/layout/reftests/text-overflow/block-padding.html
+++ b/layout/reftests/text-overflow/block-padding.html
@@ -10,32 +10,32 @@
 <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <title>text-overflow: text-overflow block padding </title>
 <style type="text/css">
 @font-face {
   font-family: DejaVuSansMono;
   src: url(../fonts/DejaVuSansMono.woff);
 }
 html,body {
-    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono;
+    color:black; background-color:white; font-size:16px; padding:0; margin:0; font-family:DejaVuSansMono; text-decoration-skip-ink: none;
 }
 body { width:24ch; overflow:hidden; }
 
-.test { 
-  overflow: hidden; 
+.test {
+  overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
   text-decoration: line-through;
   padding-left: 1ch;
   padding-right: 3ch;
   height: 3em;
   margin-bottom:1em;
 }
 .s {
-  overflow: auto; 
+  overflow: auto;
 }
 span {
   text-decoration: underline overline;
   background:yellow;
 }
 .rtl {
   direction:rtl;
 }
--- a/layout/reftests/text-overflow/vertical-decorations-3-ref.html
+++ b/layout/reftests/text-overflow/vertical-decorations-3-ref.html
@@ -7,16 +7,17 @@ div {
   font: 25px monospace;
   white-space: pre;
   overflow: hidden;
   text-overflow: ellipsis;
   border: 1px solid gray;
   padding: 5px;
   display: inline-block;
   vertical-align: top;
+  text-decoration-skip-ink: none;
 }
 .vrl {
   writing-mode: vertical-rl;
   text-orientation: upright;
   height: 6em;
 }
 </style>
 </head>
--- a/layout/reftests/text-overflow/vertical-decorations-3.html
+++ b/layout/reftests/text-overflow/vertical-decorations-3.html
@@ -7,16 +7,17 @@ div {
   font: 25px monospace;
   white-space: pre;
   overflow: hidden;
   text-overflow: ellipsis;
   border: 1px solid gray;
   padding: 5px;
   display: inline-block;
   vertical-align: top;
+  text-decoration-skip-ink:none;
 }
 .vrl {
   writing-mode: vertical-rl;
   text-orientation: upright;
   height: 6em;
 }
 </style>
 </head>
--- a/layout/reftests/text-shadow/decorations-multiple-zorder-ref.html
+++ b/layout/reftests/text-shadow/decorations-multiple-zorder-ref.html
@@ -1,10 +1,14 @@
 <!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.
--- a/layout/reftests/text-shadow/decorations-multiple-zorder.html
+++ b/layout/reftests/text-shadow/decorations-multiple-zorder.html
@@ -1,3 +1,7 @@
 <!DOCTYPE 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>
--- a/testing/web-platform/meta/css/css-text-decor/inheritance.html.ini
+++ b/testing/web-platform/meta/css/css-text-decor/inheritance.html.ini
@@ -1,13 +1,8 @@
 [inheritance.html]
+  prefs: [layout.css.text-decoration-skip-ink.enabled:true]
   [Property text-underline-position has initial value auto]
     expected: FAIL
 
-  [Property text-decoration-skip-ink inherits]
-    expected: FAIL
-
-  [Property text-decoration-skip-ink has initial value auto]
-    expected: FAIL
-
   [Property text-underline-position inherits]
     expected: FAIL
 
--- a/testing/web-platform/tests/css/CSS2/text/text-decoration-va-length-002-ref.xht
+++ b/testing/web-platform/tests/css/CSS2/text/text-decoration-va-length-002-ref.xht
@@ -10,16 +10,17 @@
 
   <style type="text/css"><![CDATA[
   div
   {
   color: black;
   font: 3.75em/0.4 serif;
   margin-left: 1em;
   text-decoration: underline;
+  text-decoration-skip-ink: none;
   }
 
   span
   {
   color: white;
   font-size: 0.4em;
   vertical-align: 1em;
   }
--- a/testing/web-platform/tests/css/CSS2/text/text-decoration-va-length-002.xht
+++ b/testing/web-platform/tests/css/CSS2/text/text-decoration-va-length-002.xht
@@ -16,16 +16,17 @@
 
   <style type="text/css"><![CDATA[
   div
   {
   color: black;
   font: 3.75em/0.4 serif;
   margin-left: 1em;
   text-decoration: underline;
+  text-decoration-skip-ink: none;
   }
 
   span#wrapper
   {
   color: white;
   font-size: 0.4em;
   }
 
@@ -44,9 +45,9 @@
 
   <div>
     <span id="wrapper">
       <span id="high">abcde</span><span id="up">fghij</span><span id="baseline">klmno</span>
     </span>
   </div>
 
  </body>
-</html>
\ No newline at end of file
+</html>
--- a/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html
+++ b/testing/web-platform/tests/css/css-text/shaping/reference/shaping-014-ref.html
@@ -4,17 +4,17 @@
 <meta charset="utf-8">
 <title>reference</title>
 <style type="text/css">
 @font-face {
     font-family: 'csstest_noto';
     src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
     }
 .test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
-.styled { text-decoration: underline; }
+.styled { text-decoration: underline; text-decoration-skip-ink: none; }
 </style>
 <link rel=mismatch href="shaping-014-sanity-ref.html">
 </head>
 <body>
 <p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
 
 <div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
 <div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
--- a/testing/web-platform/tests/css/css-text/shaping/shaping-014.html
+++ b/testing/web-platform/tests/css/css-text/shaping/shaping-014.html
@@ -9,17 +9,17 @@
 <link rel="match" href="reference/shaping-014-ref.html">
 <style type="text/css">
 @font-face {
     font-family: 'csstest_noto';
     src: url('/fonts/noto/NotoNaskhArabic-regular.woff2') format('woff2');
     }
 .test, .ref { border: 1px solid #02D7F6;  margin: 20px;  padding: 10px; width: 3em; font-size: 120px; font-family: "csstest_noto"; }
 /* the CSS above is not part of the test */
-.styled { text-decoration: underline; }
+.styled { text-decoration: underline; text-decoration-skip-ink: none; }
 </style>
 </head>
 <body>
 <p class="instructions">Test passes if the three Arabic characters in each box join, making the two boxes identical.</p>
 
 <div class="test" lang="ar" dir="rtl">ع<span class="styled">ع</span>ع</div>
 <div class="ref" lang="ar" dir="rtl">ع&zwj;<span class="styled">&zwj;ع&zwj;</span>&zwj;ع</div>
 <!-- Notes: