diff --git a/css/css-text/text-autospace/text-autospace-ligature-001-ref.html b/css/css-text/text-autospace/text-autospace-ligature-001-ref.html
new file mode 100644
index 00000000000000..286cdfc104bd33
--- /dev/null
+++ b/css/css-text/text-autospace/text-autospace-ligature-001-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
+<style>
+@font-face {
+  font-family: ligature-font;
+  src: url('../../css-fonts/support/fonts/Lato-Medium-Liga.ttf');
+}
+#test-container {
+  font-family: ligature-font;
+  font-size: 40px;
+  text-autospace: no-autospace;
+}
+.spacing-right {
+  margin-right: 0.125em;
+}
+.spacing-left {
+  margin-left: 0.125em;
+}
+
+</style>
+<div id="test-container">
+  <div>国<span class="spacing-left">fi</span></div>
+  <div>国fi</div>
+  <div><span class="spacing-right">fi</span>国</div>
+  <div><span>fi</span>国</div>
+  <div>国<span class="spacing-left spacing-right">fi</span>国</div>
+  <div>国<span>fi</span>国</div>
+</div>
diff --git a/css/css-text/text-autospace/text-autospace-ligature-001.html b/css/css-text/text-autospace/text-autospace-ligature-001.html
index 0d431f65d6d046..d9acc35626c711 100644
--- a/css/css-text/text-autospace/text-autospace-ligature-001.html
+++ b/css/css-text/text-autospace/text-autospace-ligature-001.html
@@ -1,8 +1,7 @@
 <!DOCTYPE html>
 <meta charset="utf-8">
 <link rel="help" href="https://drafts.csswg.org/css-text-4/#text-autospace-property">
-<script src="/resources/testharness.js"></script>
-<script src="/resources/testharnessreport.js"></script>
+<link rel="match" href="text-autospace-ligature-001-ref.html">
 <style>
 @font-face {
   font-family: ligature-font;
@@ -11,77 +10,17 @@
 #test-container {
   font-family: ligature-font;
   font-size: 40px;
+  text-autospace: normal;
 }
 .base {
   text-autospace: no-autospace;
 }
 </style>
 <div id="test-container">
-  <div id="test1">国fi</div>
-  <div id="test2">fi国</div>
-  <div id="test3">国fi国</div>
+  <div>国fi</div>
+  <div class="base">国fi</div>
+  <div>fi国</div>
+  <div class="base">fi国</div>
+  <div>国fi国</div>
+  <div class="base">国fi国</div>
 </div>
-<script>
-function getAdvance(node, start, end) {
-  const range = document.createRange();
-  range.setStart(node, start);
-  range.setEnd(node, end);
-  const bounds = range.getBoundingClientRect();
-  return bounds.width;
-}
-
-class AutoSpaceTest {
-  constructor(id) {
-    const element = document.getElementById(id);
-
-    // Create a base element with the `base` class.
-    const baseElement = element.cloneNode(true);
-    baseElement.removeAttribute('id');
-    baseElement.classList.add('base');
-    element.after(baseElement);
-
-    this.element = element;
-    this.baseElement = baseElement;
-  }
-
-  assert(start, end, spacing) {
-    const node = this.element.firstChild;
-    const advance = getAdvance(node, start, end);
-    const baseNode = this.baseElement.firstChild;
-    const baseAdvance = getAdvance(baseNode, start, end);
-    assert_approx_equals(advance, baseAdvance + spacing, 0.001);
-  }
-}
-
-const test1 = new AutoSpaceTest('test1');
-const test2 = new AutoSpaceTest('test2');
-const test3 = new AutoSpaceTest('test3');
-
-function run() {
-  if (!CSS.supports('text-autospace', 'no-autospace')) {
-    test(() => assert_true(false), 'text-autospace not implemented');
-    return;
-  }
-
-  // The `getBoundingClientRect()` for the middle of a ligature isn't
-  // well-defined. Ensure ligatures are measured as a range.
-  const spacing = 5;
-  test(() => test1.assert(0, 1, spacing));
-  test(() => test1.assert(1, 3, 0));
-
-  test(() => test2.assert(0, 2, spacing));
-  test(() => test2.assert(2, 3, 0));
-
-  test(() => test3.assert(0, 1, spacing));
-  test(() => test3.assert(1, 3, spacing));
-  test(() => test3.assert(3, 4, 0));
-}
-
-setup({explicit_done: true});
-window.addEventListener('load', () => {
-  document.fonts.ready.then(() => {
-    run();
-    done();
-  });
-});
-</script>
