selection-start-end-extra.html (6037B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title></title> 4 <script src=/resources/testharness.js></script> 5 <script src=/resources/testharnessreport.js></script> 6 <div id=log></div> 7 <form id="form"><input id="form-input" type="text" value="abc" /></form> 8 <script> 9 // * Should we test setting the dirty flag in any way that isn't 10 // setting the value? 11 // * How to simulate users typing? 12 13 test(function() { 14 var el = document.createElement("textarea"); 15 assert_equals(el.selectionStart, 0); 16 assert_equals(el.selectionEnd, 0); 17 el.defaultValue = "123"; 18 assert_equals(el.value.length, 3); 19 assert_equals(el.selectionStart, 0); 20 assert_equals(el.selectionEnd, 0); 21 }, "Setting defaultValue in a textarea should NOT move the cursor to the end"); 22 23 test(function() { 24 var el = document.createElement("textarea"); 25 el.value = "abcdef"; 26 assert_equals(el.selectionStart, 6); 27 assert_equals(el.selectionEnd, 6); 28 el.defaultValue = "123"; 29 assert_equals(el.value.length, 6); 30 assert_equals(el.selectionStart, 6); 31 assert_equals(el.selectionEnd, 6); 32 }, "Setting defaultValue in a textarea with a value should NOT make any difference"); 33 34 test(function() { 35 var el = document.createElement("textarea"); 36 el.appendChild(document.createTextNode("abcdef")); 37 assert_equals(el.selectionStart, 0); 38 assert_equals(el.selectionEnd, 0); 39 el.textContent = "abcdef123456"; 40 assert_equals(el.selectionStart, 0); 41 assert_equals(el.selectionEnd, 0); 42 }, "Setting textContent in a textarea should NOT move selection{Start,End} to the end"); 43 44 test(function() { 45 var el = document.createElement("textarea"); 46 el.appendChild(document.createTextNode("abcdef")); 47 assert_equals(el.selectionStart, 0); 48 assert_equals(el.selectionEnd, 0); 49 el.appendChild(document.createTextNode("123456")); 50 assert_equals(el.selectionStart, 0); 51 assert_equals(el.selectionEnd, 0); 52 }, "Adding children to a textarea should NOT move selection{Start,End} to the end"); 53 54 test(function() { 55 var el = document.createElement("textarea"); 56 el.appendChild(document.createTextNode("abcdef")); 57 el.appendChild(document.createTextNode("123")); 58 assert_equals(el.selectionStart, 0); 59 assert_equals(el.selectionEnd, 0); 60 61 el.removeChild(el.firstChild); 62 assert_equals(el.selectionStart, 0); 63 assert_equals(el.selectionEnd, 0); 64 }, "Removing children from a textarea should NOT update selection{Start,End}"); 65 66 test(function() { 67 var el = document.createElement("textarea"); 68 el.textContent = "abcdef\nwhatevs"; 69 el.selectionStart = 3; 70 el.selectionEnd = 5; 71 72 el.firstChild.data = "abcdef\r\nwhatevs"; 73 assert_equals(el.selectionStart, 3); 74 assert_equals(el.selectionEnd, 5); 75 }, "Setting the same value (with different newlines) in a textarea should NOT update selection{Start,End}"); 76 77 test(function() { 78 var el = document.createElement("textarea"); 79 el.textContent = "foobar"; 80 el.selectionStart = 3; 81 el.selectionEnd = 5; 82 el.firstChild.remove(); 83 assert_equals(el.selectionStart, 0, 'selectionStart after node removal'); 84 assert_equals(el.selectionEnd, 0, 'selectionEnd after node removal'); 85 el.appendChild(document.createTextNode("foobar")); 86 assert_equals(el.selectionStart, 0, 'selectionStart after appendChild'); 87 assert_equals(el.selectionEnd, 0, 'selectionEnd after appendChild'); 88 89 el.selectionStart = 3; 90 el.selectionEnd = 5; 91 el.textContent = "foobar2"; // This removes the child node first. 92 assert_equals(el.selectionStart, 0, 'selectionStart after textContent setter'); 93 assert_equals(el.selectionEnd, 0, 'selectionEnd after textContent setter'); 94 95 el.selectionStart = 3; 96 el.selectionEnd = 5; 97 el.defaultValue = "foobar"; // Same as textContent setter. 98 assert_equals(el.selectionStart, 0, 'selectionStart after defaultValue setter'); 99 assert_equals(el.selectionEnd, 0, 'selectionEnd after defaultValue setter'); 100 101 }, "Removing child nodes in non-dirty textarea should make selection{Start,End} 0"); 102 103 test(function() { 104 var el = document.createElement("textarea"); 105 el.defaultValue = "123"; 106 assert_equals(el.value.length, 3); 107 el.selectionStart = 3; 108 el.selectionEnd = 3; 109 el.value = "12"; 110 assert_equals(el.value.length, 2); 111 assert_equals(el.selectionStart, 2); 112 assert_equals(el.selectionEnd, 2); 113 }, "Setting value to a shorter string than defaultValue should correct the cursor position"); 114 115 test(function() { 116 var el = document.createElement("input"); 117 el.type = "text"; 118 el.value = "http://example.com "; 119 assert_equals(el.selectionStart, 21); 120 assert_equals(el.selectionEnd, 21); 121 el.type = "url"; 122 assert_equals(el.selectionStart, 18); 123 assert_equals(el.selectionEnd, 18); 124 }, "Shortening value by turning the input type into 'url' should correct selection{Start,End}"); 125 126 test(function() { 127 var el = document.createElement("input"); 128 el.type = "text"; 129 el.value = "#123456xx"; 130 assert_equals(el.selectionStart, 9); 131 assert_equals(el.selectionEnd, 9); 132 el.type = "color"; 133 el.type = "text"; 134 // https://html.spec.whatwg.org/C/input.html#the-input-element:attr-input-type-15 135 // 9. If previouslySelectable is false and nowSelectable is true, set the 136 // element's text entry cursor position to the beginning of the text 137 // control, ... 138 assert_equals(el.selectionStart, 0); 139 assert_equals(el.selectionEnd, 0); 140 }, "Shortening value by turning the input type into 'color' and back to 'text' should correct selection{Start,End}"); 141 142 test(function() { 143 var form = document.getElementById("form"); 144 var el = document.getElementById("form-input"); 145 146 el.value = "abcde"; 147 assert_equals(el.value.length, 5); 148 form.reset(); 149 assert_equals(el.value.length, 3); 150 assert_equals(el.selectionStart, 3); 151 assert_equals(el.selectionEnd, 3); 152 }, "Resetting a value to a shorter string than defaultValue should correct the cursor position"); 153 </script>