font-variant-width.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Font Width Variant Text Combine</title>
<style>
@font-face {
    font-family: LiberationSansWidthVariants;
    src: url(../../third_party/LiberationSansWidthVariants/liberation_sans_width_variants.ttf) format("truetype");
}

#test {
    font-family: "LiberationSansWidthVariants";
    font-size: 24px;
    text-rendering: geometricPrecision;
    line-height: 100%;
    margin: 0;
    padding: 0px;
}

.hwid {
    -webkit-font-feature-settings: 'hwid';
}
.twid {
    -webkit-font-feature-settings: 'twid';
}
.qwid {
    -webkit-font-feature-settings: 'qwid';
}

</style>
    <script src="../../resources/testharness.js"></script>
    <script src="../../resources/testharnessreport.js"></script>
    <script>
    setup({ explicit_done: true });
    function testWidthVariant() {
        var elements = document.querySelectorAll("#test > div");
        for (var i = 0; i < elements.length; ++i) {
            var div = elements[i];
            var normal = div.firstChild;
            var text = normal.innerText;
            test(function () {
                var hwid = addVariant(normal, "hwid");
                var twid = addVariant(normal, "twid");
                var qwid = addVariant(normal, "qwid");
                var width = normal.getBoundingClientRect().width;
                var widthHwid = hwid.getBoundingClientRect().width;
                var widthTwid = twid.getBoundingClientRect().width;
                var widthQwid = qwid.getBoundingClientRect().width;
                assert_less_than(widthHwid, width, "hwid");
                assert_less_than(widthTwid, widthHwid, "twid");
                assert_less_than(widthQwid, widthTwid, "qwid");
            }, text);
        }
        done();
    }
    function addVariant(base, variantClassName) {
        var variant = base.cloneNode(true);
        variant.className = variantClassName;
        base.parentElement.appendChild(document.createTextNode(" "));
        base.parentElement.appendChild(variant);
        return variant;
    }
    </script>
</head>

<body onload="testWidthVariant();">
    <div id="test">
        <div><span>1</span></div>
        <div><span>9</span></div>
        <div><span>22</span></div>
        <div><span>99</span></div>
        <div><span>123456</span></div>
        <div><span>222222</span></div>
        <div><span>999999</span></div>
    </div>
    <div id="log"></div>
</body>
</html>
chromium/third_party/blink/web_tests/virtual/text-antialias/font-variant-width.html
