[Gecko Bug 1914322] Perform pending operations when the view transition is animating.

css/css-view-transitions/duplicate-tag-rejects-start.html

@@ -22,29 +22,26 @@
 <script>
 promise_test(async t => {
   assert_implements(document.startViewTransition, "Missing document.startViewTransition");
-  return new Promise((resolve, reject) => {
+
+  first.style = "view-transition-name: target";
+  let transition = document.startViewTransition(() => {
     first.style = "view-transition-name: target";
-    let transition = document.startViewTransition(() => {
-      first.style = "view-transition-name: target";
-      second.style = "view-transition-name: target";
-    });
-
-    // First updateCallbackDone resolves since the callback runs successfully.
-    let updateCallbackDoneResolved = false;
-    transition.updateCallbackDone.then(() => { updateCallbackDoneResolved = true; }, reject);
-
-    // Ready rejects.
-    let readyRejected = false;
-    transition.ready.then(reject, () => {
-      readyRejected = true;
-      assert_true(updateCallbackDoneResolved, "updateCallbackDone should resolve before ready was rejected");
-    });
-
-    // Then finished resolves since updateCallbackDone was already resolved.
-    transition.finished.then(() => {
-      assert_true(readyRejected, "finished should resolve after ready was rejected");
-      resolve();
-    }, reject);
+    second.style = "view-transition-name: target";
   });
+
+  // First updateCallbackDone resolves since the callback runs successfully.
+  let updateCallbackDoneResolved = false;
+  transition.updateCallbackDone.then(() => { updateCallbackDoneResolved = true; }, reject);
+
+  // Ready rejects.
+  let readyRejected = false;
+  transition.ready.then(reject, () => {
+    readyRejected = true;
+    assert_true(updateCallbackDoneResolved, "updateCallbackDone should resolve before ready was rejected");
+  });
+
+  // Then finished resolves since updateCallbackDone was already resolved.
+  await transition.finished;
+  assert_true(readyRejected, "finished should resolve after ready was rejected");
 }, "Two different elements with the same name in the new DOM should skip the transition");
 </script>

css/css-view-transitions/style-inheritance.html

@@ -29,28 +29,26 @@
 </style>
 
 <script>
-promise_test(() => {
+promise_test(async () => {
   assert_implements(document.startViewTransition, "Missing document.startViewTransition");
-  return new Promise(async (resolve, reject) => {
-    let transition = document.startViewTransition();
-    transition.ready.then(() => {
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition").backgroundColor, "rgb(255, 0, 0)", "::view-transition");
-
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").backgroundColor, "rgb(255, 0, 0)", "group");
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").color, "rgb(0, 0, 255)", "group");
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationDuration, "0.321s", "group");
-
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").color, "rgb(0, 0, 255)", "wrapper");
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").overflowX, "clip", "wrapper");
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationDuration, "0.321s", "wrapper");
-
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").overflowX, "clip", "outgoing");
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationDuration, "0.321s", "outgoing");
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").overflowX, "clip", "incoming");
-      assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationDuration, "0.321s", "incoming");
-    });
-    await transition.finished;
-    resolve();
-  });
+  let transition = document.startViewTransition();
+  await transition.ready;
+
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition").backgroundColor, "rgb(255, 0, 0)", "::view-transition");
+
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").backgroundColor, "rgb(255, 0, 0)", "group");
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").color, "rgb(0, 0, 255)", "group");
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-group(root)").animationDuration, "0.321s", "group");
+
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").color, "rgb(0, 0, 255)", "wrapper");
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").overflowX, "clip", "wrapper");
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-image-pair(root)").animationDuration, "0.321s", "wrapper");
+
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").overflowX, "clip", "outgoing");
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-old(root)").animationDuration, "0.321s", "outgoing");
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").overflowX, "clip", "incoming");
+  assert_equals(getComputedStyle(document.documentElement, "::view-transition-new(root)").animationDuration, "0.321s", "incoming");
+
+  await transition.finished;
 }, "style inheritance of pseudo elements");
 </script>

