NavigateEvent sourceElement prototype

Adds a new attribute to the NavigateEvent, sourceElement, which is
the Element that initiated the navigation (if any). Set for anchor
clicks (both HTML and SVG <a>) and form submissions.

Implemented behind the NavigateEventSourceElement flag.

I2P: https://groups.google.com/a/chromium.org/g/blink-dev/c/fJhFQV-2v38/m/p7F00AQhAAAJ
Explainer: WICG/navigation-api@85edaf1

Bug: 1483000
Change-Id: Icb09e7ac425aee1c7772c1bfcdafeaa0883bc072
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4385906
Auto-Submit: Nate Chapin <japhet@chromium.org>
Commit-Queue: Domenic Denicola <domenic@chromium.org>
Reviewed-by: Domenic Denicola <domenic@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1203020}

navigation-api/navigate-event/event-constructor.html

@@ -18,7 +18,8 @@
       signal: (new AbortController()).signal,
       formData: null,
       downloadRequest: null,
-      info: null
+      info: null,
+      sourceElement: null
     });
   });
 }, "destination is required");
@@ -35,7 +36,8 @@
         hashChange: false,
         formData: null,
         downloadRequest: null,
-        info: null
+        info: null,
+        sourceElement: null
       });
     });
   });
@@ -50,6 +52,7 @@
     const signal = (new AbortController()).signal;
     const downloadRequest = "abc";
     const hasUAVisualTransition = true;
+    const sourceElement = document.createElement("a");
 
     const event = new NavigateEvent("navigate", {
       navigationType: "replace",
@@ -61,7 +64,8 @@
       formData,
       downloadRequest,
       info,
-      hasUAVisualTransition
+      hasUAVisualTransition,
+      sourceElement
     });
 
     assert_equals(event.navigationType, "replace");
@@ -74,6 +78,7 @@
     assert_equals(event.downloadRequest, downloadRequest);
     assert_equals(event.info, info);
     assert_equals(event.hasUAVisualTransition, hasUAVisualTransition);
+    assert_equals(event.sourceElement, sourceElement);
   });
   history.pushState(2, null, "#2");
 }, "all properties are reflected back");
@@ -93,6 +98,7 @@
     assert_equals(event.formData, null);
     assert_equals(event.downloadRequest, null);
     assert_equals(event.info, undefined);
+    assert_equals(event.sourceElement, null);
   });
   history.pushState(3, null, "#3");
 }, "defaults are as expected");

navigation-api/navigate-event/navigate-anchor-cross-origin.html

@@ -17,6 +17,7 @@
     assert_equals(e.destination.key, "");
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
+    assert_equals(e.sourceElement, document.getElementById("a"));
     e.preventDefault();
   });
   a.click();

navigation-api/navigate-event/navigate-anchor-download-userInitiated.html

@@ -21,6 +21,7 @@
     assert_equals(e.destination.key, "");
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
+    assert_equals(e.sourceElement, document.getElementById("a"));
     e.preventDefault();
     t.step_timeout(t.step_func_done(() => assert_equals(location.hash, "")), 0);
   });

navigation-api/navigate-event/navigate-anchor-download.html

@@ -25,6 +25,7 @@
       assert_equals(e.destination.key, "");
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
+      assert_equals(e.sourceElement, a);
       e.preventDefault();
     });
     a.click();

navigation-api/navigate-event/navigate-anchor-fragment.html

@@ -17,6 +17,7 @@
     assert_equals(e.destination.key, "");
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
+    assert_equals(e.sourceElement, document.getElementById("a"));
     e.preventDefault();
     t.step_timeout(t.step_func_done(() => assert_equals(location.hash, "")), 0);
   });

navigation-api/navigate-event/navigate-anchor-same-origin-cross-document.html

@@ -18,6 +18,7 @@
     assert_equals(e.destination.key, "");
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
+    assert_equals(e.sourceElement, document.getElementById("a"));
     e.preventDefault();
   });
   a.click();

navigation-api/navigate-event/navigate-anchor-userInitiated.html

@@ -20,6 +20,7 @@
     assert_equals(e.destination.key, "");
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
+    assert_equals(e.sourceElement, document.getElementById("a"));
     e.preventDefault();
     t.step_timeout(t.step_func_done(() => assert_equals(location.hash, "")), 0);
   });

navigation-api/navigate-event/navigate-anchor-with-target.html

@@ -23,6 +23,7 @@
     assert_equals(e.destination.key, "");
     assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
+      assert_equals(e.sourceElement, null);
       e.preventDefault();
     });
     a.click();

navigation-api/navigate-event/navigate-destination-getState-back-forward.html

@@ -19,6 +19,7 @@
       assert_equals(e.destination.key, "");
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
+      assert_equals(e.sourceElement, null);
     });
     navigation.back();
   }), 0);

