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