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

        <fieldset disabled>
            <legend>Legend!<textarea id="textarea3"></textarea></legend>
            <textarea id="textarea4"></textarea>
        </fieldset>

        <fieldset id="disabled-dynamically">
            <legend>Legend!<textarea id="textarea5"></textarea></legend>
            <textarea id="textarea6"></textarea>
        </fieldset>
    </div>
</body>
<script>
description('Test the basic features of ":read-only", ":read-write" on the &lttextarea&gt; element. The definition is that ":read-write" is matches for "textarea elements that do not have a readonly attribute, and that are not disabled". 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(\"textarea:read-write\").length", "4");
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-write\")[0].id", "textarea1");
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-write\")[1].id", "textarea2");
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-write\")[2].id", "textarea3");
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-write\")[3].id", "textarea5");

shouldBe("document.querySelectorAll(\"textarea:read-only\").length", "2");
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-only\")[0].id", "textarea4");
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-only\")[1].id", "textarea6");

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

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

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

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

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

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

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