draggable_textarea.html (3659B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Draggable textarea</title> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/resources/testdriver.js"></script> 8 <script src="/resources/testdriver-vendor.js"></script> 9 <script src="/resources/testdriver-actions.js"></script> 10 <style type="text/css"> 11 #inner { border: 1px solid orange; border-top-width: 20px; } 12 </style> 13 </head> 14 <body> 15 16 <p>Press your mouse button down on the orange block and drag downwards. It may optionally focus the dummy text. Use your mouse to select part of the dummy text, moving the mouse vertically and horizontally. It should select the text.</p> 17 <div id="element"> 18 <textarea rows="5" cols="50" wrap="off" draggable="true" id="inner">Dummy text 19 Dummy text 20 Dummy text 21 Dummy text 22 Dummy text 23 Dummy text 24 Dummy text 25 Dummy text 26 Dummy text 27 Dummy text 28 Dummy text 29 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</textarea> 30 </div> 31 32 <script> 33 const element = document.getElementById("element"); 34 const inner = document.getElementById("inner"); 35 36 promise_test(t => { 37 return new Promise((resolve, reject) => { 38 let didReceiveDragStart = false; 39 40 const dragStartListener = ev => { 41 ev.preventDefault(); 42 didReceiveDragStart = true; 43 }; 44 element.addEventListener("dragstart", dragStartListener, { once: true }); 45 t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); 46 47 element.addEventListener("mouseup", () => { 48 resolve(didReceiveDragStart); 49 }, { once: true }); 50 51 const centerH = inner.getBoundingClientRect().height / 2; 52 new test_driver.Actions() 53 // Move pointer to the center of the top-border. 54 .pointerMove(0, 10 - centerH, { origin: inner }) 55 .pointerDown() 56 // Move pointer to the center of the textarea. 57 .pointerMove(0, 0, { origin: inner }) 58 .pointerUp() 59 .send(); 60 }).then(didReceiveDragStart => { 61 assert_false(didReceiveDragStart, "dragstart should not fire"); 62 }); 63 }, "Draggable textarea should not be draggable from border"); 64 65 promise_test(t => { 66 return new Promise((resolve, reject) => { 67 let didReceiveDragStart = false; 68 69 const dragStartListener = ev => { 70 ev.preventDefault(); 71 didReceiveDragStart = true; 72 }; 73 element.addEventListener("dragstart", dragStartListener, { once: true }); 74 t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); 75 76 element.addEventListener("mouseup", () => { 77 resolve(didReceiveDragStart); 78 }, { once: true }); 79 80 const rect = inner.getBoundingClientRect(); 81 const centerW = rect.width / 2; 82 const centerH = rect.height / 2; 83 new test_driver.Actions() 84 // Move pointer to the start of the first line text. 85 .pointerMove(5 - centerW, 25 - centerH, { origin: inner }) 86 .pointerDown() 87 // Move pointer to the center of the textarea. 88 .pointerMove(0, 0, { origin: inner }) 89 .pointerUp() 90 .send(); 91 }).then(didReceiveDragStart => { 92 assert_false(didReceiveDragStart, "dragstart should not fire"); 93 }); 94 }, "Draggable textarea should not be draggable while attempting to select text"); 95 </script> 96 97 </body> 98 </html>