css/css-view-transitions/window-resize-aborts-transition.html

@@ -26,56 +26,53 @@
 promise_test(async t => {
   assert_implements(document.startViewTransition, "Missing document.startViewTransition");
 
-  return new Promise(async (resolve, reject) => {
-    await waitForAtLeastOneFrame(window);
+  await waitForAtLeastOneFrame(window);
 
-    // Open a popup window that we'll use to start a transition
-    await test_driver.bless('Open a popup in a new window', () => {
-        popupWin = window.open('about:blank', 'popup', 'width=300,height=300');
-    });
-    let popupDoc = popupWin.document;
-    popupDoc.documentElement.innerHTML = `
-      <style>
-        html {background-color: red;}
-        html.new {background-color: limegreen;}
+  // Open a popup window that we'll use to start a transition
+  await test_driver.bless('Open a popup in a new window', () => {
+      popupWin = window.open('about:blank', 'popup', 'width=300,height=300');
+  });
+  let popupDoc = popupWin.document;
+  popupDoc.documentElement.innerHTML = `
+    <style>
+      html {background-color: red;}
+      html.new {background-color: limegreen;}
 
-        /* Set a no-op animation to show the old snapshot indefinitely. */
-        html::view-transition-group(*) {animation-duration: 10s;}
-        html::view-transition-new(*) {animation: unset;opacity: 0;}
-        html::view-transition-old(*) {animation-duration: 10s;opacity: 1;}
-      </style>`;
+      /* Set a no-op animation to show the old snapshot indefinitely. */
+      html::view-transition-group(*) {animation-duration: 10s;}
+      html::view-transition-new(*) {animation: unset;opacity: 0;}
+      html::view-transition-old(*) {animation-duration: 10s;opacity: 1;}
+    </style>`;
 
-    if (popupDoc.visibilityState == "hidden") {
-      await new Promise((resolve) => {
-        popupDoc.addEventListener("visibilitychange", resolve, { once: true });
-      });
-    }
-
-    // Start a transition inside the popup.
-    let transition = popupDoc.startViewTransition(() => {
-      popupDoc.documentElement.classList.add('new');
+  if (popupDoc.visibilityState == "hidden") {
+    await new Promise((resolve) => {
+      popupDoc.addEventListener("visibilitychange", resolve, { once: true });
     });
+  }
 
-    let finishResolved = false;
-    transition.finished.then(() => {
-      finishResolved = true;
-    });
+  // Start a transition inside the popup.
+  let transition = popupDoc.startViewTransition(() => {
+    popupDoc.documentElement.classList.add('new');
+  });
+
+  let finishResolved = false;
+  transition.finished.then(() => {
+    finishResolved = true;
+  });
 
-    // Wait for the transition to start animating.
-    await transition.ready;
-    await waitForAtLeastOneFrame(popupWin);
-    await waitForAtLeastOneFrame(popupWin);
+  // Wait for the transition to start animating.
+  await transition.ready;
+  await waitForAtLeastOneFrame(popupWin);
+  await waitForAtLeastOneFrame(popupWin);
 
-    // Resize the popup window.
-    popupWin.resizeTo(popupWin.innerWidth/2, popupWin.innerHeight/2);
+  // Resize the popup window.
+  popupWin.resizeTo(popupWin.innerWidth/2, popupWin.innerHeight/2);
 
-    await waitForAtLeastOneFrame(popupWin);
+  await waitForAtLeastOneFrame(popupWin);
 
-    // `finish` should have resolved as resizing the transition after capture
-    // should cause it to skip.
-    assert_true(finishResolved, "Transition must be finished by the window resize");
-    resolve();
-  });
+  // `finish` should have resolved as resizing the transition after capture
+  // should cause it to skip.
+  assert_true(finishResolved, "Transition must be finished by the window resize");
 });
 </script>
 </head>