blob: 340e5da160ed5c8aa79769288fce362f787d3c26 [file] [log] [blame]
<!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'],
['mouseover', 'top_two', 'at target'],
['mouseover', 'top', 'bubbling'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'top_two', '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'],
['mouseover', 'top_one', 'at target'],
['mouseover', 'top', 'bubbling'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'top_one', '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'],
['mouseover', 'top_three', 'at target'],
['mouseover', 'top', 'bubbling'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'top_three', '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'],
['mouseover', 'top_four', 'at target'],
['mouseover', 'top', 'bubbling'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'top_four', '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'],
['mouseover', 'top_six', 'at target'],
['mouseover', 'top', 'bubbling'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'top_six', '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'],
['mouseover', 'bottom_six', 'at target'],
['mouseover', 'bottom', 'bubbling'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'bottom_six', 'at target'],
['mouseenter', 'bottom', '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'],
['mouseover', 'bottom_five', 'at target'],
['mouseover', 'bottom', 'bubbling'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'bottom_five', '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'],
['mouseover', 'bottom_four', 'at target'],
['mouseover', 'bottom', 'bubbling'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'bottom_four', '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'],
['mouseover', 'bottom_two', 'at target'],
['mouseenter', 'bottom_two', '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'],
['mouseover', 'bottom_one', 'at target'],
['mouseenter', 'bottom_one', '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'],
['mouseover', 'end', 'at target'],
['mouseover', 'outer', 'bubbling'],
['mouseenter', 'end', '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);
}
// 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 SetHandlers(event, selector, callback) {
var elements = document.querySelectorAll(selector);
for (var i = 0; i < elements.length; ++i) {
elements[i].addEventListener(event, callback);
}
}
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>