| <!DOCTYPE html> |
| |
| <html> |
| |
| <head> |
| <title>Cobalt pointer event test on cropped element</title> |
| <script src='black_box_js_test_utils.js'></script> |
| <script src='pointer_event_test_utils.js'></script> |
| <style> |
| #upper_element { |
| position: absolute; |
| background-color: blue; |
| height: 10rem; |
| width: 200px; |
| top: 250px; |
| } |
| |
| #lower_element { |
| position: absolute; |
| background-color: red; |
| height: 10rem; |
| width: 200px; |
| top: 280px; |
| } |
| </style> |
| </head> |
| |
| <body> |
| <div class="list"> |
| <div id="upper_element" class="upper_element"></div> |
| <div id="lower_element" class="lower_element"></div> |
| </div> |
| <div id="end" class="end">End</div> |
| <script> |
| const expected_events = [ |
| // actions.move_to_element(lower_element).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointermove', id: 'lower_element', phase: Event.AT_TARGET }, |
| // actions.click() |
| { name: 'pointerdown', id: 'lower_element', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'lower_element', phase: Event.AT_TARGET }, |
| // actions.move_to_element_with_offset(upper_element, 5, 5).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointermove', id: 'upper_element', phase: Event.AT_TARGET }, |
| // actions.click() |
| { name: 'pointerdown', id: 'upper_element', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'upper_element', phase: Event.AT_TARGET }, |
| // actions.move_to_element(upper_element).pause(_SLEEP_AFTER_MOVE_TIME) |
| // No pointer event on cropper element. |
| { name: 'pointermove', id: 'lower_element', phase: Event.AT_TARGET }, |
| // actions.click() |
| { name: 'pointerdown', id: 'lower_element', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'lower_element', phase: Event.AT_TARGET }, |
| ]; |
| |
| function endTest(e) { |
| 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); |
| setHandlers(prefix + 'cancel', selector, callback); |
| } |
| |
| window.onload = () => { |
| setAllHandlers('pointer', '#upper_element', logEvent); |
| setAllHandlers('pointer', '#lower_element', logEvent); |
| setHandlers('click', '#end', endTest); |
| setupFinished(); |
| } |
| </script> |
| </body> |
| |
| |
| </html> |
