Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-11-26 14:22:01 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Tests for dir(ltr/rtl) CSS selector. bug 562169, r=bz

Browse Source
This commit is contained in:
Simon Montagu 2012-04-17 07:01:29 +03:00
parent 2dcdd775ec
commit 4c11a01f44
15 changed files with 388 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
content/base/test/Makefile.in
View File

@ -381,6 +381,8 @@ MOCHITEST_FILES_B = \
test_bug562652.html \
test_bug562137.html \
file_bug562137.txt \
test_bug562169-1.html \
test_bug562169-2.html \
test_bug548193.html \
file_bug548193.sjs \
test_html_colors_quirks.html \

44
content/base/test/test_bug562169-1.html Normal file
View File

@ -0,0 +1,44 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=562169
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 562169</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=562169">Mozilla Bug 562169</a>
<p id="display"></p>
<div id="content" style="display: none">
<div dir="rtl" id="z"></div>
</div>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 562169 **/
/** Test that adding an child to an element with dir="rtl" makes the
child have rtl directionality, and removing the child makes it
go back to ltr directionality **/
function checkSelector(element, expectedDir, expectedChild)
{
ok(element.querySelector(":dir("+expectedDir+")") == expectedChild,
"direction should be " + expectedDir);
}
var x = document.createElement("div");
var y = document.createElement("div");
x.appendChild(y);
checkSelector(x, "ltr", y);
$(z).appendChild(x);
checkSelector(x, "rtl", y);
$(z).removeChild(x);
checkSelector(x, "ltr", y);
</script>
</pre>
</body>
</html>

29
content/base/test/test_bug562169-2.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=562169
-->
<head>
<meta charset="utf-8">
<title>Test for Bug 562169</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=562169">Mozilla Bug 562169</a>
<p id="display"></p>
<div id="content" style="display: none">
</div>
<pre id="test">
<script type="application/javascript">
/** Test for Bug 562169 **/
/** Test that a newly created element has ltr directionality **/
ok(document.createElement("div").mozMatchesSelector(":dir(ltr)"),
"Element should be ltr on creation");
</script>
</pre>
</body>
</html>

31
layout/reftests/bidi/562169-1-ref.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
.blue { color: blue; direction: ltr; }
.lime { color: lime; direction: rtl; }
div { text-align: left; }
</style>
</head>
<body>
<div class="blue">This element has default direction.</div>
<div class="blue">This element is ltr.</div>
<div class="lime">This element is rtl.</div>
<div class="blue">
<div>This element should inherit ltr.</div>
<div class="blue">This element is ltr.</div>
<div class="lime">This element is rtl.</div>
<div class="blue">Every word in this element should inherit ltr.</div>
</div>
<div class="lime">
<div>This element should inherit rtl.</div>
<div class="blue">This element is ltr.</div>
<div class="lime">This element is rtl.</div>
<div class="lime">Every word in this element should inherit rtl.</div>
</div>
<div class="blue">This element has an invalid dir attribute and
should have default direction.</div>
</body>
</html>

32
layout/reftests/bidi/562169-1.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
:dir(ltr) { color: blue }
:dir(rtl) { color: lime }
:dir(foopy) { color: red }
div { text-align: left; }
</style>
</head>
<body>
<div>This element has default direction.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
<div dir="ltr">
<div>This element should inherit ltr.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
<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>
</div>
<div dir="rtl">
<div>This element should inherit rtl.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
<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>
</div>
<div dir="foopy">This element has an invalid dir attribute and
should have default direction.</div>
</body>
</html>

46
layout/reftests/bidi/562169-1a.html Normal file
View File

@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
:dir(ltr) { color: blue }
:dir(rtl) { color: lime }
:dir(foopy) { color: red }
div { text-align: left; }
</style>
<script type="text/javascript">
function switchDir()
{
divs = document.getElementsByTagName("div");
for (var i = 0; i < divs.length; ++i) {
theDiv = divs[i];
if (theDiv.dir == "ltr") {
theDiv.dir = "rtl";
} else if (theDiv.dir == "rtl") {
theDiv.dir = "ltr";
}
}
}
</script>
</head>
<body onload="switchDir()">
<div>This element has default direction.</div>
<div dir="rtl">This element is ltr.</div>
<div dir="ltr">This element is rtl.</div>
<div dir="rtl">
<div>This element should inherit ltr.</div>
<div dir="rtl">This element is ltr.</div>
<div dir="ltr">This element is rtl.</div>
<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>
</div>
<div dir="ltr">
<div>This element should inherit rtl.</div>
<div dir="rtl">This element is ltr.</div>
<div dir="ltr">This element is rtl.</div>
<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>
</div>
<div dir="foopy">This element has an invalid dir attribute and
should have default direction.</div>
</body>
</html>