navigation-api/navigate-event/navigate-destination-getState-navigate.html

@@ -16,6 +16,7 @@
       assert_equals(e.destination.key, "");
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
+      assert_equals(e.sourceElement, null);
     });
     navigation.navigate("#foo", { state: navState });
   }, 0);

navigation-api/navigate-event/navigate-destination-getState-reload.html

@@ -16,6 +16,7 @@
       assert_equals(e.destination.key, "");
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
+      assert_equals(e.sourceElement, null);
       e.intercept();
     });
     navigation.updateCurrentEntry({ state: navState });

navigation-api/navigate-event/navigate-form-get.html

@@ -21,6 +21,7 @@
 
     // Because it's a GET, not a POST
     assert_equals(e.formData, null);
+    assert_equals(e.sourceElement, form);
   });
   window.onload = t.step_func(() => form.submit());
 }, "<form> submission with GET method fires navigate event but with formData null");

navigation-api/navigate-event/navigate-form-reload.html

@@ -12,6 +12,7 @@
     iframe.contentWindow.navigation.onnavigate = t.step_func(e => {
       assert_equals(e.navigationType, "push");
       assert_not_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
 
       iframe.onload = t.step_func(() => {
         iframe.contentWindow.navigation.onnavigate = t.step_func_done(e => {

navigation-api/navigate-event/navigate-form-requestSubmit.html

@@ -0,0 +1,35 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<form id="form" method="post" action="">
+<input type="submit" id="submit1">
+<input type="image" id="submit2">
+<button type="submit" id="submit3">
+</form>
+<script>
+promise_test(async () => {
+  await new Promise(r => window.onload = r);
+
+  let sourceElement;
+  navigation.onnavigate = e => {
+    e.preventDefault();
+    sourceElement = e.sourceElement;
+  };
+
+  form.requestSubmit(submit1);
+  await new Promise(r => navigation.onnavigateerror = r);
+  assert_equals(sourceElement, submit1);
+
+  form.requestSubmit(submit2);
+  await new Promise(r => navigation.onnavigateerror = r);
+  assert_equals(sourceElement, submit2);
+
+  form.requestSubmit(submit3);
+  await new Promise(r => navigation.onnavigateerror = r);
+  assert_equals(sourceElement, submit3);
+
+  form.requestSubmit();
+  await new Promise(r => navigation.onnavigateerror = r);
+  assert_equals(sourceElement, form);
+}, "<form> requestSubmit() sets sourceElement");
+</script>

navigation-api/navigate-event/navigate-form-traverse.html

@@ -12,6 +12,7 @@
     iframe.contentWindow.navigation.onnavigate = t.step_func(e => {
       assert_equals(e.navigationType, "push");
       assert_not_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
 
       iframe.onload = t.step_func(() => {
         // Avoid the replace behavior that occurs if you navigate during the load handler

navigation-api/navigate-event/navigate-form-userInitiated.html

@@ -24,6 +24,7 @@
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
     assert_not_equals(e.formData, null);
+    assert_equals(e.sourceElement, submit);
   });
   window.onload = t.step_func(() => test_driver.click(submit));
 }, "<form> submission fires navigate event");

navigation-api/navigate-event/navigate-form-with-target.html

@@ -22,6 +22,7 @@
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
       assert_not_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
     });
     form.submit();
   });

navigation-api/navigate-event/navigate-form.html

@@ -19,6 +19,7 @@
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
     assert_not_equals(e.formData, null);
+    assert_equals(e.sourceElement, form);
   });
   window.onload = t.step_func(() => form.submit());
 }, "<form> submission fires navigate event");

navigation-api/navigate-event/navigate-history-back-after-fragment.html

@@ -23,6 +23,7 @@
       assert_equals(e.destination.id, target_id);
         assert_equals(e.destination.index, 0);
       assert_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
     });
 
     history.back();

navigation-api/navigate-event/navigate-history-back-after-pushState.html

@@ -23,6 +23,7 @@
       assert_equals(e.destination.id, target_id);
       assert_equals(e.destination.index, 0);
       assert_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
     });
 
     history.back();

navigation-api/navigate-event/navigate-history-back-cross-document.html

@@ -23,6 +23,7 @@
         assert_equals(e.destination.index, 0);
         assert_equals(e.formData, null);
         assert_equals(e.info, undefined);
+        assert_equals(e.sourceElement, null);
       });
       assert_true(i.contentWindow.navigation.canGoBack);
       i.contentWindow.history.back();

navigation-api/navigate-event/navigate-history-go-0.html

@@ -18,6 +18,7 @@
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
       assert_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
       e.preventDefault();
     });
 

navigation-api/navigate-event/navigate-history-pushState.html

@@ -17,6 +17,7 @@
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
     assert_equals(e.formData, null);
