72 lines
3.3 KiB
HTML
72 lines
3.3 KiB
HTML
<!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">
|
|
<fieldset>
|
|
<legend>Legend!<textarea id="textarea1"></textarea></legend>
|
|
<textarea id="textarea2"></textarea>
|
|
</fieldset>
|
|
|
|
<fieldset disabled>
|
|
<legend>Legend!<textarea id="textarea3"></textarea></legend>
|
|
<textarea id="textarea4"></textarea>
|
|
</fieldset>
|
|
|
|
<fieldset id="disabled-dynamically">
|
|
<legend>Legend!<textarea id="textarea5"></textarea></legend>
|
|
<textarea id="textarea6"></textarea>
|
|
</fieldset>
|
|
</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". In a fieldset, all elements that are not part of the legend are disabled if the fieldset is disabled.');
|
|
|
|
document.getElementById("disabled-dynamically").disabled = true;
|
|
|
|
shouldBe("document.querySelectorAll(\"textarea:read-write\").length", "4");
|
|
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-write\")[0].id", "textarea1");
|
|
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-write\")[1].id", "textarea2");
|
|
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-write\")[2].id", "textarea3");
|
|
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-write\")[3].id", "textarea5");
|
|
|
|
shouldBe("document.querySelectorAll(\"textarea:read-only\").length", "2");
|
|
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-only\")[0].id", "textarea4");
|
|
shouldBeEqualToString("document.querySelectorAll(\"textarea:read-only\")[1].id", "textarea6");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea1')).backgroundColor", "rgb(255, 255, 255)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea1')).color", "rgb(4, 5, 6)");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea2')).backgroundColor", "rgb(255, 255, 255)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea2')).color", "rgb(4, 5, 6)");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea3')).backgroundColor", "rgb(255, 255, 255)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea3')).color", "rgb(4, 5, 6)");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea4')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea4')).color", "rgb(0, 0, 0)");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea5')).backgroundColor", "rgb(255, 255, 255)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea5')).color", "rgb(4, 5, 6)");
|
|
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea6')).backgroundColor", "rgb(1, 2, 3)");
|
|
shouldBeEqualToString("getComputedStyle(document.getElementById('textarea6')).color", "rgb(0, 0, 0)");
|
|
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|