at-font-face-font-matching.html

<!DOCTYPE html>

<html>

<head>

    <title>Testing @font-face font matching logic introduced in CSS Fonts level 4</title>

    <link rel="help" href="https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm" />

    <meta name="timeout" content="long">

    <script src="/resources/testharness.js"></script>

    <script src="/resources/testharnessreport.js"></script>

    <style>

        .test

            float:left;

            border:1px solid red;

            font-size:24pt;

            white-space: nowrap;

            clear:both;

        @font-face { font-family: W100; src: url('./resources/csstest-weights-100-kerned.ttf'); }

        @font-face { font-family: W200; src: url('./resources/csstest-weights-200-kerned.ttf'); }

        @font-face { font-family: W300; src: url('./resources/csstest-weights-300-kerned.ttf'); }

        @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-100-kerned.ttf'); font-stretch : 125%; }

        @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-200-kerned.ttf'); font-style: italic; }

        @font-face { font-family: descriptorPriorityTest; src: url('./resources/csstest-weights-300-kerned.ttf'); font-weight: 350; }

    </style>

    <style id="dynamicStyles">

    </style>

</head>

<body>

    <span style="position: absolute; top: -100vh;">

        <span style="font-family: 'W100';">A</span>

        <span style="font-family: 'W200';">A</span>

        <span style="font-family: 'W300';">A</span>

        <span style="font-family: 'descriptorPriorityTest'; font-stretch: 125%;">A</span>

        <span style="font-family: 'descriptorPriorityTest'; font-style: italic;">A</span>

        <span style="font-family: 'descriptorPriorityTest'; font-weight: 350;">A</span>

    </span>

    <div id="master" class="test">A1 A2 A2 A3 A3 A3</div>

    <div id="test" class="test">A1 A2 A2 A3 A3 A3</div>

    <div style="clear:both"></div>

    <script>

        // wait for the fonts to load

        // -- this should not be necessary if the fonts are installed as required

        // -- but if they are not, the test is otherwise unstable

        var once_fonts_are_ready = (document.fonts ? document.fonts.ready : new Promise(function(ready) { window.onload = time => [...document.querySelectorAll('body > span:nth-child(1) > span')].every(e => e.offsetWidth > 20) ? ready() : requestAnimationFrame(window.onload) }));

        var masterElement = document.getElementById("master");

        var testElement = document.getElementById("test");

        var dynamicStyles = document.getElementById("dynamicStyles");

        function verifyFont(testFamily, testWeight, testStyle, testStretch, expectedFamily) {

            testElement.style.fontWeight  = "normal";

            testElement.style.fontStyle   = "normal";

            testElement.style.fontStretch = "normal";

            masterElement.style.fontFamily = expectedFamily;

            let masterWidth = masterElement.offsetWidth;

            testElement.style.fontFamily = expectedFamily;

            assert_equals(masterWidth, testElement.offsetWidth, "Sanity test: same family name gets same width" + dynamicStyles.innerHTML);

            testElement.style.fontFamily = "serif";

            assert_not_equals(masterWidth, testElement.offsetWidth, "Sanity test: different family get different width");

            testElement.style.fontWeight = testWeight;

            testElement.style.fontStyle  = testStyle;

            testElement.style.fontStretch = testStretch;

            testElement.style.fontFamily = testFamily;

            assert_equals(masterWidth, testElement.offsetWidth, "Unexpected font on test element");

        var descriptorPriorityCases = [

            { weight: "normal", style: "oblique -5deg", stretch: "125%",   expectedFamily: "'W100'", description: "Stretch has higher priority than style"},

            { weight: "350",    style: "normal",        stretch: "125%",   expectedFamily: "'W100'", description: "Stretch has higher priority than weight"},

            { weight: "350",    style: "oblique -5deg", stretch: "normal", expectedFamily: "'W200'", description: "Style has higher priority than weight"}

];

        descriptorPriorityCases.forEach(function (testCase) {

            promise_test(() => {

                return once_fonts_are_ready

                    .then(() => verifyFont("descriptorPriorityTest", testCase.weight, testCase.style, testCase.stretch, testCase.expectedFamily));

},

                "Descriptor matching priority: " + testCase.description

);

});

        function load(family, name, value) {

            const el1 = document.createElement("span");

            const el2 = document.createElement("span");

            el1.innerText = "A";

            el2.innerText = "A";

            let value1, value2;

            if (value.indexOf("deg") > 0) {

                value1 = "oblique " + value.split(" ")[1];

                value2 = "oblique " + (value.split(" ")[2] || value.split(" ")[1]);

            } else {

                value1 = value.split(" ")[0];

                value2 = value.split(" ")[1] || value1;

            el1.style[name] = value1;

            el2.style[name] = value2;

            document.body.appendChild(el1);

            document.body.appendChild(el2);

            const initialWidth1 = el1.offsetWidth;

            const initialWidth2 = el2.offsetWidth;

            return new Promise((resolve) => {

                el1.style.fontFamily = family;

                el2.style.fontFamily = family;

                (function check() {

                    if (el1.offsetWidth !== initialWidth1 && el2.offsetWidth !== initialWidth2) {

                        el1.remove();

                        el2.remove();

                        resolve();

                    } else {

                        requestAnimationFrame(check);

                }());

});

        function createFontFaceRules(fontFaceFamily, descriptorName, expectedMatch, unexpectedMatch) {

            dynamicStyles.innerHTML =

                "@font-face { font-family: " + fontFaceFamily + "; src: url('./resources/csstest-weights-100-kerned.ttf'); "+ descriptorName + ": " + expectedMatch   + "; }" +

                "@font-face { font-family: " + fontFaceFamily + "; src: url('./resources/csstest-weights-200-kerned.ttf'); " + descriptorName + ": " + unexpectedMatch + "; }";

            return Promise.all([

                load(fontFaceFamily, descriptorName, expectedMatch),

                load(fontFaceFamily, descriptorName, unexpectedMatch)

]);

        let familyId = 0;

        function testDescriptor(descriptorName, testCases) {

            testCases.forEach(function (testCase) {

                    // Go though test cases, checking each descriptor has higher priority than next in the list

                    for(let i = 0; i < testCase.testDescriptors.length - 1; i++) {

                        let expectedMatch   = testCase.testDescriptors[i];

                        let unexpectedMatch = testCase.testDescriptors[i + 1];

                        familyId += 1;

                        const family = "MatchTestFamily" + familyId;

                        promise_test(

                            () => {

                                return createFontFaceRules(family, descriptorName, expectedMatch, unexpectedMatch)

                                    .then(() => {

                                        let testWeight  = (descriptorName == "font-weight")  ? testCase.value : "normal";

                                        let testStyle   = (descriptorName == "font-style")   ? testCase.value : "normal";

                                        let testStretch = (descriptorName == "font-stretch") ? testCase.value : "normal";

                                        verifyFont(family, testWeight, testStyle, testStretch, "'W100'");

});

},

                            "Matching " + descriptorName + ": '" + testCase.value + "' should prefer '" + expectedMatch + "' over '" + unexpectedMatch + "'");

});

        // Each case defines property value being tested and set of descriptor values in order of matching priority from highest to lowest

        testDescriptor("font-weight", [

            { value: "400", testDescriptors: ["400", "450 460", "500", "350 399", "351 398", "501 550", "502 560"] },

            { value: "430", testDescriptors: ["420 440", "450 460", "500", "400 425", "350 399", "340 398", "501 550", "502 560"] },

            { value: "500", testDescriptors: ["500", "450 460", "400", "350 399", "351 398", "501 550", "502 560"] },

            { value: "501", testDescriptors: ["501", "502 510", "503 520", "500", "450 460", "390 410", "300 350"] },

            { value: "399", testDescriptors: ["350 399", "340 360", "200 300", "400", "450 460", "500 501", "502 510"] }

]);

        testDescriptor("font-stretch", [

            { value: "100%", testDescriptors: ["100%", "110% 120%", "115% 116%"] },

            { value: "110%", testDescriptors: ["110% 120%", "115% 116%", "105%", "100%", "50% 80%", "60% 70%"] },

            { value: "90%",  testDescriptors: ["90% 100%", "50% 80%", "60% 70%", "110% 140%", "120% 130%"] },

]);

        testDescriptor("font-style", [

            { value: "normal",         testDescriptors: ["normal", "oblique 0deg", "oblique 10deg 40deg", "oblique 20deg 30deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },

            { value: "italic",         testDescriptors: ["italic", "oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 5deg 10deg", "oblique 5deg", "normal", "oblique 0deg", "oblique -60deg -30deg", "oblique -50deg -40deg" ] },

            { value: "oblique 20deg",  testDescriptors: ["oblique 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 10deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },

            { value: "oblique 21deg",  testDescriptors: ["oblique 21deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "oblique 20deg", "oblique 10deg", "italic", "oblique 0deg",  "oblique -50deg -20deg", "oblique -40deg -30deg" ] },

            { value: "oblique 10deg",  testDescriptors: ["oblique 10deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique 0deg", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },

            { value: "oblique 0deg",   testDescriptors: ["oblique 0deg", "oblique 5deg", "oblique 15deg 20deg", "oblique 30deg 60deg", "oblique 40deg 50deg", "italic", "oblique -50deg -20deg", "oblique -40deg -30deg" ] },

            { value: "oblique -10deg", testDescriptors: ["oblique -10deg", "oblique -5deg", "oblique -1deg 0deg", "oblique -20deg -15deg", "oblique -60deg -30deg", "oblique -50deg -40deg", "italic", "oblique 0deg 10deg", "oblique 40deg 50deg" ] },

            { value: "oblique -20deg", testDescriptors: ["oblique -20deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },

            { value: "oblique -21deg", testDescriptors: ["oblique -21deg", "oblique -60deg -40deg", "oblique -10deg", "italic", "oblique 0deg", "oblique 30deg 60deg", "oblique 40deg 50deg"] },

]);

    </script>

</body>

</html>

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: