| <!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> |
