diff --git a/service-workers/service-worker/claim-fetch.https.html b/service-workers/service-worker/claim-fetch.https.html
index 400b593ac96194..ae0082df06bf79 100644
--- a/service-workers/service-worker/claim-fetch.https.html
+++ b/service-workers/service-worker/claim-fetch.https.html
@@ -1,52 +1,46 @@
 <!doctype html>
 <meta charset=utf-8>
 <title></title>
+<meta name="timeout" content="long">
 <script src="/resources/testharness.js"></script>
 <script src="/resources/testharnessreport.js"></script>
 <script src="resources/test-helpers.sub.js"></script>
 <body>
 <script>
 
-async function try_fetch(fetch_func, path) {
+async function tryFetch(fetchFunc, path) {
   let response;
   try {
-   response = await fetch_func(path);
+   response = await fetchFunc(path);
   } catch (err) {
     throw (`fetch() threw: ${err}`);
   }
 
-  let response_text;
+  let responseText;
   try {
-   response_text = await response.text();
+   responseText = await response.text();
   } catch (err) {
    throw (`text() threw: ${err}`);
   }
 
-  return response_text;
+  return responseText;
 }
 
 promise_test(async function(t) {
-  let frame;
   const scope = 'resources/';
   const script = 'resources/claim-worker.js';
-  t.add_cleanup(async () => {
-    if (frame)
-      frame.remove();
-    return service_worker_unregister(t, scope);
-  });
-
   const resource = 'simple.txt';
 
   // Create the test frame.
-  await service_worker_unregister(t, scope);
-  frame = await with_iframe('resources/blank.html');
+  const frame = await with_iframe('resources/blank.html');
+  t.add_cleanup(() => frame.remove());
 
   // Check the controller and test with fetch.
   assert_equals(frame.contentWindow.navigator.controller, undefined,
                 'Should have no controller.');
   let response;
   try {
-    response = await try_fetch(frame.contentWindow.fetch, resource);
+    response = await tryFetch(frame.contentWindow.fetch, resource);
   } catch (err) {
     assert_unreached(`uncontrolled fetch failed: ${err}`);
   }
@@ -54,27 +48,37 @@
                 'fetch() should not be intercepted.');
 
   // Register a service worker.
-  const registration = await navigator.serviceWorker.register(script, {scope});
+  const registration =
+    await service_worker_unregister_and_register(t, script, scope);
+  t.add_cleanup(() => registration.unregister());
   const worker = registration.installing;
   await wait_for_state(t, worker, 'activated');
 
+  // Register a controllerchange event to wait until the controller is updated
+  // and check if the frame is controlled by a service worker.
+  const controllerChanged = new Promise((resolve) => {
+    frame.contentWindow.navigator.serviceWorker.oncontrollerchange = () => {
+      resolve(frame.contentWindow.navigator.serviceWorker.controller);
+    };
+  });
+
   // Tell the service worker to claim the iframe.
-  const saw_message = new Promise((resolve) => {
+  const sawMessage = new Promise((resolve) => {
     const channel = new MessageChannel();
     channel.port1.onmessage = t.step_func((event) => {
       resolve(event.data);
     });
     worker.postMessage({port: channel.port2}, [channel.port2]);
   });
-  const data = await saw_message;
+  const data = await sawMessage;
   assert_equals(data, 'PASS', 'Worker call to claim() should fulfill.');
 
-  // Check the controller and test with fetch.
-  const controller = frame.contentWindow.navigator.serviceWorker.controller;
+  // Check if the controller is updated after claim() and test with fetch.
+  const controller = await controllerChanged;
   assert_true(controller instanceof frame.contentWindow.ServiceWorker,
               'iframe should be controlled.');
   try {
-    response = await try_fetch(frame.contentWindow.fetch, resource);
+    response = await tryFetch(frame.contentWindow.fetch, resource);
   } catch (err) {
     assert_unreached(`controlled fetch failed: ${err}`);
   }
