This table shows how every interactive element responds to clicks focusing
on the element (or some delegated element). The tests run check for these
aspects:
The :focus selector matches the element or its delegate
The activeElement matches the element or its delegate
The following events dispatch in order:
mousedown
blur
focusout
focus
focusin
mouseup
click
To run a test, click into the "start here" input, then click the blue
element (usually with the text "click me").
Tests for click focusability
Description
Expected Results
Element
Safari
Firefox
Chrome
Edge
Focusable Elements
Text input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
number input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
checkbox input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
click this checkbox (this text is not a label)
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
radio input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
click this radio button (this text is not a label)
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
radio group
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
click this radio button (this text is not a label)
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
color input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Partial
On Windows devices, the :focus selector does not match. Passes
tests on MacOS.
Pass
Pass
date input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
datetime-local input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
email input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
file input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Partial
Clicking on the generated button element does not make the input
match the :focus selector
Partial
Clicking on the generated button element does not make the input
match the :focus selector
Partial
Clicking on the generated button element does not make the input
match the :focus selector
image input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
month input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
password input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
button input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
range input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
reset input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
search input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
submit input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
tel input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
time input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
url input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
week input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
Partial
On MacOS, :focus selector does not match the <input>
if the calendar picker button is clicked. Passes test on
Windows.
textarea
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
TEXTAREA
:focus matches
TEXTAREA
Pass
Pass
Pass
Pass
select
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
SELECT
:focus matches
SELECT
Pass
Pass
Pass
Pass
button
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
BUTTON
:focus matches
BUTTON
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Button with nested elements
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
BUTTON
:focus matches
BUTTON
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
reset button
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
BUTTON
:focus matches
BUTTON
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
submit button
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
BUTTON
:focus matches
BUTTON
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Partial
Focus goes to the body after clicking an anchor element with an
href attribute. If only a mousedown event is dispatched on the
element (i.e. you do not release the mouse button) then the
element becomes focused
Partial
Focus goes to the body after clicking an anchor element with an
href attribute. If only a mousedown event is dispatched on the
element (i.e. you do not release the mouse button) then the
element becomes focused
Partial
Focus goes to the body after clicking an anchor element with an
href attribute. If only a mousedown event is dispatched on the
element (i.e. you do not release the mouse button) then the
element becomes focused
Partial
Focus goes to the body after clicking an anchor element with an
href attribute. If only a mousedown event is dispatched on the
element (i.e. you do not release the mouse button) then the
element becomes focused
Area with href
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
AREA
:focus matches
AREA
Partial
Focus goes to the body after clicking an anchor element with an
href attribute. The "focus" and "focusin" events are dispatched,
though.
Fail
Focus goes to the body after clicking an anchor element with an
href attribute. A set of "blur" and "focusout" events are
dispatched on the <area> immediately after the "focusin"
event.
Partial
Focus goes to the body after clicking an anchor element with an
href attribute. The "focus" and "focusin" events are dispatched,
though.
Partial
Focus goes to the body after clicking an anchor element with an
href attribute. The "focus" and "focusin" events are dispatched,
though.
contenteditable attribute on div
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
DIV
:focus matches
DIV
Click me
Pass
Pass
Pass
Pass
contenteditable="false" and tabindex="-1" on div
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
DIV
:focus matches
DIV
Click me
Pass
Pass
Pass
Pass
Tabindex
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
DIV
:focus matches
DIV
Click me
Pass
Pass
Pass
Pass
Tabindex (empty attribute)
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Tabindex (non-numeric value)
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Tabindex (non-numeric value set by Element API)
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
DIV
:focus matches
DIV
Click me
Pass
Pass
Pass
Pass
Details with summary
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
SUMMARY
:focus matches
SUMMARY
Click me
other content
Pass
Pass
Pass
Pass
Audio
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
AUDIO
:focus matches
AUDIO
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Partial
No mouse events ("mousedown", "mouseup", and "click") are
dispatched when clicking on any part of an <audio> element
or its controls.
Partial
No mouse events ("mousedown", "mouseup", and "click") are
dispatched when clicking on any part of an <audio> element
or its controls. :focus styles do not apply to the <audio>
element if the control elements are clicked, but the
<audio> element still becomes the active element.
Partial
No mouse events ("mousedown", "mouseup", and "click") are
dispatched when clicking on any part of an <audio> element
or its controls. :focus styles do not apply to the <audio>
element if the control elements are clicked, but the
<audio> element still becomes the active element.
Video with controls
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
VIDEO
:focus matches
VIDEO
Fail
The <video> element never becomes focused. No "focus" or
"focusin" events are dispatched, it does not become the active
element, and it does not match the :focus selector.
Partial
No mouse events ("mousedown", "mouseup", and "click") are
dispatched when clicking on any part of a <video> element or
its controls.
Partial
No mouse events ("mousedown", "mouseup", and "click") are
dispatched when clicking on any part of a <video> element's
controls. Mouse events do dispatch if some other area of the
<video> element is clicked.
Partial
No mouse events ("mousedown", "mouseup", and "click") are
dispatched when clicking on any part of a <video> element's
controls. Mouse events do dispatch if some other area of the
<video> element is clicked.
Visible input within invisible div
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
Visible checkbox within invisible div
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Unfocusable Elements (disabled, inert, unrendered, or invalid)
Details with multiple summary elements. Summary elements other than
the first should not be click focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
(first summary element)
Click me (second summary element)
Pass
Pass
Pass
Pass
Video (no controls)
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Fail
Video element is focusable but shouldn't be. It matches the :focus
selector, becomes the active element and dispatches "focus" and
"focusin" events.
Pass
Pass
Labeled Elements
Wrapping (some tests are repeated with text inputs and
checkboxes to check Safari)
Label wrapping text input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label wrapping checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Fail
Checkbox does not recieve focus. No "focus" or "focusin" events
are dispatched.
Pass
Pass
Pass
Focusable label wrapping text input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
blur
focusout
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Focusable label wrapping checkbox
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
blur
focusout
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Fail
Checkbox does not recieve focus. No "focus" or "focusin" events
are dispatched.
Pass
Pass
Pass
Label wrapping disabled text input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label wrapping disabled checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label wrapping inert text input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label wrapping inert checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label wrapping unrendered text input (visibility: hidden;)
label wrapping visible checkbox within invisible div
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Label wrapping unrendered text input (content-visibility:
hidden;)
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
content-visibility is not supported in this browser
content-visibility is not supported in this browser
Partial
No "focus" or "focusin" events are dispatched (correctly) but the
<input> becomes the active element and matches the :focus
selector (incorrectly).
Partial
No "focus" or "focusin" events are dispatched (correctly) but the
<input> becomes the active element and matches the :focus
selector (incorrectly).
content-visibility is not supported in this browser
content-visibility is not supported in this browser
Partial
No "focus" or "focusin" events are dispatched (correctly) but the
<input> becomes the active element and matches the :focus
selector (incorrectly).
Partial
No "focus" or "focusin" events are dispatched (correctly) but the
<input> becomes the active element and matches the :focus
selector (incorrectly).
Label wrapping unrendered text input (display: none;)
Label wrapping non-focusable labelable element Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label wrapping focusable labelable element (progress bar with
tabindex) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
PROGRESS
:focus matches
PROGRESS
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label wrapping non-focusable labelable element (meter bar) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label wrapping focusable labelable element (meter bar with
tabindex) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
METER
:focus matches
METER
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label wrapping non-focusable labelable element (output) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label wrapping focusable labelable element (output with tabindex) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
OUTPUT
:focus matches
OUTPUT
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label with "for" attribute but no target wrapping text input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label with "for" attribute but no target wrapping checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
Label with "for" attribute wrapping text input that is not the
target of the "for" attribute
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label with "for" attribute wrapping checkbox that is not the target
of the "for" attribute
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Wrapping AND Targeting (some tests are repeated with text
inputs and checkboxes to check Safari)
Label with "for" attribute wrapping text input it targets
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label with "for" attribute wrapping checkbox it targets
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Fail
Checkbox does not recieve focus. No "focus" or "focusin" events
are dispatched.
Pass
Pass
Pass
Label with valid text input target within label targeting other text
input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Partial
Events dispatched out of order. "click" event is dispatched before
"focus" and "focusin" on the focused element.
Pass
Pass
Pass
Label with valid checkbox target within label targeting other
checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Fail
Element does not become focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Label with valid text input target within label targeting other text
input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Partial
Events dispatched out of order. "click" event is dispatched before
"focus" and "focusin" on the focused element.
Pass
Pass
Pass
Label with valid checkbox target within label targeting other
checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Fail
Element does not become focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Label with valid text input target within label targeting other text
input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Partial
Events dispatched out of order. "click" event is dispatched before
"focus" and "focusin" on the focused element.
Pass
Pass
Pass
Label with valid checkbox target within label targeting other
checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Fail
Element does not become focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Label with valid text input target within label targeting other text
input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Partial
Events dispatched out of order. "click" event is dispatched before
"focus" and "focusin" on the focused element.
Pass
Pass
Pass
Label with valid checkbox target within label targeting other
checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Fail
Element does not become focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Label without wrapped or targeted element within label with valid
text input target
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label without wrapped or targeted element within label with valid
checkbox target
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label without wrapped or targeted element within label with text
input descendant
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label without wrapped or targeted element within label with checkbox
descendant
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Targeting (some tests are repeated with text inputs and
checkboxes to check Safari)
Label targeting non-focusable labelable element (progress bar) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label targeting focusable labelable element (progress bar with
tabindex) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
PROGRESS
:focus matches
PROGRESS
Click me
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label targeting non-focusable labelable element (meter bar) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
70%
Pass
Pass
Pass
Pass
Label targeting focusable labelable element (meter bar with
tabindex) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
METER
:focus matches
METER
Click me
70%
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label targeting non-focusable labelable element (output) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label targeting focusable labelable element (output with
tabindex) Explanation
Elements that can be associated with a <label> element
include <button>, <input> (except for type="hidden"),
<meter>, <output>, <progress>, <select>
and <textarea>. Meters, outputs, and progress elements are
not natively focusable.
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
OUTPUT
:focus matches
OUTPUT
Click me
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label with "for" attribute targeting text input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label with "for" attribute targeting checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Fail
Checkbox is not focused. No "focus" or "focusin" events are
dispatched.
Pass
Pass
Pass
Label with "for" attribute that matches multiple text inputs
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Partial
Events dispatched out of order. The focused element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label with "for" attribute that matches multiple checkboxes
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Fail
Checkbox is not focused. No "focus" or "focusin" events are
dispatched.
Pass
Pass
Pass
Label with "for" attribute that matches multiple text inputs, the
first of which is unfocusable
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label with "for" attribute that matches multiple checkboxes, the
first of which is unfocusable
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label targeting disabled text input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label targeting disabled checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label targeting inert text input
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label targeting inert checkbox
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
Label targeting unrendered text input (visibility: hidden;)
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
Pass
Pass
Pass
Pass
label targeting visible input within invisible div
label targeting visible checkbox within invisible div
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Fail
The element never becomes focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Label targeting unrendered text input (content-visibility:
hidden;)
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Click me
content-visibility is not supported in this browser
content-visibility is not supported in this browser
Label within a button that has a valid text input target
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
blur
focusout
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Partial
The <button> element never dispatches "focus", "focusin",
"blur", or "focusout" events. The targeted element dispatches the
"click" event before dispatching "focus" and "focusin" events.
Pass
Pass
Pass
Label within a button that has a valid checkbox target
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
blur
focusout
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Fail
Checkbox is not focused. No "focus" or "focusin" events are
dispatched.
Pass
Pass
Pass
button within label that has valid text input target
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
BUTTON
:focus matches
BUTTON
Fail
Button is not focused. No "focus" or "focusin" events are
dispatched.
Pass
Pass
Pass
button within label that has valid checkbox target
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
BUTTON
:focus matches
BUTTON
Fail
Button is not focused. No "focus" or "focusin" events are
dispatched.
Pass
Pass
Pass
Focusable click target within label that targets text input
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
blur
focusout
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Partial
Events are dispatched out of order.
Pass
Pass
Pass
Focusable click target within label that targets checkbox
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
blur
focusout
focus
focusin
click
Active Element
INPUT
:focus matches
INPUT
Click me
Fail
Checkbox is not focused. No "focus" or "focusin" events are
dispatched.
Pass
Pass
Pass
Label without "for" attribute within a button
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
BUTTON
:focus matches
BUTTON
Fail
Element does not become focused. No "focus" or "focusin" events
are dispatched, it does not become the active element, and it does
not match the :focus selector.
Pass
Pass
Pass
Web Components
With unfocusable shadow element click target
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
With focusable shadow element click target
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
WEB-COMPONENT-00
Active Shadow Element
INPUT
:focus matches
WEB-COMPONENT-00
Pass
Pass
Pass
Pass
With focusable light element click target
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
Labeled form associated
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
WEB-COMPONENT-6
:focus matches
WEB-COMPONENT-6
Click me
Partial
Events dispatched out of order. "click" event is dispatched before
"focus" and "focusin" on the focused element.
Pass
Pass
Pass
Delegates Focus
With focusable shadow element
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
WEB-COMPONENT-1
Active Shadow Element
INPUT
:focus matches
WEB-COMPONENT-1
Pass
Pass
Pass
Pass
With unfocusable shadow element
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
WEB-COMPONENT-5
Active Shadow Element
INPUT
:focus matches
WEB-COMPONENT-5
Pass
Pass
Pass
Pass
Without focusable shadow element
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
Active Element
BODY
:focus matches
null
Pass
Pass
Pass
Pass
With multiple focusable shadow elements
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
WEB-COMPONENT-2
Active Shadow Element
INPUT
:focus matches
WEB-COMPONENT-2
Pass
Pass
Pass
Pass
Focusable light element
Expected
Actual
Events
mousedown
blur
focusout
focus
focusin
mouseup
click
Active Element
INPUT
:focus matches
INPUT
Pass
Pass
Pass
Pass
Labeled form associated
Expected
Actual
Events
mousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element
WEB-COMPONENT-7
:focus matches
WEB-COMPONENT-7
Click me
Partial
Events dispatched out of order. "click" event is dispatched before
"focus" and "focusin" on the focused element.