1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
|
<!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>
|
