<!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" id="test-block">
        <textarea id="initial-state"></textarea>

        <textarea id="readonly-defined" readonly></textarea>
        <textarea id="readonly-set-empty" readonly=""></textarea>
        <textarea id="readonly-set-readonly" readonly="readonly"></textarea>

        <textarea id="readonly-set-true" readonly="true"></textarea>
        <textarea id="readonly-set-false" readonly="false"></textarea>
        <textarea id="readonly-set-disabled" readonly="disabled"></textarea>

        <textarea id="disabled-defined" disabled></textarea>
        <textarea id="disabled-set-empty" disabled=""></textarea>
        <textarea id="disabled-set-disabled" disabled="disabled"></textarea>

        <textarea id="disabled-set-true" disabled="true"></textarea>
        <textarea id="disabled-set-false" disabled="false"></textarea>
        <textarea id="disabled-set-readonly" disabled="readonly"></textarea>

        <textarea id="readonly-and-disabled-defined" readonly disabled></textarea>
        <textarea id="readonly-and-disabled-set-empty" readonly="" disabled=""></textarea>
    </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"');

// First, let's test the static initialization of the parameters.
function testQuerySelector(selector, expectedMatch) {
    shouldBe("document.querySelectorAll(\"" + selector + "\").length", "" + expectedMatch.length);

    for (var i = 0; i < expectedMatch.length; ++i)
        shouldBeEqualToString("document.querySelectorAll(\"" + selector + "\")[" + i + "].id", expectedMatch[i]);
}

function testStyle(isReadOnly, expectedMatch) {
    for (var i = 0; i < expectedMatch.length; ++i) {
        shouldBeEqualToString("getComputedStyle(document.getElementById(\"" + expectedMatch[i] + "\")).backgroundColor", isReadOnly ? "rgb(1, 2, 3)" : "rgb(255, 255, 255)");
        shouldBeEqualToString("getComputedStyle(document.getElementById(\"" + expectedMatch[i] + "\")).color", isReadOnly ? "rgb(0, 0, 0)" : "rgb(4, 5, 6)");
    }
}

var elementsMatchingReadWrite = ["initial-state"];
var elementsMatchingReadOnly = ["readonly-defined", "readonly-set-empty", "readonly-set-readonly", "readonly-set-true", "readonly-set-false", "readonly-set-disabled", "disabled-defined", "disabled-set-empty", "disabled-set-disabled", "disabled-set-true", "disabled-set-false", "disabled-set-readonly", "readonly-and-disabled-defined", "readonly-and-disabled-set-empty"];

testQuerySelector("textarea:read-write", elementsMatchingReadWrite);
testQuerySelector("textarea:read-only", elementsMatchingReadOnly);
testStyle(false, elementsMatchingReadWrite);
testStyle(true, elementsMatchingReadOnly);


// Same Jazz, but updating through JavaScript instead.
var testBlock = document.getElementById("test-block");
testBlock.innerHTML = "";

var newTextArea = document.createElement("textarea");
testBlock.appendChild(newTextArea);

function testProperties(isReadOnly) {
    shouldBe('testBlock.querySelectorAll(":read-write").length', isReadOnly ? "0" : "1");
    shouldBe('testBlock.querySelector(":read-write")', isReadOnly ? "null" : "newTextArea");
    shouldBe('testBlock.querySelectorAll(":read-only").length', isReadOnly ? "1" : "0");
    shouldBe('testBlock.querySelector(":read-only")', isReadOnly ? "newTextArea" : "null");
    shouldBeEqualToString("getComputedStyle(newTextArea).color", isReadOnly ? "rgb(0, 0, 0)" : "rgb(4, 5, 6)");
    shouldBeEqualToString("getComputedStyle(newTextArea).backgroundColor", isReadOnly ? "rgb(1, 2, 3)" : "rgb(255, 255, 255)");
}

// Initially the text area is read-write.
testProperties(false);

// Setting read only through the API. Anything that evaluates to "true" makes the text area read only.
newTextArea.readOnly = true;
testProperties(true);

newTextArea.readOnly = false;
testProperties(false);

newTextArea.readOnly = "foobar";
testProperties(true);

newTextArea.readOnly = "";
testProperties(false);

newTextArea.readOnly = newTextArea;
testProperties(true);

newTextArea.readOnly = null;
testProperties(false);

newTextArea.readOnly = 69;
testProperties(true);

newTextArea.readOnly = undefined;
testProperties(false);

newTextArea.disabled = true;
testProperties(true);

newTextArea.disabled = false;
testProperties(false);

newTextArea.disabled = "foobar";
testProperties(true);

newTextArea.disabled = "";
testProperties(false);

newTextArea.disabled = newTextArea;
testProperties(true);

newTextArea.disabled = null;
testProperties(false);

newTextArea.disabled = 69;
testProperties(true);

newTextArea.disabled = undefined;
testProperties(false);

function testAttribute(attribute, value)
{
    newTextArea.setAttribute(attribute, value);
    testProperties(true);
    newTextArea.removeAttribute(attribute);
    testProperties(false);
}

// Setting the value through attributes.
newTextArea.setAttribute("readonly", "");
testProperties(true);
newTextArea.removeAttribute("readonly");
testProperties(false);

testAttribute("readonly", "");
testAttribute("readonly", "true");
testAttribute("readonly", "false");
testAttribute("readonly", "foobar");

newTextArea.setAttribute("disabled", "");
testProperties(true);
newTextArea.removeAttribute("disabled");
testProperties(false);

testAttribute("disabled", "");
testAttribute("disabled", "true");
testAttribute("disabled", "false");
testAttribute("disabled", "foobar");

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