209 lines
11 KiB
HTML
209 lines
11 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
input {
|
|
background-color: rgb(1, 2, 3);
|
|
color: rgb(4, 5, 6);
|
|
}
|
|
:checked {
|
|
background-color: rgb(7, 8, 9);
|
|
}
|
|
:indeterminate {
|
|
color: rgb(10, 11, 12);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="testcases">
|
|
<input type="radio" name="group1" id="radio1-in-document">
|
|
<input type="radio" name="group1" id="radio2-in-document" checked>
|
|
<input type="radio" name="group2" id="radio3-in-document">
|
|
<input type="radio" name="group2" id="radio4-in-document">
|
|
</div>
|
|
</body>
|
|
<script>
|
|
description('Verify :indeterminate, :checked and the indeterminate property on radio button detached from the document.');
|
|
|
|
debug("Initial state");
|
|
shouldBeFalse("document.getElementById('radio1-in-document').indeterminate");
|
|
shouldBeFalse("document.getElementById('radio2-in-document').indeterminate");
|
|
shouldBeFalse("document.getElementById('radio3-in-document').indeterminate");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').indeterminate");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').checked");
|
|
shouldBeTrue("document.getElementById('radio2-in-document').checked");
|
|
shouldBeFalse("document.getElementById('radio3-in-document').checked");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').checked");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').matches(':indeterminate')");
|
|
shouldBeFalse("document.getElementById('radio2-in-document').matches(':indeterminate')");
|
|
shouldBeTrue("document.getElementById('radio3-in-document').matches(':indeterminate')");
|
|
shouldBeTrue("document.getElementById('radio4-in-document').matches(':indeterminate')");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').matches(':checked')");
|
|
shouldBeTrue("document.getElementById('radio2-in-document').matches(':checked')");
|
|
shouldBeFalse("document.getElementById('radio3-in-document').matches(':checked')");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').matches(':checked')");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio2-in-document')).backgroundColor", "rgb(7, 8, 9)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio3-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).color", "rgb(4, 5, 6)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio2-in-document')).color", "rgb(4, 5, 6)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio3-in-document')).color", "rgb(10, 11, 12)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).color", "rgb(10, 11, 12)");
|
|
|
|
debug("Remove radio2-in-document from document, into variable radio2");
|
|
let radio2 = document.getElementById('radio2-in-document');
|
|
radio2.parentElement.removeChild(radio2);
|
|
shouldBe("document.querySelectorAll('radio2-in-document')", "[]");
|
|
shouldBeFalse("document.getElementById('radio1-in-document').indeterminate");
|
|
shouldBeFalse("radio2.indeterminate");
|
|
shouldBeFalse("document.getElementById('radio3-in-document').indeterminate");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').indeterminate");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').checked");
|
|
shouldBeTrue("radio2.checked");
|
|
shouldBeFalse("document.getElementById('radio3-in-document').checked");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').checked");
|
|
|
|
shouldBeTrue("document.getElementById('radio1-in-document').matches(':indeterminate')");
|
|
shouldBeFalse("radio2.matches(':indeterminate')");
|
|
shouldBeTrue("document.getElementById('radio3-in-document').matches(':indeterminate')");
|
|
shouldBeTrue("document.getElementById('radio4-in-document').matches(':indeterminate')");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').matches(':checked')");
|
|
shouldBeTrue("radio2.matches(':checked')");
|
|
shouldBeFalse("document.getElementById('radio3-in-document').matches(':checked')");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').matches(':checked')");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(radio2).backgroundColor", "");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio3-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).color", "rgb(10, 11, 12)");
|
|
shouldBeEqualToString("getComputedStyle(radio2).color", "");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio3-in-document')).color", "rgb(10, 11, 12)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).color", "rgb(10, 11, 12)");
|
|
|
|
debug("Remove radio3-in-document from document, into variable radio3");
|
|
let radio3 = document.getElementById('radio3-in-document');
|
|
radio3.parentElement.removeChild(radio3);
|
|
shouldBe("document.querySelectorAll('radio3-in-document')", "[]");
|
|
shouldBeFalse("document.getElementById('radio1-in-document').indeterminate");
|
|
shouldBeFalse("radio2.indeterminate");
|
|
shouldBeFalse("radio3.indeterminate");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').indeterminate");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').checked");
|
|
shouldBeTrue("radio2.checked");
|
|
shouldBeFalse("radio3.checked");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').checked");
|
|
|
|
shouldBeTrue("document.getElementById('radio1-in-document').matches(':indeterminate')");
|
|
shouldBeFalse("radio2.matches(':indeterminate')");
|
|
shouldBeTrue("radio3.matches(':indeterminate')");
|
|
shouldBeTrue("document.getElementById('radio4-in-document').matches(':indeterminate')");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').matches(':checked')");
|
|
shouldBeTrue("radio2.matches(':checked')");
|
|
shouldBeFalse("radio3.matches(':checked')");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').matches(':checked')");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(radio2).backgroundColor", "");
|
|
shouldBeEqualToString("getComputedStyle(radio3).backgroundColor", "");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).color", "rgb(10, 11, 12)");
|
|
shouldBeEqualToString("getComputedStyle(radio2).color", "");
|
|
shouldBeEqualToString("getComputedStyle(radio3).color", "");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).color", "rgb(10, 11, 12)");
|
|
|
|
debug("Create new element named webkitRadio");
|
|
let webkitRadio = document.createElement("input");
|
|
webkitRadio.type = "radio";
|
|
shouldBeFalse("document.getElementById('radio1-in-document').indeterminate");
|
|
shouldBeFalse("radio2.indeterminate");
|
|
shouldBeFalse("radio3.indeterminate");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').indeterminate");
|
|
shouldBeFalse("webkitRadio.indeterminate");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').checked");
|
|
shouldBeTrue("radio2.checked");
|
|
shouldBeFalse("radio3.checked");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').checked");
|
|
shouldBeFalse("webkitRadio.checked");
|
|
|
|
shouldBeTrue("document.getElementById('radio1-in-document').matches(':indeterminate')");
|
|
shouldBeFalse("radio2.matches(':indeterminate')");
|
|
shouldBeTrue("radio3.matches(':indeterminate')");
|
|
shouldBeTrue("document.getElementById('radio4-in-document').matches(':indeterminate')");
|
|
shouldBeTrue("webkitRadio.matches(':indeterminate')");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').matches(':checked')");
|
|
shouldBeTrue("radio2.matches(':checked')");
|
|
shouldBeFalse("radio3.matches(':checked')");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').matches(':checked')");
|
|
shouldBeFalse("webkitRadio.matches(':checked')");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(radio2).backgroundColor", "");
|
|
shouldBeEqualToString("getComputedStyle(radio3).backgroundColor", "");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(webkitRadio).backgroundColor", "");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).color", "rgb(10, 11, 12)");
|
|
shouldBeEqualToString("getComputedStyle(radio2).color", "");
|
|
shouldBeEqualToString("getComputedStyle(radio3).color", "");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).color", "rgb(10, 11, 12)");
|
|
shouldBeEqualToString("getComputedStyle(webkitRadio).color", "");
|
|
|
|
debug("Check webkitRadio");
|
|
webkitRadio.checked = true;
|
|
shouldBeFalse("document.getElementById('radio1-in-document').indeterminate");
|
|
shouldBeFalse("radio2.indeterminate");
|
|
shouldBeFalse("radio3.indeterminate");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').indeterminate");
|
|
shouldBeFalse("webkitRadio.indeterminate");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').checked");
|
|
shouldBeTrue("radio2.checked");
|
|
shouldBeFalse("radio3.checked");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').checked");
|
|
shouldBeTrue("webkitRadio.checked");
|
|
|
|
shouldBeTrue("document.getElementById('radio1-in-document').matches(':indeterminate')");
|
|
shouldBeFalse("radio2.matches(':indeterminate')");
|
|
shouldBeTrue("radio3.matches(':indeterminate')");
|
|
shouldBeTrue("document.getElementById('radio4-in-document').matches(':indeterminate')");
|
|
shouldBeFalse("webkitRadio.matches(':indeterminate')");
|
|
|
|
shouldBeFalse("document.getElementById('radio1-in-document').matches(':checked')");
|
|
shouldBeTrue("radio2.matches(':checked')");
|
|
shouldBeFalse("radio3.matches(':checked')");
|
|
shouldBeFalse("document.getElementById('radio4-in-document').matches(':checked')");
|
|
shouldBeTrue("webkitRadio.matches(':checked')");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(radio2).backgroundColor", "");
|
|
shouldBeEqualToString("getComputedStyle(radio3).backgroundColor", "");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(webkitRadio).backgroundColor", "");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio1-in-document')).color", "rgb(10, 11, 12)");
|
|
shouldBeEqualToString("getComputedStyle(radio2).color", "");
|
|
shouldBeEqualToString("getComputedStyle(radio3).color", "");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('radio4-in-document')).color", "rgb(10, 11, 12)");
|
|
shouldBeEqualToString("getComputedStyle(webkitRadio).color", "");
|
|
|
|
document.getElementById("testcases").style.display = "none";
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|