1 files changed, 45 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-font-metrics-002.html b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-font-metrics-002.html
new file mode 100644
index 0000000000..58b2db5ce4
--- /dev/null
+++ b/testing/web-platform/tests/css/css-highlight-api/painting/custom-highlight-font-metrics-002.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>CSS Highlight API Test: </title>
+<link rel="help" href="https://drafts.csswg.org/css-highlight-api-1/">
+<link rel="help" href="https://drafts.csswg.org/css-pseudo/#highlight-styling">
+<link rel="match" href="custom-highlight-font-metrics-002-ref.html">
+<meta name="assert" value="fonts relative units take the correct values, with correct cascade">
+<meta name="fuzzy" content="0-128;0-8">
+<head>
+  <style>
+    :root {
+      font-size: 16px;
+    }
+    div {
+      margin: 40px;
+      font-size: 20px;
+    }
+    ::highlight(highlight1) {
+      text-underline-offset: 0.5em;
+      text-decoration-line: underline;
+      text-decoration-color: green;
+      text-decoration-thickness: 0.25rem;
+    }
+    #h2::highlight(highlight1) {
+      text-underline-offset: 1.0em;
+      text-decoration-line: underline;
+      text-decoration-color: blue;
+      text-decoration-thickness: 0.125rem;
+    }
+  </style>
+</head>
+<body>
+  <div id="h1">A green 10px offset underline 4px thick</div>
+  <div id="h2">A blue 20px offset underline 2px thick</div>
+  <script>
+    let r1 = new Range();
+    r1.setStart(h1, 0);
+    r1.setEnd(h1, 1);
+    let r2 = new Range();
+    r2.setStart(h2, 0);
+    r2.setEnd(h2, 1);
+    CSS.highlights.set("highlight1", new Highlight(r1, r2));
+  </script>
+</body>
+</html>
+\ No newline at end of file