| <!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"> |
| <input id="testcase"> |
| </div> |
| </body> |
| <script> |
| description('Test the basic features of ":read-only", ":read-write" on the <input> element. The definion is that ":read-write" is matches for "input elements to which the readonly attribute applies, and that are mutable (i.e. that do not have the readonly attribute specified and that are not disabled)"'); |
| |
| // List of [input type, supports readonly attribute]. |
| var inputTypes = [ |
| // Input types defined in the HTML Living Standard. http://www.whatwg.org/html/ |
| ["hidden", false], |
| ["text", true], |
| ["search", true], |
| ["tel", true], |
| ["url", true], |
| ["email", true], |
| ["password", true], |
| ["datetime", true], |
| ["date", true], |
| ["month", true], |
| ["week", true], |
| ["time", true], |
| ["datetime-local", true], |
| ["number", true], |
| ["range", false], |
| ["color", false], |
| ["checkbox", false], |
| ["radio", false], |
| ["file", false], |
| ["submit", false], |
| ["image", false], |
| ["reset", false], |
| ["button", false], |
| |
| // Made up ones. |
| ["", true], |
| ["webkit", true], |
| ["foobar", true], |
| ]; |
| |
| function testProperties(isReadOnly) { |
| shouldBe('document.querySelectorAll("input:read-write").length', isReadOnly ? "0" : "1"); |
| shouldBe('document.querySelector("input:read-write")', isReadOnly ? "null" : "document.getElementById(\"testcase\")"); |
| shouldBe('document.querySelectorAll("input:read-only").length', isReadOnly ? "1" : "0"); |
| shouldBe('document.querySelector("input:read-only")', isReadOnly ? "document.getElementById(\"testcase\")" : "null"); |
| shouldBeEqualToString("getComputedStyle(document.getElementById(\"testcase\")).color", isReadOnly ? "rgb(0, 0, 0)" : "rgb(4, 5, 6)"); |
| shouldBeEqualToString("getComputedStyle(document.getElementById(\"testcase\")).backgroundColor", isReadOnly ? "rgb(1, 2, 3)" : "rgb(255, 255, 255)"); |
| } |
| |
| function testInputType(inputType, supportsReadonly) { |
| var testCase = document.getElementById("testcase"); |
| testCase.type = inputType; |
| |
| // Initial state. |
| testProperties(!supportsReadonly); |
| |
| // Setting readonly through API. |
| testCase.readOnly = true; |
| testProperties(true); |
| |
| testCase.readOnly = false; |
| testProperties(!supportsReadonly); |
| |
| // Setting readonly through attributes. |
| testCase.setAttribute("readonly", ""); |
| testProperties(true); |
| |
| testCase.removeAttribute("readonly"); |
| testProperties(!supportsReadonly); |
| |
| // Setting disabled through API. |
| testCase.disabled = true; |
| testProperties(true); |
| |
| testCase.disabled = false; |
| testProperties(!supportsReadonly); |
| |
| // Setting disabled through attributes. |
| testCase.setAttribute("disabled", ""); |
| testProperties(true); |
| |
| testCase.removeAttribute("disabled"); |
| testProperties(!supportsReadonly); |
| |
| // Setting both. |
| testCase.readOnly = true; |
| testCase.disabled = true; |
| testProperties(true); |
| |
| // Remove them one by one. |
| testCase.removeAttribute("disabled"); |
| testProperties(true); |
| testCase.removeAttribute("readonly"); |
| testProperties(!supportsReadonly); |
| } |
| |
| for (var i = 0; i < inputTypes.length; ++i) { |
| debug("Testing " + inputTypes[i][0]); |
| testInputType(inputTypes[i][0], inputTypes[i][1]); |
| } |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
