mousedown-move-inner-when-dragging-2.html (1499B)
1 <!doctype html> 2 <script src="/resources/testharness.js"></script> 3 <script src="/resources/testharnessreport.js"></script> 4 <script src="/resources/testdriver.js"></script> 5 <script src="/resources/testdriver-vendor.js"></script> 6 <script src="/resources/testdriver-actions.js"></script> 7 <head> 8 <title>Test dragging still occurs when mousedown moves the inner element</title> 9 </head> 10 <body> 11 <div id="container"> 12 <template shadowrootmode="open"> 13 <div id="element" draggable="true" style="width: 40px; height: 40px; background-color:red;"> 14 <slot id="slot"></slot> 15 </div> 16 <div id="element2"></div> 17 </template> 18 <div id="inner" style="width: 30px; height: 30px; background-color:black;"></div> 19 </div> 20 <script> 21 22 promise_test(function() { 23 return new Promise(r => { 24 const element = container.shadowRoot.getElementById("element"); 25 26 element.addEventListener("dragstart", function(e) { 27 assert_equals(e.target, element); 28 r(); 29 }); 30 31 element.addEventListener("mousedown", function() { 32 const element2 = container.shadowRoot.getElementById("element2"); 33 const slot = container.shadowRoot.getElementById("slot"); 34 element2.appendChild(slot); 35 }); 36 37 new test_driver.Actions() 38 .pointerMove(0, 0, {origin: inner}) 39 .pointerDown() 40 .pointerMove(10, 10, {origin:inner}) 41 .pointerUp() 42 .send(); 43 }); 44 }, "dragstart should still fire when the mousedown event moves the container of the inner element around"); 45 </script> 46 </body> 47 </html>