pointerevent_boundary_events_attributes_during_drag.html (7513B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Attributes of boundary events during dragging mouse</title> 6 <script src=/resources/testharness.js></script> 7 <script src=/resources/testharnessreport.js></script> 8 <script src=/resources/testdriver.js></script> 9 <script src=/resources/testdriver-actions.js></script> 10 <script src=/resources/testdriver-vendor.js></script> 11 <style> 12 div.target { 13 margin: 0; 14 width: 100%; 15 height: 16px; 16 } 17 </style> 18 <script> 19 "use strict"; 20 21 addEventListener("load", () => { 22 promise_test(async () => { 23 const body = document.body; 24 for (let i = 0; i < 6; i++) { 25 const div = document.createElement("div"); 26 div.setAttribute("class", "target"); 27 div.setAttribute("id", `div${i}`); 28 body.appendChild(div); 29 } 30 body.firstElementChild.getBoundingClientRect(); 31 32 let record = false; 33 const mouseEvents = [], pointerEvents = []; 34 function recordEvent(event) { 35 if (!record || !event.target.id) { 36 return; 37 } 38 const e = { 39 type: event.type, 40 target: `<${event.target.localName} id="${event.target.id}">`, 41 button: event.button, 42 buttons: event.buttons, 43 pointerId: event.pointerId, 44 pointerType: event.pointerType, 45 }; 46 if (event.pointerId != undefined) { 47 pointerEvents.push(e); 48 } else { 49 mouseEvents.push(e); 50 } 51 } 52 for (const type of ["mouseover", "mouseout", "mouseenter", "mouseleave", 53 "pointerover", "pointerout", "pointerenter", "pointerleave"]) { 54 body.addEventListener(type, recordEvent, {capture: true}); 55 } 56 let pointerId = 0; 57 body.addEventListener("pointerdown", event => { 58 record = true; 59 pointerId = event.pointerId; 60 }, {once: true, capture: true}); 61 body.addEventListener("pointerup", event => { 62 record = false; 63 }, {once: true, capture: true}); 64 body.addEventListener("dragstart", event => { 65 // We want to check the boundary events during a drag so that we want 66 // a native drag session. 67 event.preventDefault(); 68 }, {once: true, capture: true}); 69 70 document.getElementById("div3").addEventListener("pointerenter", event => { 71 requestAnimationFrame(() => { 72 // Remove div3 causes moving div4 underneath the cursor 73 event.target.remove(); 74 document.getElementById("div4").getBoundingClientRect(); 75 }); 76 }, {once: true, capture: true}); 77 document.getElementById("div4").addEventListener("pointerenter", event => { 78 requestAnimationFrame(() => { 79 // Remove div4 causes moving div5 underneath the cursor 80 event.target.remove(); 81 document.getElementById("div5").getBoundingClientRect(); 82 }); 83 }, {once: true, capture: true}); 84 85 await new test_driver.Actions() 86 .pointerMove(0, 0, { origin: document.getElementById("div0") }) 87 .pointerDown() 88 .pointerMove(0, 0, { origin: document.getElementById("div1") }) 89 .pointerMove(0, 0, { origin: document.getElementById("div2") }) 90 .pointerMove(0, 0, { origin: document.getElementById("div3") }) 91 .pause(500) 92 .pointerUp() 93 .send(); 94 95 function stringifyEvent(event) { 96 return event.pointerId != undefined 97 ? `{ type: "${event.type}", target: ${event.target}, button: ${event.button}, buttons: ${ 98 event.buttons 99 }, pointerId: ${event.pointerId}, pointerType: "${event.pointerType}"}` 100 : `{ type: "${event.type}", target: ${event.target}, button: ${event.button}, buttons: ${ 101 event.buttons 102 }`; 103 } 104 function stringifyEvents(events) { 105 let str = "["; 106 for (const event of events) { 107 if (str != "[") { 108 str += ", "; 109 } 110 str += stringifyEvent(event); 111 } 112 return str + "]"; 113 } 114 115 test(() => { 116 assert_equals( 117 stringifyEvents(mouseEvents), 118 stringifyEvents([ 119 { type: "mouseout", target: '<div id="div0">', buttons: 1, button: 0 }, 120 { type: "mouseleave", target: '<div id="div0">', buttons: 1, button: 0 }, 121 { type: "mouseover", target: '<div id="div1">', buttons: 1, button: 0 }, 122 { type: "mouseenter", target: '<div id="div1">', buttons: 1, button: 0 }, 123 { type: "mouseout", target: '<div id="div1">', buttons: 1, button: 0 }, 124 { type: "mouseleave", target: '<div id="div1">', buttons: 1, button: 0 }, 125 { type: "mouseover", target: '<div id="div2">', buttons: 1, button: 0 }, 126 { type: "mouseenter", target: '<div id="div2">', buttons: 1, button: 0 }, 127 { type: "mouseout", target: '<div id="div2">', buttons: 1, button: 0 }, 128 { type: "mouseleave", target: '<div id="div2">', buttons: 1, button: 0 }, 129 { type: "mouseover", target: '<div id="div3">', buttons: 1, button: 0 }, 130 { type: "mouseenter", target: '<div id="div3">', buttons: 1, button: 0 }, 131 { type: "mouseover", target: '<div id="div4">', buttons: 1, button: 0 }, 132 { type: "mouseenter", target: '<div id="div4">', buttons: 1, button: 0 }, 133 { type: "mouseover", target: '<div id="div5">', buttons: 1, button: 0 }, 134 { type: "mouseenter", target: '<div id="div5">', buttons: 1, button: 0 }, 135 ]), 136 "Mouse boundary events should have the state of primary button pressed" 137 ); 138 }); 139 assert_equals( 140 stringifyEvents(pointerEvents), 141 stringifyEvents([ 142 { type: "pointerout", target: '<div id="div0">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 143 { type: "pointerleave", target: '<div id="div0">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 144 { type: "pointerover", target: '<div id="div1">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 145 { type: "pointerenter", target: '<div id="div1">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 146 { type: "pointerout", target: '<div id="div1">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 147 { type: "pointerleave", target: '<div id="div1">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 148 { type: "pointerover", target: '<div id="div2">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 149 { type: "pointerenter", target: '<div id="div2">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 150 { type: "pointerout", target: '<div id="div2">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 151 { type: "pointerleave", target: '<div id="div2">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 152 { type: "pointerover", target: '<div id="div3">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 153 { type: "pointerenter", target: '<div id="div3">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 154 { type: "pointerover", target: '<div id="div4">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 155 { type: "pointerenter", target: '<div id="div4">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 156 { type: "pointerover", target: '<div id="div5">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 157 { type: "pointerenter", target: '<div id="div5">', buttons: 1, button: -1, pointerId, pointerType: "mouse" }, 158 ]), 159 "Pointer boundary events should have the state of primary button pressed" 160 ); 161 }); 162 }, {once: true}); 163 </script> 164 </head> 165 <body></body> 166 </html>