1 files changed, 29 insertions, 6 deletions
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
index 9fe2bdcd5f..ba25037976 100644
--- a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-painting-vertical-writing-mode-001.html
@@ -5,21 +5,44 @@
 <link rel="match" href="custom-highlight-painting-vertical-writing-mode-001-ref.html">
 <link rel="stylesheet" href="../../css-pseudo/support/highlights.css">
 <meta name="assert" value="::highlight overlay is painted correctly when the highlighted text is in a vertical writing mode">
+<meta name="fuzzy" content="0-255;0-18">
 <style>
-  :root {
+  #verticalRL {
       writing-mode: vertical-rl;
   }
+  #verticalLR {
+      writing-mode: vertical-lr;
+  }
+  #sidewaysRL {
+      writing-mode: sideways-rl;
+  }
+  #sidewaysLR {
+      writing-mode: sideways-lr;
+  }
   ::highlight(example-highlight) {
     background-color: yellow;
     color: blue;
   }
 </style>
 <body>
-<div class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="verticalRL" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="verticalLR" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="sidewaysRL" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
+<div id="sidewaysLR" class="highlight_reftest"><span>One </span><span>two </span><span>three…</span></div>
 <script>
-  let r = new Range();
-  r.setStart(document.querySelector("div"), 0);
-  r.setEnd(document.querySelector("div"), 2);
+  let verticalRLRange = new Range();
+  verticalRLRange.setStart(verticalRL, 0);
+  verticalRLRange.setEnd(verticalRL, 2);
+  let verticalLRRange = new Range();
+  verticalLRRange.setStart(verticalLR, 0);
+  verticalLRRange.setEnd(verticalLR, 2);
+  let sidewaysRLRange = new Range();
+  sidewaysRLRange.setStart(sidewaysRL, 0);
+  sidewaysRLRange.setEnd(sidewaysRL, 2);
+  let sidewaysLRRange = new Range();
+  sidewaysLRRange.setStart(sidewaysLR, 0);
+  sidewaysLRRange.setEnd(sidewaysLR, 2);
 
-  CSS.highlights.set("example-highlight", new Highlight(r));
+  CSS.highlights.set("example-highlight",
+    new Highlight(verticalRLRange, verticalLRRange, sidewaysLRRange, sidewaysRLRange));
 </script>