font-face-multiple-ranges-for-unicode-range.html

<!doctype html>
<html>
<head>
<title>Test for Bug 41509 - Ranges for @font-face unicode-range must be separated by commas</title>
<style>
.test {
    border: solid 1px;
}

/* Test 0: Comma-separated list, which is valid. */
@font-face {
    font-family:myfont_0;
    src: local('Times New Roman'), local('Times'), local(Tinos Regular);
}
@font-face {
    font-family:myfont_0;
    src: local('Courier New'), local('Courier'), local(Cousine Regular);
    unicode-range: u+69, u+6a; /* 'i' and 'j' */
}

/* Test 1: Comma-separated list with three elements, which is valid. */
@font-face {
    font-family:myfont_1;
    src: local('Times New Roman'), local('Times'), local(Tinos Regular);
}
@font-face {
    font-family:myfont_1;
    src: local('Courier New'), local('Courier'), local(Cousine Regular);
    unicode-range: u+69 , u+6a ,u+6c; /* 'i', 'j', and 'l' */
}

/* Test 2: Comma-separated list with two consecutive commas, which is invalid. */
@font-face {
    font-family:myfont_2;
    src: local('Times New Roman'), local('Times'), local(Tinos Regular);
}
@font-face {
    font-family:myfont_2;
    src: local('Courier New'), local('Courier'), local(Cousine Regular);
    unicode-range: u+69, , u+6a; /* 'i' and 'j' */
}

/* Test 3: Comma-separated list with a trailing comma, which is invalid. */
@font-face {
    font-family:myfont_3;
    src: local('Times New Roman'), local('Times'), local(Tinos Regular);
}
@font-face {
    font-family:myfont_3;
    src: local('Courier New'), local('Courier'), local(Cousine Regular);
    unicode-range: u+69, u+6a,; /* 'i' and 'j' */
}

/* Test 4: Comma-separated list with a leading comma, which is invalid. */
@font-face {
    font-family:myfont_4;
    src: local('Times New Roman'), local('Times'), local(Tinos Regular);
}
@font-face {
    font-family:myfont_4;
    src: local('Courier New'), local('Courier'), local(Cousine Regular);
    unicode-range: , u+69, u+6a; /* 'i' and 'j' */
}

/* Test 5: Space-separated list, which is invalid. */
@font-face {
    font-family:myfont_5;
    src: local('Times New Roman'), local('Times'), local(Tinos Regular);
}
@font-face {
    font-family:myfont_5;
    src: local('Courier New'), local('Courier'), local(Cousine Regular);
    unicode-range: u+69 u+6a ; /* 'i' and 'j' */
}

/* Test 6: Slash-separated list, which is invalid. */
@font-face {
    font-family:myfont_6;
    src: local('Times New Roman'), local('Times'), local(Tinos Regular);
}
@font-face {
    font-family:myfont_6;
    src: local('Courier New'), local('Courier'), local(Cousine Regular);
    unicode-range: u+69/u+6a; /* 'i' and 'j' */
}

</style>
<script src="../../resources/js-test.js"></script>
</head>
<body>
<div id="description"></div>
<div id="tests"></div>

<div id="console"></div>
<script>
description("unicode-range can have comma-separated multiple ranges. For each of the following pairs, the upper and the lower lines should have the same length on screen.");

var testsElement = document.getElementById("tests");
var testStrings = [
    "iiiiiiiiii",
    "jjjjjjjjjj",
    "kkkkkkkkkk",
    "llllllllll"
];
var expectedResults = [
    // Effective font family for "i", "j", "k", and "l"
    ["Courier", "Courier", "Times", "Times"],
    ["Courier", "Courier", "Times", "Courier"],
    ["Courier", "Courier", "Courier", "Courier"],
    ["Courier", "Courier", "Courier", "Courier"],
    ["Courier", "Courier", "Courier", "Courier"],
    ["Courier", "Courier", "Courier", "Courier"],
    ["Courier", "Courier", "Courier", "Courier"]
];

function createAndAppendSpan(id, subId, fontFamily)
{
    var span = document.createElement("span");
    span.id = id;
    span.className = "test";
    span.style.fontFamily = fontFamily;
    span.innerHTML = testStrings[subId];
    testsElement.appendChild(span);
    testsElement.appendChild(document.createTextNode(" " + id));
    testsElement.appendChild(document.createElement("br"));
}

var test_pairs = [];
for (var mainTestId = 0; mainTestId < expectedResults.length; mainTestId++) {
    for (var subTestId = 0; subTestId < testStrings.length; subTestId++) {
        var testId = "test_" + mainTestId + "_" + subTestId;
        var testFontFamily = "myfont_" + mainTestId;
        createAndAppendSpan(testId, subTestId, testFontFamily);

        var refId = "ref_" + mainTestId + "_" + subTestId;
        var refFontFamily = expectedResults[mainTestId][subTestId];
        createAndAppendSpan(refId, subTestId, refFontFamily);

        test_pairs.push([testId, refId]);

    }
    testsElement.appendChild(document.createElement("br"));
}

function validate() {
  for (pair of test_pairs) {
    var testId = pair[0];
    var refId = pair[1];
    shouldBe("document.getElementById('" + testId + "').offsetWidth", "document.getElementById('" + refId + "').offsetWidth");
  }
  finishJSTest();
}

window.jsTestIsAsync = true;
document.fonts.ready.then(validate);
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/css/font-face-multiple-ranges-for-unicode-range.html