29
layout/reftests/bidi/562169-2-ref.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
.blue { color: blue; direction: ltr; }
.lime { color: lime; direction: rtl; }
div { text-align: left; }
</style>
</head>
<body>
<div class="lime">This element has default direction.</div>
<div class="blue">This element is ltr.</div>
<div class="lime">This element is rtl.</div>
<div class="blue">
<div>This element should inherit ltr.</div>
<div class="blue">This element is ltr.</div>
<div class="lime">This element is rtl.</div>
</div>
<div class="lime">
<div>This element should inherit rtl.</div>
<div class="blue">This element is ltr.</div>
<div class="lime">This element is rtl.</div>
</div>
<div class="lime">This element has an invalid dir attribute and
should have default direction.</div>
</body>
</html>

30
layout/reftests/bidi/562169-2.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<html dir="rtl">
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
:dir(ltr) { color: blue }
:dir(rtl) { color: lime }
:dir(foopy) { color: red }
div { text-align: left; }
</style>
</head>
<body>
<div>This element has default direction.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
<div dir="ltr">
<div>This element should inherit ltr.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
</div>
<div dir="rtl">
<div>This element should inherit rtl.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
</div>
<div dir="foopy">This element has an invalid dir attribute and
should have default direction.</div>
</body>
</html>

36
layout/reftests/bidi/562169-2a.html Normal file
View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
:dir(ltr) { color: blue }
:dir(rtl) { color: lime }
:dir(foopy) { color: red }
div { text-align: left; }
</style>
<script type="text/javascript">
function switchDir()
{
document.dir = "rtl";
}
</script>
</head>
<body onload="switchDir()">
<div>This element has default direction.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
<div dir="ltr">
<div>This element should inherit ltr.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
</div>
<div dir="rtl">
<div>This element should inherit rtl.</div>
<div dir="ltr">This element is ltr.</div>
<div dir="rtl">This element is rtl.</div>
</div>
<div dir="foopy">This element has an invalid dir attribute and
should have default direction.</div>
</body>
</html>

16
layout/reftests/bidi/562169-3-ref.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
.ltr { direction: ltr }
.rtl { direction: rtl }
div { color: lime; text-align: left; }
</style>
</head>
<body>
<div class="rtl">This element is rtl.</div>
<div>This element has default direction.</div>
</body>
</html>

15
layout/reftests/bidi/562169-3.html Normal file
View File

@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
:not(:dir(rtl)) + div { color: blue }
div { color: lime; text-align: left; }
</style>
</head>
<body>
<div dir="rtl">This element is rtl.</div>
<div>This element has default direction.</div>
</body>
</html>

26
layout/reftests/bidi/562169-3a.html Normal file
View File

@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
:not(:dir(rtl)) + div { color: blue }
div { color: lime; text-align: left; }
</style>
<script type="text/javascript">
function switchDir()
{
theDiv = document.getElementById("d");
if (theDiv.dir == "ltr") {
theDiv.dir = "rtl";
} else if (theDiv.dir == "rtl") {
theDiv.dir = "ltr";
}
}
</script>
</head>
<body onload="switchDir()">
<div id="d" dir="ltr">This element is rtl.</div>
<div>This element has default direction.</div>
</body>
</html>

16
layout/reftests/bidi/562169-4-ref.html Normal file
View File

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
.lime { direction: rtl; color: lime }
div { text-align: left; }
</style>
</head>
<body>
<div class="lime">This element is rtl. <span>This span should
inherit rtl from the parent. <span>This span should inherit rtl
from the grandparent.</span></span></div>
</body>
</html>

29
layout/reftests/bidi/562169-4.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dir() selector</title>
<style>
:dir(ltr) { color: blue }
:dir(rtl) { color: lime }
div { text-align: left; }
</style>
<script type="text/javascript">
function AppendElementWithChild() {
var x = document.createElement("span");
x.innerHTML = "This span should inherit rtl from the parent. ";
var y = document.createElement("span");
y.innerHTML = "This span should inherit rtl from the grandparent.";
var z = document.getElementById("z");
x.appendChild(y);
z.appendChild(x);
}
</script>
</head>
<body onload="AppendElementWithChild()">
<div id="z" dir="rtl">This element is rtl. </div>
</body>
</html>

7
layout/reftests/bidi/reftest.list
View File

@ -86,6 +86,13 @@ random-if(winWidget) == 305643-1.html 305643-1-ref.html # depends on windows ver
== 503957-1.html 503957-1-ref.html
== 525740-1.html 525740-1-ref.html
== 536963-1.html 536963-1-ref.html
== 562169-1.html 562169-1-ref.html
== 562169-1a.html 562169-1-ref.html
== 562169-2.html 562169-2-ref.html
== 562169-2a.html 562169-2-ref.html
== 562169-3.html 562169-3-ref.html
== 562169-3a.html 562169-3-ref.html
== 562169-4.html 562169-4-ref.html
== 588739-1.html 588739-ref.html
== 588739-2.html 588739-ref.html
== 588739-3.html 588739-ref.html