Click focus testing

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:

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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
number input
Expected Actual
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
checkbox input
Expected Actual
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
file input
Expected Actual
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
button input
Expected Actual
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
submit input
Expected Actual
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
time input
Expected Actual
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
week input
Expected Actual
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element TEXTAREA
:focus matches TEXTAREA


Pass Pass Pass Pass
select
Expected Actual
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element SELECT
:focus matches SELECT


Pass Pass Pass Pass
button
Expected Actual
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
anchor with href
Expected Actual
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element A
:focus matches A


click me
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element AREA
:focus matches AREA


Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star. Red box. Green circle. Blue triangle. Yellow star.
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element DIV
:focus matches DIV


Click me
Pass Pass Pass Pass
Tabindex
Expected Actual
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element DIV
:focus matches DIV


Click me
Pass Pass Pass Pass
Tabindex (empty attribute)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Click me
Pass Pass Pass Pass
Tabindex (non-numeric value)
Expected Actual
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element DIV
:focus matches DIV


Click me
Pass Pass Pass Pass
Details with summary
Expected Actual
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element SUMMARY
:focus matches SUMMARY


Click me

other content

Pass Pass Pass Pass
Audio
Expected Actual
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
Visible checkbox within invisible div
Expected Actual
Eventsmousedown
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)
Disabled input
Expected Actual
Eventsblur
focusout
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Disabled fieldset
Expected Actual
Eventsblur
focusout
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Inert input
Expected Actual
Eventsblur
focusout
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Inert tree
Expected Actual
Eventsblur
focusout
Active Element BODY
:focus matches null


Pass Pass Pass Pass
anchor without href
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


click me
Pass Pass Pass Pass
Area without href
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Four shapes are available: a red hollow box, a green circle, a blue triangle, and a yellow four-pointed star. Red box. Green circle. Blue triangle. Yellow star.
Pass Pass Pass Pass
contenteditable="false"
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Click me
Pass Pass Pass Pass
Inert div with contenteditable attribute
Expected Actual
Eventsblur
focusout
Active Element BODY
:focus matches null


Click me
Pass Pass Pass Pass
Inert div with tabindex attribute
Expected Actual
Eventsblur
focusout
Active Element BODY
:focus matches null


Click me
Pass Pass Pass Pass
Details with multiple summary elements. Summary elements other than the first should not be click focusable.
Expected Actual
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label wrapping disabled checkbox
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label wrapping inert text input
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label wrapping inert checkbox
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label wrapping unrendered text input
(visibility: hidden;)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
label wrapping visible input within invisible div
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element INPUT
:focus matches INPUT


Partial
Events dispatched out of order.
Pass Pass Pass
Label wrapping unrendered checkbox
(visibility: hidden;)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
label wrapping visible checkbox within invisible div
Expected Actual
Eventsmousedown
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
Eventsmousedown
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).
Label wrapping unrendered checkbox
(content-visibility: hidden;)
Expected Actual
Eventsmousedown
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).
Label wrapping unrendered text input
(display: none;)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label wrapping unrendered checkbox
(display: none;)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label wrapping focusable non-labelable element
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element INPUT
:focus matches INPUT


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
Eventsmousedown
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
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element INPUT
:focus matches INPUT


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
Eventsmousedown
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
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element INPUT
:focus matches INPUT


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
Eventsmousedown
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
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element INPUT
:focus matches INPUT


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
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label without wrapped or targeted element within label with valid checkbox target
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label without wrapped or targeted element within label with text input descendant
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label without wrapped or targeted element within label with checkbox descendant
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


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
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


70%
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
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element PROGRESS
:focus matches PROGRESS


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 (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
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


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
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element METER
:focus matches METER


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
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


70%
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
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element OUTPUT
:focus matches OUTPUT


70%
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
Eventsmousedown
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 targeting checkbox
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element INPUT
:focus matches INPUT


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
Eventsmousedown
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 that matches multiple checkboxes
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element INPUT
:focus matches INPUT


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
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label with "for" attribute that matches multiple checkboxes, the first of which is unfocusable
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label targeting disabled text input
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label targeting disabled checkbox
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label targeting inert text input
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label targeting inert checkbox
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label targeting unrendered text input
(visibility: hidden;)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
label targeting visible input within invisible div
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element INPUT
:focus matches INPUT


Partial
Events dispatched out of order.
Pass Pass Pass
Label targeting unrendered checkbox
(visibility: hidden;)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
label targeting visible checkbox within invisible div
Expected Actual
Eventsmousedown
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 targeting unrendered text input
(content-visibility: hidden;)
Expected Actual
Eventsmousedown
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 Pass Pass
Label targeting unrendered checkbox
(content-visibility: hidden;)
Expected Actual
Eventsmousedown
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 Pass Pass
Label targeting unrendered text input
(display: none;)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label targeting unrendered checkbox
(display: none;)
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
Label targeting focusable non-labelable element
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null



Am I focused?
Pass Pass Pass Pass
Label within a button that has a valid text input target
Expected Actual
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
blur
focusout
focus
focusin
click
Active Element INPUT
:focus matches INPUT


Partial
Events are dispatched out of order.
Pass Pass Pass
Focusable click target within label that targets checkbox
Expected Actual
Eventsmousedown
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
Label without "for" attribute within a button
Expected Actual
Eventsmousedown
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
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
With focusable shadow element click target
Expected Actual
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
Labeled form associated
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element WEB-COMPONENT-6
:focus matches WEB-COMPONENT-6


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
Eventsmousedown
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
Eventsmousedown
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
Eventsmousedown
blur
focusout
mouseup
click
Active Element BODY
:focus matches null


Pass Pass Pass Pass
With multiple focusable shadow elements
Expected Actual
Eventsmousedown
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
Eventsmousedown
blur
focusout
focus
focusin
mouseup
click
Active Element INPUT
:focus matches INPUT


Pass Pass Pass Pass
Labeled form associated
Expected Actual
Eventsmousedown
blur
focusout
mouseup
click
focus
focusin
click
Active Element WEB-COMPONENT-7
:focus matches WEB-COMPONENT-7


Partial
Events dispatched out of order. "click" event is dispatched before "focus" and "focusin" on the focused element.
Pass Partial
Events dispatched out of order.
Partial
Events dispatched out of order.