font-variant-shorthand-serialization.html

<!doctype html>
<html>
<meta charset="utf-8">
<title>Serialization of font-variant shorthand</title>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://drafts.csswg.org/cssom-1/#serialize-a-css-declaration-block">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<div id="target"></div>
<script>
    const cssWideKeywords = ["initial", "inherit", "unset", "revert", "revert-layer"];
    function test_serialization_set(expected) {
        for (const [property, value] of Object.entries(expected)) {
            if (!CSS.supports(`${property}: initial`))
                continue;
            assert_equals(target.style[property], value, `${property} was set`);
        }
    }
    function setWithValue(value) {
        return {
            "font-variant-ligatures": value,
            "font-variant-caps": value,
            "font-variant-alternates": value,
            "font-variant-numeric": value,
            "font-variant-east-asian": value,
            "font-variant-position": value,
            "font-variant-emoji": value,
            "font-variant": value
        };
    }
    const emptySet = setWithValue("");
    const normalSet = setWithValue("normal");
    const nonDefaultValues = {
        "font-variant-ligatures": "common-ligatures discretionary-ligatures",
        "font-variant-caps": "small-caps",
        "font-variant-alternates": "historical-forms",
        "font-variant-numeric": "oldstyle-nums stacked-fractions",
        "font-variant-east-asian": "ruby",
        "font-variant-position": "sub",
        "font-variant-emoji": "emoji",
    };
    test(function(t) {
        target.style.fontVariant = "normal";
        t.add_cleanup(() => target.removeAttribute("style"));

        test_serialization_set(normalSet);
    }, "font-variant: normal serialization");

    test(function(t) {
        target.style.fontVariant = "normal";
        target.style.fontVariantLigatures = "none";
        t.add_cleanup(() => target.removeAttribute("style"));

        const expected = Object.assign({}, normalSet);
        expected["font-variant-ligatures"] = "none";
        expected["font-variant"] = "none";

        test_serialization_set(expected);
    }, "font-variant: none serialization");

    test(function(t) {
        t.add_cleanup(() => target.removeAttribute("style"));
        for (const [property, value] of Object.entries(nonDefaultValues)) {
            if (property == "font-variant-ligatures" || !CSS.supports(`${property}: initial`))
                continue;
            target.style.fontVariant = "normal";
            target.style.fontVariantLigatures = "none";
            target.style[property] = value;

            const expected = Object.assign({}, normalSet);
            expected["font-variant-ligatures"] = "none";
            expected["font-variant"] = "";
            expected[property] = value;

            test_serialization_set(expected);
            target.removeAttribute("style");
        }
    }, "font-variant-ligatures: none serialization with non-default value for another longhand");

    test(function(t) {
        t.add_cleanup(() => target.removeAttribute("style"));

        for (const [property, value] of Object.entries(nonDefaultValues)) {
            if (!CSS.supports(`${property}: initial`))
                continue;
            target.style.fontVariant = "normal";
            target.style[property] = value;

            const expected = Object.assign({}, normalSet);
            expected[property] = value;
            expected["font-variant"] = value;
            test_serialization_set(expected);

            target.removeAttribute("style");
        }
    }, "font-variant: normal with non-default longhands");

    test(function(t) {
        t.add_cleanup(() => target.removeAttribute("style"));
        for (const keyword of cssWideKeywords) {
            target.style.fontVariant = "normal";
            target.style.fontVariantLigatures = keyword;

            const expected = Object.assign({}, normalSet);
            expected["font-variant-ligatures"] = keyword;
            expected["font-variant"] = "";
            test_serialization_set(expected);
            target.removeAttribute("style");
        }
    }, "CSS-wide keyword in one longhand");

    test(function(t) {
        t.add_cleanup(() => target.removeAttribute("style"));

        for (const keyword of cssWideKeywords) {
            target.style.fontVariant = keyword;
            test_serialization_set(setWithValue(keyword));
            target.removeAttribute("style");
        }
    }, "CSS-wide keyword in shorthand");

    test(function(t) {
        target.style.fontVariant = "normal";
        target.style.font = "menu";
        t.add_cleanup(() => target.removeAttribute("style"));

        test_serialization_set(emptySet);
    }, "font: menu serialization");
</script>
</html>
chromium/third_party/blink/web_tests/external/wpt/css/cssom/font-variant-shorthand-serialization.html
