140 lines
5.7 KiB
HTML
140 lines
5.7 KiB
HTML
<!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>
|