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