+    assert_equals(e.sourceElement, null);
     e.preventDefault();
     t.step_timeout(t.step_func_done(() => {
       assert_equals(location.hash, "");

navigation-api/navigate-event/navigate-history-replaceState.html

@@ -17,6 +17,7 @@
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
     assert_equals(e.formData, null);
+    assert_equals(e.sourceElement, null);
     e.preventDefault();
     t.step_timeout(t.step_func_done(() => {
       assert_equals(location.hash, "");

navigation-api/navigate-event/navigate-iframe-location.html

@@ -21,6 +21,7 @@
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
       assert_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
       e.preventDefault();
       t.step_timeout(t.step_func_done(() => assert_equals(location.hash, "")), 0);
     });

navigation-api/navigate-event/navigate-location.html

@@ -17,6 +17,7 @@
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
     assert_equals(e.formData, null);
+    assert_equals(e.sourceElement, null);
   });
   location.href = "#1";
 }, "location API fires navigate event");

navigation-api/navigate-event/navigate-meta-refresh.html

@@ -20,6 +20,7 @@
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
       assert_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
       e.preventDefault();
     });
   });

navigation-api/navigate-event/navigate-navigation-back-cross-document.html

@@ -25,6 +25,7 @@
         assert_equals(e.destination.index, 0);
         assert_equals(e.formData, null);
         assert_equals(e.info, "hi");
+        assert_equals(e.sourceElement, null);
       });
       i.contentWindow.onbeforeunload = () => beforeunload_called = true;
       assert_true(i.contentWindow.navigation.canGoBack);

navigation-api/navigate-event/navigate-navigation-back-same-document-in-iframe.html

@@ -27,6 +27,7 @@
     assert_equals(e.destination.index, 0);
     assert_equals(e.formData, null);
     assert_equals(e.info, "hi");
+    assert_equals(e.sourceElement, null);
   }
   await i.contentWindow.navigation.back({ info: "hi" }).finished;
 }, "navigate event for navigation.back() - same-document in an iframe");

navigation-api/navigate-event/navigate-navigation-back-same-document.html

@@ -24,6 +24,7 @@
         assert_equals(e.formData, null);
         assert_equals(e.info, "hi");
         assert_not_equals(e.hasUAVisualTransition, undefined);
+        assert_equals(e.sourceElement, null);
       });
       assert_true(navigation.canGoBack);
       navigation.back({ info: "hi" });

navigation-api/navigate-event/navigate-navigation-navigate.html

@@ -16,6 +16,7 @@
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
     assert_equals(e.formData, null);
+    assert_equals(e.sourceElement, null);
   });
   navigation.navigate("#foo");
 }, "navigate event for navigation.navigate()");

navigation-api/navigate-event/navigate-svg-anchor-fragment.html

@@ -0,0 +1,26 @@
+<!doctype html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<svg><a id="a" href="#1"></a></svg>
+<script>
+async_test(t => {
+  navigation.onnavigate = t.step_func(e => {
+    assert_equals(e.navigationType, "push");
+    assert_true(e.cancelable);
+    assert_true(e.canIntercept);
+    assert_false(e.userInitiated);
+    assert_true(e.hashChange);
+    assert_equals(e.downloadRequest, null);
+    assert_equals(e.formData, null);
+    assert_equals(new URL(e.destination.url).hash, "#1");
+    assert_true(e.destination.sameDocument);
+    assert_equals(e.destination.key, "");
+    assert_equals(e.destination.id, "");
+    assert_equals(e.destination.index, -1);
+    assert_equals(e.sourceElement, document.getElementById("a"));
+    e.preventDefault();
+    t.step_timeout(t.step_func_done(() => assert_equals(location.hash, "")), 0);
+  });
+  document.getElementById("a").dispatchEvent(new MouseEvent('click'));
+}, "<svg:a> click fires navigate event");
+</script>

navigation-api/navigate-event/navigate-to-srcdoc.html

@@ -21,6 +21,7 @@
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
       assert_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
       e.preventDefault();
 
       // Make sure it doesn't navigate anyway.

navigation-api/navigate-event/navigate-window-open-self.html

@@ -16,6 +16,7 @@
     assert_equals(e.destination.id, "");
     assert_equals(e.destination.index, -1);
     assert_equals(e.formData, null);
+    assert_equals(e.sourceElement, null);
     e.preventDefault();
   });
   window.onload = t.step_func(() => window.open("#1", "_self"));

navigation-api/navigate-event/navigate-window-open.html

@@ -21,6 +21,7 @@
       assert_equals(e.destination.id, "");
       assert_equals(e.destination.index, -1);
       assert_equals(e.formData, null);
+      assert_equals(e.sourceElement, null);
       e.preventDefault();
     });