diff options
Diffstat (limited to 'layout/inspector/tests/chrome/test_fontVariationsAPI.xhtml')
| -rw-r--r-- | layout/inspector/tests/chrome/test_fontVariationsAPI.xhtml | 196 |
1 files changed, 196 insertions, 0 deletions
diff --git a/layout/inspector/tests/chrome/test_fontVariationsAPI.xhtml b/layout/inspector/tests/chrome/test_fontVariationsAPI.xhtml new file mode 100644 index 0000000000..959d3ee45e --- /dev/null +++ b/layout/inspector/tests/chrome/test_fontVariationsAPI.xhtml @@ -0,0 +1,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> |