input-in-text-control-which-is-also-editing-host.tentative.html (5550B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="timeout" content="long"> 6 <meta name="variant" content="?textcontrol=text"> 7 <meta name="variant" content="?textcontrol=password"> 8 <meta name="variant" content="?textcontrol=textarea"> 9 <title>Check whether a text control element handles user input when it's an editing host</title> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-vendor.js"></script> 14 <script src="/resources/testdriver-actions.js"></script> 15 </head> 16 <body> 17 <div></div> 18 <script> 19 const searchParams = new URLSearchParams(document.location.search); 20 const textControlType = searchParams.get("textcontrol"); 21 const textControlDescription = 22 textControlType == "textarea" 23 ? "<textarea contenteditable>" 24 : `<input type="${textControlType}" contenteditable>`; 25 const div = document.querySelector("div"); 26 27 function createTextControl() { 28 const textControl = document.createElement( 29 textControlType == "textarea" ? "textarea" : "input" 30 ); 31 if (textControlType != "textarea") { 32 textControl.type = textControlType; 33 } 34 return textControl; 35 } 36 37 promise_test(async t => { 38 const textControl = createTextControl(); 39 div.appendChild(textControl); 40 textControl.setAttribute("contenteditable", ""); 41 textControl.focus(); 42 await (new test_driver.Actions() 43 .keyDown("a") 44 .keyUp("a") 45 .keyDown("b") 46 .keyUp("b") 47 .keyDown("c") 48 .keyUp("c") 49 .send()); 50 assert_equals( 51 textControl.value, 52 "abc", 53 `${t.name}: The text control value should be updated` 54 ); 55 assert_equals( 56 document.querySelector("div").textContent.trim(), 57 "", 58 `${t.name}: No text should be inserted as a child of the text control` 59 ); 60 textControl.remove(); 61 }, `User typing in ${textControlDescription} should update the value`); 62 63 promise_test(async t => { 64 const textControl = createTextControl(); 65 div.appendChild(textControl); 66 textControl.setAttribute("contenteditable", ""); 67 textControl.focus(); 68 document.execCommand("insertText", false, "abc"); 69 assert_equals( 70 textControl.value, 71 "abc", 72 `${t.name}: The text control value should be updated` 73 ); 74 assert_equals( 75 div.textContent.trim(), 76 "", 77 `${t.name}: No text should be inserted as a child of the text control` 78 ); 79 textControl.remove(); 80 }, `execCommand("insertText") in ${textControlDescription} should update the value`); 81 82 promise_test(async t => { 83 const textControl = createTextControl(); 84 div.appendChild(textControl); 85 textControl.focus(); 86 textControl.setAttribute("contenteditable", ""); 87 await (new test_driver.Actions() 88 .keyDown("a") 89 .keyUp("a") 90 .keyDown("b") 91 .keyUp("b") 92 .keyDown("c") 93 .keyUp("c") 94 .send()); 95 assert_equals( 96 textControl.value, 97 "abc", 98 `${t.name}: The text control value should be updated` 99 ); 100 assert_equals( 101 div.textContent.trim(), 102 "", 103 `${t.name}: No text should be inserted as a child of the text control` 104 ); 105 textControl.remove(); 106 }, `User typing in ${textControlDescription} should update the value (became an editing host during focused)`); 107 108 promise_test(async t => { 109 const textControl = createTextControl(); 110 div.appendChild(textControl); 111 textControl.focus(); 112 textControl.setAttribute("contenteditable", ""); 113 document.execCommand("insertText", false, "abc"); 114 assert_equals( 115 textControl.value, 116 "abc", 117 `${t.name}: The text control value should be updated` 118 ); 119 assert_equals( 120 div.textContent.trim(), 121 "", 122 `${t.name}: No text should be inserted as a child of the text control` 123 ); 124 textControl.remove(); 125 }, `execCommand("insertText") in ${textControlDescription} should update the value (became an editing host during focused)`); 126 127 if (textControlType != "textarea") { 128 promise_test(async t => { 129 const textControl = createTextControl(); 130 textControl.type = "button"; 131 div.appendChild(textControl); 132 textControl.setAttribute("contenteditable", ""); 133 textControl.focus(); 134 textControl.type = textControlType; 135 await (new test_driver.Actions() 136 .keyDown("a") 137 .keyUp("a") 138 .keyDown("b") 139 .keyUp("b") 140 .keyDown("c") 141 .keyUp("c") 142 .send()); 143 assert_equals( 144 textControl.value, 145 "abc", 146 `${t.name}: The text control value should be updated` 147 ); 148 assert_equals( 149 document.querySelector("div").textContent.trim(), 150 "", 151 `${t.name}: No text should be inserted as a child of the text control` 152 ); 153 textControl.remove(); 154 }, `User typing in ${ 155 textControlDescription 156 } should update the value (became an editing host during focused and different type)`); 157 158 promise_test(async t => { 159 const textControl = createTextControl(); 160 textControl.type = "button"; 161 div.appendChild(textControl); 162 textControl.setAttribute("contenteditable", ""); 163 textControl.focus(); 164 textControl.type = textControlType; 165 document.execCommand("insertText", false, "abc"); 166 assert_equals( 167 textControl.value, 168 "abc", 169 `${t.name}: The text control value should be updated` 170 ); 171 assert_equals( 172 div.textContent.trim(), 173 "", 174 `${t.name}: No text should be inserted as a child of the text control` 175 ); 176 textControl.remove(); 177 }, `execCommand("insertText") in ${ 178 textControlDescription 179 } should update the value (became an editing host during focused and different type)`); 180 } 181 182 </script> 183 </body> 184 </html>