| <!doctype html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style id="toNukeAfterTest"> |
| * { |
| background-color: white; |
| color: black; |
| } |
| :read-only { |
| background-color: red; |
| } |
| :read-write { |
| color: lime; |
| } |
| </style> |
| </head> |
| <body> |
| <div style="display:none;" id="test-block"> |
| <!-- Default is true --> |
| <div contenteditable> |
| <div>Editable</div> |
| <div id="non-editable-block-1" contenteditable=false> |
| <div id="non-editable-subblock-1">Not editable</div> |
| </div> |
| </div> |
| <!-- True is true :) --> |
| <div contenteditable=true> |
| <div>Editable</div> |
| <div id="non-editable-block-2" contenteditable=false> |
| <div id="non-editable-subblock-2">Not editable</div> |
| </div> |
| </div> |
| <!-- The case of the attribute's value is irrelevant. --> |
| <div contenteditable="TrUe"> |
| <div>Editable</div> |
| <div id="non-editable-block-3" contenteditable="FaLsE"> |
| <div id="non-editable-subblock-3">Not editable</div> |
| </div> |
| </div> |
| <!-- The value "plaintext-only" is a WebKit extension, it defines an editing host too. --> |
| <div contenteditable="plaintext-only"> |
| <div>Editable</div> |
| <div id="non-editable-block-4" contenteditable="false"> |
| <div id="non-editable-subblock-4">Not editable</div> |
| </div> |
| </div> |
| |
| <!-- Per definition, the rules for editing host and editable elements do not apply do <input> elements. --> |
| <div contenteditable=true> |
| <input type="text" id="read-write-input" value="read-write input"> |
| <input type="text" disabled id="read-only-input-1" value="read-only input"> |
| <input type="text" readonly id="read-only-input-2" value="read-only input"> |
| </div> |
| <input type="text" contenteditable=true disabled id="read-only-input-3" value="read-only input"> |
| <input type="text" contenteditable=true readonly id="read-only-input-4" value="read-only input"> |
| |
| <!-- Same story for <textarea>, it has its own definition of :read-write/:read-only. The rules for editing host and editable elements do not apply must be ignored. --> |
| <div contenteditable=true> |
| <textarea id="read-write-textarea">Editable text area</textarea> |
| <textarea disabled id="read-only-textarea-1">Non editable text area</textarea> |
| <textarea readonly id="read-only-textarea-2">Non editable text area</textarea> |
| </div> |
| <textarea contenteditable=true disabled id="read-only-textarea-3">Non editable text area</textarea> |
| <textarea contenteditable=true readonly id="read-only-textarea-4">Non editable text area</textarea> |
| </div> |
| </body> |
| <script> |
| description('Test the basic features of ":read-only", ":read-write" on elements with the design mode enabled. The definition is that ":read-write" is matches for "elements that are editing hosts or editable and are neither input elements nor textarea elements"'); |
| |
| // This test is derivative from the contenteditable test. Unlike that one, here designMode is enabled, everything is editable unless explicitely disabled. |
| document.designMode = "on"; |
| |
| var nonEditableElements = [ |
| "non-editable-block-1", |
| "non-editable-subblock-1", |
| "non-editable-block-2", |
| "non-editable-subblock-2", |
| "non-editable-block-3", |
| "non-editable-subblock-3", |
| "non-editable-block-4", |
| "non-editable-subblock-4", |
| "read-only-input-1", |
| "read-only-input-2", |
| "read-only-input-3", |
| "read-only-input-4", |
| "read-only-textarea-1", |
| "read-only-textarea-2", |
| "read-only-textarea-3", |
| "read-only-textarea-4" |
| ]; |
| |
| // Since altering the DOM changes the results, everything needs to be done prior to showing the results. |
| function testQuerySelector() |
| { |
| var allReadWrite = document.querySelectorAll(":read-write"); |
| for (var i = 0; i < allReadWrite.length; ++i) { |
| if (nonEditableElements.indexOf(allReadWrite[i].id) >= 0) { |
| debug("Element i = " + i + " id = " + allReadWrite[i].id + "was expected to be read-write."); |
| return false; |
| } |
| } |
| |
| var allReadOnly = document.querySelectorAll(":read-only"); |
| for (var i = 0; i < allReadOnly.length; ++i) { |
| if (nonEditableElements.indexOf(allReadOnly[i].id) === -1) { |
| debug("Element i = " + i + " id = " + allReadWrite[i].id + "was expected to be read-only."); |
| return false; |
| } |
| } |
| return true; |
| } |
| shouldBeTrue("testQuerySelector()"); |
| |
| function testStyling() |
| { |
| var allTestCases = document.querySelectorAll('*'); |
| for (var i = 0; i < allTestCases.length; ++i) { |
| var isReadOnly = nonEditableElements.indexOf(allTestCases[i].id) >= 0; |
| var expectedColor = isReadOnly ? 'rgb(0, 0, 0)' : 'rgb(0, 255, 0)'; |
| if (getComputedStyle(allTestCases[i]).color != expectedColor) { |
| debug("Expected color " + expectedColor + " on element i = " + i + " id = \"" + allTestCases[i].id + "\". Got " + getComputedStyle(allTestCases[i]).color); |
| return false; |
| } |
| |
| var expectedBackgroundColor = isReadOnly ? 'rgb(255, 0, 0)' : 'rgb(255, 255, 255)'; |
| if (getComputedStyle(allTestCases[i]).backgroundColor != expectedBackgroundColor) { |
| debug("Expected background color " + expectedBackgroundColor + "on element i = " + i + " id = " + allTestCases[i].id + ". Got " + getComputedStyle(allTestCases[i]).backgroundColor); |
| return false; |
| } |
| } |
| return true; |
| } |
| shouldBeTrue("testStyling()"); |
| |
| document.getElementById("toNukeAfterTest").innerHTML = ""; // To style the results properly. |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
