| <!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> |