Commit d0dc6983 authored by Alice Boxhall's avatar Alice Boxhall Committed by Commit Bot

Update some accessibility-related tests to be testharness tests.

This is pre-work for https://crrev.com/c/1369489

Bug: 835455
Change-Id: I11dcc45745a0b5ddabaf160958d4d6ade22ea6fa
Reviewed-on: https://chromium-review.googlesource.com/c/1493336
Commit-Queue: Dominic Mazzoni <dmazzoni@chromium.org>
Reviewed-by: default avatarDominic Mazzoni <dmazzoni@chromium.org>
Cr-Commit-Position: refs/heads/master@{#636854}
parent b57663b3
Tests if typing an arrow key dispatches |Focus| and |MarkDirty| a11y events.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Focused: Month
Focused: Month
PASS Received MarkDirty
PASS Received MarkDirty
Focused: Show next month
Focused: <<CalendarToday>>
Focused: Show previous month
Focused: Show month selection panel
Open the month popup. This should notify the third MarkDirty.
Focused:
PASS Received MarkDirty
PASS Received MarkDirty
PASS Received MarkDirty
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
<script src="resources/calendar-picker-common.js"></script>
</head>
<body>
<script src="../../../resources/js-test.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
<script src="resources/calendar-picker-common.js"></script>
<p id="description"></p>
<div id="console"></div>
<input type="date" id="date1" value="2000-01-02">
<script>
description('Tests if typing an arrow key dispatches |Focus| and |MarkDirty| a11y events.');
async_test((t) => {
var date1 = document.getElementById('date1');
openPicker(date1, () => { eventSender.keyDown('ArrowRight'); });
accessibilityController.setNotificationListener(function(axnode, type) {
if (type == 'Focus') {
// Remove ',' to reduce platform differences.
debug('Focused: ' + escapeHTML(accessibilityController.focusedElement.name.replace(/,/g, '')));
} else if (type == 'MarkDirty') {
testPassed('Received MarkDirty');
if (++markDirtyCounter == 2) {
testButtonDescription();
} else if (markDirtyCounter == 3) {
// Highlight 2000-02 in the month popup.
setTimeout(function() { eventSender.keyDown('ArrowRight'); }, 0);
} else if (markDirtyCounter == 4) {
// Highlight 1999-10 in the month popup.
setTimeout(function() { eventSender.keyDown('ArrowUp'); }, 0);
} else if (markDirtyCounter == 5) {
finishJSTest();
accessibilityController.setNotificationListener(function(axnode, type) {
if (type == 'Focus') {
console.log('Focused: ' + escapeHTML(accessibilityController.focusedElement.name.replace(/,/g, '')));
} else if (type == 'MarkDirty') {
if (++markDirtyCounter == 2) {
testButtonDescription();
} else if (markDirtyCounter == 3) {
// Highlight 2000-02 in the month popup.
setTimeout(function() { eventSender.keyDown('ArrowRight'); }, 0);
} else if (markDirtyCounter == 4) {
// Highlight 1999-10 in the month popup.
setTimeout(function() { eventSender.keyDown('ArrowUp'); }, 0);
} else if (markDirtyCounter == 5) {
t.done();
}
}
}
});
var markDirtyCounter = 0;
var date1 = document.getElementById('date1');
openPicker(date1, test1);
});
var markDirtyCounter = 0;
function test1() {
eventSender.keyDown('ArrowRight');
}
function testButtonDescription() {
// Focus on 'next month' button.
eventSender.keyDown('\t', ['shiftKey']);
// Focus on the today button.
eventSender.keyDown('\t', ['shiftKey']);
// Focus on 'previous month' button.
eventSender.keyDown('\t', ['shiftKey']);
// Focus on the month selector button.
eventSender.keyDown('\t', ['shiftKey']);
function testButtonDescription() {
// Focus on 'next month' button.
eventSender.keyDown('\t', ['shiftKey']);
// Focus on the today button.
eventSender.keyDown('\t', ['shiftKey']);
// Focus on 'previous month' button.
eventSender.keyDown('\t', ['shiftKey']);
// Focus on the month selector button.
eventSender.keyDown('\t', ['shiftKey']);
console.log('Open the month popup. This should notify the third MarkDirty.');
eventSender.keyDown(' ');
}
}, 'Tests that typing an arrow key dispatches |Focus| and |MarkDirty| a11y events.');
debug('Open the month popup. This should notify the third MarkDirty.');
eventSender.keyDown(' ');
}
</script>
</body>
</html>
This test checks value changed accessibility notifications.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Focus Month=10
Focus Day=09
Focus Year=2012
ValueChanged Day=04
ValueChanged Day=04
ValueChanged Year=2013
ValueChanged Year=2013
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<input id="test" type="date" value="2012-10-09">
<script>
description('This test checks value changed accessibility notifications.');
var testInput = document.getElementById("test");
async_test((t) => {
var testInput = document.getElementById("test");
var expected = [
[ "Focus", "Month", "10" ],
[ "Focus", "Day", "09" ],
[ "Focus", "Year", "2012" ],
[ "ValueChanged", "Day", "04" ],
[ "ValueChanged", "Day", "04" ],
[ "ValueChanged", "Year", "2013" ],
[ "ValueChanged", "Year", "2013" ] ];
if (!window.accessibilityController || !window.eventSender)
debug("Please run inside DRT or WRT.");
else {
accessibilityController.addNotificationListener(function (element, notification) {
if (notification == 'Focus' || notification == 'ValueChanged') {
debug(notification + ' ' + element.name.trim() + '=' + element.valueDescription.substr(20));
}
});
accessibilityController.addNotificationListener(
t.step_func((element, notification) => {
if (notification == 'Focus' || notification == 'ValueChanged') {
var next_expectation = expected.shift();
assert_equals(notification, next_expectation[0]);
assert_equals(element.name.trim(), next_expectation[1]);
assert_equals(element.valueDescription.substr(20), next_expectation[2]);
}
if (expected.length === 0)
t.done();
}));
testInput.focus();
eventSender.keyDown('\t');
eventSender.keyDown('4');
eventSender.keyDown('ArrowUp');
window.jsTestIsAsync = true;
window.setTimeout(function() {
debug('');
testInput.parentNode.removeChild(testInput);
finishJSTest();
}, 1);
}
assert_unreached("Did not receive all accessibility notifications");
t.done();
}, 500);
}, 'This test checks value changed accessibility notifications.');
</script>
</body>
</html>
This test checks value changed accessibility notifications.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Focus =AXValueDescription: 10
Focus =AXValueDescription: 09
Focus =AXValueDescription: 2012
Focus =AXValueDescription: 12
Focus =AXValueDescription: 34
ValueChanged =AXValueDescription: 04
ValueChanged =AXValueDescription: 04
ValueChanged =AXValueDescription: 2013
ValueChanged =AXValueDescription: 2013
ValueChanged =AXValueDescription: 02
ValueChanged =AXValueDescription: 02
ValueChanged =AXValueDescription: 33
ValueChanged =AXValueDescription: 33
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<input id="test" type="datetime-local" value="2012-10-09T12:34:56">
<script>
description('This test checks value changed accessibility notifications.');
async_test((t) => {
var testInput = document.getElementById('test');
var expected = [
[ "Focus", "Month", "10" ],
[ "Focus", "Day", "09" ],
[ "Focus", "Year", "2012" ],
[ "Focus", "Hours", "12" ],
[ "Focus", "Minutes", "34" ],
[ "ValueChanged", "Day", "04" ],
[ "ValueChanged", "Day", "04" ],
[ "ValueChanged", "Year", "2013" ],
[ "ValueChanged", "Year", "2013" ],
[ "ValueChanged", "Hours", "02" ],
[ "ValueChanged", "Hours", "02" ],
[ "ValueChanged", "Minutes", "33" ],
[ "ValueChanged", "Minutes", "33" ],
];
var testInput = document.getElementById('test');
if (!window.accessibilityController || !window.eventSender)
debug('Please run inside DRT or WRT.');
else {
accessibilityController.addNotificationListener(function (element, notification) {
if (notification == 'Focus' || notification == 'ValueChanged') {
debug(notification + ' ' + element.description + '=' + element.valueDescription);
}
});
accessibilityController.addNotificationListener(
t.step_func((element, notification) => {
if (notification == 'Focus' || notification == 'ValueChanged') {
var next_expectation = expected.shift();
console.log('next_expectation: ' + JSON.stringify(next_expectation));
console.log('actual: [' + notification + ', ' + element.name.trim() + ', ' + element.valueDescription.substr(20) + ']');
assert_equals(notification, next_expectation[0]);
assert_equals(element.name.trim(), next_expectation[1]);
assert_equals(element.valueDescription.substr(20), next_expectation[2]);
}
if (expected.length === 0)
t.done();
}));
testInput.focus();
eventSender.keyDown('\t');
......@@ -27,14 +47,12 @@ else {
eventSender.keyDown('2');
eventSender.keyDown('ArrowDown');
window.jsTestIsAsync = true;
window.setTimeout(function() {
debug('');
testInput.parentNode.removeChild(testInput);
finishJSTest();
}, 1);
}
assert_unreached("Did not receive all accessibility notifications");
t.done();
}, 500);
}, 'This test checks value changed accessibility notifications.');
</script>
</body>
</html>
This test checks value changed accessibility notifications.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Focus =AXValueDescription: October
Focus =AXValueDescription: 2012
ValueChanged =AXValueDescription: 0005
ValueChanged =AXValueDescription: 0005
ValueChanged =AXValueDescription: 0005
ValueChanged =AXValueDescription: 0005
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<input id="test" type="month" value="2012-10">
<script>
description('This test checks value changed accessibility notifications.');
async_test((t) => {
var testInput = document.getElementById('test');
var expected = [
[ "Focus", "Month", "October" ],
[ "Focus", "Year", "2012" ],
[ "ValueChanged", "Year", "0005" ],
[ "ValueChanged", "Year", "0005" ] ];
var testInput = document.getElementById("test");
if (!window.accessibilityController || !window.eventSender)
debug("Please run inside DRT or WRT.");
else {
accessibilityController.addNotificationListener(function (element, notification) {
if (notification == 'Focus' || notification == 'ValueChanged') {
debug(notification + ' ' + element.description + '=' + element.valueDescription);
}
});
accessibilityController.addNotificationListener(
t.step_func((element, notification) => {
if (notification == 'Focus' || notification == 'ValueChanged') {
var next_expectation = expected.shift();
console.log('next_expectation: ' + JSON.stringify(next_expectation));
console.log('actual: [' + notification + ', ' + element.name.trim() + ', ' + element.valueDescription.substr(20) + ']');
assert_equals(notification, next_expectation[0]);
assert_equals(element.name.trim(), next_expectation[1]);
assert_equals(element.valueDescription.substr(20), next_expectation[2]);
}
if (expected.length === 0)
t.done();
}));
testInput.focus();
eventSender.keyDown('\t');
eventSender.keyDown('4');
eventSender.keyDown('ArrowUp');
window.jsTestIsAsync = true;
window.setTimeout(function() {
debug('');
testInput.remove();
finishJSTest();
}, 1);
}
assert_unreached("Did not receive all accessibility notifications");
t.done();
}, 500);
}, 'This test checks value changed accessibility notifications.');
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
</head>
<body>
<script src="../../../resources/js-test.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
<p id="description"></p>
<div id="console"></div>
<select id="menu">
<option>foo</option>
<option selected>bar</option>
......@@ -13,23 +14,22 @@
</select>
<script>
description('Tests if typing an arrow key dispatches a |MenuListItemSelected| a11y event.');
accessibilityController.setNotificationListener(function(axnode, type) {
if (type == 'MenuListItemSelected') {
testPassed('Received MenuListItemSelected');
finishJSTest();
}
});
var menu = document.getElementById('menu');
openPicker(menu, test1, function () {
testFailed('picker didn\'t open')
finishJSTest();
});
function test1() {
async_test((t) => {
accessibilityController.setNotificationListener(t.step_func((axnode, type) => {
if (type == 'MenuListItemSelected')
t.done();
}));
var menu = document.getElementById('menu');
openPicker(menu, t, function () {
assert_unreached('picker didn\'t open')
t.done();
});
eventSender.keyDown('ArrowDown');
}
window.setTimeout(function() {
assert_unreached("Did not receive all accessibility notifications");
t.done();
}, 500);
}, 'Tests if typing an arrow key dispatches a |MenuListItemSelected| a11y event.');
</script>
</body>
......
This test checks value changed accessibility notifications.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Focus Hours=12
Focus Minutes=34
ValueChanged Minutes=05
ValueChanged Minutes=05
ValueChanged Minutes=05
ValueChanged Minutes=05
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<input id=test type="time" value="12:34:56.789">
<script>
description('This test checks value changed accessibility notifications.');
async_test((t) => {
var testInput = document.getElementById('test');
var expected = [
[ "Focus", "Hours", "12" ],
[ "Focus", "Minutes", "34" ],
[ "ValueChanged", "Minutes", "05" ],
[ "ValueChanged", "Minutes", "05" ] ];
function enableAccessibility()
{
if (!window.accessibilityController) {
debug("Please run inside DumpRenderTree.");
return;
}
accessibilityController.addNotificationListener(
t.step_func((element, notification) => {
if (notification == 'Focus' || notification == 'ValueChanged') {
var next_expectation = expected.shift();
console.log('next_expectation: ' + JSON.stringify(next_expectation));
console.log('actual: [' + notification + ', ' + element.name.trim() + ', ' + element.valueDescription.substr(20) + ']');
assert_equals(notification, next_expectation[0]);
assert_equals(element.name.trim(), next_expectation[1]);
assert_equals(element.valueDescription.substr(20), next_expectation[2]);
}
if (expected.length === 0)
t.done();
}));
accessibilityController.addNotificationListener(function (element, notification) {
if (notification == 'Focus' || notification == 'ValueChanged') {
debug(notification + ' ' + element.name.trim() + '=' + element.valueDescription.substr(20));
}
});
}
testInput.focus();
eventSender.keyDown('\t');
eventSender.keyDown('4');
eventSender.keyDown('ArrowUp');
function keyDown(key, modifiers)
{
if (!window.eventSender)
return;
eventSender.keyDown(key, modifiers);
}
var testInput = document.getElementById("test");
enableAccessibility();
testInput.focus();
keyDown('\t');
keyDown('4');
keyDown('ArrowUp');
window.jsTestIsAsync = true;
window.setTimeout(function () {
debug('');
testInput.parentNode.removeChild(testInput);
finishJSTest();
}, 1);
window.setTimeout(function() {
assert_unreached("Did not receive all accessibility notifications");
t.done();
}, 500);
}, 'This test checks value changed accessibility notifications.');
</script>
</body>
</html>
This test checks value changed accessibility notifications.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Focus Week=10
Focus Year=2012
ValueChanged Year=0005
ValueChanged Year=0005
ValueChanged Year=0005
ValueChanged Year=0005
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<input id="test" type="week" value="2012-W10">
<script>
description('This test checks value changed accessibility notifications.');
async_test((t) => {
var testInput = document.getElementById('test');
var expected = [
[ "Focus", "Week", "10" ],
[ "Focus", "Year", "2012" ],
[ "ValueChanged", "Year", "0005" ],
[ "ValueChanged", "Year", "0005" ] ];
var testInput = document.getElementById("test");
if (!window.accessibilityController || !window.eventSender)
debug("Please run inside DRT or WRT.");
else {
accessibilityController.addNotificationListener(function (element, notification) {
if (notification == 'Focus' || notification == 'ValueChanged') {
debug(notification + ' ' + element.name.trim() + '=' + element.valueDescription.substr(20));
}
});
accessibilityController.addNotificationListener(
t.step_func((element, notification) => {
if (notification == 'Focus' || notification == 'ValueChanged') {
var next_expectation = expected.shift();
console.log('next_expectation: ' + JSON.stringify(next_expectation));
console.log('actual: [' + notification + ', ' + element.name.trim() + ', ' + element.valueDescription.substr(20) + ']');
assert_equals(notification, next_expectation[0]);
assert_equals(element.name.trim(), next_expectation[1]);
assert_equals(element.valueDescription.substr(20), next_expectation[2]);
}
if (expected.length === 0)
t.done();
}));
testInput.focus();
eventSender.keyDown('\t');
eventSender.keyDown('4');
eventSender.keyDown('ArrowUp');
window.jsTestIsAsync = true;
window.setTimeout(function() {
debug('');
testInput.remove();
finishJSTest();
}, 1);
}
assert_unreached("Did not receive all accessibility notifications");
t.done();
}, 500);
}, 'This test checks value changed accessibility notifications.');
</script>
</body>
</html>
This tests that accessibility events will be fired after the first layout, rather than only after the document loads.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS elapsedTime is >= 900
PASS gotLayoutCompleteBeforeOneSecond is true
PASS successfullyParsed is true
TEST COMPLETE
<!DOCTYPE html>
<head>
<title>Accessibility: slow document load</title>
<script src="/js-test-resources/js-test.js"></script>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="console"></div>
<script>
description("This tests that accessibility events will be fired after the first layout, rather than only after the document loads.");
window.jsTestIsAsync = true;
if (window.testRunner && window.accessibilityController) {
testRunner.dumpAsText();
async_test((t) => {
startTime = new Date();
gotLayoutCompleteBeforeOneSecond = false;
accessibilityController.addNotificationListener(function (target, notification) {
elapsedTime = new Date() - startTime;
if (notification == "LayoutComplete" && elapsedTime < 900) {
gotLayoutCompleteBeforeOneSecond = true;
}
if (notification == "LoadComplete") {
accessibilityController.removeNotificationListener();
shouldBeGreaterThanOrEqual("elapsedTime", "900");
shouldBeTrue("gotLayoutCompleteBeforeOneSecond");
finishJSTest();
}
});
}
accessibilityController.addNotificationListener(
t.step_func((target, notification) => {
elapsedTime = new Date() - startTime;
if (notification == "LayoutComplete" && elapsedTime < 500) {
// See comment below if you're confused by this
gotLayoutCompleteBeforeOneSecond = true;
}
if (notification == "LoadComplete") {
accessibilityController.removeNotificationListener();
assert_greater_than_equal(elapsedTime, 500);
assert_true(gotLayoutCompleteBeforeOneSecond);
t.done();
}
}));
window.setTimeout(function() {
assert_unreached("Did not receive all accessibility notifications");
t.done();
}, 1500);
}, "This tests that accessibility events will be fired after the first layout, rather than only after the document loads.");
setTimeout(function() {
// Cause an incremental layout.
document.body.offsetTop;
}, 10);
// Cause a lifecycle update
document.body.click();
}, 0);
</script>
<!-- This is a cgi script that waits 1 second before loading.
In practice, it seems to sometimes load after slightly less
time, like 996 ms, so that's why we use 900 ms as the threshold
in the tests, above.
In practice, it seems to sometimes load after less time, so
that's why we use 500 ms as the threshold in the tests, above.
-->
<script src="slow-loading-script.cgi"></script>
......
Tests if typing an arrow key dispatches a |MenuListItemSelected| a11y event.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
PASS Received MenuListItemSelected
PASS successfullyParsed is true
TEST COMPLETE
foo
bar
qux
baz
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment