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

@ -857,3 +857,38 @@ progress {
filter: invert(100%);
}
}
/* https://github.com/whatwg/html/pull/9546
*/
input[type=checkbox][switch] {
appearance: none;
height: 1em;
width: 1.8em;
vertical-align: middle;
border-radius: 1em;
position: relative;
overflow: hidden;
border-color: transparent;
background-color: ButtonFace;
}
input[type=checkbox][switch]::before {
content: '';
position: absolute;
height: 0;
width: 0;
border: .46em solid Field;
border-radius: 100%;
top: 0;
bottom: 0;
left: 0;
margin: auto;
}
input[type=checkbox][switch]:checked::before {
left: calc(100% - .87em);
}
input[type=checkbox][switch]:checked {
background-color: AccentColor;
}