pointerdown-add-display-none.html (1595B)
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 pointerdown adds display:none to the dragged element</title> 9 <style> 10 .dragging { 11 display: none; 12 } 13 14 #dragBox { 15 width: 200px; 16 height: 200px; 17 background-color: #4CAF50; 18 color: white; 19 border-radius: 8px; 20 cursor: grab; 21 user-select: none; 22 display: flex; 23 flex-direction: column; 24 align-items: center; 25 justify-content: center; 26 } 27 28 .inner { 29 background: rgba(255, 255, 255, 0.2); 30 padding: 10px; 31 margin-top: 10px; 32 border-radius: 4px; 33 } 34 </style> 35 </head> 36 <body> 37 <div id="dragBox" draggable="true"> 38 Drag me 39 <div class="inner" id="innerButton">Click or press here</div> 40 </div> 41 <script> 42 43 promise_test(function() { 44 return new Promise(r => { 45 innerButton.addEventListener("pointerdown", function() { 46 innerButton.classList.add("dragging"); 47 }); 48 49 dragBox.addEventListener("dragstart", function(e) { 50 assert_equals(e.target, dragBox); 51 r(); 52 }); 53 54 const buttonRect = innerButton.getBoundingClientRect(); 55 new test_driver.Actions() 56 .pointerMove(0, 0, {origin: innerButton}) 57 .pointerDown() 58 .pointerMove(buttonRect.left + 10, buttonRect.top + 10) 59 .pointerUp() 60 .send(); 61 }); 62 }, "dragstart should still fire when the dragged element gets display:none in its pointerdown"); 63 </script> 64 </body> 65 </html>