| <!DOCTYPE html> |
| |
| <head> |
| <meta charset="utf-8"> |
| <script src='black_box_js_test_utils.js'></script> |
| <script src='pointer_event_test_utils.js'></script> |
| <style> |
| #container { |
| overflow: hidden; |
| position: absolute; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| margin: auto; |
| width: 100%; |
| height: 50%; |
| background: rgba(255, 0, 0, 1); |
| } |
| |
| #surface { |
| background: rgba(0, 0, 255, .5); |
| height: 100%; |
| width: 100%; |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <script> |
| const expected_events = [ |
| // actions.move_to_element(container).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointermove', id: 'surface', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'container', phase: Event.BUBBLING_PHASE }, |
| // actions.click(container) |
| { name: 'pointermove', id: 'surface', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'container', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerdown', id: 'surface', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'container', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'surface', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'container', phase: Event.BUBBLING_PHASE }, |
| // actions.move_to_element(surface).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointermove', id: 'surface', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'container', phase: Event.BUBBLING_PHASE }, |
| // actions.click(surface) |
| { name: 'pointermove', id: 'surface', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'container', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerdown', id: 'surface', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'container', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'surface', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'container', phase: Event.BUBBLING_PHASE }, |
| ]; |
| |
| function endTest(e) { |
| console.log('Ending test.') |
| assertTrue(failure_count == 0); |
| onEndTest(); |
| } |
| |
| function setAllHandlers(prefix, selector, callback) { |
| setHandlers(prefix + 'down', selector, callback); |
| setHandlers(prefix + 'up', selector, callback); |
| setHandlers(prefix + 'move', selector, callback); |
| } |
| |
| window.onload = function () { |
| setAllHandlers('pointer', '.track', logEvent); |
| setHandlers('click', '#surface', endTest); |
| console.log("Setup finished"); |
| setupFinished(); |
| } |
| </script> |
| <div id="container" class="track"> |
| <div id="surface" class="track"></div> |
| </div> |
| |
| </body> |
