diff --git a/toolkit/components/satchel/test/test_datalist_readonly_change.html b/toolkit/components/satchel/test/test_datalist_readonly_change.html
index 6c3f996719f1..ab468e8ff6fc 100644
--- a/toolkit/components/satchel/test/test_datalist_readonly_change.html
+++ b/toolkit/components/satchel/test/test_datalist_readonly_change.html
@@ -1,75 +1,44 @@
 <!DOCTYPE HTML>
-<title>Dynamic change to readonly doesn't prevent datalist to keep working</title>
-<script src="/tests/SimpleTest/SimpleTest.js"></script>
-<script src="/tests/SimpleTest/EventUtils.js"></script>
-<script src="satchel_common.js"></script>
-<link rel="stylesheet" href="/tests/SimpleTest/test.css" />
-<input readonly list="suggest" type="text" name="field1">
-<datalist id="suggest">
-  <option value="First"></option>
-  <option value="Second"></option>
-  <option value="Secomundo"></option>
-</datalist>
-<pre id="test">
-<script class="testbody">
-const input = document.querySelector("input");
+<html>
 
-SimpleTest.waitForExplicitFinish();
-
-var expectingPopup = null;
-
-function expectPopup() {
-  info("expecting a popup");
-  return new Promise(resolve => {
-    expectingPopup = resolve;
-  });
-}
-
-var testNum = 0;
-
-function popupShownListener() {
-  info("popup shown for test " + testNum);
-  if (expectingPopup) {
-    expectingPopup();
-    expectingPopup = null;
-  } else {
-    ok(false, "Autocomplete popup not expected during test " + testNum);
-  }
-}
-
-registerPopupShownListener(popupShownListener);
-
-function checkMenuEntries(expectedValues) {
-  let actualValues = getMenuEntries();
-  is(actualValues.length, expectedValues.length, testNum + " Checking length of expected menu");
-  for (let i = 0; i < expectedValues.length; i++) {
-    is(actualValues[i], expectedValues[i], testNum + " Checking menu entry #" + i);
-  }
-}
+<head>
+  <title>Dynamic change to readonly doesn't prevent datalist to keep working</title>
+  <script src="/tests/SimpleTest/SimpleTest.js"></script>
+  <script src="/tests/SimpleTest/EventUtils.js"></script>
+  <script src="satchel_common.js"></script>
+  <link rel="stylesheet" href="/tests/SimpleTest/test.css" />
+</head>
 
+<body>
+  <input readonly list="suggest" type="text" name="field1">
+  <datalist id="suggest">
+    <option value="First"></option>
+    <option value="Second"></option>
+    <option value="Secomundo"></option>
+  </datalist>
+<script>
 function oneTick() {
   return new Promise(resolve => SimpleTest.executeSoon(resolve));
 }
 
-async function runTests() {
-  input.focus();
+add_task(async function readonly() {
+  let input = await openPopupOn("input", { expectPopup: false });
   ok(input.readOnly, "Input should be readonly");
-  is(document.activeElement, input, "Input should be focused");
+
   input.removeAttribute("readonly");
-  await oneTick(); // AttributeChanged takes control of the input again off a runnable...
-  isnot(input.readOnly, "Input should not be readonly");
+  await oneTick();
+  // AttributeChanged takes control of the input again off a runnable...
+  ok(!input.readOnly, "Input should not be readonly");
   is(document.activeElement, input, "Should still be focused");
-  synthesizeKey("KEY_ArrowDown");
-  await expectPopup();
-
-  checkMenuEntries(["First", "Second", "Secomundo"]);
-  synthesizeKey("KEY_ArrowDown");
-  synthesizeKey("KEY_Enter");
-  is(input.value, "First");
-  SimpleTest.finish();
-}
-
-SimpleTest.waitForFocus(runTests);
+  input = await openPopupOn("input");
+  assertAutocompleteItems("First", "Second", "Secomundo");
+  assertValueAfterKeys(
+    input,
+    ["KEY_ArrowDown", "KEY_Enter"],
+    "First");
+});
 
 </script>
-</pre>
+</body>
+
+</html>
