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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
|
<?xml version="1.0"?>
<?xml-stylesheet type="text/css" href="chrome://global/skin"?>
<?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?>
<?xml-stylesheet type="text/css" href="test_fontVariationsAPI.css"?>
<window title="Test for font variation axis API"
xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
onload="RunTest();">
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/>
<script type="application/javascript">
<![CDATA[
SimpleTest.waitForExplicitFinish();
// Which platform are we on?
const kIsLinux = navigator.platform.indexOf("Linux") == 0;
const kIsMac = navigator.platform.indexOf("Mac") == 0;
const kIsWin = navigator.platform.indexOf("Win") == 0;
// If it's an older macOS version (pre-Sierra), we don't expect the
// @font-face examples to work, so just skip them.
const kIsOldMac = navigator.oscpu.substr(navigator.oscpu.lastIndexOf(".") + 1) < 12;
// We allow for some "fuzz" on axis values, given the conversions between
// fixed-point and floating-point representations.
const kEpsilon = 0.001;
const LibreFranklinAxes = [
{ tag: "wght", name: "Weight", minValue: 40, maxValue: 200, defaultValue: 40 },
];
const GinghamAxes = [
{ tag: "wght", name: "Weight", minValue: 300, maxValue: 700, defaultValue: 300 },
{ tag: "wdth", name: "Width", minValue: 1, maxValue: 150, defaultValue: 1 },
];
const SkiaAxes = [
{ tag: "wght", name: "Weight", minValue: 0.48, maxValue: 3.2, defaultValue: 1.0 },
{ tag: "wdth", name: "Width", minValue: 0.62, maxValue: 1.3, defaultValue: 1.0 },
];
function checkAxes(axes, reference) {
is(axes.length, reference.length, "number of variation axes");
for (var i = 0; i < Math.min(axes.length, reference.length); ++i) {
var v = axes[i];
var ref = reference[i];
is(v.tag, ref.tag, "axis tag");
is(v.name, ref.name, "axis name");
isfuzzy(v.minValue, ref.minValue, kEpsilon, "minimum value");
isfuzzy(v.maxValue, ref.maxValue, kEpsilon, "maximum value");
is(v.defaultValue, ref.defaultValue, "default value");
}
}
// Expected variation instances for each of our test fonts, sorted by name
const LibreFranklinInstances = [
{ name: "Black", values: [ { axis: "wght", value: 200 } ] },
{ name: "Bold", values: [ { axis: "wght", value: 154 } ] },
{ name: "ExtraBold", values: [ { axis: "wght", value: 178 } ] },
{ name: "ExtraLight", values: [ { axis: "wght", value: 50 } ] },
{ name: "Light", values: [ { axis: "wght", value: 66 } ] },
{ name: "Medium", values: [ { axis: "wght", value: 106 } ] },
{ name: "Regular", values: [ { axis: "wght", value: 84 } ] },
{ name: "SemiBold", values: [ { axis: "wght", value: 130 } ] },
{ name: "Thin", values: [ { axis: "wght", value: 40 } ] },
];
const GinghamInstances = [
{ name: "Bold", values: [ { axis: "wght", value: 700 }, { axis: "wdth", value: 100 } ] },
{ name: "Condensed Bold", values: [ { axis: "wght", value: 700 }, { axis: "wdth", value: 1 } ] },
{ name: "Condensed Light", values: [ { axis: "wght", value: 300 }, { axis: "wdth", value: 1 } ] },
{ name: "Condensed Regular", values: [ { axis: "wght", value: 400 }, { axis: "wdth", value: 1 } ] },
{ name: "Light", values: [ { axis: "wght", value: 300 }, { axis: "wdth", value: 100 } ] },
{ name: "Regular", values: [ { axis: "wght", value: 400 }, { axis: "wdth", value: 100 } ] },
{ name: "Wide Bold", values: [ { axis: "wght", value: 700 }, { axis: "wdth", value: 150 } ] },
{ name: "Wide Light", values: [ { axis: "wght", value: 300 }, { axis: "wdth", value: 150 } ] },
{ name: "Wide Regular", values: [ { axis: "wght", value: 400 }, { axis: "wdth", value: 150 } ] },
];
const SkiaInstances = [
{ name: "Black", values: [ { axis: "wght", value: 3.2 }, { axis: "wdth", value: 1 } ] },
{ name: "Black Condensed", values: [ { axis: "wght", value: 3 }, { axis: "wdth", value: 0.7 } ] },
{ name: "Black Extended", values: [ { axis: "wght", value: 3.2 }, { axis: "wdth", value: 1.3 } ] },
{ name: "Bold", values: [ { axis: "wght", value: 1.95 }, { axis: "wdth", value: 1 } ] },
{ name: "Condensed", values: [ { axis: "wght", value: 1 }, { axis: "wdth", value: 0.62 } ] },
{ name: "Extended", values: [ { axis: "wght", value: 1 }, { axis: "wdth", value: 1.3 } ] },
{ name: "Light", values: [ { axis: "wght", value: 0.48 }, { axis: "wdth", value: 1 } ] },
{ name: "Light Condensed", values: [ { axis: "wght", value: 0.48 }, { axis: "wdth", value: 0.7 } ] },
{ name: "Light Extended", values: [ { axis: "wght", value: 0.48 }, { axis: "wdth", value: 1.3 } ] },
{ name: "Regular", values: [ { axis: "wght", value: 1 }, { axis: "wdth", value: 1 } ] },
];
function checkInstances(instances, reference) {
is(instances.length, reference.length, "number of variation instances");
instances.sort(function (a, b) {
return a.name.localeCompare(b.name, "en-US");
});
for (var i = 0; i < Math.min(instances.length, reference.length); ++i) {
var ref = reference[i];
var inst = instances[i];
is(inst.name, ref.name, "instance name");
is(inst.values.length, ref.values.length, "number of values");
for (var j = 0; j < Math.min(inst.values.length, ref.values.length); ++j) {
var v = inst.values[j];
is(v.axis, ref.values[j].axis, "axis");
isfuzzy(v.value, ref.values[j].value, kEpsilon, "value");
}
}
}
function RunTest() {
// Ensure we're running with font-variations enabled
SpecialPowers.pushPrefEnv(
{'set': [['layout.css.font-variations.enabled', true],
['gfx.downloadable_fonts.keep_variation_tables', true],
['gfx.downloadable_fonts.otl_validation', false]]},
function() {
var rng = document.createRange();
var elem, fonts, f;
// First test element uses Arial (or a substitute), which has no variations
elem = document.getElementById("test1");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng);
is(fonts.length, 1, "number of fonts");
f = fonts[0];
is(f.getVariationAxes().length, 0, "no variations");
is(f.getVariationInstances().length, 0, "no instances");
if (!(kIsMac && kIsOldMac)) {
// Libre Franklin font should have a single axis: Weight.
elem = document.getElementById("test2");
elem.style.display = "block";
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng);
is(fonts.length, 1, "number of fonts");
f = fonts[0];
is(f.name, "Libre Franklin", "font name");
checkAxes(f.getVariationAxes(), LibreFranklinAxes);
checkInstances(f.getVariationInstances(), LibreFranklinInstances);
// Gingham font should have two axes: Weight and Width.
elem = document.getElementById("test3");
elem.style.display = "block";
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng);
is(fonts.length, 1, "number of fonts");
f = fonts[0];
is(f.name, "Gingham Regular", "font name");
checkAxes(f.getVariationAxes(), GinghamAxes);
checkInstances(f.getVariationInstances(), GinghamInstances);
}
if (kIsMac) {
// Only applies on macOS, where the Skia font is present
// by default, and has Weight and Width axes.
elem = document.getElementById("test4");
rng.selectNode(elem);
fonts = InspectorUtils.getUsedFontFaces(rng);
is(fonts.length, 1, "number of fonts");
f = fonts[0];
is(f.name, "Skia", "font name");
checkAxes(f.getVariationAxes(), SkiaAxes);
checkInstances(f.getVariationInstances(), SkiaInstances);
}
SimpleTest.finish();
}
);
}
]]>
</script>
<!-- html:body contains elements the test will inspect -->
<body xmlns="http://www.w3.org/1999/xhtml">
<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1323743"
target="_blank">Mozilla Bug 1323743</a>
<!-- Using a non-variation font -->
<div id="test1">Hello world</div>
<!-- This element uses a variation font loaded with @font-face.
display:none used here to ensure loading of the webfont is deferred until
after we have set prefs required to preserve the variation tables. -->
<div id="test2" style="display:none">Hello world</div>
<!-- This element also uses a variation font loaded with @font-face. -->
<div id="test3" style="display:none">Hello world</div>
<!-- For macOS only, we also test with the system-installed Skia font -->
<div id="test4">Hello world</div>
</body>
</window>
|
