| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset=utf-8> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <style> |
| |
| body { |
| /* Ensure we get pointer events for all touch events. */ |
| touch-action: none; |
| } |
| |
| #container, #container div { |
| position: absolute; |
| top: 0; |
| height: 100px; |
| } |
| |
| #container { |
| left: 50px; |
| width: 400px; |
| background-color: black; |
| } |
| |
| #leaf-one { |
| width: 100px; |
| background-color: blue; |
| } |
| |
| #nested-container { |
| left: 150px; |
| width: 250px; |
| background-color: green; |
| } |
| |
| #nested-leaf-one { |
| width: 100px; |
| background-color: pink; |
| } |
| |
| #nested-leaf-two { |
| left: 100px; |
| width: 100px; |
| background-color: yellow; |
| } |
| |
| </style> |
| </head> |
| <body> |
| <div id="container"> |
| <div id="leaf-one"></div> |
| <div id="nested-container"> |
| <div id="nested-leaf-one"></div> |
| <div id="nested-leaf-two"></div> |
| </div> |
| </div> |
| |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <script src="../utils.js"></script> |
| <script> |
| |
| 'use strict'; |
| |
| async_test(test => { |
| const eventsLog = []; |
| const logger = event => eventsLog.push(`${event.type}@${event.currentTarget.id}`); |
| for (let node of document.querySelectorAll("div")) { |
| for (let eventType of ["pointerover", "pointerenter", "pointerout", "pointerleave"]) |
| node.addEventListener(eventType, logger); |
| } |
| |
| // Ensure we disable pointer capture. |
| document.body.addEventListener("pointerdown", event => event.currentTarget.releasePointerCapture(event.pointerId)); |
| |
| const one = ui.finger(); |
| ui.sequence([ |
| one.begin({ x: 10, y: 50 }), // We start outside of the bounds of any <div>. |
| one.move({ x: 100, y: 50 }), // Step 1: we enter the bounds of both #container and #leaf-one. |
| one.move({ x: 160, y: 50 }), // Step 2: we leave the bounds of #leaf-one, remaining within #container. |
| one.move({ x: 210, y: 50 }), // Step 3: we enter the bounds of #nested-container and #nested-leaf-one, remaining within #container. |
| one.move({ x: 310, y: 50 }), // Step 4: we leave the bounds of #nested-leaf-one and enter the bounds of #nested-leaf-two, remaining within #nested-container and #container. |
| one.move({ x: 410, y: 50 }), // Step 5: we leave the bounds of #nested-leaf-two, remaining within #nested-container and #container. |
| one.move({ x: 460, y: 50 }), // Step 6: we leave the bounds of any <div>. |
| one.end() |
| ]).then(() => { |
| assert_array_equals(eventsLog, [ |
| // Step 1. |
| "pointerover@leaf-one", "pointerover@container", "pointerenter@container", "pointerenter@leaf-one", |
| // Step 2. |
| "pointerout@leaf-one", "pointerout@container", "pointerleave@leaf-one", "pointerover@container", |
| // Step 3. |
| "pointerout@container", "pointerover@nested-leaf-one", "pointerover@nested-container", "pointerover@container", "pointerenter@nested-container", "pointerenter@nested-leaf-one", |
| // Step 4. |
| "pointerout@nested-leaf-one", "pointerout@nested-container", "pointerout@container", "pointerleave@nested-leaf-one", "pointerover@nested-leaf-two", "pointerover@nested-container", "pointerover@container", "pointerenter@nested-leaf-two", |
| // Step 5. |
| "pointerout@nested-leaf-two", "pointerout@nested-container", "pointerout@container", "pointerleave@nested-leaf-two", "pointerover@nested-container", "pointerover@container", |
| // Step 6. |
| "pointerout@nested-container", "pointerout@container", "pointerleave@nested-container", "pointerleave@container" |
| ]); |
| test.done(); |
| }); |
| }, `Testing that "pointerover", "pointerenter", "pointerout" and "pointerleave" events are dispatched correctly with capture disabled as a touch moves between elements in a hierarchy.`); |
| |
| </script> |
| </body> |
| </html> |
