diff --git a/css/css-ui/text-overflow-017.html b/css/css-ui/text-overflow-017.html
index 561d4d0b6fe961..7f61a57620c126 100644
--- a/css/css-ui/text-overflow-017.html
+++ b/css/css-ui/text-overflow-017.html
@@ -1,11 +1,13 @@
 ﻿<!DOCTYPE html>
-<html class="reftest-wait">
+<html>
 <meta charset="utf-8">
 <title>CSS Basic User Interface Test: interacting with the ellipsis</title>
 <link rel="author" title="Florian Rivoal" href="http://florian.rivoal.net/">
 <link rel="help" href="http://www.w3.org/TR/css3-ui/#text-overflow">
-<link rel="match" href="../reference/ref-filled-green-100px-square.xht">
-<meta name="flags" content="ahem interact dom">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
 <meta name="assert" content="Ellipsing must not prevent dispatching of pointer events.">
 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
 <style>
@@ -19,18 +21,28 @@
   font: 100px/1 Ahem;
   color: blue;
 }
-#discard {
+#desc {
   float: left;
 }
 </style>
 
-<div id=discard>First, click the blue box. </div>
-<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
-<div id="test" onclick="green()">   </div>
+<div id="desc">First, click the blue box. </div>
+<div id="test">   </div>
 <script>
-function green() {
-	document.getElementById("test").style.color="green";
-	document.getElementById("discard").remove();
-	document.children[0].className="";
-}
+
+let test = document.getElementById("test");
+
+promise_test(async t => {
+  await document.fonts.ready;
+
+  let clicked = false;
+  test.addEventListener("click", () => {
+    clicked = true;
+  });
+
+  await test_driver.click(test);
+
+  assert_true(clicked);
+});
+
 </script>
