view-transitions: Update behaviour of finished promise.

The finished promise should reflect the status of domUpdated if the transition is skipped before animations could finish. See resolution at w3c/csswg-drafts#7956. Change-Id: If340d63587d87237587fc3aa3de98f742d46218e
web-platform-tests · Nov 11, 2022 · 79f1ebe · 79f1ebe
1 parent c5b10ac
commit 79f1ebe
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 14 deletions.
diff --git a/css/css-view-transitions/duplicate_tag_rejects_capture.html b/css/css-view-transitions/duplicate_tag_rejects_capture.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>Shared transitions: root tag is reserved</title>
+<link rel="help" href="https://github.com/WICG/view-transitions">
+<link rel="author" href="mailto:[email protected]">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: blue;
+  contain: paint;
+}
+</style>
+
+<div id=first></div>
+<div id=second></div>
+
+<script>
+promise_test(async t => {
+  return new Promise((resolve, reject) => {
+    first.style = "view-transition-name: target";
+    second.style = "view-transition-name: target";
+    let transition = document.startViewTransition();
+
+    // Ready rejected first since invoking the dom callback is an async task.
+    let readyRejected = false;
+    transition.ready.then(reject, () => {readyRejected = true;});
+
+    // The domUpdate promise resolves (since there is no callback).
+    let domUpdatedResolved = false;
+    transition.domUpdated.then(() => {
+      assert_true(readyRejected, "ready not rejected before domUpdated");
+      domUpdatedResolved = true;
+    }, reject);
+
+    // Finally finish resolves.
+    transition.finished.then(() => {
+      assert_true(domUpdatedResolved, "domUpdated not resolved before finish");
+      resolve();
+    }, reject);
+  });
+}, "Two different elements with the same tag rejects capture");
+</script>
diff --git a/...ew-transitions/duplicate_tag_rejects.html → ...nsitions/duplicate_tag_rejects_start.html b/...ew-transitions/duplicate_tag_rejects.html → ...nsitions/duplicate_tag_rejects_start.html
@@ -20,27 +20,30 @@
 <div id=second></div>
 
 <script>
-promise_test(async t => {
-  return new Promise((resolve, reject) => {
-    first.style = "view-transition-name: target";
-    second.style = "view-transition-name: target";
-    let transition = document.startViewTransition();
-    transition.ready.then(() => {}, () => {});
-    transition.domUpdated.then(() => {}, () => {});
-    transition.finished.then(reject, resolve);
-  });
-}, "Two different elements with the same tag rejects capture");
-
 promise_test(async t => {
   return new Promise((resolve, reject) => {
     first.style = "view-transition-name: target";
     let transition = document.startViewTransition(() => {
       first.style = "view-transition-name: target";
       second.style = "view-transition-name: target";
     });
-    transition.ready.then(() => {}, () => {});
-    transition.domUpdated.then(() => {}, () => {});
-    transition.finished.then(reject, resolve);
+
+    // First domUpdated resolves since the callback runs successfully.
+    let domUpdatedResolved = false;
+    transition.domUpdated.then(() => { domUpdatedResolved = true; }, reject);
+
+    // Then finished resolves since domUpdated was already resolved.
+    let finishResolved = false;
+    transition.domUpdated.then(() => {
+      assert_true(domUpdatedResolved, "domUpdated not resolved before finish");
+      finishResolved = true;
+    }, reject);
+
+    // Finally ready rejects.
+    transition.ready.then(reject, () => {
+      assert_true(finishResolved, "finish not resolved before ready");
+      resolve();
+    });
   });
 }, "Two different elements with the same tag rejects start");
 </script>