submitter-coordinate-value.html (2287B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <meta name=viewport content="width=device-width,initial-scale=1"> 4 <title>Test image button coordinates</title> 5 <link rel="help" href="https://html.spec.whatwg.org/multipage/input.html#image-button-state-(type=image)"> 6 <link rel="help" href="https://xhr.spec.whatwg.org/#dom-formdata"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=282266"> 8 <link rel="author" title="Zach Hoffman" href="mailto:zach@zrhoffman.net"> 9 <form id="myForm" onsubmit="return false;"> 10 <input id="myImage" name="myImage" type="image" src="/images/100px-green-rect.svg"> 11 </form> 12 <script src="/resources/testharness.js"></script> 13 <script src="/resources/testharnessreport.js"></script> 14 <script src="/resources/testdriver.js"></script> 15 <script src="/resources/testdriver-vendor.js"></script> 16 <script> 17 promise_test(async t => { 18 await new Promise(r => window.addEventListener("load", r)); 19 20 const xCoordinates = []; 21 const yCoordinates = []; 22 23 let formData; 24 myForm.addEventListener("submit", t.step_func(e => { 25 e.preventDefault(); 26 formData = new FormData(myForm, myImage); 27 xCoordinates.push(formData.get("myImage.x")); 28 yCoordinates.push(formData.get("myImage.y")); 29 })); 30 31 await test_driver.click(myImage); 32 33 const [clientX, clientY] = getInViewCenterPoint(myImage.getBoundingClientRect()); 34 const mouseEvent = new MouseEvent("click", {clientX, clientY}); 35 myImage.dispatchEvent(mouseEvent); 36 37 assert_equals(xCoordinates.length, 2, "there should be 2 X coordinates"); 38 assert_equals(yCoordinates.length, 2, "there should be 2 Y coordinates"); 39 assert_equals(xCoordinates[1], xCoordinates[0], "dispatched event X coordinate should match user intention X coordinate"); 40 assert_equals(yCoordinates[1], yCoordinates[0], "dispatched event Y coordinate should match user intention Y coordinate"); 41 }, "dispatched event coordinates should match user intention coordinates") 42 43 // Private function from testdriver.js. 44 function getInViewCenterPoint(rect) { 45 var left = Math.max(0, rect.left); 46 var right = Math.min(window.innerWidth, rect.right); 47 var top = Math.max(0, rect.top); 48 var bottom = Math.min(window.innerHeight, rect.bottom); 49 50 var x = 0.5 * (left + right); 51 var y = 0.5 * (top + bottom); 52 53 return [x, y]; 54 } 55 </script>