Skip to content

Commit

Permalink
Add test for HtmlLabelElement clicks
Browse files Browse the repository at this point in the history
  • Loading branch information
@rebstar6
rebstar6 committed Mar 29, 2016
1 parent 3c7e6a4 commit e813f4a
Show file tree
Hide file tree
Showing 3 changed files with 180 additions and 0 deletions.
6 changes: 6 additions & 0 deletions tests/wpt/mozilla/meta/MANIFEST.json
View file
Expand Up @@ -5892,6 +5892,12 @@
"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": [
{
"path": "mozilla/htmlspacechars.html",
Expand Down
170 changes: 170 additions & 0 deletions tests/wpt/mozilla/tests/mozilla/htmllabel-activation.html
View 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>
4 changes: 4 additions & 0 deletions tests/wpt/mozilla/tests/mozilla/htmllabel-form-activation.html
View file
@@ -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>

0 comments on commit e813f4a

Please sign in to comment.