Commit 31ad1a83 authored by Hugo Holgersson's avatar Hugo Holgersson Committed by Commit Bot

Convert the first old snav*-layout tests to testharness.js

This introduces assertFocusMoves() that helps us to write
testharness.js-tests with the compact and declarative "step focus and
check result"-syntax of the older snav*-tests.

I've converted snav-div-scrollable-but-without-focusable-content.html
and snav-radio.html so these do no longer need -expected.txt-files,
asserts are now made through testharness.js instead.
Other snav*-tests could be converted by following their example.

Bug: 803086
Change-Id: I5310f16492b233f894eda7e3e6b9691926670b06
Reviewed-on: https://chromium-review.googlesource.com/998193Reviewed-by: default avatarPhilip Jägenstedt <foolip@chromium.org>
Commit-Queue: Hugo Holgersson <hugoh@vewd.com>
Cr-Commit-Position: refs/heads/master@{#581570}
parent a2a9bf5a
(function() {
"use strict";
function triggerMove(direction) {
switch (direction) {
case 'Up':
eventSender.keyDown('ArrowUp');
break;
case 'Right':
eventSender.keyDown('ArrowRight');
break;
case 'Down':
eventSender.keyDown('ArrowDown');
break;
case 'Left':
eventSender.keyDown('ArrowLeft');
break;
}
}
function moveFocusAsync(direction) {
return new Promise(function(resolve) {
triggerMove(direction);
setTimeout(resolve, 0);
});
}
function stepAndAssertMoves(expectedMoves, focusMoves) {
if (expectedMoves.length == 0)
return;
let move = expectedMoves.shift();
let direction = move[0];
let expectedId = move[1];
async_test(t => {
// TODO: Use WebDriver's API instead of eventSender.
// Hopefully something like:
// test_driver.move_focus(direction).then(...)
moveFocusAsync(direction).then(() => {
t.step(() => {
let expectedElement = document.getElementById(expectedId);
assert_equals(document.activeElement, expectedElement);
// Kick off another async test before closing this one.
stepAndAssertMoves(expectedMoves, focusMoves + 1);
t.done();
});
});
}, focusMoves + "th move: " + direction + '-key moves focus to ' +
'the element with id: ' + expectedId + '.');
}
function assertSnavEnabledAndTestable() {
test(() => {
assert_true(!!window.testRunner);
testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
testRunner.overridePreference('WebKitSpatialNavigationEnabled', 1);
}, 'window.testRunner is present.');
}
// TODO: Port all old spatial navigation layout tests to this method.
window.snav = {
assertFocusMoves: function(expectedMoves) {
assertSnavEnabledAndTestable();
stepAndAssertMoves(expectedMoves, 0);
}
}
})();
......@@ -5,6 +5,11 @@
* * Antonio Gomes <tonikitoo@webkit.org>
**/
/* NOTE:
* This file is deprecated.
* New tests should use snav-testharness.js instead.
*/
var gExpectedResults = 0;
var gIndex = 0;
var gClosureCallback = null;
......
PASS successfullyParsed is true
TEST COMPLETE
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "end"
PASS gFocusedDocument.activeElement.getAttribute("id") is "end"
PASS gFocusedDocument.activeElement.getAttribute("id") is "end"
PASS gFocusedDocument.activeElement.getAttribute("id") is "end"
PASS gFocusedDocument.activeElement.getAttribute("id") is "end"
PASS gFocusedDocument.activeElement.getAttribute("id") is "end"
PASS gFocusedDocument.activeElement.getAttribute("id") is "end"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
This test is to test that a scrollable div can scroll and reveal its content even if it does not have any focusable content.
<html>
<!--
This test ensures the correctness of a basic aspect of spatial navigation traversal
routines: scrollable block html elements without any focusable content should be ignored.
* Pre-conditions:
1) DRT support for spatial navigation enable/disable.
* Navigation steps:
1) Loads this page, focus goes to "start" automatically.
2) Focus moves from "start" to "end" bypassing the two div's
in between them, once both have no focusable elements inside.
-->
<head>
<style type="text/css">
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
</style>
<script src="../../resources/js-test.js"></script>
<script src="resources/spatial-navigation-utils.js"></script>
<script type="application/javascript">
var resultMap = [
["Down", "start"],
["Down", "start"],
["Down", "start"],
["Down", "start"],
["Down", "start"],
["Down", "start"],
["Down", "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "start"],
["DONE", "DONE"]
];
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
testRunner.overridePreference("WebKitSpatialNavigationEnabled", 1);
testRunner.waitUntilDone();
}
function runTest()
{
// starting the test itself: get to a known place.
document.getElementById("start").focus();
initTest(resultMap, testCompleted);
}
function testCompleted()
{
if (window.testRunner)
testRunner.notifyDone();
}
window.onload = runTest;
</script>
</head>
<body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
<div><a id="start" href="a"><img src="resources/green.png" width=30 height=30></a></div>
<div class="scroll">
<img src="resources/green.png" width=240 height=300>
</div>
<div class="scroll">
<img src="resources/green.png" width=240 height=300>
</div>
<div><a id="end" href="a"><img src="resources/green.png" width=30 height=30></a></div>
<div id="console"></div>
This test is to test that a scrollable div can scroll and reveal its content even if it does not have any focusable content.
</body>
</html>
<style>
div.scroll {
height: 200px;
width: 300px;
overflow: auto;
border: 1px solid #666;
background-color: #ccc;
padding: 8px;
}
</style>
<div><a id="start" href="a"><img src="resources/green.png" width=30 height=30></a></div>
<div class="scroll">
<img src="resources/green.png" width=240 height=300>
</div>
<div class="scroll">
<img src="resources/green.png" width=240 height=300>
</div>
<div><a id="end" href="a"><img src="resources/green.png" width=30 height=30></a></div>
This test is to test that a scrollable div can scroll and reveal its content even if it does not have any focusable content.
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
var resultMap = [
["Down", "start"],
["Down", "start"],
["Down", "start"],
["Down", "start"],
["Down", "start"],
["Down", "start"],
["Down", "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "end"],
["Up" , "start"],
];
// Start at a known place.
document.getElementById("start").focus();
snav.assertFocusMoves(resultMap);
</script>
2
4 6
8
PASS successfullyParsed is true
TEST COMPLETE
PASS gFocusedDocument.activeElement.getAttribute("id") is "8"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "2"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "6"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
PASS gFocusedDocument.activeElement.getAttribute("id") is "4"
PASS gFocusedDocument.activeElement.getAttribute("id") is "start"
<html>
<!--
This test ensures the correctness of Spatial Navigation (SNav) algorithm over single select element.
<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="1">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"></td>
<td style="vertical-align: top; text-align: center;"><a id="2" href="a">2</a></td>
<td style="vertical-align: top; text-align: center;"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><a id="4" href="a">4</a></td>
<td style="vertical-align: top; text-align: center;"><input type="radio" id="start" ></td>
<td style="vertical-align: top; text-align: center;"><a id="6" href="a">6</a></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"></td>
<td style="vertical-align: top; text-align: center;"><a id="8" href="a">8</a></td>
<td style="vertical-align: top; text-align: center;"></td>
</tr>
</tbody>
</table>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="resources/snav-testharness.js"></script>
<script>
var resultMap = [
["Down", "8"],
["Up", "start"],
["Up", "2"],
["Down", "start"],
["Right", "6"],
["Left", "start"],
["Left", "4"],
["Right", "start"],
];
// Start at a known place.
document.getElementById("start").focus();
snav.assertFocusMoves(resultMap);
</script>
* Pre-conditions:
1) DRT support for SNav enable/disable.
* Navigation steps:
1) Loads this page, focus goes to "start" automatically.
2) Focus moves away from select in 4 different directions to neighbor nodes and back.
-->
<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/spatial-navigation-utils.js"></script>
<script type="application/javascript">
var resultMap = [
["Down", "8"],
["Up", "start"],
["Up", "2"],
["Down", "start"],
["Right", "6"],
["Left", "start"],
["Left", "4"],
["Right", "start"],
["DONE", "DONE"]
];
if (window.testRunner) {
testRunner.dumpAsText();
testRunner.overridePreference("WebKitTabToLinksPreferenceKey", 1);
testRunner.overridePreference("WebKitSpatialNavigationEnabled", 1);
testRunner.waitUntilDone();
}
function runTest()
{
// starting the test itself: get to a known place.
document.getElementById("start").focus();
initTest(resultMap, testCompleted);
}
function testCompleted()
{
if (window.testRunner)
testRunner.notifyDone();
}
window.onload = runTest;
</script>
</head>
<body id="some-content" xmlns="http://www.w3.org/1999/xhtml">
<table style="text-align: left; width: 100%; margin-left: auto; margin-right: auto;" border="1" cellpadding="2" cellspacing="1">
<tbody>
<tr>
<td style="vertical-align: top; text-align: center;"></td>
<td style="vertical-align: top; text-align: center;"><a id="2" href="a">2</a></td>
<td style="vertical-align: top; text-align: center;"></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"><a id="4" href="a">4</a></td>
<td style="vertical-align: top; text-align: center;"><input type="radio" id="start" ></td>
<td style="vertical-align: top; text-align: center;"><a id="6" href="a">6</a></td>
</tr>
<tr>
<td style="vertical-align: top; text-align: center;"></td>
<td style="vertical-align: top; text-align: center;"><a id="8" href="a">8</a></td>
<td style="vertical-align: top; text-align: center;"></td>
</tr>
</tbody>
</table>
<div id="console"></div>
</body>
</html>
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