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

Commit c24556b

Browse files
committed
1 parent 209cf4b commit c24556b

16 files changed

+453
-0
lines changed
Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>dir() selector reference</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<style>
9+
div { text-align: left; }
10+
.blue { color: blue; direction: ltr; }
11+
.lime { color: lime; direction: rtl; }
12+
</style>
13+
</head>
14+
<body>
15+
<div class="blue">This element has default direction.</div>
16+
<div class="blue">This element is ltr.</div>
17+
<div class="lime">This element is rtl.</div>
18+
<div class="blue">
19+
<div>This element should inherit ltr.</div>
20+
<div class="blue">This element is ltr.</div>
21+
<div class="lime">This element is rtl.</div>
22+
<div class="blue">Every word in this element should inherit ltr.</div>
23+
</div>
24+
<div class="lime">
25+
<div>This element should inherit rtl.</div>
26+
<div class="blue">This element is ltr.</div>
27+
<div class="lime">This element is rtl.</div>
28+
<div class="lime">Every word in this element should inherit rtl.</div>
29+
</div>
30+
<div class="blue">This element has an invalid dir attribute and
31+
should have default direction.</div>
32+
</body>
33+
</html>
Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>CSS Test: :dir() selector</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
9+
<meta name="assert" content="Test checks :dir() basic functions with valid and invalid values.">
10+
<link rel="match" href="dir-style-01-ref.html">
11+
<style>
12+
div { text-align: left; }
13+
:dir(ltr) { color: blue }
14+
:dir(rtl) { color: lime }
15+
:dir(foopy) { color: red }
16+
</style>
17+
</head>
18+
<body>
19+
<div>This element has default direction.</div>
20+
<div dir="ltr">This element is ltr.</div>
21+
<div dir="rtl">This element is rtl.</div>
22+
<div dir="ltr">
23+
<div>This element should inherit ltr.</div>
24+
<div dir="ltr">This element is ltr.</div>
25+
<div dir="rtl">This element is rtl.</div>
26+
<div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>ltr</span></span></span></span></span></span></span></span>.</div>
27+
</div>
28+
<div dir="rtl">
29+
<div>This element should inherit rtl.</div>
30+
<div dir="ltr">This element is ltr.</div>
31+
<div dir="rtl">This element is rtl.</div>
32+
<div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>rtl</span></span></span></span></span></span></span></span>.</div>
33+
</div>
34+
<div dir="foopy">This element has an invalid dir attribute and
35+
should have default direction.</div>
36+
</body>
37+
</html>
Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS Test: :dir() selector</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
9+
<meta name="assert" content="Test checks :dir() basic functions after dynamic directionality change on elements.">
10+
<link rel="match" href="dir-style-01-ref.html">
11+
<style>
12+
div { text-align: left; }
13+
:dir(ltr) { color: blue }
14+
:dir(rtl) { color: lime }
15+
:dir(foopy) { color: red }
16+
</style>
17+
<script>
18+
function switchDir()
19+
{
20+
divs = document.getElementsByTagName("div");
21+
divs[0].offsetWidth; // ensure it's a dynamic change
22+
for (var i = 0; i < divs.length; ++i) {
23+
theDiv = divs[i];
24+
if (theDiv.dir == "ltr") {
25+
theDiv.dir = "rtl";
26+
} else if (theDiv.dir == "rtl") {
27+
theDiv.dir = "ltr";
28+
}
29+
}
30+
31+
document.documentElement.removeAttribute("class");
32+
}
33+
</script>
34+
</head>
35+
<body onload="switchDir()">
36+
<div>This element has default direction.</div>
37+
<div dir="rtl">This element is ltr.</div>
38+
<div dir="ltr">This element is rtl.</div>
39+
<div dir="rtl">
40+
<div>This element should inherit ltr.</div>
41+
<div dir="rtl">This element is ltr.</div>
42+
<div dir="ltr">This element is rtl.</div>
43+
<div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>ltr</span></span></span></span></span></span></span></span>.</div>
44+
</div>
45+
<div dir="ltr">
46+
<div>This element should inherit rtl.</div>
47+
<div dir="rtl">This element is ltr.</div>
48+
<div dir="ltr">This element is rtl.</div>
49+
<div><span>Every <span>word <span>in <span>this <span>element <span>should <span>inherit <span>rtl</span></span></span></span></span></span></span></span>.</div>
50+
</div>
51+
<div dir="foopy">This element has an invalid dir attribute and
52+
should have default direction.</div>
53+
</body>
54+
</html>
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>dir() selector reference</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<style>
9+
div { text-align: left; }
10+
.blue { color: blue; direction: ltr; }
11+
.lime { color: lime; direction: rtl; }
12+
</style>
13+
</head>
14+
<body>
15+
<div class="lime">This element has default direction.</div>
16+
<div class="blue">This element is ltr.</div>
17+
<div class="lime">This element is rtl.</div>
18+
<div class="blue">
19+
<div>This element should inherit ltr.</div>
20+
<div class="blue">This element is ltr.</div>
21+
<div class="lime">This element is rtl.</div>
22+
</div>
23+
<div class="lime">
24+
<div>This element should inherit rtl.</div>
25+
<div class="blue">This element is ltr.</div>
26+
<div class="lime">This element is rtl.</div>
27+
</div>
28+
<div class="lime">This element has an invalid dir attribute and
29+
should have default direction.</div>
30+
</body>
31+
</html>
Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html dir="rtl">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS Test: :dir() selector</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
9+
<meta name="assert" content="Test checks :dir() basic functions when default document directionality is rtl.">
10+
<link rel="match" href="dir-style-02-ref.html">
11+
<style>
12+
div { text-align: left; }
13+
:dir(ltr) { color: blue }
14+
:dir(rtl) { color: lime }
15+
:dir(foopy) { color: red }
16+
</style>
17+
</head>
18+
<body>
19+
<div>This element has default direction.</div>
20+
<div dir="ltr">This element is ltr.</div>
21+
<div dir="rtl">This element is rtl.</div>
22+
<div dir="ltr">
23+
<div>This element should inherit ltr.</div>
24+
<div dir="ltr">This element is ltr.</div>
25+
<div dir="rtl">This element is rtl.</div>
26+
</div>
27+
<div dir="rtl">
28+
<div>This element should inherit rtl.</div>
29+
<div dir="ltr">This element is ltr.</div>
30+
<div dir="rtl">This element is rtl.</div>
31+
</div>
32+
<div dir="foopy">This element has an invalid dir attribute and
33+
should have default direction.</div>
34+
</body>
35+
</html>
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS Test: :dir() selector</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
9+
<meta name="assert" content="Test checks :dir() basic functions when document directionality is dynamically changed from ltr to rtl.">
10+
<link rel="match" href="dir-style-02-ref.html">
11+
<style>
12+
div { text-align: left; }
13+
:dir(ltr) { color: blue }
14+
:dir(rtl) { color: lime }
15+
:dir(foopy) { color: red }
16+
</style>
17+
<script>
18+
function switchDir()
19+
{
20+
// ensure it's a dynamic change
21+
document.documentElement.getBoundingClientRect();
22+
23+
document.dir = "rtl";
24+
25+
document.documentElement.removeAttribute("class");
26+
}
27+
</script>
28+
</head>
29+
<body onload="switchDir()">
30+
<div>This element has default direction.</div>
31+
<div dir="ltr">This element is ltr.</div>
32+
<div dir="rtl">This element is rtl.</div>
33+
<div dir="ltr">
34+
<div>This element should inherit ltr.</div>
35+
<div dir="ltr">This element is ltr.</div>
36+
<div dir="rtl">This element is rtl.</div>
37+
</div>
38+
<div dir="rtl">
39+
<div>This element should inherit rtl.</div>
40+
<div dir="ltr">This element is ltr.</div>
41+
<div dir="rtl">This element is rtl.</div>
42+
</div>
43+
<div dir="foopy">This element has an invalid dir attribute and
44+
should have default direction.</div>
45+
</body>
46+
</html>
Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>dir() selector reference</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<style>
9+
div { text-align: left; }
10+
.ltr { color: blue; direction: ltr }
11+
.rtl { color: lime; direction: rtl }
12+
</style>
13+
</head>
14+
<body>
15+
<div class="rtl">This element is rtl.</div>
16+
<div class="ltr">This element has default direction.</div>
17+
</body>
18+
</html>
Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS Test: :dir() selector</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
9+
<meta name="assert" content="Test checks if :dir() can work with other selectors correctly.">
10+
<link rel="match" href="dir-style-03-ref.html">
11+
<style>
12+
div { color: lime; text-align: left; }
13+
:not(:dir(ltr)) + div { color: blue; }
14+
</style>
15+
</head>
16+
<body>
17+
<div dir="rtl">This element is rtl.</div>
18+
<div>This element has default direction.</div>
19+
</body>
20+
</html>
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>CSS Test: :dir() selector</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<link rel="help" href="https://drafts.csswg.org/selectors-4/#the-dir-pseudo">
9+
<meta name="assert" content="Test checks if :dir() can work with other selectors correctly after a dynamic directionality change on specified divs.">
10+
<link rel="match" href="dir-style-03-ref.html">
11+
<style>
12+
div { color: lime; text-align: left; }
13+
:not(:dir(ltr)) + div { color: blue }
14+
</style>
15+
<script>
16+
function switchDir()
17+
{
18+
theDiv = document.getElementById("div");
19+
theDiv.offsetWidth; // ensure it's a dynamic change
20+
if (theDiv.dir == "ltr") {
21+
theDiv.dir = "rtl";
22+
} else if (theDiv.dir == "rtl") {
23+
theDiv.dir = "ltr";
24+
}
25+
26+
document.documentElement.removeAttribute("class");
27+
}
28+
</script>
29+
</head>
30+
<body onload="switchDir()">
31+
<div id="div" dir="ltr">This element is rtl.</div>
32+
<div>This element has default direction.</div>
33+
</body>
34+
</html>
Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>dir() selector reference</title>
6+
<link rel="author" title="Astley Chen" href="aschen@mozilla.com">
7+
<link rel="author" title="Mozilla" href="https://www.mozilla.org">
8+
<style>
9+
div { text-align: left; }
10+
.ltr { direction: ltr; color: blue; }
11+
.rtl { direction: rtl; color: lime; }
12+
</style>
13+
</head>
14+
<body>
15+
<div class="ltr">This element is ltr. <span>This span should
16+
inherit dir from the parent. <span>This span should inherit dir
17+
from the grandparent.</span></span>
18+
</div>
19+
<div class="rtl">This element is rtl. <span>This span should
20+
inherit dir from the parent. <span>This span should inherit dir
21+
from the grandparent.</span></span>
22+
</div>
23+
</body>
24+
</html>

0 commit comments

Comments
 (0)