offset_and_page_after_dispatch.tentative.html (5953B)
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></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-vendor.js"></script> 10 <script src="/resources/testdriver-actions.js"></script> 11 <script> 12 "use strict"; 13 14 addEventListener("DOMContentLoaded", () => { 15 promise_test(async () => { 16 const target = document.getElementById("target"); 17 let mouseEvents = []; 18 target.addEventListener("mousedown", event => { 19 const length = mouseEvents.push(event); 20 mouseEvents[length - 1].dispatchingValues = { 21 offsetX: event.offsetX, 22 offsetY: event.offsetY, 23 pageX: event.pageX, 24 pageY: event.pageY, 25 }; 26 }, {once: true}); 27 target.addEventListener("mouseup", event => { 28 const length = mouseEvents.push(event); 29 mouseEvents[length - 1].dispatchingValues = { 30 offsetX: event.offsetX, 31 offsetY: event.offsetY, 32 pageX: event.pageX, 33 pageY: event.pageY, 34 }; 35 }, {once: true}); 36 // Click on the target without moving the mouse cursor. 37 const actions = new test_driver.Actions(); 38 await actions 39 .pointerMove(0, 0, {origin: target}) 40 .pointerDown({button: actions.ButtonType.LEFT}) 41 .pointerUp({button: actions.ButtonType.LEFT}) 42 .send(); 43 assert_equals( 44 mouseEvents[0]?.type, 45 "mousedown", 46 "mousedown should've been received" 47 ); 48 assert_equals( 49 mouseEvents[1]?.type, 50 "mouseup", 51 "mouseup should've been received" 52 ); 53 54 // Then, both mousedown and mouseup events should be fired at the same 55 // position. So, both events should have same offset values and page 56 // values. 57 test(() => { 58 assert_true( 59 mouseEvents[0].offsetX == mouseEvents[1].offsetX && 60 mouseEvents[0].offsetY == mouseEvents[1].offsetY, 61 `mousedown: offset: {${mouseEvents[0].offsetX}, ${ 62 mouseEvents[0].offsetY} 63 } should equal mouseup offset: {${mouseEvents[1].offsetX}, ${ 64 mouseEvents[1].offsetY 65 }}` 66 ); 67 }, "mousedown offset point should equal mouseup offset point"); 68 test(() => { 69 assert_true( 70 mouseEvents[0].pageX == mouseEvents[1].pageX && 71 mouseEvents[0].pageY == mouseEvents[1].pageY, 72 `mousedown: offset: {${mouseEvents[0].pageX}, ${ 73 mouseEvents[0].pageY} 74 } should equal mouseup offset: {${mouseEvents[1].pageX}, ${ 75 mouseEvents[1].pageY 76 }}` 77 ); 78 }, "mousedown page point should equal mouseup page point"); 79 80 // And the target element has margin. Therefore, offset point and page 81 // point should not match. However, this is invalid from the CSSOM spec. 82 // CSSOM defines that offsetX and offsetY should be same as pageX and pageY 83 // while the event is not being dispatched. That does not match with 84 // current browser implementations. 85 test(() => { 86 assert_true( 87 mouseEvents[0].offsetX != mouseEvents[0].pageX && 88 mouseEvents[0].offsetY != mouseEvents[0].pageY, 89 `mousedown: offset: {${mouseEvents[0].offsetX}, ${ 90 mouseEvents[0].offsetY} 91 } should not equal page: {${mouseEvents[0].pageX}, ${ 92 mouseEvents[0].pageY 93 }}` 94 ); 95 }, "mousedown: offset point should not equal its page point"); 96 test(() => { 97 assert_true( 98 mouseEvents[1].offsetX != mouseEvents[1].pageX && 99 mouseEvents[1].offsetY != mouseEvents[1].pageY, 100 `mouseup: offset: {${mouseEvents[1].offsetX}, ${ 101 mouseEvents[1].offsetY} 102 } should not equal page: {${mouseEvents[1].pageX}, ${mouseEvents[1].pageY}}` 103 ); 104 }, "mouseup: offset point should not equal its page point"); 105 106 // The values after dispatching should match with the values at dispatching. 107 test(() => { 108 assert_true( 109 mouseEvents[0].offsetX == mouseEvents[0].dispatchingValues.offsetX && 110 mouseEvents[0].offsetY == mouseEvents[0].dispatchingValues.offsetY && 111 mouseEvents[0].pageX == mouseEvents[0].dispatchingValues.pageX && 112 mouseEvents[0].pageY == mouseEvents[0].dispatchingValues.pageY, 113 `mousedown: offset: {${mouseEvents[0].offsetX}, ${ 114 mouseEvents[0].offsetY 115 }, page: {${mouseEvents[0].pageX}, ${ 116 mouseEvents[0].pageY 117 }} should equal same attributes at dispatching: offset: {${ 118 mouseEvents[0].dispatchingValues.offsetX 119 }, ${mouseEvents[0].dispatchingValues.offsetY}}, page: {${ 120 mouseEvents[0].dispatchingValues.pageX 121 }, ${mouseEvents[0].dispatchingValues.pageY}}` 122 ); 123 }, "mousedown: offset and page points should not be changed after dispatch"); 124 test(() => { 125 assert_true( 126 mouseEvents[1].offsetX == mouseEvents[1].dispatchingValues.offsetX && 127 mouseEvents[1].offsetY == mouseEvents[1].dispatchingValues.offsetY && 128 mouseEvents[1].pageX == mouseEvents[1].dispatchingValues.pageX && 129 mouseEvents[1].pageY == mouseEvents[1].dispatchingValues.pageY, 130 `mousedown: offset: {${mouseEvents[1].offsetX}, ${ 131 mouseEvents[1].offsetY 132 }, page: {${mouseEvents[1].pageX}, ${ 133 mouseEvents[1].pageY 134 }} should equal same attributes at dispatching: offset: {${ 135 mouseEvents[1].dispatchingValues.offsetX 136 }, ${mouseEvents[1].dispatchingValues.offsetY}}, page: {${ 137 mouseEvents[1].dispatchingValues.pageX 138 }, ${mouseEvents[1].dispatchingValues.pageY}}` 139 ); 140 }, "mouseup: offset and page points should not be changed after dispatch"); 141 }, "Click on the target without moving the mouse cursor"); 142 }, {once: true}); 143 </script> 144 <style> 145 #target { 146 height: 100px; 147 width: 100px; 148 margin: 50px; 149 background-color: lightpink; 150 } 151 </style> 152 </head> 153 <body> 154 <div id="target"></div> 155 </body> 156 </html>