| <!doctype html> |
| <html> |
| <head> |
| <title>Pointer Events coordinates can have fractional value<</title> |
| <meta name="viewport" content="width=device-width"> |
| <link rel="stylesheet" type="text/css" href="pointerevent_styles.css"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/resources/testdriver.js"></script> |
| <script src="/resources/testdriver-actions.js"></script> |
| <script src="/resources/testdriver-vendor.js"></script> |
| <script type="text/javascript" src="pointerevent_support.js"></script> |
| <style> |
| #innerFrame { |
| transform: scale(5); |
| width: 60px; |
| height: 60px; |
| margin-left: 120px; |
| margin-top: 120px; |
| border: 0.01px solid black; |
| } |
| </style> |
| <script> |
| var eventList = [ |
| "pointerdown", |
| "pointerup", |
| "pointermove", |
| "pointerover", |
| "pointerout", |
| "pointerenter", |
| "pointerleave"]; |
| var eventsRecieved = {}; |
| var clickedTargetList = []; |
| |
| function resetTestState() { |
| eventsRecieved = {}; |
| clickedTargetList = []; |
| ['s1', 's2', 's3'].forEach(function(id){ |
| var target = document.getElementById('innerFrame').contentDocument.getElementById(id); |
| target.style.background = "black" |
| }); |
| } |
| |
| function checkPointerEventCoordinates(event) { |
| if (event.clientX != Math.floor(event.clientX) || event.clientY != Math.floor(event.clientY)) |
| eventsRecieved[event.type] = true; |
| } |
| |
| function testInputType(inputSource) { |
| const scale = 5; |
| const width = 3; |
| const height = 3; |
| var targetFrame = document.querySelector('#innerFrame'); |
| var frameRect = targetFrame.getBoundingClientRect(); |
| frameLeft = frameRect.left; |
| frameTop = frameRect.top; |
| |
| target = [{x: 10, y: 10}, {x: 30, y: 50}, {x: 50, y: 30}] |
| xPosition = [] |
| yPosition = [] |
| for (var i = 0; i < target.length; i++) { |
| xPosition.push((target[i].x + width / 2.0) * scale + frameLeft); |
| yPosition.push((target[i].y + height / 2.0) * scale + frameTop); |
| } |
| return sendInputAt(inputSource, xPosition[0], yPosition[0]).then(function() { |
| return sendInputAt(inputSource, xPosition[1], yPosition[1]); |
| }).then(function() { |
| return sendInputAt(inputSource, xPosition[2], yPosition[2]); |
| }); |
| |
| } |
| |
| function sendInputAt(inputSource, xPosition, yPosition) { |
| if (inputSource == "touch") { |
| return new test_driver.Actions() |
| .addPointer("touchPointer1", "touch") |
| .pointerMove(Math.ceil(xPosition), Math.ceil(yPosition)) |
| .pointerDown() |
| .pointerMove(Math.ceil(xPosition + 1), Math.ceil(yPosition + 1)) |
| .pointerUp() |
| .send(); |
| } else { |
| return new test_driver.Actions() |
| .pointerMove(Math.ceil(xPosition), Math.ceil(yPosition)) |
| .pointerDown() |
| .pointerUp() |
| .send(); |
| } |
| } |
| |
| function run() { |
| var test_pointerEvent = setup_pointerevent_test("pointerevent events in capturing", ALL_POINTERS); |
| var innerFrame = document.getElementById('innerFrame'); |
| var innerDocument = innerFrame.contentDocument; |
| ['s1', 's2', 's3'].forEach(function(id){ |
| var target = innerDocument.getElementById(id); |
| eventList.forEach(function(eventName) { |
| on_event(target, eventName, checkPointerEventCoordinates); |
| }); |
| |
| on_event(target, "click", function (event) { |
| if (!(event.target.id in clickedTargetList)) { |
| clickedTargetList.push(event.target.id); |
| event.target.style.background = "red" |
| } |
| if (clickedTargetList.length == 3) { |
| test(function () { |
| if (Object.keys(eventsRecieved).length != eventList.length){ |
| eventList.forEach(function(eventName){ |
| assert_true(eventName in eventsRecieved, eventName + " should have fractional coordinates"); |
| }); |
| } |
| }, expectedPointerType); |
| test_pointerEvent.done(); |
| } |
| }); |
| }); |
| |
| testInputType("mouse").then(function() { |
| return testInputType("touch"); |
| }).then(function() { |
| return testInputType("pen"); |
| }); |
| } |
| </script> |
| </head> |
| <body onload="run()"> |
| <h1>Pointer Events coordinates support fractional value</h1> |
| <h2 id="pointerTypeDescription"></h2> |
| <h4> |
| Test Description: This test checks pointer events has fractional client coordinates |
| <ol> |
| <li>Move your pointer over one black square</li> |
| <li>Press down the pointer (i.e. press left button with mouse or touch the screen with finger or pen).</li> |
| <li>Release the pointer.</li> |
| <li>Move to next black square and repreat 2 and 3</li> |
| </ol> |
| |
| Test passes if pointer events has fractional coordinates. |
| </h4> |
| <iframe id=innerFrame src="resources/pointerevent_fractional_coordinates-iframe.html"></iframe> |
| <div id="complete-notice"> |
| <p>The following pointer types were detected: <span id="pointertype-log"></span>.</p> |
| <p>Refresh the page to run the tests again with a different pointer type.</p> |
| </div> |
| <div id="log"></div> |
| </body> |
| </html> |
| |
