user-select-none-on-input.html (1563B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Test user-select: none on input/textarea does not affect editability</title> 5 <meta charset="utf-8"> 6 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m"> 7 <link rel="help" href="https://drafts.csswg.org/css-ui/#valdef-user-select-none"> 8 <style> 9 input, textarea { 10 -webkit-user-select: none; 11 user-select: none; 12 } 13 </style> 14 </head> 15 <body> 16 <input> 17 <textarea></textarea> 18 <script src="/resources/testharness.js"></script> 19 <script src="/resources/testharnessreport.js"></script> 20 <script src="/resources/testdriver.js"></script> 21 <script src="/resources/testdriver-vendor.js"></script> 22 <script> 23 async function testElement(element) { 24 const expectedText = "xyz"; 25 element.focus(); 26 await test_driver.send_keys(element, expectedText); 27 assert_equals(element.value, expectedText, "Text should be entered"); 28 element.select(); 29 assert_equals(element.value.substring(element.selectionStart, element.selectionEnd), expectedText, "Text should be programatically selectable"); 30 await test_driver.send_keys(element, "\uE003"); 31 assert_equals(element.value, "", "Text should be cleared"); 32 } 33 promise_test(() => { 34 return testElement(document.querySelector("input")) 35 }, "Test <input> with user-select: none"); 36 promise_test(() => { 37 return testElement(document.querySelector("textarea")) 38 }, "Test <textarea> with user-select: none"); 39 </script> 40 </body> 41 </html>