draggable_input_text.html (3195B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Draggable text input</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 should focus the dummy text. Use your mouse to select part of the dummy text. It should <strong>not</strong> drag the block or text in either case.</p> 17 <div id="element"> 18 <input value="Dummy text" draggable="true" id="inner"> 19 </div> 20 21 <script> 22 const element = document.getElementById("element"); 23 const inner = document.getElementById("inner"); 24 25 promise_test(t => { 26 return new Promise((resolve, reject) => { 27 let didReceiveDragStart = false; 28 29 const dragStartListener = ev => { 30 ev.preventDefault(); 31 didReceiveDragStart = true; 32 }; 33 element.addEventListener("dragstart", dragStartListener, { once: true }); 34 t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); 35 36 element.addEventListener("mouseup", () => { 37 resolve(didReceiveDragStart); 38 }, { once: true }); 39 40 const centerH = inner.getBoundingClientRect().height / 2; 41 new test_driver.Actions() 42 // Move pointer to the center of the top-border. 43 .pointerMove(0, 10 - centerH, { origin: inner }) 44 .pointerDown() 45 // Move pointer to the center of the input. 46 .pointerMove(0, 0, { origin: inner }) 47 .pointerUp() 48 .send(); 49 }).then(didReceiveDragStart => { 50 assert_false(didReceiveDragStart, "dragstart should not fire"); 51 }); 52 }, "Draggable input text should not be draggable from border"); 53 54 promise_test(t => { 55 return new Promise((resolve, reject) => { 56 let didReceiveDragStart = false; 57 58 const dragStartListener = ev => { 59 ev.preventDefault(); 60 didReceiveDragStart = true; 61 }; 62 element.addEventListener("dragstart", dragStartListener, { once: true }); 63 t.add_cleanup(() => element.removeEventListener("dragstart", dragStartListener)); 64 65 element.addEventListener("mouseup", () => { 66 resolve(didReceiveDragStart); 67 }, { once: true }); 68 69 const centerW = inner.getBoundingClientRect().width / 2; 70 new test_driver.Actions() 71 // Move pointer to the start of the text. 72 .pointerMove(5 - centerW, 10, { origin: inner }) 73 .pointerDown() 74 // Move pointer to the center of the input body. 75 .pointerMove(0, 10, { origin: inner }) 76 .pointerUp() 77 .send(); 78 }).then(didReceiveDragStart => { 79 assert_false(didReceiveDragStart, "dragstart should not fire"); 80 }); 81 }, "Draggable input text should not be draggable while attempting to select text"); 82 </script> 83 84 </body> 85 </html>