pointerevent_fractional_coordinates.html (7145B)
1 <!doctype html> 2 <html> 3 <head> 4 <title>Pointer Events coordinates with fractional values</title> 5 <meta name="viewport" content="width=device-width"> 6 <meta name="variant" content="?mouse"> 7 <meta name="variant" content="?touch"> 8 <meta name="variant" content="?pen"> 9 <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 <script src="/resources/testdriver.js"></script> 13 <script src="/resources/testdriver-actions.js"></script> 14 <script src="/resources/testdriver-vendor.js"></script> 15 <script type="text/javascript" src="pointerevent_support.js"></script> 16 <style> 17 #innerFrame { 18 transform: scale(5); 19 width: 60px; 20 height: 60px; 21 margin-left: 120px; 22 margin-top: 120px; 23 border: 0.01px solid black; 24 } 25 </style> 26 <script> 27 "use strict"; 28 const input = location.search.substring(1); 29 const eventList = [ 30 "pointerdown", 31 "pointerup", 32 "pointermove", 33 "pointerover", 34 "pointerout", 35 "pointerenter", 36 "pointerleave", 37 "click" 38 ]; 39 let eventsWithFractions = {}; 40 let clickedTargetList = []; 41 42 function resetTestState() { 43 eventsWithFractions = {}; 44 clickedTargetList = []; 45 } 46 47 function checkPointerEventCoordinates(event) { 48 if ((event.clientX != Math.floor(event.clientX) || event.clientY != Math.floor(event.clientY)) 49 && (event.pageX != Math.floor(event.pageX) || event.pageY != Math.floor(event.pageY))) 50 eventsWithFractions[event.type] = true; 51 } 52 53 function testInputType(inputSource) { 54 const scale = 5; 55 const width = 3; 56 const height = 3; 57 const targetFrame = document.querySelector('#innerFrame'); 58 const frameRect = targetFrame.getBoundingClientRect(); 59 const frameLeft = frameRect.left; 60 const frameTop = frameRect.top; 61 62 const targets = [{x: 10, y: 10}, {x: 30, y: 50}, {x: 50, y: 30}] 63 const xPositions = [] 64 const yPositions = [] 65 for (let i = 0; i < targets.length; i++) { 66 xPositions.push((targets[i].x + width / 2.0) * scale + frameLeft); 67 yPositions.push((targets[i].y + height / 2.0) * scale + frameTop); 68 } 69 return sendInputAt(inputSource, xPositions[0], yPositions[0]).then(function() { 70 return sendInputAt(inputSource, xPositions[1], yPositions[1]); 71 }).then(function() { 72 return sendInputAt(inputSource, xPositions[2], yPositions[2]); 73 }); 74 } 75 76 function sendInputAt(inputSource, xPosition, yPosition) { 77 if (inputSource == "touch") { 78 return new test_driver.Actions() 79 .addPointer("touchPointer1", "touch") 80 .pointerMove(Math.ceil(xPosition), Math.ceil(yPosition)) 81 .pointerDown() 82 .pointerMove(Math.ceil(xPosition + 1), Math.ceil(yPosition + 1)) 83 .pointerUp() 84 .send(); 85 } else { 86 return new test_driver.Actions() 87 .pointerMove(Math.ceil(xPosition), Math.ceil(yPosition)) 88 .pointerDown() 89 .pointerUp() 90 .send(); 91 } 92 } 93 94 function run() { 95 const test_pointerEvent = setup_pointerevent_test("pointerevent events in capturing", [input]); 96 const innerFrame = document.getElementById('innerFrame'); 97 const innerDocument = innerFrame.contentDocument; 98 ['s1', 's2', 's3'].forEach(function(id){ 99 const target = innerDocument.getElementById(id); 100 eventList.forEach(function(eventName) { 101 on_event(target, eventName, checkPointerEventCoordinates); 102 }); 103 104 on_event(target, "click", function (event) { 105 if (!(event.target.id in clickedTargetList)) { 106 clickedTargetList.push(event.target.id); 107 } 108 if (clickedTargetList.length == 3) { 109 test(function () { 110 eventList.forEach(function(eventName){ 111 if (eventName == "click") { 112 assert_false(eventName in eventsWithFractions, 113 eventName + " should not have fractional coordinates"); 114 } else { 115 assert_true(eventName in eventsWithFractions, 116 eventName + " should have fractional coordinates"); 117 } 118 }); 119 // At this point, we know that `eventsWithFractions` contains all 120 // of `eventList` except "click". The assert below rules out any 121 // extra entry in `eventsWithFractions`. 122 assert_equals(Object.keys(eventsWithFractions).length, 123 eventList.length - 1, 124 "eventsWithFractions list does not have any redundant entry"); 125 }, expectedPointerType); 126 test_pointerEvent.done(); 127 } 128 }); 129 }); 130 131 testInputType(input); 132 } 133 </script> 134 </head> 135 <body onload="run()"> 136 <h1>Pointer Events coordinates support fractional value</h1> 137 <h2 id="pointerTypeDescription"></h2> 138 <h4> 139 Test Description: This test checks pointer events has fractional client coordinates 140 <ol> 141 <li>Move your pointer over one black square</li> 142 <li>Press down the pointer (i.e. press left button with mouse or touch the screen with finger or pen).</li> 143 <li>Release the pointer.</li> 144 <li>Move to next black square and repreat 2 and 3</li> 145 </ol> 146 147 Test passes if pointer events has fractional coordinates. 148 </h4> 149 <iframe id=innerFrame src="resources/pointerevent_fractional_coordinates-iframe.html"></iframe> 150 <div id="complete-notice"> 151 <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> 152 <p>Refresh the page to run the tests again with a different pointer type.</p> 153 </div> 154 <div id="log"></div> 155 </body> 156 </html>