mirror of
https://github.com/servo/servo.git
synced 2025-08-05 05:30:08 +01:00
Auto merge of #10019 - rebstar6:htmllabelclick, r=jdm
Fix htmllabelelement click to activate correct element Address https://github.com/servo/servo/issues/9928 Pass on label click to the label element's labeled control <!-- Reviewable:start --> --- This change is [<img src="https://reviewable.io/review_button.svg" height="35" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/10019) <!-- Reviewable:end -->
This commit is contained in:
bors-servo
commit
80d903a897
5 changed files with 189 additions and 10 deletions
|
|
@ -862,10 +862,6 @@ impl VirtualMethods for HTMLInputElement {
|
||||||
}
|
}
|
||||||
|
|
||||||
if event.type_() == atom!("click") && !event.DefaultPrevented() {
|
if event.type_() == atom!("click") && !event.DefaultPrevented() {
|
||||||
if let InputType::InputRadio = self.input_type.get() {
|
|
||||||
self.update_checked_state(true, true);
|
|
||||||
}
|
|
||||||
|
|
||||||
// TODO: Dispatch events for non activatable inputs
|
// TODO: Dispatch events for non activatable inputs
|
||||||
// https://html.spec.whatwg.org/multipage/#common-input-element-events
|
// https://html.spec.whatwg.org/multipage/#common-input-element-events
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -63,12 +63,15 @@ impl Activatable for HTMLLabelElement {
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/#run-post-click-activation-steps
|
// https://html.spec.whatwg.org/multipage/#run-post-click-activation-steps
|
||||||
fn activation_behavior(&self, _event: &Event, _target: &EventTarget) {
|
fn activation_behavior(&self, _event: &Event, _target: &EventTarget) {
|
||||||
synthetic_click_activation(self.upcast::<Element>(),
|
if let Some(e) = self.GetControl() {
|
||||||
false,
|
let elem = e.upcast::<Element>();
|
||||||
false,
|
synthetic_click_activation(elem,
|
||||||
false,
|
false,
|
||||||
false,
|
false,
|
||||||
ActivationSource::NotFromClick);
|
false,
|
||||||
|
false,
|
||||||
|
ActivationSource::NotFromClick);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/#implicit-submission
|
// https://html.spec.whatwg.org/multipage/#implicit-submission
|
||||||
|
|
|
||||||
|
|
@ -6030,6 +6030,12 @@
|
||||||
"url": "/_mozilla/mozilla/htmlfontelement_size_attribute.html"
|
"url": "/_mozilla/mozilla/htmlfontelement_size_attribute.html"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
|
"mozilla/htmllabel-activation.html": [
|
||||||
|
{
|
||||||
|
"path": "mozilla/htmllabel-activation.html",
|
||||||
|
"url": "/_mozilla/mozilla/htmllabel-activation.html"
|
||||||
|
}
|
||||||
|
],
|
||||||
"mozilla/htmlspacechars.html": [
|
"mozilla/htmlspacechars.html": [
|
||||||
{
|
{
|
||||||
"path": "mozilla/htmlspacechars.html",
|
"path": "mozilla/htmlspacechars.html",
|
||||||
|
|
|
||||||
170
tests/wpt/mozilla/tests/mozilla/htmllabel-activation.html
Normal file
170
tests/wpt/mozilla/tests/mozilla/htmllabel-activation.html
Normal file
|
|
@ -0,0 +1,170 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Click action on label</title>
|
||||||
|
<script src="/resources/testharness.js"></script>
|
||||||
|
<script src="/resources/testharnessreport.js"></script>
|
||||||
|
|
||||||
|
<div id="test"></div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label">hi \
|
||||||
|
<input type="checkbox" id="checkbox1"> \
|
||||||
|
<input type="checkbox" id="checkbox2"></label>';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
checkbox1 = document.getElementById('checkbox1'),
|
||||||
|
checkbox2 = document.getElementById('checkbox2');
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_true(checkbox1.checked, "checkbox should be checked")
|
||||||
|
assert_false(checkbox2.checked, "checkbox should not be checked")
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_false(checkbox1.checked, "checkbox should not be checked")
|
||||||
|
assert_false(checkbox2.checked, "checkbox should not be checked")
|
||||||
|
}, "Check if click on label selects 1st item (checkbox button)");
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label">hi \
|
||||||
|
<input type="checkbox" disabled id="disabledcb"> \
|
||||||
|
<input type="checkbox" id="checkbox"></label>';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
disabledcb = document.getElementById('disabledcb'),
|
||||||
|
checkbox = document.getElementById('checkbox');
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_false(disabledcb.checked, "checkbox should not be checked")
|
||||||
|
assert_false(checkbox.checked, "checkbox should not be checked")
|
||||||
|
}, "If label's 1st child is disabled, click should have no impact");
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label">hi \
|
||||||
|
<a href="about:blank" id="anchor">foo</a> \
|
||||||
|
<input type="checkbox" id=checkbox></label>';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
anchor = document.getElementById('anchor'),
|
||||||
|
checkbox = document.getElementById('checkbox');
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_true(checkbox.checked, "checkbox should be checked")
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_false(checkbox.checked, "checkbox should not be checked")
|
||||||
|
}, "Label's 1st labelable element should be clicked");
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label">hi \
|
||||||
|
<input type="radio" id="radio"> \
|
||||||
|
<input type="checkbox" id="checkbox"></label>';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
radio = document.getElementById('radio'),
|
||||||
|
checkbox = document.getElementById('checkbox');
|
||||||
|
|
||||||
|
label.click()
|
||||||
|
assert_true(radio.checked, "radio should be checked")
|
||||||
|
assert_false(checkbox.checked, "checkbox should not be checked")
|
||||||
|
}, "Check if click on label selects 1st item (radio button)");
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label">hi \
|
||||||
|
<input type="radio" disabled id="disabledRadio"> \
|
||||||
|
<input type="checkbox" id="checkbox"></label>';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
disabledRadio = document.getElementById('disabledRadio'),
|
||||||
|
checkbox = document.getElementById('checkbox');
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_false(disabledRadio.checked, "disabled radio should not be checked")
|
||||||
|
assert_false(checkbox.checked, "checkbox should not be checked")
|
||||||
|
}, "If label's 1st child is disabled, click should have no impact");
|
||||||
|
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label">hi \
|
||||||
|
<input type="submit" id="submit"> \
|
||||||
|
<input type="checkbox" id="checkbox"></label>';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
submit = document.getElementById('submit'),
|
||||||
|
checkbox = document.getElementById('checkbox');
|
||||||
|
|
||||||
|
var submitClicked = false;
|
||||||
|
submit.onclick = function() { submitClicked = true };
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_true(submitClicked, "submit should be selected")
|
||||||
|
assert_false(checkbox.checked, "checkbox should not be checked")
|
||||||
|
}, "Check if click on label selects 1st item (submit)");
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label">hi \
|
||||||
|
<input type="submit" disabled id="disabledSubmit"> \
|
||||||
|
<input type="checkbox" id="checkbox"></label>';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
disabledSubmit = document.getElementById('disabledSubmit'),
|
||||||
|
checkbox = document.getElementById('checkbox');
|
||||||
|
|
||||||
|
disabledSubmit.onclick = function() {
|
||||||
|
assert_unreached("disabled submit should not have been activated")
|
||||||
|
};
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_false(checkbox.checked, "checkbox should not be checked")
|
||||||
|
}, "If label's 1st child is disabled, click should have no impact");
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label" for="checkbox2">hi \
|
||||||
|
<input type="checkbox" id="checkbox1"> \
|
||||||
|
<input type="checkbox" id="checkbox2"></label>';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
checkbox1 = document.getElementById('checkbox1'),
|
||||||
|
checkbox2 = document.getElementById('checkbox2');
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_false(checkbox1.checked, "checkbox should not be checked");
|
||||||
|
assert_true(checkbox2.checked, "checkbox should be checked");
|
||||||
|
label.click();
|
||||||
|
assert_false(checkbox1.checked, "checkbox should not be checked");
|
||||||
|
assert_false(checkbox2.checked, "checkbox should not be checked");
|
||||||
|
}, "Label 'for' logic should take precedence over nesting logic");
|
||||||
|
|
||||||
|
test(function() {
|
||||||
|
document.querySelector("#test").innerHTML = '<label id="label" for="checkbox2">hi</label> \
|
||||||
|
<input type="checkbox" id="checkbox1"> \
|
||||||
|
<input type="checkbox" id="checkbox2">';
|
||||||
|
|
||||||
|
var label = document.getElementById('label'),
|
||||||
|
checkbox1 = document.getElementById('checkbox1'),
|
||||||
|
checkbox2 = document.getElementById('checkbox2');
|
||||||
|
|
||||||
|
label.click();
|
||||||
|
assert_false(checkbox1.checked, "checkbox should not be checked");
|
||||||
|
assert_true(checkbox2.checked, "checkbox should be checked");
|
||||||
|
label.click();
|
||||||
|
assert_false(checkbox1.checked, "checkbox should not be checked");
|
||||||
|
assert_false(checkbox2.checked, "checkbox should not be checked");
|
||||||
|
}, "Verify non-nested label 'for' logic");
|
||||||
|
|
||||||
|
async_test(function(t) {
|
||||||
|
document.querySelector("#test").innerHTML = '<iframe src=htmllabel-form-activation.html \
|
||||||
|
id="foo" name="foo"></iframe>'
|
||||||
|
|
||||||
|
var loaded = false;
|
||||||
|
var iframe = document.getElementById('foo');
|
||||||
|
iframe.onload = t.step_func(function() {
|
||||||
|
if (!loaded) {
|
||||||
|
loaded = true;
|
||||||
|
iframe.contentDocument.getElementById('tenth').click();
|
||||||
|
} else {
|
||||||
|
t.done();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, "label click should flow down to form");
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,4 @@
|
||||||
|
<!doctype html>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<title>Click action on label with nested form</title>
|
||||||
|
<label id="tenth">hi <form action="about:blank"><input type="submit"></form><input type="checkbox"></label>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue