<!DOCTYPE html>

<html>
  <head>
    <title>Cobalt pointer test</title>
    <script src='black_box_js_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>
      // Fail if the test is not finished within 15 seconds.
      var kTimeout = 30 * 1000;
      var failTimer = setTimeout(fail, kTimeout);

      function fail() {
          console.log("Failing due to timeout!");
          assertTrue(false);
      }

      function phasename(phase) {
        switch(phase) {
          case 0: return 'none';
          case 1: return 'capturing';
          case 2: return 'at target';
          case 3: return 'bubbling';
        }
        return ' [unknown: ' + phase + ']';
      }

      var expected_events = [
        // name, id, phase
        // actions.move_to_element(top_one).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointermove', 'top_one', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_one', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'top_one', 'at target'],
        ['pointerover', 'top', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'top_one', 'at target'],
        ['pointerenter', 'top', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'top_one', 'at target'],
        ['mouseover', 'top', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'top_one', 'at target'],
        ['mouseenter', 'top', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        // actions.move_to_element(top_two).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointerout', 'top_one', 'at target'],
        ['pointerout', 'top', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'top_one', 'at target'],
        ['mouseout', 'top_one', 'at target'],
        ['mouseout', 'top', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'top_one', 'at target'],
        ['pointermove', 'top_two', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_two', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'top_two', 'at target'],
        ['pointerover', 'top', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'top_two', 'at target'],
        ['pointerenter', 'top', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'top_two', 'at target'],
        ['mouseover', 'top', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'top_two', 'at target'],
        ['mouseenter', 'top', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        // actions.move_to_element_with_offset(top_two, 10, 10).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointermove', 'top_two', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_two', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        // actions.move_to_element_with_offset(top_two, 0, 0).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointermove', 'top_two', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_two', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        // actions.move_to_element_with_offset(top_two, -10, 0).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointerout', 'top_two', 'at target'],
        ['pointerout', 'top', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'top_two', 'at target'],
        ['mouseout', 'top_two', 'at target'],
        ['mouseout', 'top', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'top_two', 'at target'],
        ['pointermove', 'top_one', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_one', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'top_one', 'at target'],
        ['pointerover', 'top', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'top_one', 'at target'],
        ['pointerenter', 'top', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'top_one', 'at target'],
        ['mouseover', 'top', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'top_one', 'at target'],
        ['mouseenter', 'top', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        // actions.click(top_three)
        ['pointerout', 'top_one', 'at target'],
        ['pointerout', 'top', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'top_one', 'at target'],
        ['mouseout', 'top_one', 'at target'],
        ['mouseout', 'top', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'top_one', 'at target'],
        ['pointermove', 'top_three', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_three', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'top_three', 'at target'],
        ['pointerover', 'top', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'top_three', 'at target'],
        ['pointerenter', 'top', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'top_three', 'at target'],
        ['mouseover', 'top', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'top_three', 'at target'],
        ['mouseenter', 'top', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        ['pointerdown', 'top_three', 'at target'],
        ['pointerdown', 'top', 'bubbling'],
        ['pointerdown', 'outer', 'bubbling'],
        ['mousedown', 'top_three', 'at target'],
        ['mousedown', 'top', 'bubbling'],
        ['mousedown', 'outer', 'bubbling'],
        ['pointerup', 'top_three', 'at target'],
        ['pointerup', 'top', 'bubbling'],
        ['pointerup', 'outer', 'bubbling'],
        ['mouseup', 'top_three', 'at target'],
        ['mouseup', 'top', 'bubbling'],
        ['mouseup', 'outer', 'bubbling'],
        ['click', 'top_three', 'at target'],
        ['click', 'top', 'bubbling'],
        ['click', 'outer', 'bubbling'],
        // actions.click_and_hold(top_four)
        ['pointerout', 'top_three', 'at target'],
        ['pointerout', 'top', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'top_three', 'at target'],
        ['mouseout', 'top_three', 'at target'],
        ['mouseout', 'top', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'top_three', 'at target'],
        ['pointermove', 'top_four', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_four', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'top_four', 'at target'],
        ['pointerover', 'top', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'top_four', 'at target'],
        ['pointerenter', 'top', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'top_four', 'at target'],
        ['mouseover', 'top', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'top_four', 'at target'],
        ['mouseenter', 'top', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        ['pointerdown', 'top_four', 'at target'],
        ['pointerdown', 'top', 'bubbling'],
        ['pointerdown', 'outer', 'bubbling'],
        ['mousedown', 'top_four', 'at target'],
        ['mousedown', 'top', 'bubbling'],
        ['mousedown', 'outer', 'bubbling'],
        // actions.release(top_five)
        ['pointermove', 'top_four', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_four', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerup', 'top_four', 'at target'],
        ['pointerup', 'top', 'bubbling'],
        ['pointerup', 'outer', 'bubbling'],
        ['mouseup', 'top_four', 'at target'],
        ['mouseup', 'top', 'bubbling'],
        ['mouseup', 'outer', 'bubbling'],
        ['click', 'top_four', 'at target'],
        ['click', 'top', 'bubbling'],
        ['click', 'outer', 'bubbling'],
        // actions.move_to_element(top_six).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointerout', 'top_four', 'at target'],
        ['pointerout', 'top', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'top_four', 'at target'],
        ['mouseout', 'top_four', 'at target'],
        ['mouseout', 'top', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'top_four', 'at target'],
        ['pointermove', 'top_six', 'at target'],
        ['pointermove', 'top', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'top_six', 'at target'],
        ['mousemove', 'top', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'top_six', 'at target'],
        ['pointerover', 'top', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'top_six', 'at target'],
        ['pointerenter', 'top', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'top_six', 'at target'],
        ['mouseover', 'top', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'top_six', 'at target'],
        ['mouseenter', 'top', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        // actions.move_to_element(bottom_six).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointerout', 'top_six', 'at target'],
        ['pointerout', 'top', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'top_six', 'at target'],
        ['pointerleave', 'top', 'at target'],
        ['mouseout', 'top_six', 'at target'],
        ['mouseout', 'top', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'top_six', 'at target'],
        ['mouseleave', 'top', 'at target'],
        ['pointermove', 'bottom_six', 'at target'],
        ['pointermove', 'bottom', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'bottom_six', 'at target'],
        ['mousemove', 'bottom', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'bottom_six', 'at target'],
        ['pointerover', 'bottom', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'bottom_six', 'at target'],
        ['pointerenter', 'bottom', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'bottom_six', 'at target'],
        ['mouseover', 'bottom', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'bottom_six', 'at target'],
        ['mouseenter', 'bottom', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        // actions.click(bottom_five)
        ['pointerout', 'bottom_six', 'at target'],
        ['pointerout', 'bottom', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'bottom_six', 'at target'],
        ['mouseout', 'bottom_six', 'at target'],
        ['mouseout', 'bottom', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'bottom_six', 'at target'],
        ['pointermove', 'bottom_five', 'at target'],
        ['pointermove', 'bottom', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'bottom_five', 'at target'],
        ['mousemove', 'bottom', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'bottom_five', 'at target'],
        ['pointerover', 'bottom', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'bottom_five', 'at target'],
        ['pointerenter', 'bottom', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'bottom_five', 'at target'],
        ['mouseover', 'bottom', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'bottom_five', 'at target'],
        ['mouseenter', 'bottom', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        ['pointerdown', 'bottom_five', 'at target'],
        ['pointerdown', 'bottom', 'bubbling'],
        ['pointerdown', 'outer', 'bubbling'],
        ['pointerup', 'bottom_five', 'at target'],
        ['pointerup', 'bottom', 'bubbling'],
        ['pointerup', 'outer', 'bubbling'],
        ['click', 'bottom_five', 'at target'],
        ['click', 'bottom', 'bubbling'],
        ['click', 'outer', 'bubbling'],
        // actions.click_and_hold(bottom_four)
        ['pointerout', 'bottom_five', 'at target'],
        ['pointerout', 'bottom', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'bottom_five', 'at target'],
        ['mouseout', 'bottom_five', 'at target'],
        ['mouseout', 'bottom', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'bottom_five', 'at target'],
        ['pointermove', 'bottom_four', 'at target'],
        ['pointermove', 'bottom', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'bottom_four', 'at target'],
        ['mousemove', 'bottom', 'bubbling'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'bottom_four', 'at target'],
        ['pointerover', 'bottom', 'bubbling'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'bottom_four', 'at target'],
        ['pointerenter', 'bottom', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'bottom_four', 'at target'],
        ['mouseover', 'bottom', 'bubbling'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'bottom_four', 'at target'],
        ['mouseenter', 'bottom', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        ['pointerdown', 'bottom_four', 'at target'],
        ['pointerdown', 'bottom', 'bubbling'],
        ['pointerdown', 'outer', 'bubbling'],
        // actions.release(bottom_three)
        ['pointermove', 'bottom_four', 'at target'],
        ['pointermove', 'bottom', 'bubbling'],
        ['pointermove', 'outer', 'bubbling'],
        ['pointerup', 'bottom_four', 'at target'],
        ['pointerup', 'bottom', 'bubbling'],
        ['pointerup', 'outer', 'bubbling'],
        ['click', 'bottom_four', 'at target'],
        ['click', 'bottom', 'bubbling'],
        ['click', 'outer', 'bubbling'],
        // actions.move_to_element(bottom_two).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointerout', 'bottom_four', 'at target'],
        ['pointerout', 'bottom', 'bubbling'],
        ['pointerout', 'outer', 'bubbling'],
        ['pointerleave', 'bottom_four', 'at target'],
        ['mouseout', 'bottom_four', 'at target'],
        ['mouseout', 'bottom', 'bubbling'],
        ['mouseout', 'outer', 'bubbling'],
        ['mouseleave', 'bottom_four', 'at target'],
        ['pointermove', 'bottom_two', 'at target'],
        ['mousemove', 'bottom_two', 'at target'],
        ['pointerover', 'bottom_two', 'at target'],
        ['pointerenter', 'bottom_two', 'at target'],
        ['pointerenter', 'bottom', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'bottom_two', 'at target'],
        ['mouseenter', 'bottom_two', 'at target'],
        ['mouseenter', 'bottom', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        // actions.move_to_element(bottom_one).pause(_SLEEP_AFTER_MOVE_TIME)
        ['pointerout', 'bottom_two', 'at target'],
        ['pointerleave', 'bottom_two', 'at target'],
        ['mouseout', 'bottom_two', 'at target'],
        ['mouseleave', 'bottom_two', 'at target'],
        ['pointermove', 'bottom_one', 'at target'],
        ['mousemove', 'bottom_one', 'at target'],
        ['pointerover', 'bottom_one', 'at target'],
        ['pointerenter', 'bottom_one', 'at target'],
        ['pointerenter', 'bottom', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'bottom_one', 'at target'],
        ['mouseenter', 'bottom_one', 'at target'],
        ['mouseenter', 'bottom', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        // find_element_by_id(runner, 'end').click()
        ['pointerout', 'bottom_one', 'at target'],
        ['pointerleave', 'bottom_one', 'at target'],
        ['pointerleave', 'bottom', 'at target'],
        ['mouseout', 'bottom_one', 'at target'],
        ['mouseleave', 'bottom_one', 'at target'],
        ['mouseleave', 'bottom', 'at target'],
        ['pointermove', 'end', 'at target'],
        ['pointermove', 'outer', 'bubbling'],
        ['mousemove', 'end', 'at target'],
        ['mousemove', 'outer', 'bubbling'],
        ['pointerover', 'end', 'at target'],
        ['pointerover', 'outer', 'bubbling'],
        ['pointerenter', 'end', 'at target'],
        ['pointerenter', 'outer', 'at target'],
        ['mouseover', 'end', 'at target'],
        ['mouseover', 'outer', 'bubbling'],
        ['mouseenter', 'end', 'at target'],
        ['mouseenter', 'outer', 'at target'],
        ['pointerdown', 'end', 'at target'],
        ['pointerdown', 'outer', 'bubbling'],
        ['mousedown', 'end', 'at target'],
        ['mousedown', 'outer', 'bubbling'],
        ['pointerup', 'end', 'at target'],
        ['pointerup', 'outer', 'bubbling'],
        ['mouseup', 'end', 'at target'],
        ['mouseup', 'outer', 'bubbling'],
        ['click', 'end', 'at target'],
        ['click', 'outer', 'bubbling']];

      var current_event_number = 0
      var failure_count = 0;

      function CheckEvent(name, id, phase) {
        while ((current_event_number < expected_events.length) &&
               ((expected_events[current_event_number][0] != name) ||
               (expected_events[current_event_number][1] != id) ||
               (expected_events[current_event_number][2] != phase))) {
          console.log('ERROR: Missing Event [\'' +
                      expected_events[current_event_number][0] + '\', \'' +
                      expected_events[current_event_number][1] + '\', \'' +
                      expected_events[current_event_number][2] + '\'],');
          failure_count += 1;
          current_event_number += 1;
        }
        if (current_event_number < expected_events.length) {
          current_event_number += 1;
        } else {
          failure_count += 1;
          console.log('ERROR: Unexpected Event [\'' + name + '\', \'' +
                      id + '\', \'' + phase + '\'],');
        }
      }

      function LogEvent(e) {
        var pointertype = e.pointerType ? e.pointerType + ' ' : '';
        var id = this.getAttribute('id')
        CheckEvent(e.type, id, phasename(e.eventPhase))
        console.log(e.type + ' ' + pointertype + id +
                    ' (' + this.getAttribute('class') + ')' +
                    ' [' + phasename(e.eventPhase) + ']' +
                    ' (' + e.screenX + ',' + e.screenY + ')');
      }

      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);
      }

      function SetHandlers(event, classname, callback) {
        var elements = document.getElementsByClassName(classname);
        for (var i = 0; i < elements.length; ++i) {
          elements[i].addEventListener(event, callback);
        }
      }

      function SetAllHandlers(prefix, classname, callback) {
        SetHandlers(prefix + 'enter', classname, callback);
        SetHandlers(prefix + 'leave', classname, callback);
        SetHandlers(prefix + 'over', classname, callback);
        SetHandlers(prefix + 'out', classname, callback);
        SetHandlers(prefix + 'down', classname, callback);
        SetHandlers(prefix + 'up', classname, callback);
        SetHandlers(prefix + 'move', classname, 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);
        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>