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