Skip to content
This repository was archived by the owner on Dec 18, 2018. It is now read-only.

Commit f394a9f

Browse files
author
Leif Arne Storset
committed
[css3-ui] Tests for nav-<dir>
Directional focus navigation
1 parent 4747026 commit f394a9f

20 files changed

+336
-0
lines changed
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - property inheritance</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that the 'nav-left' property value is not inherited.">
7+
<style>
8+
#parent {
9+
nav-left: #finish;
10+
}
11+
</style>
12+
<body>
13+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
14+
<p>Test passes if navigating left once moves the focus to the "FINISH" link.</p>
15+
16+
<div id="parent"><a href="">FINISH</a> <a href="">START</a> <a href="" id="finish">ignore</a></div>
17+
</body>
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - 'inherit' property value</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that the 'inherit' value is respected.">
7+
<style>
8+
#parent {
9+
nav-left: #finish;
10+
}
11+
#start {
12+
nav-left: inherit;
13+
}
14+
</style>
15+
<body>
16+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
17+
<p>Test passes if navigating left once moves the focus to the "FINISH" link.</p>
18+
19+
<div id="parent"><a href="">ignore</a> <a href="" id="start">START</a> <a href="" id="finish">FINISH</a></div>
20+
</body>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - input elements</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that directional focus navigation properties work on input elements.">
7+
<style>
8+
#start {
9+
nav-left: #finish;
10+
}
11+
</style>
12+
<body>
13+
<p>First, use directional navigation to navigate the focus to the text input containing "START" below.</p>
14+
<p>Test passes if navigating left once moves the focus to the "FINISH" input.</p>
15+
16+
<div><input value="ignore"> <input value="START" id="start"> <input value="ignore"></div>
17+
18+
<div><input value="ignore"> <input value="ignore"> <input value="ignore"></div>
19+
20+
<div><input value="ignore"> <input value="FINISH" id="finish"> <input value="ignore"></div>
21+
</body>
Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - floating elements</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that directional focus navigation properties work on floating elements.">
7+
<style>
8+
#container > div {
9+
clear: left;
10+
}
11+
#container > div > a {
12+
float: left;
13+
margin-right: 1ex;
14+
}
15+
#start {
16+
nav-left: #finish;
17+
}
18+
</style>
19+
<body>
20+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
21+
<p>Test passes if navigating left once moves the focus to the "FINISH" input.</p>
22+
23+
<div id="container">
24+
<div><a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a></div>
25+
26+
<div><a href="">ignore</a> <a href="">ignore</a> <a href="">ignore</a></div>
27+
28+
<div><a href="">ignore</a> <a href="" id="finish">FINISH</a> <a href="">ignore</a></div>
29+
</div>
30+
</body>
Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - currently focused element</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that focus doesn't change when navigating to the currently focused element.">
7+
<style>
8+
#start {
9+
nav-left: #start;
10+
}
11+
</style>
12+
<body>
13+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
14+
<p>Test passes if the "START" element remains focused when navigating left.</p>
15+
16+
<div><a href="">ignore</a> <a href="" id="start">START</a> <a href="">ignore</a></div>
17+
</body>
Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - 'current' target frame</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that the 'current' frame value is respected.">
7+
<style>
8+
#start {
9+
nav-down: #finish current;
10+
}
11+
</style>
12+
<body>
13+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
14+
<p>Test passes if navigating down once moves the focus to the "FINISH" link.</p>
15+
16+
<p><a href="" id="finish">FINISH</a></p>
17+
18+
<p><a href="" id="start">START</a></p>
19+
20+
<iframe src="support/nav-dir-target-001-frame.html"></iframe>
21+
</body>
Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - 'root' target frame</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that the 'root' frame value is respected.">
7+
<body>
8+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
9+
<p>Test passes if navigating down once moves the focus to the "FINISH" link.</p>
10+
11+
<p><a href="" id="finish">FINISH</a></p>
12+
13+
<iframe src="support/nav-dir-target-002-frame.html"></iframe>
14+
15+
<p><a href="">ignore</a></p>
16+
</body>
Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - named target frame</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that a named target frame value is respected.">
7+
<style>
8+
#start {
9+
nav-right: #finish "frame";
10+
}
11+
</style>
12+
<body>
13+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
14+
<p>Test passes if navigating right once moves the focus to the "FINISH" link.</p>
15+
16+
<p><a href="" id="start">START</a> <a href="" id="finish">ignore</a></p>
17+
18+
<iframe src="support/nav-dir-target-003-frame.html" name="frame"></iframe>
19+
</body>
Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - non-existing target frame</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that a non-existing target frame value is treated as 'current'.">
7+
<body>
8+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
9+
<p>Test passes if navigating up once moves the focus to the "FINISH" link.</p>
10+
11+
<p><a href="" id="finish">ignore</a></p>
12+
13+
<iframe src="support/nav-dir-target-004-frame.html"></iframe>
14+
</body>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<title>CSS Basic User Interface Test: Directional Focus Navigation - sibling target frame</title>
3+
<link rel="author" title="Opera Software ASA" href="http://www.opera.com">
4+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#nav-dir">
5+
<meta name="flags" content="interact">
6+
<meta name="assert" content="Test checks that a named frame value also works for sibling frames.">
7+
<body>
8+
<p>First, use directional navigation to navigate the focus to the "START" link below.</p>
9+
<p>Test passes if navigating left once moves the focus to the "FINISH" link.</p>
10+
11+
<iframe src="support/nav-dir-target-005-frame.html"></iframe>
12+
<iframe src="support/nav-dir-target-003-frame.html" name="sibling"></iframe>
13+
</body>

0 commit comments

Comments
 (0)