Bug 1672786 - Disable selection within <input type=date> r=emilio
authorKagami Sascha Rosylight <krosylight@mozilla.com>
Sun, 25 Oct 2020 10:50:57 +0000
changeset 554354 836fa52c68009f707198c75c3a4478ed290c339f
parent 554353 61c35792ca7021377e42150db54b3935b0fd3c40
child 554355 a4853e82ea7a0f42cebd8b5ca5d769222befaada
push id37893
push userbtara@mozilla.com
push dateMon, 26 Oct 2020 09:28:34 +0000
treeherdermozilla-central@b1a74943bc51 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersemilio
bugs1672786
milestone84.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1672786 - Disable selection within <input type=date> r=emilio Differential Revision: https://phabricator.services.mozilla.com/D94668
testing/web-platform/meta/html/semantics/forms/the-input-element/selection-pointer.html.ini
testing/web-platform/tests/html/semantics/forms/the-input-element/input-types.js
testing/web-platform/tests/html/semantics/forms/the-input-element/selection-pointer.html
toolkit/content/widgets/datetimebox.css
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/html/semantics/forms/the-input-element/selection-pointer.html.ini
@@ -0,0 +1,15 @@
+[selection-pointer.html]
+  [Selecting texts across <input type=button> should not cancel selection]
+    expected: FAIL
+
+  [Selecting texts across <input type=color> should not cancel selection]
+    expected: FAIL
+
+  [Selecting texts across <input type=range> should not cancel selection]
+    expected: FAIL
+
+  [Selecting texts across <input type=reset> should not cancel selection]
+    expected: FAIL
+
+  [Selecting texts across <input type=submit> should not cancel selection]
+    expected: FAIL
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/input-types.js
@@ -0,0 +1,24 @@
+export default [
+  "button",
+  "checkbox",
+  "color",
+  "date",
+  "datetime-local",
+  "email",
+  "file",
+  "hidden",
+  "image",
+  "month",
+  "number",
+  "password",
+  "radio",
+  "range",
+  "reset",
+  "search",
+  "submit",
+  "tel",
+  "text",
+  "time",
+  "url",
+  "week",
+];
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/html/semantics/forms/the-input-element/selection-pointer.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Selecting texts across input element</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/resources/testdriver.js"></script>
+<script src="/resources/testdriver-actions.js"></script>
+<script src="/resources/testdriver-vendor.js"></script>
+<link rel="stylesheet" href="/fonts/ahem.css" />
+<style>
+  .test {
+    font: 16px/1 Ahem;
+    padding-bottom: 16px;
+  }
+</style>
+<div class="test">
+  <span id="foo">foo</span><br>
+  <input id="input"><br>
+  <span id="bar">bar</span>
+</div>
+<script type="module">
+import inputTypes from "./input-types.js";
+
+const selection = getSelection();
+const inputVisibleTypes = inputTypes.filter(t => t !== "hidden");
+
+for (const inputType of inputVisibleTypes) {
+  promise_test(async () => {
+    input.type = inputType;
+    selection.collapse(foo);
+    await new test_driver.Actions()
+      .pointerMove(0, 0, {origin: foo})
+      .pointerDown()
+      .pointerMove(0, 0, {origin: input})
+      .pointerMove(0, 0, {origin: bar})
+      .pointerUp()
+      .send();
+    assert_equals(selection.anchorNode, foo.childNodes[0], "anchorNode");
+    assert_equals(selection.focusNode, bar.childNodes[0], "focusNode");
+  }, `Selecting texts across <input type=${inputType}> should not cancel selection`);
+}
+</script>
--- a/toolkit/content/widgets/datetimebox.css
+++ b/toolkit/content/widgets/datetimebox.css
@@ -2,16 +2,18 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 @namespace url("http://www.w3.org/1999/xhtml");
 @namespace svg url("http://www.w3.org/2000/svg");
 
 .datetimebox {
   display: flex;
+  /* TODO: Enable selection once bug 1455893 is fixed */
+  user-select: none;
 }
 
 .datetime-input-box-wrapper {
   display: inline-flex;
   flex: 1;
   background-color: inherit;
   min-width: 0;
   justify-content: space-between;
@@ -21,17 +23,16 @@
 .datetime-input-edit-wrapper {
   overflow: hidden;
   white-space: nowrap;
   flex-grow: 1;
 }
 
 .datetime-edit-field {
   display: inline;
-  user-select: none;
   text-align: center;
   padding: 1px 3px;
   border: 0;
   margin: 0;
   ime-mode: disabled;
   outline: none;
 }