| <!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 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 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(); |
| } |
| }); |
| }); |
| } |
| </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> |
| |
