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