LibWeb: Implement <input type=checkbox switch> experimentally

In conformance with the requirements of the spec PR at
https://github.com/whatwg/html/pull/9546, this change adds support for
the “switch” attribute for type=checkbox “input” elements — which is
shipping in Safari (since Safari 17.4). This change also implements
support for exposing it to AT users with role=switch.
This commit is contained in:
sideshowbarker 2024-12-11 11:34:41 +09:00 committed by Sam Atkins
commit 583ca6af89
Notes: github-actions[bot] 2024-12-13 11:32:27 +00:00
16 changed files with 268 additions and 3 deletions

View file

@ -0,0 +1,8 @@
<!doctype html>
<meta charset=utf-8>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<div id=log></div>
<script src="../../../../html/semantics/forms/the-input-element/input-type-checkbox-switch.tentative.window.js"></script>

View file

@ -0,0 +1,19 @@
test(t => {
const input = document.createElement("input");
input.switch = true;
assert_true(input.hasAttribute("switch"));
assert_equals(input.getAttribute("switch"), "");
assert_equals(input.type, "text");
}, "switch IDL attribute, setter");
test(t => {
const container = document.createElement("div");
container.innerHTML = "<input type=checkbox switch>";
const input = container.firstChild;
assert_true(input.hasAttribute("switch"));
assert_equals(input.getAttribute("switch"), "");
assert_equals(input.type, "checkbox");
assert_true(input.switch);
}, "switch IDL attribute, getter");

View file

@ -0,0 +1,8 @@
<!doctype html>
<meta charset=utf-8>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<div id=log></div>
<script src="../../../../html/semantics/selectors/pseudo-classes/input-checkbox-switch.tentative.window.js"></script>

View file

@ -0,0 +1,75 @@
test(t => {
const input = document.body.appendChild(document.createElement("input"));
t.add_cleanup(() => input.remove());
input.type = "checkbox";
input.switch = true;
input.indeterminate = true;
assert_false(input.matches(":indeterminate"));
}, "Switch control does not match :indeterminate");
test(t => {
const input = document.body.appendChild(document.createElement("input"));
t.add_cleanup(() => input.remove());
input.type = "checkbox";
input.switch = true;
input.indeterminate = true;
assert_false(input.matches(":indeterminate"));
input.switch = false;
assert_true(input.matches(":indeterminate"));
}, "Checkbox that is no longer a switch control does match :indeterminate");
test(t => {
const input = document.body.appendChild(document.createElement("input"));
t.add_cleanup(() => input.remove());
input.type = "checkbox";
input.indeterminate = true;
assert_true(input.matches(":indeterminate"));
input.setAttribute("switch", "blah");
assert_false(input.matches(":indeterminate"));
}, "Checkbox that becomes a switch control does not match :indeterminate");
test(t => {
const input = document.body.appendChild(document.createElement("input"));
t.add_cleanup(() => input.remove());
input.type = "checkbox";
input.indeterminate = true;
assert_true(document.body.matches(":has(:indeterminate)"));
input.switch = true;
assert_false(document.body.matches(":has(:indeterminate)"));
}, "Parent of a checkbox that becomes a switch control does not match :has(:indeterminate)");
test(t => {
const input = document.body.appendChild(document.createElement("input"));
t.add_cleanup(() => input.remove());
input.type = "checkbox";
input.switch = true
input.checked = true;
assert_true(document.body.matches(":has(:checked)"));
input.switch = false;
assert_true(document.body.matches(":has(:checked)"));
input.checked = false;
assert_false(document.body.matches(":has(:checked)"));
}, "Parent of a switch control that becomes a checkbox continues to match :has(:checked)");
test(t => {
const input = document.body.appendChild(document.createElement("input"));
t.add_cleanup(() => input.remove());
input.type = "checkbox";
input.switch = true;
input.indeterminate = true;
assert_false(input.matches(":indeterminate"));
input.type = "text";
input.removeAttribute("switch");
input.type = "checkbox";
assert_true(input.matches(":indeterminate"));
}, "A switch control that becomes a checkbox in a roundabout way");