HTML: <form rel> (#15356)

For whatwg/html#4332.
web-platform-tests · Feb 15, 2019 · b44dacf · b44dacf
1 parent f026ed3
commit b44dacf
Show file tree

Hide file tree

Showing 7 changed files with 129 additions and 1 deletion.
diff --git a/html/semantics/forms/form-submission-target/rel-base-target.html b/html/semantics/forms/form-submission-target/rel-base-target.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>&lt;form rel> with &lt;base target></title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src=resources/reltester.js></script>
+<base target=_blank>
+<div id=log></div>
+<form action=resources/endpoint.html><input type=hidden name=channelname></form>
+<script>
+const submitter = document.querySelector("form"),
+      channelInput = document.querySelector("input");
+relTester(submitter, channelInput, "<base target>");
+</script>
diff --git a/html/semantics/forms/form-submission-target/rel-button-target.html b/html/semantics/forms/form-submission-target/rel-button-target.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>&lt;form rel> with &lt;button formtarget></title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src=resources/reltester.js></script>
+<div id=log></div>
+<form action=resources/endpoint.html><input type=hidden name=channelname><button type=submit formtarget=_blank></form>
+<script>
+const submitter = document.querySelector("button"),
+      channelInput = document.querySelector("input");
+relTester(submitter, channelInput, "<button formtarget>");
+</script>
diff --git a/html/semantics/forms/form-submission-target/rel-form-target.html b/html/semantics/forms/form-submission-target/rel-form-target.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<title>&lt;form rel target></title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src=resources/reltester.js></script>
+<div id=log></div>
+<form action=resources/endpoint.html target=_blank><input type=hidden name=channelname></form>
+<script>
+const submitter = document.querySelector("form"),
+      channelInput = document.querySelector("input");
+relTester(submitter, channelInput, "<form target>");
+</script>
diff --git a/html/semantics/forms/form-submission-target/rel-input-target.html b/html/semantics/forms/form-submission-target/rel-input-target.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<title>&lt;form rel> with &lt;input formtarget></title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src=resources/reltester.js></script>
+<base target=_blank>
+<div id=log></div>
+<form action=resources/endpoint.html><input type=hidden name=channelname><input type=submit formtarget=_blank></form>
+<script>
+const submitter = document.querySelector("input[type=submit]"),
+      channelInput = document.querySelector("input");
+relTester(submitter, channelInput, "<input formtarget>");
+</script>
diff --git a/html/semantics/forms/form-submission-target/resources/endpoint.html b/html/semantics/forms/form-submission-target/resources/endpoint.html
@@ -0,0 +1,11 @@
+<script>
+  const channelName = new URL(location).searchParams.get("channelname"),
+        channel = new BroadcastChannel(channelName);
+  channel.postMessage({ haveOpener: window.opener !== null,
+                        referrer: document.referrer });
+  // Because messages are not delivered synchronously and because closing a
+  // browsing context prompts the eventual clearing of all task sources, this
+  // document should not be closed until the opener document has confirmed
+  // receipt.
+  channel.onmessage = () => window.close();
+</script>
diff --git a/html/semantics/forms/form-submission-target/resources/reltester.js b/html/semantics/forms/form-submission-target/resources/reltester.js
@@ -0,0 +1,65 @@
+function relTester(submitter, channelInput, title) {
+  [
+    {
+      rel: "",
+      exposed: "all"
+    },
+    {
+      rel: "noopener",
+      exposed: "noopener"
+    },
+    {
+      rel: "noreferrer",
+      exposed: "noreferrer"
+    },
+    {
+      rel: "opener",
+      exposed: "all"
+    },
+    {
+      rel: "noopener noreferrer",
+      exposed: "noreferrer"
+    },
+    {
+      rel: "noreferrer opener",
+      exposed: "noreferrer"
+    },
+    {
+      rel: "opener noopener",
+      exposed: "noopener"
+    }
+  ].forEach(relTest => {
+    // Use promise_test to submit only after one test concluded
+    promise_test(t => {
+      return new Promise(resolve => {
+        const channelName = Date.now() + relTest.rel,
+              channel = new BroadcastChannel(channelName);
+        let form = submitter;
+        if (submitter.localName !== "form") {
+          form = submitter.form;
+        }
+        form.rel = relTest.rel;
+        channelInput.value = channelName;
+        if (submitter.localName !== "form") {
+          submitter.click();
+        } else {
+          submitter.submit();
+        }
+        channel.onmessage = t.step_func(e => {
+          if (relTest.exposed === "all" || relTest.exposed === "noopener") {
+            assert_equals(e.data.referrer, window.location.href, "referrer");
+          } else {
+            assert_equals(e.data.referrer, "", "referrer");
+          }
+          if (relTest.exposed === "all") {
+            assert_true(e.data.haveOpener, "opener");
+          } else {
+            assert_false(e.data.haveOpener, "opener");
+          }
+          resolve();
+        });
+        t.add_cleanup(() => channel.postMessage(null));
+      });
+    }, `<form rel="${relTest.rel}"> with ${title}`);
+  });
+}
diff --git a/html/semantics/rellist-feature-detection.html b/html/semantics/rellist-feature-detection.html
@@ -15,7 +15,7 @@
                  'noreferrer', 'noopener']
 };
 link_support_table['a'] =  {
-  supported : ['noreferrer', 'noopener'],
+  supported : ['noreferrer', 'noopener', 'opener'],
   unsupported : ['author', 'bookmark', 'external', 'help', 'license',
                  'nofollow', 'pingback', 'prev', 'search', 'tag',
                  'modulepreload', 'preload', 'preconnect', 'dns-prefetch',
@@ -24,6 +24,7 @@
                  'apple-touch-icon-precomposed', 'canonical']
 };
 link_support_table['area'] = link_support_table['a'];
+link_support_table['form'] = link_support_table['form'];
 
 function test_rellist(tag_name, rel_table) {
   let element = document.createElement(tag_name);
@@ -77,5 +78,6 @@
   test_rellist('LINK', link_support_table['link']);
   test_rellist('A', link_support_table['a']);
   test_rellist('AREA', link_support_table['area']);
+  test_rellist('FORM', link_support_table['form']);
 }, 'Make sure that relList based feature detection is working');
 </script>