Merging upstream version 127.0.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
author: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:43:14 +0000
committer: Daniel Baumann <daniel.baumann@progress-linux.org> 2024-06-12 05:43:14 +0000
commit: 8dd16259287f58f9273002717ec4d27e97127719 (patch)
tree: 3863e62a53829a84037444beab3abd4ed9dfc7d0 /testing/web-platform/tests/css/selectors
parent: Releasing progress-linux version 126.0.1-1~progress7.99u1. (diff)
download: firefox-8dd16259287f58f9273002717ec4d27e97127719.tar.xz
firefox-8dd16259287f58f9273002717ec4d27e97127719.zip
6 files changed, 320 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml b/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml
index 47cf05a2c0..2449bf4808 100644
--- a/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/selectors/WEB_FEATURES.yml
@@ -5,3 +5,10 @@ features:
 - name: has
   files:
   - has-*
+- name: read-write-pseudos
+  files:
+  - selector-read-write-*
+- name: user-pseudos
+  files:
+  - user-invalid.html
+  - user-valid.html
diff --git a/testing/web-platform/tests/css/selectors/focus-visible-028.html b/testing/web-platform/tests/css/selectors/focus-visible-028.html
new file mode 100644
index 0000000000..a8b704838b
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/focus-visible-028.html
@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <title>CSS Test (Selectors): Programmatic focus causes :focus-visible to match after keyboard usage when preventDefault() is used</title>
+  <link rel="author" title="Tyler Jones" href="tylerjdev@github.com" />
+  <link rel="help" href="https://drafts.csswg.org/selectors-4/#the-focus-visible-pseudo" />
+  <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>
+  <style>
+    @supports not selector(:focus-visible) {
+      :focus {
+        outline: red solid 5px;
+        background-color: red;
+      }
+    }
+
+    :focus-visible {
+      outline: blue solid 5px;
+    }
+
+    :focus:not(:focus-visible) {
+      outline: 0;
+      background-color: lime;
+    }
+  </style>
+</head>
+<body>
+  This test checks that programmatically focusing an element after a click and using keyboard afterwards triggers <code>:focus-visible</code> matching.
+  <ol id="instructions">
+    <li>If the user-agent does not claim to support the <code>:focus-visible</code> pseudo-class then SKIP this test.</li>
+    <li>Click the button below that says "Click me".</li>
+    <li>Once focused on the button that says "I will be focused programmatically", use "Left" or "Right" arrow keys to navigate through the button group</li>
+    <li>If any button within the group has a blue outline after using either arrow key, then the test result is SUCCESS. If the element has a green background after using either arrow key, then the test result is FAILURE.</li>
+  </ol>
+  <br />
+  <button id="button">Click me</button>
+  <div id="container">
+      <button id="btn1">I will be focused programmatically.</button>
+      <button id="btn2">Button 2</button>
+      <button id="btn3">Button 3</button>
+  </div>
+  <script>
+    button.addEventListener("click", () => {
+      btn1.focus();
+    });
+
+    focusTrap(document.querySelector('#container'));
+
+    function focusTrap(container) {
+      container.addEventListener('keydown', (e) => {
+        if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') return;
+        e.preventDefault();
+
+        const btns = container.querySelectorAll('button');
+        const currentIndex = Array.from(btns).indexOf(document.activeElement);
+        let nextIndex;
+
+        if (e.key === 'ArrowRight') {
+          nextIndex = (currentIndex + 1) % btns.length;
+        } else if (e.key === 'ArrowLeft') {
+          nextIndex = (currentIndex - 1 + btns.length) % btns.length;
+        }
+
+        btns[nextIndex].focus();
+      });
+    }
+
+    promise_test(async t => {
+      const arrow_right = "\uE014";
+      btn2.addEventListener("focus", t.step_func_done((e) => {
+        assert_equals(getComputedStyle(btn2).outlineColor, "rgb(0, 0, 255)", `outlineColor for ${btn2.tagName}#${btn2.id} is blue`);
+        assert_not_equals(getComputedStyle(btn2).backgroundColor, "rgb(0, 255, 0)", `backgroundColor for ${btn2.tagName}#${btn2.id} is NOT lime`);
+      }));
+
+      await test_driver.click(button);
+      assert_equals(document.activeElement, btn1);
+      await test_driver.send_keys(btn1, arrow_right);
+    }, "Programmatic focus after click and keyboard interaction should match :focus-visible");
+  </script>
+</body>
+</html>
+\ No newline at end of file
diff --git a/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml b/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml
index 4eaa2f3931..5e6a6d0d5c 100644
--- a/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml
+++ b/testing/web-platform/tests/css/selectors/invalidation/WEB_FEATURES.yml
@@ -4,3 +4,6 @@ features:
   - has-*
   - "*-in-has.*"
   - "*-in-has-*"
