196 lines
8.6 KiB
HTML
196 lines
8.6 KiB
HTML
<?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>
|