selection-value-interactions.html (3745B)
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 <div id=target></div> 8 <script> 9 var target = document.getElementById("target"); 10 var sometext = "something"; 11 var shorttext = "abc"; 12 var elemData = [ 13 { 14 desc: "textarea not in body", 15 factory: () => document.createElement("textarea"), 16 }, 17 { 18 desc: "input not in body", 19 factory: () => document.createElement("input"), 20 }, 21 { 22 desc: "textarea in body", 23 factory: () => document.body.appendChild(document.createElement("textarea")), 24 }, 25 { 26 desc: "input in body", 27 factory: () => document.body.appendChild(document.createElement("input")), 28 }, 29 { 30 desc: "textarea in body with parsed default value", 31 factory: () => { 32 target.innerHTML = "<textarea>abcdefghij</textarea>" 33 return target.querySelector("textarea"); 34 }, 35 }, 36 { 37 desc: "input in body with parsed default value", 38 factory: () => { 39 target.innerHTML = "<input value='abcdefghij'>" 40 return target.querySelector("input"); 41 }, 42 }, 43 { 44 desc: "focused textarea", 45 factory: () => { 46 var t = document.body.appendChild(document.createElement("textarea")); 47 t.focus(); 48 return t; 49 }, 50 }, 51 { 52 desc: "focused input", 53 factory: () => { 54 var i = document.body.appendChild(document.createElement("input")); 55 i.focus(); 56 return i; 57 }, 58 }, 59 { 60 desc: "focused then blurred textarea", 61 factory: () => { 62 var t = document.body.appendChild(document.createElement("textarea")); 63 t.focus(); 64 t.blur(); 65 return t; 66 }, 67 }, 68 { 69 desc: "focused then blurred input", 70 factory: () => { 71 var i = document.body.appendChild(document.createElement("input")); 72 i.focus(); 73 i.blur() 74 return i; 75 }, 76 }, 77 ]; 78 79 for (var data of elemData) { 80 test(function() { 81 var el = data.factory(); 82 this.add_cleanup(() => el.remove()); 83 el.defaultValue = sometext; 84 assert_true(sometext.length > 8, 85 "sometext too short, test won't work right"); 86 el.selectionStart = 4; 87 el.selectionEnd = 6; 88 el.setRangeText("xyz"); 89 el.defaultValue = "set range text"; 90 assert_equals(el.value, sometext.slice(0, 4) + "xyz" + sometext.slice(6), 91 "Calling setRangeText should set the value dirty flag"); 92 }, `value dirty flag behavior after setRangeText on ${data.desc}`); 93 } 94 95 for (var tag of ['input', 'textarea']) { 96 test(function() { 97 var el = document.createElement(tag); 98 document.body.appendChild(el); 99 this.add_cleanup(() => el.remove()); 100 101 for (let val of ["", "foo", "foobar"]) { 102 el.value = val; 103 assert_equals(el.selectionStart, val.length, 104 "element.selectionStart should be value.length"); 105 assert_equals(el.selectionEnd, val.length, 106 "element.selectionEnd should be value.length"); 107 } 108 }, `selection is collapsed to the end after changing values on ${tag}`); 109 110 test(function() { 111 var el = document.createElement(tag); 112 document.body.appendChild(el); 113 this.add_cleanup(() => el.remove()); 114 115 el.value = "foobar" 116 el.selectionStart = 2 117 el.selectionEnd = 4 118 el.value = "foobar" 119 120 assert_equals(el.selectionStart, 2, 121 "element.selectionStart should be unchanged"); 122 assert_equals(el.selectionEnd, 4, 123 "element.selectionEnd should be unchanged"); 124 }, `selection is not collapsed to the end when value is set to its existing value on ${tag}`); 125 } 126 127 </script>