draggable_select.html (3956B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Draggable select</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 <script type="text/javascript"> 14 window.onload = function () { 15 document.getElementsByTagName('select')[0].ondragstart = function (e) { 16 e.dataTransfer.effectAllowed = 'copy'; 17 e.dataTransfer.setData('Text', 'dummy text'); 18 }; 19 }; 20 </script> 21 </head> 22 <body> 23 24 <p>Press your mouse button down on the orange block and drag downwards. It should open and select items in the dropdown, and should <strong>not</strong> drag the block or text.</p> 25 <div id="element"> 26 <select draggable="true" id="inner"> 27 <option>Option 1</option> 28 <option>Option 2</option> 29 <option>Option 3</option> 30 </select> 31 </div> 32 33 <script> 34 const element = document.getElementById("element"); 35 const inner = document.getElementById("inner"); 36 37 promise_test(t => { 38 return new Promise((resolve, reject) => { 39 let didReceiveDragStart = false; 40 41 const dragStartListener = ev => { 42 ev.preventDefault(); 43 didReceiveDragStart = true; 44 }; 45 element.addEventListener("dragstart", dragStartListener, { once: true }); 46 t.add_cleanup(() => { 47 element.removeEventListener("dragstart", dragStartListener); 48 // Click on center to dismiss the dropdown. 49 new test_driver.Actions() 50 .pointerMove(0, 0, { origin: document.body }) 51 .pointerDown() 52 .pointerUp() 53 .send(); 54 }); 55 56 element.addEventListener("mouseup", () => { 57 resolve(didReceiveDragStart); 58 }, { once: true }); 59 60 const centerH = inner.getBoundingClientRect().height / 2; 61 new test_driver.Actions() 62 // Move pointer to the center of the top-border. 63 .pointerMove(0, 10 - centerH, { origin: inner }) 64 .pointerDown() 65 // Move pointer to the center of the select. 66 .pointerMove(0, 0, { origin: inner }) 67 .pointerUp() 68 .send(); 69 }).then(didReceiveDragStart => { 70 assert_false(didReceiveDragStart, "dragstart should not fire"); 71 }); 72 }, "Draggable select should not be draggable from border"); 73 74 promise_test(t => { 75 return new Promise((resolve, reject) => { 76 let didReceiveDragStart = false; 77 78 const dragStartListener = ev => { 79 ev.preventDefault(); 80 didReceiveDragStart = true; 81 }; 82 element.addEventListener("dragstart", dragStartListener, { once: true }); 83 t.add_cleanup(() => { 84 element.removeEventListener("dragstart", dragStartListener); 85 // Click on center to dismiss the dropdown. 86 new test_driver.Actions() 87 .pointerMove(0, 0, { origin: document.body }) 88 .pointerDown() 89 .pointerUp() 90 .send(); 91 }); 92 93 element.addEventListener("mouseup", () => { 94 resolve(didReceiveDragStart); 95 }, { once: true }); 96 97 const centerH = inner.getBoundingClientRect().height / 2; 98 new test_driver.Actions() 99 // Move pointer to the center of the select body. 100 .pointerMove(0, 10, { origin: inner }) 101 .pointerDown() 102 // Move pointer out of the select. 103 .pointerMove(0, centerH, { origin: inner }) 104 .pointerUp() 105 .send(); 106 }).then(didReceiveDragStart => { 107 assert_false(didReceiveDragStart, "dragstart should not fire"); 108 }); 109 }, "Draggable select should not be draggable from select body"); 110 </script> 111 112 </body> 113 </html>