131 lines
4.9 KiB
HTML
131 lines
4.9 KiB
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>
|