Commit 15fbd337 authored by Joey Arhar's avatar Joey Arhar Committed by Chromium LUCI CQ

Remove :active on blur for checkable inputs

Before this patch, <input type=checkbox> and <input type=radio> can be
left in an active state if you press the spacebar down to toggle it, and
then press tab to move focus away before releasing the spacebar.

This patch calls SetActive(false) on the blur event for these input
types, which clears the active state in this case.

The test uses test_driver.Actions(), which isn't supported by the layout
test runner but works just fine in the separate wpt runner in the wpt
github repo.
I wrote the test and verified that it works well with the separate wpt
test runner, then wrote a TestExpectations line against the bug to track
the issue with the layout test runner: crbug.com/893480

Fixed: 1157510
Change-Id: I13a0900277dbfccc87ba81ffd684b12430665e10
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2594107Reviewed-by: default avatarMason Freed <masonfreed@chromium.org>
Commit-Queue: Joey Arhar <jarhar@chromium.org>
Cr-Commit-Position: refs/heads/master@{#837867}
parent 3893688a
...@@ -121,4 +121,8 @@ bool BaseCheckableInputType::IsCheckable() { ...@@ -121,4 +121,8 @@ bool BaseCheckableInputType::IsCheckable() {
return true; return true;
} }
void BaseCheckableInputType::HandleBlurEvent() {
GetElement().SetActive(false);
}
} // namespace blink } // namespace blink
...@@ -42,6 +42,8 @@ class BaseCheckableInputType : public InputType, public InputTypeView { ...@@ -42,6 +42,8 @@ class BaseCheckableInputType : public InputType, public InputTypeView {
void Trace(Visitor*) const override; void Trace(Visitor*) const override;
using InputType::GetElement; using InputType::GetElement;
void HandleBlurEvent() override;
protected: protected:
BaseCheckableInputType(HTMLInputElement& element) BaseCheckableInputType(HTMLInputElement& element)
: InputType(element), : InputType(element),
......
...@@ -2017,6 +2017,7 @@ crbug.com/893480 external/wpt/css/css-scroll-snap/input/keyboard.html [ Failure ...@@ -2017,6 +2017,7 @@ crbug.com/893480 external/wpt/css/css-scroll-snap/input/keyboard.html [ Failure
crbug.com/893480 external/wpt/infrastructure/testdriver/actions/textEditCommands.html [ Failure Timeout ] crbug.com/893480 external/wpt/infrastructure/testdriver/actions/textEditCommands.html [ Failure Timeout ]
crbug.com/893480 external/wpt/input-events/input-events-get-target-ranges.html [ Failure Timeout ] crbug.com/893480 external/wpt/input-events/input-events-get-target-ranges.html [ Failure Timeout ]
crbug.com/893480 external/wpt/input-events/input-events-cut-paste.html [ Failure Timeout ] crbug.com/893480 external/wpt/input-events/input-events-cut-paste.html [ Failure Timeout ]
crbug.com/893480 external/wpt/html/semantics/forms/the-input-element/checkable-active-onblur.html [ Timeout ]
# isInputPending requires threaded compositing and layerized iframes # isInputPending requires threaded compositing and layerized iframes
crbug.com/910421 external/wpt/is-input-pending/* [ Skip ] crbug.com/910421 external/wpt/is-input-pending/* [ Skip ]
......
<!DOCTYPE html>
<meta charset="utf-8">
<link rel="author" title="Joey Arhar" href="mailto:jarhar@chromium.org">
<link rel="help" href="http://crbug.com/1157510">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-actions.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<!-- This behavior is not explicitly specified. -->
<input type=checkbox id=checkbox checked>
<input type=radio id=radio checked>
<script>
promise_test(async () => {
checkbox.focus();
// Hold spacebar down
await (new test_driver.Actions()).keyDown('\uE00D').send();
assert_equals(document.querySelector(':active'), checkbox,
'Checkboxes should be :active while the spacebar is pressed down.');
// Press tab
await (new test_driver.Actions()).keyDown('\uE004').keyUp('\uE004').send();
assert_equals(document.querySelector(':active'), null,
'Checkboxes should not be :active after tab is used to change focus.');
// Release spacebar
await (new test_driver.Actions()).keyUp('\uE00D').send();
}, 'Checkboxes should clear :active when the user tabs away from them while holding spacebar.');
promise_test(async () => {
radio.focus();
// Hold spacebar down
await (new test_driver.Actions()).keyDown('\uE00D').send();
assert_equals(document.querySelector(':active'), radio,
'Radios should be :active while the spacebar is pressed down.');
// Press tab
await (new test_driver.Actions()).keyDown('\uE004').keyUp('\uE004').send();
assert_equals(document.querySelector(':active'), null,
'Radios should not be :active after tab is used to change focus.');
// Release spacebar
await (new test_driver.Actions()).keyUp('\uE00D').send();
}, 'Radios should clear :active when the user tabs away from them while holding spacebar.');
</script>
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment