<!doctype html>
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
<style id="style-container">
</style>
</head>
<body>
<div id="target"></div>
<div id="target1"></div>
<div id="target2"></div>
<div id="target3"></div>
<div id="target4"></div>
</body>
<script>
description('Verify selector specifying extended filtering of :lang() pseudo class');

function testValidLanguageSelectorOnSingleElement(language, length) {
    var range = language;
    var rangeSubtags = language.split('-');
    var target = document.querySelector('#target').setAttribute('lang', language);
    var currentRange = rangeSubtags[0];
    var suffixRange = '';

    length = length || 1;
    debug('- ' + language);

    for (var i = 0; i < rangeSubtags.length; i++){
        shouldBeTrue("document.querySelectorAll(':lang(" + currentRange + ")').length == 1");
        currentRange += '-' + rangeSubtags[i + 1];

        var asteriskRange = rangeSubtags[0];
        for (var j = 1; j < rangeSubtags.length; j++) {
            if (i == j || i == 0) {
                asteriskRange += '-\\\\*';
            } else {
                asteriskRange += '-' + rangeSubtags[j];  
            }
        }
        shouldBeTrue("document.querySelectorAll(':lang(" + asteriskRange + ")').length == 1");
        if (i > 0)
            suffixRange += '-' + rangeSubtags[i];  
    }
    shouldBeTrue("document.querySelectorAll(':lang(\"*" + suffixRange + "\")').length == " + length);
    document.querySelector('#target').removeAttribute('lang');

    debug('');
}

function testValidLanguageSelectorOnMultipleElementsWithFirstAsterisk(languages) {
    for (var i = 0; i < languages.length; i++) {
        var language = languages[i];
        testValidLanguageSelectorOnSingleElement(language, i + 1);
        document.querySelector('#target' + (i + 1)).setAttribute('lang', language);
    }

    debug('- ' + languages);
    for (var i = 0; i < languages.length; i++) {
        var language = languages[i];
        var ranges = language.split('-');
        var range = '"*';
        for (var j = 1; j < ranges.length; j++) {
            range += '-' + ranges[j];
        }
        range += '"';
    }
    shouldBeTrue("document.querySelectorAll(':lang(" + range + ")').length == " + languages.length);
    debug('');
}

var validLanguagesOnSingleElement = [
    "af-ZA",
    "ar-AE",
    "ar-BH",
    "ar-YE",
    "art-lojban",
    "az-Arab-IR",
    "be-BY",
    "bg-BG",
    "ca-ES",
    "cs-CZ",
    "cy-GB",
    "de-AT",
    "de-CH",
    "de-CH-1996",
    "de-CH-1997",
    "de-DE",
    "de-DE-1996",
    "de-Latn-DE",
    "de-Latf-DE",
    "de-Latn-DE-1996",
    "en-US",
    "en-GB",
    "en-Latn-Brai",
    "es-ES",
    "es-ES-valencia",
    "es-AR",
    "fr-BE",
    "fr-CA",
    "fr-CH",
    "fr-FR",
    "fr-LU",
    "fr-MC",
    "gl-ES",
    "gu-IN",
    "hr-BA",
    "id-ID",
    "i-klingon",
    "ja-JP",
    "ko-KR",
    "lt-LT",
    "mi-NZ",
    "mn-MN",
    "nl-BE",
    "nl-NL",
    "pl-PL",
    "qu-BO",
    "se-FI",
    "se-NO",
    "sgn-BE-FR",
    "sgn-BE-NL",
    "sgn-CH-DE",
    "sr-Latn-RS",
    "sv-SE",
    "syr-SY",
    "tt-RU",
    "uz-UZ",
    "vi-VN",
    "xh-ZA",
    "yue-Hant-HK",
    "zh-yue-Hant-HK",
    "zh-CN",
    "zh-Hant-CN",
    "zh-Hans-CN",
    "zh-Hant"
];

var validLanguagesOnMultipleElements = [
    ["de-CH", "it-CH", "fr-CH", "rm-CH"],
    ["hi-IN", "gu-IN", "kok-IN"],
    ["xa-ZA", "zu-ZA"],
    ["se-FI", "sv-FI"],
    ["ur-PK"],
];

for (var i = 0; i < validLanguagesOnSingleElement.length; ++i) {
    var lang = validLanguagesOnSingleElement[i];
    testValidLanguageSelectorOnSingleElement(lang);
}

for (var i = 0; i < validLanguagesOnMultipleElements.length; ++i) {
    var lang = validLanguagesOnMultipleElements[i];
    testValidLanguageSelectorOnMultipleElementsWithFirstAsterisk(lang);
}
</script>
<script src="../../resources/js-test-post.js"></script>
</html>