+- name: user-pseudos
+  files:
+  - user-valid-user-invalid.html
diff --git a/testing/web-platform/tests/css/selectors/user-invalid.html b/testing/web-platform/tests/css/selectors/user-invalid.html
index 5f8fa5811a..c57e764831 100644
--- a/testing/web-platform/tests/css/selectors/user-invalid.html
+++ b/testing/web-platform/tests/css/selectors/user-invalid.html
@@ -29,6 +29,7 @@
   <input placeholder="Required field" required id="required-input"><br>
   <textarea placeholder="Required field" required id="required-textarea"></textarea><br>
   <input type="checkbox" required id="required-checkbox"><br>
+  <input type="date" required id="required-date"><br>
   <input type="submit" id="submit-button">
   <input type="reset" id="reset-button">
 </form>
@@ -80,12 +81,14 @@ promise_test(async () => {
   const requiredInput = document.querySelector("#required-input");
   const requiredTextarea = document.querySelector("#required-textarea");
   const requiredCheckbox = document.querySelector("#required-checkbox");
+  const requiredDate = document.querySelector("#required-date");
   const submitButton = document.querySelector("#submit-button");
   const resetButton = document.querySelector("#reset-button");
 
   assert_false(requiredInput.validity.valid);
   assert_false(requiredTextarea.validity.valid);
   assert_false(requiredCheckbox.validity.valid);
+  assert_false(requiredDate.validity.valid);
   // The selector can't match because no interaction has happened.
   assert_false(requiredInput.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(requiredInput.matches(":user-invalid"), "Initially does not match :user-invalid");
@@ -96,6 +99,9 @@ promise_test(async () => {
   assert_false(requiredCheckbox.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(requiredCheckbox.matches(":user-invalid"), "Initially does not match :user-invalid");
 
+  assert_false(requiredDate.matches(":user-valid"), "Initially does not match :user-valid");
+  assert_false(requiredDate.matches(":user-invalid"), "Initially does not match :user-invalid");
+
   submitButton.click();
 
   assert_true(requiredInput.matches(":user-invalid"), "Submitted the form, input is validated");
@@ -107,6 +113,9 @@ promise_test(async () => {
   assert_true(requiredCheckbox.matches(":user-invalid"), "Submitted the form, checkbox is validated");
   assert_false(requiredCheckbox.matches(":user-valid"), "Submitted the form, checkbox is validated");
 
+  assert_true(requiredDate.matches(":user-invalid"), "Submitted the form, date input is validated");
+  assert_false(requiredDate.matches(":user-valid"), "Submitted the form, date input is validated");
+
   resetButton.click();
 
   assert_false(requiredInput.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
@@ -118,6 +127,9 @@ promise_test(async () => {
   assert_false(requiredCheckbox.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
   assert_false(requiredCheckbox.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
 
+  assert_false(requiredDate.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
+  assert_false(requiredDate.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
+
   // Test programmatic form submission with constraint validation.
   form.requestSubmit();
 
@@ -129,6 +141,9 @@ promise_test(async () => {
 
   assert_true(requiredCheckbox.matches(":user-invalid"), "Called form.requestSubmit(), checkbox is validated");
   assert_false(requiredCheckbox.matches(":user-valid"), "Called form.requestSubmit(), checkbox is validated");
+
+  assert_true(requiredDate.matches(":user-invalid"), "Called form.requestSubmit(), date input is validated");
+  assert_false(requiredDate.matches(":user-valid"), "Called form.requestSubmit(), date input is validated");
 }, ":user-invalid selector properly interacts with submit & reset buttons");
 
 // historical: https://github.com/w3c/csswg-drafts/issues/1329
@@ -193,4 +208,38 @@ promise_test(async () => {
   assert_true(checkbox.matches(':user-invalid'),
     'Checkbox should match :user-invalid after clicking twice.');
 }, 'A required checkbox should match :user-invalid if the user unchecks it and blurs.');
+
+promise_test(async () => {
+  const date = document.getElementById('required-date');
+
+  const resetButton = document.getElementById('reset-button');
+  resetButton.click();
+  assert_false(date.matches(':user-invalid'),
+    'date input should not match :user-invalid at the start of the test.');
+  assert_equals(date.value, '',
+    'date input should not have a value at the start of the test.');
+
+  date.value = '2024-04-15';
+  assert_false(date.matches(':user-invalid'),
+    'date should not match :user-invalid after programatically changing value.');
+  date.value = '';
+  assert_false(date.matches(':user-invalid'),
+    'date should not match :user-invalid after programatically changing value.');
+
+  const tabKey = '\uE004';
+  const backspace = '\uE003';
+  date.focus();
+  // Press tab twice at the end to make sure that focus has left the input.
+  await test_driver.send_keys(date, `1${tabKey}1${tabKey}1234${tabKey}${tabKey}`);
+  assert_not_equals(document.activeElement, date,
+    'Pressing tab twice after typing in the date should have blurred the input.');
+  assert_equals(date.value, '1234-01-01',
+    'Date input value should match the testdriver input.');
+  date.focus();
+  await test_driver.send_keys(date, backspace);
+  assert_equals(date.value, '',
+    'Date input value should be cleared when deleting one of the sub-values.');
+  assert_true(date.matches(':user-invalid'),
+    'Date input should match :user-invalid after typing in an invalid value.');
+}, 'A required date should match :user-invalid if the user unchecks it and blurs.');
 </script>
diff --git a/testing/web-platform/tests/css/selectors/user-valid-user-invalid-multifield-inputs.tentative.html b/testing/web-platform/tests/css/selectors/user-valid-user-invalid-multifield-inputs.tentative.html
new file mode 100644
index 0000000000..d6358ea269
--- /dev/null
+++ b/testing/web-platform/tests/css/selectors/user-valid-user-invalid-multifield-inputs.tentative.html
@@ -0,0 +1,133 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel="help" href="https://drafts.csswg.org/selectors/#user-pseudos">
+<link rel="help" href="https://html.spec.whatwg.org/#selector-user-invalid">
+<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>
+
+<!-- This test asserts specifics of keyboard behavior in multifield inputs,
+  like type=date and type=time, in ways that are not specified. -->
+
+<form>
+  <input id=date type=date required>
+  <input id=time type=time required>
+  <input id=datetime-local type=datetime-local required>
+</form>
+
+<script>
+const tabKey = '\uE004';
+const backspace = '\uE003';
+
+promise_test(async () => {
+  const date = document.getElementById('date');
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid at the start of the test.');
+  assert_false(date.matches(':user-invalid'),
+    'Date input should not match :user-invalid at the start of the test.');
+  assert_equals(date.value, '',
+    'Date input should not have a value at the start of the test.');
+
+  date.focus();
+  await test_driver.send_keys(date, `1${tabKey}`);
+  assert_equals(date.value, '',
+    'Date input value should not be set after partially inputting the date.');
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid after partially inputting the date.');
+  assert_false(date.matches(':user-invalid'),
+    'Date input should not match :user-invalid after partially inputting the date.');
+
+  await test_driver.send_keys(date, `1${tabKey}1234${tabKey}`);
+  assert_equals(date.value, '1234-01-01',
+    'Date input value should match the testdriver input.');
+  assert_true(date.matches(':user-valid'),
+    'Date input should match :user-valid after typing in a complete value.');
+  assert_false(date.matches(':user-invalid'),
+    'Date input should not match :user-invalid after typing in a complete value.');
+
+  date.blur();
+  date.focus();
+  await test_driver.send_keys(date, backspace);
+  assert_equals(date.value, '',
+    'Date input value should be cleared when deleting one of the sub-values.');
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid after typing in an invalid value.');
+  assert_true(date.matches(':user-invalid'),
+    'Date input should match :user-invalid after typing in an invalid value.');
+}, '<input type=date> keyboard behavior for :user-valid/:user-invalid.');
+
+promise_test(async () => {
+  const time = document.getElementById('time');
+  assert_false(time.matches(':user-valid'),
+    'Time input should not match :user-valid at the start of the test.');
+  assert_false(time.matches(':user-invalid'),
+    'Time input should not match :user-invalid at the start of the test.');
+  assert_equals(time.value, '',
+    'Time input should not have a value at the start of the test.');
+
+  time.focus();
+  await test_driver.send_keys(time, `1${tabKey}`);
+  assert_equals(time.value, '',
+    'Time input value should not be set after partially inputting the time.');
+  assert_false(time.matches(':user-valid'),
+    'Time input should not match :user-valid after partially inputting the time.');
+  assert_false(time.matches(':user-invalid'),
+    'Time input should not match :user-invalid after partially inputting the time.');
+
+  await test_driver.send_keys(time, `2${tabKey}a${tabKey}`);
+  assert_equals(time.value, '01:02',
+    'Time input value should match the testdriver input.');
+  assert_true(time.matches(':user-valid'),
+    'Time input should match :user-valid after typing in a complete value.');
+  assert_false(time.matches(':user-invalid'),
+    'Time input should not match :user-invalid after typing in a complete value.');
+
+  time.blur();
+  time.focus();
+  await test_driver.send_keys(time, backspace);
+  assert_equals(time.value, '',
+    'Time input value should be cleared when deleting one of the sub-values.');
+  assert_false(time.matches(':user-valid'),
+    'Time input should not match :user-valid after typing in an invalid value.');
+  assert_true(time.matches(':user-invalid'),
+    'Time input should match :user-invalid after typing in an invalid value.');
+}, '<input type=time> keyboard behavior for :user-valid/:user-invalid.');
+
+promise_test(async () => {
+  const dateTimeLocal = document.getElementById('datetime-local');
+  assert_false(dateTimeLocal.matches(':user-valid'),
+    'Datetime input should not match :user-valid at the start of the test.');
+  assert_false(dateTimeLocal.matches(':user-invalid'),
+    'Datetime input should not match :user-invalid at the start of the test.');
+  assert_equals(dateTimeLocal.value, '',
+    'Datetime input should not have a value at the start of the test.');
+
+  dateTimeLocal.focus();
+  await test_driver.send_keys(dateTimeLocal, `1${tabKey}`);
+  assert_equals(dateTimeLocal.value, '',
+    'Datetime input value should not be set after partially inputting the dateTimeLocal.');
+  assert_false(dateTimeLocal.matches(':user-valid'),
+    'Datetime input should not match :user-valid after partially inputting the dateTimeLocal.');
+  assert_false(dateTimeLocal.matches(':user-invalid'),
+    'Datetime input should not match :user-invalid after partially inputting the dateTimeLocal.');
+
+  await test_driver.send_keys(dateTimeLocal, `1${tabKey}1234${tabKey}1${tabKey}2${tabKey}a${tabKey}`);
+  assert_equals(dateTimeLocal.value, '1234-01-01T01:02',
+    'Datetime input value should match the testdriver input.');
+  assert_true(dateTimeLocal.matches(':user-valid'),
+    'Datetime input should match :user-valid after typing in a complete value.');
+  assert_false(dateTimeLocal.matches(':user-invalid'),
+    'Datetime input should not match :user-invalid after typing in a complete value.');
+
+  dateTimeLocal.blur();
+  dateTimeLocal.focus();
+  await test_driver.send_keys(dateTimeLocal, backspace);
+  assert_equals(dateTimeLocal.value, '',
+    'Datetime input value should be cleared when deleting one of the sub-values.');
+  assert_false(dateTimeLocal.matches(':user-valid'),
+    'Datetime input should not match :user-valid after typing in an invalid value.');
+  assert_true(dateTimeLocal.matches(':user-invalid'),
+    'Datetime input should match :user-invalid after typing in an invalid value.');
+}, '<input type=datetime-local> keyboard behavior for :user-valid/:user-invalid.');
+</script>
diff --git a/testing/web-platform/tests/css/selectors/user-valid.html b/testing/web-platform/tests/css/selectors/user-valid.html
index 7a12eb237d..402003ba5e 100644
--- a/testing/web-platform/tests/css/selectors/user-valid.html
+++ b/testing/web-platform/tests/css/selectors/user-valid.html
@@ -29,6 +29,7 @@
   <input placeholder="Optional field" id="optional-input"><br>
   <textarea placeholder="Optional field" id="optional-textarea"></textarea><br>
   <input type="checkbox" id="optional-checkbox"><br>
+  <input type="date" id="optional-date"><br>
   <input required placeholder="Required field"> <!-- Prevent the form from navigating with this invalid input -->
   <input type="submit" id="submit-button">
   <input type="reset" id="reset-button">
@@ -77,12 +78,14 @@ promise_test(async () => {
   const optionalInput = document.querySelector("#optional-input");
   const optionalTextarea = document.querySelector("#optional-textarea");
   const optionalCheckbox = document.querySelector("#optional-checkbox");
+  const optionalDate = document.querySelector("#optional-date");
   const submitButton = document.querySelector("#submit-button");
   const resetButton = document.querySelector("#reset-button");
 
   assert_true(optionalInput.validity.valid);
   assert_true(optionalTextarea.validity.valid);
   assert_true(optionalCheckbox.validity.valid);
+  assert_true(optionalDate.validity.valid);
   // The selector can't match because no interaction has happened.
   assert_false(optionalInput.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(optionalInput.matches(":user-invalid"), "Initially does not match :user-invalid");
@@ -93,6 +96,9 @@ promise_test(async () => {
   assert_false(optionalCheckbox.matches(":user-valid"), "Initially does not match :user-valid");
   assert_false(optionalCheckbox.matches(":user-invalid"), "Initially does not match :user-invalid");
 
+  assert_false(optionalDate.matches(":user-valid"), "Initially does not match :user-valid");
+  assert_false(optionalDate.matches(":user-invalid"), "Initially does not match :user-invalid");
+
   submitButton.click();
 
   assert_true(optionalInput.matches(":user-valid"), "Submitted the form, input is validated");
@@ -104,6 +110,9 @@ promise_test(async () => {
   assert_true(optionalCheckbox.matches(":user-valid"), "Submitted the form, checkbox is validated");
   assert_false(optionalCheckbox.matches(":user-invalid"), "Submitted the form, checkbox is validated");
 
+  assert_true(optionalDate.matches(":user-valid"), "Submitted the form, date is validated");
+  assert_false(optionalDate.matches(":user-invalid"), "Submitted the form, date is validated");
+
   resetButton.click();
 
   assert_false(optionalInput.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
@@ -115,6 +124,9 @@ promise_test(async () => {
   assert_false(optionalCheckbox.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
   assert_false(optionalCheckbox.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
 
+  assert_false(optionalDate.matches(":user-valid"), "Reset the form, user-interacted flag is reset");
+  assert_false(optionalDate.matches(":user-invalid"), "Reset the form, user-interacted flag is reset");
+
   // Test programmatic form submission with constraint validation.
   form.requestSubmit();
 
@@ -126,6 +138,9 @@ promise_test(async () => {
 
   assert_true(optionalCheckbox.matches(":user-valid"), "Called form.requestSubmit(), checkbox is validated");
   assert_false(optionalCheckbox.matches(":user-invalid"), "Called form.requestSubmit(), checkbox is validated");
+
+  assert_true(optionalDate.matches(":user-valid"), "Called form.requestSubmit(), date is validated");
+  assert_false(optionalDate.matches(":user-invalid"), "Called form.requestSubmit(), date is validated");
 }, ":user-valid selector properly interacts with submit & reset buttons");
 
 promise_test(async () => {
@@ -151,4 +166,33 @@ promise_test(async () => {
   assert_true(checkbox.matches(':user-valid'),
     'Checkbox should match :user-valid after clicking once.');
 }, 'Checkboxes should match :user-valid after the user clicks on it.');
+
+promise_test(async () => {
+  const date = document.getElementById('optional-date');
+
+  const resetButton = document.getElementById('reset-button');
+  resetButton.click();
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid at the start of the test.');
+  assert_equals(date.value, '',
+    'Date input should not have a value at the start of the test.');
+
+  date.value = '2024-04-15';
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid after programatically changing value.');
+  date.value = '';
+  assert_false(date.matches(':user-valid'),
+    'Date input should not match :user-valid after programatically changing value.');
+
+  const tabKey = '\uE004';
+  date.focus();
+  // Press tab twice at the end to make sure that focus has left the input.
+  await test_driver.send_keys(date, `1${tabKey}1${tabKey}1234${tabKey}${tabKey}`);
+  assert_not_equals(document.activeElement, date,
+    'Pressing tab twice after typing in the date should have blurred the input.');
+  assert_equals(date.value, '1234-01-01',
+    'Date input value should match the testdriver input.');
+  assert_true(date.matches(':user-valid'),
+    'Date input should match :user-valid after typing in a value.');
+}, 'Date inputs should match :user-valid after the user types a value into it.');
 </script>
author	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:43:14 +0000
committer	Daniel Baumann <daniel.baumann@progress-linux.org>	2024-06-12 05:43:14 +0000
commit	8dd16259287f58f9273002717ec4d27e97127719 (patch)
tree	3863e62a53829a84037444beab3abd4ed9dfc7d0 /testing/web-platform/tests/css/selectors
parent	Releasing progress-linux version 126.0.1-1~progress7.99u1. (diff)
download	firefox-8dd16259287f58f9273002717ec4d27e97127719.tar.xz firefox-8dd16259287f58f9273002717ec4d27e97127719.zip