<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style>
input {
    background-color: white;
    color: black;
}
input:read-only {
    background-color: rgb(1, 2, 3);
}
input:read-write {
    color: rgb(4, 5, 6);
}
</style>
</head>
<body>
    <div style="display:none">
        <fieldset>
            <legend>Legend!<input type="text" id="input1"></legend>
            <input type="text" id="input2">
        </fieldset>

        <fieldset disabled>
            <legend>Legend!<input type="text" id="input3"></legend>
            <input type="text" id="input4">
        </fieldset>

        <fieldset id="disabled-dynamically">
            <legend>Legend!<input type="text" id="input5"></legend>
            <input type="text" id="input6">
        </fieldset>
    </div>
</body>
<script>
description('Test the basic features of ":read-only", ":read-write" on the &ltinput&gt; element. In a fieldset, all elements that are not part of the legend are disabled if the fieldset is disabled.');

document.getElementById("disabled-dynamically").disabled = true;

shouldBe("document.querySelectorAll(\"input:read-write\").length", "4");
shouldBeEqualToString("document.querySelectorAll(\"input:read-write\")[0].id", "input1");
shouldBeEqualToString("document.querySelectorAll(\"input:read-write\")[1].id", "input2");
shouldBeEqualToString("document.querySelectorAll(\"input:read-write\")[2].id", "input3");
shouldBeEqualToString("document.querySelectorAll(\"input:read-write\")[3].id", "input5");

shouldBe("document.querySelectorAll(\"input:read-only\").length", "2");
shouldBeEqualToString("document.querySelectorAll(\"input:read-only\")[0].id", "input4");
shouldBeEqualToString("document.querySelectorAll(\"input:read-only\")[1].id", "input6");

shouldBeEqualToString("getComputedStyle(document.getElementById('input1')).backgroundColor", "rgb(255, 255, 255)");
shouldBeEqualToString("getComputedStyle(document.getElementById('input1')).color", "rgb(4, 5, 6)");

shouldBeEqualToString("getComputedStyle(document.getElementById('input2')).backgroundColor", "rgb(255, 255, 255)");
shouldBeEqualToString("getComputedStyle(document.getElementById('input2')).color", "rgb(4, 5, 6)");

shouldBeEqualToString("getComputedStyle(document.getElementById('input3')).backgroundColor", "rgb(255, 255, 255)");
shouldBeEqualToString("getComputedStyle(document.getElementById('input3')).color", "rgb(4, 5, 6)");

shouldBeEqualToString("getComputedStyle(document.getElementById('input4')).backgroundColor", "rgb(1, 2, 3)");
shouldBeEqualToString("getComputedStyle(document.getElementById('input4')).color", "rgb(0, 0, 0)");

shouldBeEqualToString("getComputedStyle(document.getElementById('input5')).backgroundColor", "rgb(255, 255, 255)");
shouldBeEqualToString("getComputedStyle(document.getElementById('input5')).color", "rgb(4, 5, 6)");

shouldBeEqualToString("getComputedStyle(document.getElementById('input6')).backgroundColor", "rgb(1, 2, 3)");
shouldBeEqualToString("getComputedStyle(document.getElementById('input6')).color", "rgb(0, 0, 0)");

</script>
<script src="../../resources/js-test-post.js"></script>
</html>