Add showPicker() method to HTMLInputElement interface

This CL adds an experimental method to the HTMLInputElement interface to allow web developers to show the browser picker for temporal, color, and file input elements. It requires a user gesture and is disallowed for cross-origin iframes except for file and color input elements for now. Intent to prototype: https://groups.google.com/a/chromium.org/g/blink-dev/c/fEebe5uXQ1I/m/ox6SBEQ5AAAJ Test: https://show-picker.glitch.me/ Spec: whatwg/html#6909 Bug: 939561 Change-Id: Icd59429c069ce5c70903f708f5d6da41a16ba90f Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3056920 Commit-Queue: François Beaufort <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#937999}
Gabisampaio · Nov 18, 2021 · 94c144c · 94c144c
1 parent ecc80e3
commit 94c144c
Show file tree

Hide file tree

Showing 3 changed files with 95 additions and 0 deletions.
diff --git a/html/semantics/forms/the-input-element/resources/show-picker-child-iframe.html b/html/semantics/forms/the-input-element/resources/show-picker-child-iframe.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<title>Test showPicker() in an iframe</title>
+<script type=module>
+import inputTypes from "./../input-types.js";
+
+let securityErrors = [];
+for (const inputType of inputTypes) {
+  const input = document.createElement("input");
+  input.setAttribute("type", inputType);
+
+  try {
+    input.showPicker();
+  } catch (error) {
+    if (error instanceof DOMException && error.name == 'SecurityError') {
+      securityErrors.push(inputType);
+    }
+  }
+}
+parent.postMessage(securityErrors.join(','), "*");
+</script>
diff --git a/html/semantics/forms/the-input-element/show-picker-cross-origin-iframe.tentative.html b/html/semantics/forms/the-input-element/show-picker-cross-origin-iframe.tentative.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<title>Test showPicker() called from cross-origin iframe</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/common/get-host-info.sub.js"></script>
+<body>
+<iframe id="iframe"></iframe>
+</body>
+<script>
+function waitForSecurityErrors() {
+  return new Promise((resolve) => {
+    window.addEventListener("message", (event) => resolve(event.data), {
+      once: true,
+    });
+  });
+}
+
+promise_test(async (t) => {
+  iframe.src =
+    new URL("resources/", self.location).pathname +
+    "show-picker-child-iframe.html";
+
+  // Wait for the iframe to report security errors when calling showPicker().
+  const securityErrors = await waitForSecurityErrors();
+  assert_equals(
+    securityErrors,
+    "",
+    "In same-origin iframes, showPicker() does not throw a SecurityError."
+  );
+});
+
+promise_test(async (t) => {
+  iframe.src =
+    get_host_info().HTTP_NOTSAMESITE_ORIGIN +
+    new URL("resources/", self.location).pathname +
+    "show-picker-child-iframe.html";
+
+  // Wait for the iframe to report security errors when calling showPicker().
+  const securityErrors = await waitForSecurityErrors();
+  assert_equals(
+    securityErrors,
+    "button,checkbox,date,datetime-local,email,hidden,image,month,number,password,radio,range,reset,search,submit,tel,text,time,url,week",
+    "In cross-origin iframes, showPicker() throws a SecurityError except on file and color."
+  );
+});
+</script>
diff --git a/html/semantics/forms/the-input-element/show-picker.tentative.html b/html/semantics/forms/the-input-element/show-picker.tentative.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<title>Test showPicker() user gesture requirement</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<body></body>
+<script type=module>
+import inputTypes from "./input-types.js";
+
+for (const inputType of inputTypes) {
+  test(() => {
+    const input = document.createElement("input");
+    input.setAttribute("type", inputType);
+
+    assert_throws_dom('NotAllowedError', () => { input.showPicker(); });
+  }, `input[type=${inputType}] showPicker() requires a user gesture`);
+}
+
+for (const inputType of inputTypes) {
+  promise_test(async t => {
+    const input = document.createElement("input");
+    input.setAttribute("type", inputType);
+
+    await test_driver.bless('show picker');
+    input.showPicker();
+  }, `input[type=${inputType}] showPicker() does not throw when user activation is active`);
+}
+</script>