Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 1 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/cssom/font-variant-shorthand-serialization.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html>
<meta charset="utf-8">
<title>Serialization of font-variant shorthand</title>
<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>