1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181
|
<!DOCTYPE HTML>
<title>textarea element value/defaultValue/textContent functionality</title>
<link rel="author" title="Domenic Denicola" href="mailto:d@domenic.me">
<link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-textarea-value">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script>
"use strict";
test(() => {
const textarea = document.createElement("textarea");
assert_equals(textarea.defaultValue, "", "defaultValue is empty string when it has no content");
assert_equals(textarea.value, "", "value is empty string when it has no content");
}, "defaultValue and value are the empty string by default");
test(() => {
const textarea = document.createElement("textarea");
textarea.textContent = "foo bar";
assert_equals(textarea.defaultValue, "foo bar", "the defaultValue should reflect the textContent");
assert_equals(textarea.value, "foo bar",
"changing the textContent should change the raw value, and subsequently the api value");
}, "defaultValue and value are affected by setting textContent");
test(() => {
const textarea = document.createElement("textarea");
textarea.textContent = "some text";
textarea.firstChild.nodeValue = "foo bar";
assert_equals(textarea.defaultValue, "foo bar", "the defaultValue should reflect the textContent");
assert_equals(textarea.value, "foo bar",
"changing the textContent should change the raw value, and subsequently the api value");
}, "defaultValue and value are affected by setting nodeValue on a child text node");
test(() => {
const textarea = document.createElement("textarea");
textarea.textContent = "some text";
textarea.firstChild.data = "foo bar";
assert_equals(textarea.defaultValue, "foo bar", "the defaultValue should reflect the textContent");
assert_equals(textarea.value, "foo bar",
"changing the textContent should change the raw value, and subsequently the api value");
}, "defaultValue and value are affected by setting data on a child text node");
test(() => {
const textarea = document.createElement("textarea");
textarea.textContent = "foo bar";
textarea.appendChild(document.createTextNode(" baz"));
assert_equals(textarea.defaultValue, "foo bar baz", "the defaultValue should reflect the textContent");
assert_equals(textarea.value, "foo bar baz",
"changing the textContent should change the raw value, and subsequently the api value");
}, "defaultValue and value are affected by textContent in combination with appending a text node");
test(() => {
const textarea = document.createElement("textarea");
textarea.textContent = "foo bar";
const frag = document.createDocumentFragment();
frag.appendChild(document.createTextNode(" baz"));
const el = document.createElement("span");
el.appendChild(document.createTextNode("qux?"));
frag.appendChild(el);
frag.appendChild(document.createTextNode(" fizz"));
textarea.appendChild(frag);
textarea.appendChild(document.createTextNode(" whee"));
assert_equals(textarea.defaultValue, "foo bar baz fizz whee", "the defaultValue should reflect the textContent");
assert_equals(textarea.value, "foo bar baz fizz whee",
"changing the textContent should change the raw value, and subsequently the api value");
}, "defaultValue and value are affected by textContent in combination with appending a DocumentFragment");
test(() => {
const textarea = document.createElement("textarea");
textarea.appendChild(document.createTextNode("foo bar"));
const child = document.createElement("span");
child.textContent = "baz";
textarea.appendChild(child);
assert_equals(textarea.textContent, "foo barbaz", "the textContent should have *all* the text content");
assert_equals(textarea.defaultValue, "foo bar", "the defaultValue should reflect the child text content");
assert_equals(textarea.value, "foo bar",
"changing the child text content should change the raw value, and subsequently the api value");
}, "defaultValue and value reflect child text content, not textContent");
test(() => {
const textarea = document.createElement("textarea");
textarea.appendChild(document.createTextNode("foo bar"));
const child = document.createElement("span");
child.textContent = "baz";
textarea.appendChild(child);
textarea.defaultValue = "foo";
assert_equals(textarea.childNodes.length, 1, "Only one child node should exist");
assert_equals(textarea.defaultValue, "foo", "the defaultValue should be the new text");
assert_equals(textarea.value, "foo", "the api value should be the new text");
assert_equals(textarea.textContent, "foo", "the textContent should be the new text");
}, "Setting defaultValue wipes out any children, including elements (just like setting textContent)");
test(() => {
const textarea = document.createElement("textarea");
textarea.textContent = "foo\r\nbar\rbaz\nqux";
assert_equals(textarea.defaultValue, "foo\r\nbar\rbaz\nqux", "the defaultValue should reflect the textContent");
assert_equals(textarea.value, "foo\nbar\nbaz\nqux", "The value property should normalize CRLF and CR to LF");
}, "defaultValue and value treat CRLF differently");
test(() => {
const textarea = document.createElement("textarea");
textarea.appendChild(document.createTextNode("foo\r"));
textarea.appendChild(document.createTextNode("\nbar\rbaz\nqux"));
assert_equals(textarea.defaultValue, "foo\r\nbar\rbaz\nqux", "the defaultValue should reflect the textContent");
assert_equals(textarea.value, "foo\nbar\nbaz\nqux", "The value property should normalize CRLF and CR to LF");
}, "value normalizes CRLF even spread over multiple text nodes");
test(() => {
const textarea = document.createElement("textarea");
textarea.textContent = "foo";
textarea.value = "baz";
assert_equals(textarea.defaultValue, "foo", "setting the value property should not affect the defaultValue");
assert_equals(textarea.textContent, "foo", "setting the value property should not affect the textContent");
assert_equals(textarea.value, "baz",
"on setting, the value property must set the element's raw & api value to the new value");
textarea.value = "foo\r\nbar\rbaz\nqux";
assert_equals(textarea.value, "foo\nbar\nbaz\nqux", "The API value should normalize CRLF and CR to LF");
textarea.value = null;
assert_equals(textarea.value, "", "setting the value property to null should result in an empty string");
}, "tests for the value setter");
test(() => {
const textarea = document.createElement("textarea");
textarea.defaultValue = "foo\0";
assert_equals(textarea.defaultValue, "foo\0", "defaultValue after setting defaultValue");
assert_equals(textarea.textContent, "foo\0", "textContent after setting defaultValue");
assert_equals(textarea.value, "foo\0", "value after setting defaultValue");
textarea.textContent = "bar\0";
assert_equals(textarea.defaultValue, "bar\0", "defaultValue after setting textContent");
assert_equals(textarea.textContent, "bar\0", "textContent after setting textContent");
assert_equals(textarea.value, "bar\0", "value after setting textContent");
textarea.value = "baz\0";
assert_equals(textarea.defaultValue, "bar\0", "defaultValue after setting value");
assert_equals(textarea.textContent, "bar\0", "textContent after setting value");
assert_equals(textarea.value, "baz\0", "value after setting value");
}, "tests for U+0000 NULL");
</script>
|