| <!DOCTYPE html> |
| |
| <html> |
| |
| <head> |
| <title>Cobalt pointer test</title> |
| <script src='black_box_js_test_utils.js'></script> |
| <script src='pointer_event_test_utils.js'></script> |
| <style> |
| .size10 { |
| padding: 10px; |
| } |
| |
| .size20 { |
| padding: 20px; |
| } |
| |
| .size40 { |
| padding: 40px; |
| } |
| |
| .black { |
| background-color: #FFF; |
| } |
| |
| .grey { |
| background-color: #888; |
| } |
| |
| .green { |
| background-color: #0F0; |
| } |
| |
| .blue { |
| background-color: #00F; |
| } |
| |
| .cyan { |
| background-color: #0FF; |
| } |
| |
| .purple { |
| background-color: #F0F; |
| } |
| |
| .yellow { |
| background-color: #FF0; |
| } |
| </style> |
| </head> |
| |
| <body class="black"> |
| <script> |
| const expected_events = [ |
| // name, id, phase |
| // actions.move_to_element(top_one).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointermove', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointerenter', id: 'top', phase: Event.AT_TARGET }, |
| { name: 'pointerenter', id: 'outer', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mouseenter', id: 'top', phase: Event.AT_TARGET }, |
| { name: 'mouseenter', id: 'outer', phase: Event.AT_TARGET }, |
| // actions.move_to_element(top_two).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointerout', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, , |
| { name: 'mousemove', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'top_two', phase: Event.AT_TARGET }, |
| // actions.move_to_element_with_offset(top_two, 10, 10).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointermove', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| // actions.move_to_element_with_offset(top_two, 0, 0).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointermove', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, , |
| { name: 'mousemove', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| // actions.move_to_element_with_offset(top_two, -10, 0).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointerout', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'top_two', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'top_one', phase: Event.AT_TARGET }, |
| // actions.click(top_three) |
| { name: 'pointerout', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'top_one', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerdown', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousedown', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'mousedown', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousedown', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseup', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'mouseup', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseup', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'click', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| // actions.click_and_hold(top_four) |
| { name: 'pointerout', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'top_three', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, , |
| { name: 'mousemove', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerdown', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousedown', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'mousedown', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousedown', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| // actions.release(top_five) |
| { name: 'pointermove', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseup', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'mouseup', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseup', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'click', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| // actions.move_to_element(top_six).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointerout', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'top_four', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'top_six', phase: Event.AT_TARGET }, |
| // actions.move_to_element(bottom_six).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointerout', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'pointerleave', id: 'top', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'top', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'top_six', phase: Event.AT_TARGET }, |
| { name: 'mouseleave', id: 'top', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'pointerenter', id: 'bottom', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'mouseenter', id: 'bottom', phase: Event.AT_TARGET }, |
| // actions.click(bottom_five) |
| { name: 'pointerout', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'bottom_six', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerdown', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'click', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| // actions.click_and_hold(bottom_four) |
| { name: 'pointerout', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'bottom_five', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerdown', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| // actions.release(bottom_three) |
| { name: 'pointermove', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'click', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| // actions.move_to_element(bottom_two).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointerout', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'pointerout', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerleave', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'bottom', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseout', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseleave', id: 'bottom_four', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'pointerenter', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'mouseenter', id: 'bottom_two', phase: Event.AT_TARGET }, |
| // actions.move_to_element(bottom_one).pause(_SLEEP_AFTER_MOVE_TIME) |
| { name: 'pointerout', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'pointerleave', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'mouseleave', id: 'bottom_two', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'pointerenter', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'mouseenter', id: 'bottom_one', phase: Event.AT_TARGET }, |
| // find_element_by_id(runner, 'end').click() |
| { name: 'pointerout', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'pointerleave', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'pointerleave', id: 'bottom', phase: Event.AT_TARGET }, |
| { name: 'mouseout', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'mouseleave', id: 'bottom_one', phase: Event.AT_TARGET }, |
| { name: 'mouseleave', id: 'bottom', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'pointermove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousemove', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'mousemove', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerover', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'pointerover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerenter', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'mouseover', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseenter', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'pointerdown', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mousedown', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'mousedown', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'pointerup', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'pointerup', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'mouseup', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'mouseup', id: 'outer', phase: Event.BUBBLING_PHASE }, |
| { name: 'click', id: 'end', phase: Event.AT_TARGET }, |
| { name: 'click', id: 'outer', phase: Event.BUBBLING_PHASE }] |
| |
| function endTest(e) { |
| console.log('Ending test.') |
| assertTrue(failure_count == 0); |
| onEndTest(); |
| } |
| |
| function cancel(e) { |
| console.log('cancel'); |
| e.preventDefault(); |
| } |
| |
| function stop(e) { |
| console.log('stop'); |
| e.stopPropagation(); |
| } |
| |
| function capture(e) { |
| console.log('capture'); |
| e.target.setPointerCapture(e.pointerId); |
| } |
| |
| // If the event type has value 'type', then report an error if the |
| // 'name' property on the event target already has 'value'. Otherwise, |
| // set it to the 'value'. This is used to detect erroneous boundary |
| // events (enter/leave, over/out), and up/down event sequences on an |
| // element. |
| function trackAndVerifyTargetState(event, type, name, value) { |
| if (event.type == type) { |
| if (event.target[name] == value) { |
| console.log('ERROR: ' + type + 'event received while ' + |
| name + ' == ' + event.target[name]); |
| assertTrue(event.target[name] != value); |
| } |
| event.target[name] = value; |
| } |
| } |
| |
| function checkState(e) { |
| // Check the target element state when the event is 'at target'. |
| if (e.eventPhase == 2) { |
| // Verify that there is not a duplicated or missing event for enter, |
| // leave, over, out, up, or down. |
| trackAndVerifyTargetState(e, 'mouseenter', 'mouseenter', true); |
| trackAndVerifyTargetState(e, 'mouseleave', 'mouseenter', false); |
| trackAndVerifyTargetState(e, 'mouseover', 'mouseover', true); |
| trackAndVerifyTargetState(e, 'mouseout', 'mouseover', false); |
| trackAndVerifyTargetState(e, 'mousedown', 'mousedown', true); |
| trackAndVerifyTargetState(e, 'mouseup', 'mousedown', false); |
| |
| trackAndVerifyTargetState(e, 'pointerenter', 'pointerenter', true); |
| trackAndVerifyTargetState(e, 'pointerleave', 'pointerenter', false); |
| trackAndVerifyTargetState(e, 'pointerover', 'pointerover', true); |
| trackAndVerifyTargetState(e, 'pointerout', 'pointerover', false); |
| trackAndVerifyTargetState(e, 'pointerdown', 'pointerdown', true); |
| trackAndVerifyTargetState(e, 'pointerup', 'pointerdown', false); |
| } |
| } |
| |
| function setAllHandlers(prefix, selector, callback) { |
| setHandlers(prefix + 'enter', selector, callback); |
| setHandlers(prefix + 'leave', selector, callback); |
| setHandlers(prefix + 'over', selector, callback); |
| setHandlers(prefix + 'out', selector, callback); |
| setHandlers(prefix + 'down', selector, callback); |
| setHandlers(prefix + 'up', selector, callback); |
| setHandlers(prefix + 'move', selector, callback); |
| } |
| |
| window.onload = function () { |
| setAllHandlers('mouse', '.track', logEvent); |
| setAllHandlers('pointer', '.track', logEvent); |
| setHandlers('click', '.track', logEvent); |
| setAllHandlers('mouse', '.cancel', cancel); |
| setAllHandlers('pointer', '.cancel', cancel); |
| setAllHandlers('mouse', '.stop', stop); |
| setAllHandlers('pointer', '.stop', stop); |
| setHandlers('pointerdown', '.capture', capture); |
| setHandlers('click', '.end', endTest); |
| setAllHandlers('mouse', '*', checkState); |
| setAllHandlers('pointer', '*', checkState); |
| console.log("Setup finished"); |
| setupFinished(); |
| } |
| |
| </script> |
| <div id="outer" class="track size40 grey"> |
| <div id="top" class="track size20 blue"> |
| <span id="top_one" class="track size10 cyan"></span> |
| <span id="top_two" class="track size10 purple"></span> |
| *A* |
| <span id="top_three" class="track size10 yellow"></span> |
| *B* |
| <span id="top_four" class="track capture size10 grey"></span> |
| <span id="top_five" class="track size10 green"></span> |
| <span id="top_six" class="track size10 cyan"></span> |
| </div> |
| <div id="bottom" class="track size20 green"> |
| <span id="bottom_one" class="track stop size10 cyan"></span> |
| <span id="bottom_two" class="track stop size10 purple"></span> |
| *A* |
| <span id="bottom_three" class="track cancel size10 yellow"></span> |
| *B* |
| <span id="bottom_four" class="track cancel capture size10 grey"></span> |
| <span id="bottom_five" class="track cancel size10 blue"></span> |
| <span id="bottom_six" class="track size10 cyan"></span> |
| </div> |
| <div id="end" class="end track size10 blue"> |
| </div> |
| </body> |
| |
| </html> |
