<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>