135 lines
4.2 KiB
HTML
135 lines
4.2 KiB
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<script src="../../resources/js-test-pre.js"></script>
|
|
<style>
|
|
[style="display:none"] * {
|
|
color: rgb(0, 0, 0);
|
|
background-color: rgb(0, 0, 0);
|
|
}
|
|
:lang(fr):lang(fr-be):lang(fr) #target1 {
|
|
color: rgb(1, 2, 3);
|
|
}
|
|
:lang(fr):lang(fr-ca) #target2 {
|
|
color: rgb(4, 5, 6);
|
|
}
|
|
:lang(fr-ch):lang(fr) #target3 {
|
|
color: rgb(7, 8, 9);
|
|
}
|
|
|
|
:lang(es):lang(es-ar):lang(es) #target4 {
|
|
color: rgb(10, 11, 12);
|
|
}
|
|
:lang(es):lang(es-co) #target5 {
|
|
color: rgb(13, 14, 15);
|
|
}
|
|
:lang(es-mx):lang(es) #target6 {
|
|
color: rgb(16, 17, 18);
|
|
}
|
|
|
|
:lang(xml):lang(xml-lang1):lang(xml) #target7 {
|
|
color: rgb(19, 20, 21);
|
|
}
|
|
:lang(xml):lang(xml-lang2) #target8 {
|
|
color: rgb(22, 23, 24);
|
|
}
|
|
:lang(xml-lang3):lang(xml) #target9 {
|
|
color: rgb(25, 26, 27);
|
|
}
|
|
|
|
/* None of those should match. */
|
|
:lang(html):lang(html-lang):lang(html) * {
|
|
background-color: rgb(1, 1, 1);
|
|
}
|
|
:lang(html):lang(html-lang) * {
|
|
background-color: rgb(1, 1, 1);
|
|
}
|
|
:lang(html-lang):lang(html) * {
|
|
background-color: rgb(1, 1, 1);
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div style="display:none">
|
|
<!-- HTML lang cases. -->
|
|
<a lang="FR-BE">
|
|
<b>
|
|
<c id="target1"></c>
|
|
</b>
|
|
</a>
|
|
<a lang="FR-CA">
|
|
<b>
|
|
<c id="target2"></c>
|
|
</b>
|
|
</a>
|
|
<a lang="FR-CH">
|
|
<b>
|
|
<c id="target3"></c>
|
|
</b>
|
|
</a>
|
|
|
|
<!-- XML lang cases. -->
|
|
<a xml:lang="es-ar">
|
|
<b>
|
|
<c id="target4"></c>
|
|
</b>
|
|
</a>
|
|
<a xml:lang="es-co">
|
|
<b>
|
|
<c id="target5"></c>
|
|
</b>
|
|
</a>
|
|
<a xml:lang="es-mx">
|
|
<b>
|
|
<c id="target6"></c>
|
|
</b>
|
|
</a>
|
|
|
|
<!-- XML + HTML lang cases. -->
|
|
<a xml:lang="xml-lang1" lang="html-lang">
|
|
<b>
|
|
<c id="target7"></c>
|
|
</b>
|
|
</a>
|
|
<a xml:lang="xml-lang2" lang="html-lang">
|
|
<b>
|
|
<c id="target8"></c>
|
|
</b>
|
|
</a>
|
|
<a xml:lang="xml-lang3" lang="html-lang">
|
|
<b>
|
|
<c id="target9"></c>
|
|
</b>
|
|
</a>
|
|
</div>
|
|
</body>
|
|
<script>
|
|
description('Verify selector specifying multiple :lang() pseudo class.');
|
|
|
|
debug("HTML lang only")
|
|
shouldBe('document.querySelectorAll(":lang(fr):lang(fr-be):lang(fr) #target1").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target1")).color', 'rgb(1, 2, 3)');
|
|
shouldBe('document.querySelectorAll(":lang(fr):lang(fr-ca) #target2").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target2")).color', 'rgb(4, 5, 6)');
|
|
shouldBe('document.querySelectorAll(":lang(fr):lang(fr-ch) #target3").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target3")).color', 'rgb(7, 8, 9)');
|
|
|
|
debug("XML lang only")
|
|
shouldBe('document.querySelectorAll(":lang(es):lang(es-ar):lang(es) #target4").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target4")).color', 'rgb(10, 11, 12)');
|
|
shouldBe('document.querySelectorAll(":lang(es):lang(es-co) #target5").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target5")).color', 'rgb(13, 14, 15)');
|
|
shouldBe('document.querySelectorAll(":lang(es):lang(es-mx) #target6").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target6")).color', 'rgb(16, 17, 18)');
|
|
|
|
debug("XML and HTML lang")
|
|
shouldBe('document.querySelectorAll(":lang(xml):lang(xml-lang1):lang(xml) #target7").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target7")).color', 'rgb(19, 20, 21)');
|
|
shouldBe('document.querySelectorAll(":lang(xml):lang(xml-lang2) #target8").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target8")).color', 'rgb(22, 23, 24)');
|
|
shouldBe('document.querySelectorAll(":lang(xml):lang(xml-lang3) #target9").length', '1');
|
|
shouldBeEqualToString('getComputedStyle(document.getElementById("target9")).color', 'rgb(25, 26, 27)');
|
|
|
|
</script>
|
|
<script src="../../resources/js-test-post.js"></script>
|
|
</html>
|