test_fontVariationsAPI.xhtml (8822B)
1 <?xml version="1.0"?> 2 <?xml-stylesheet type="text/css" href="chrome://global/skin"?> 3 <?xml-stylesheet type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css"?> 4 <?xml-stylesheet type="text/css" href="test_fontVariationsAPI.css"?> 5 <window title="Test for font variation axis API" 6 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 7 onload="RunTest();"> 8 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> 9 10 <script type="application/javascript"> 11 <![CDATA[ 12 13 SimpleTest.waitForExplicitFinish(); 14 15 // Which platform are we on? 16 const kIsLinux = navigator.platform.indexOf("Linux") == 0; 17 const kIsMac = navigator.platform.indexOf("Mac") == 0; 18 const kIsWin = navigator.platform.indexOf("Win") == 0; 19 20 // If it's an older macOS version (pre-Sierra), we don't expect the 21 // @font-face examples to work, so just skip them. 22 const kIsOldMac = navigator.oscpu.substr(navigator.oscpu.lastIndexOf(".") + 1) < 12; 23 24 // We allow for some "fuzz" on axis values, given the conversions between 25 // fixed-point and floating-point representations. 26 const kEpsilon = 0.001; 27 28 29 const LibreFranklinAxes = [ 30 { tag: "wght", name: "Weight", minValue: 40, maxValue: 200, defaultValue: 40 }, 31 ]; 32 33 const GinghamAxes = [ 34 { tag: "wght", name: "Weight", minValue: 300, maxValue: 700, defaultValue: 300 }, 35 { tag: "wdth", name: "Width", minValue: 1, maxValue: 150, defaultValue: 1 }, 36 ]; 37 38 const SkiaAxes = [ 39 { tag: "wght", name: "Weight", minValue: 0.48, maxValue: 3.2, defaultValue: 1.0 }, 40 { tag: "wdth", name: "Width", minValue: 0.62, maxValue: 1.3, defaultValue: 1.0 }, 41 ]; 42 43 function checkAxes(axes, reference) { 44 is(axes.length, reference.length, "number of variation axes"); 45 for (var i = 0; i < Math.min(axes.length, reference.length); ++i) { 46 var v = axes[i]; 47 var ref = reference[i]; 48 is(v.tag, ref.tag, "axis tag"); 49 is(v.name, ref.name, "axis name"); 50 isfuzzy(v.minValue, ref.minValue, kEpsilon, "minimum value"); 51 isfuzzy(v.maxValue, ref.maxValue, kEpsilon, "maximum value"); 52 is(v.defaultValue, ref.defaultValue, "default value"); 53 } 54 } 55 56 // Expected variation instances for each of our test fonts, sorted by name 57 const LibreFranklinInstances = [ 58 { name: "Black", values: [ { axis: "wght", value: 200 } ] }, 59 { name: "Bold", values: [ { axis: "wght", value: 154 } ] }, 60 { name: "ExtraBold", values: [ { axis: "wght", value: 178 } ] }, 61 { name: "ExtraLight", values: [ { axis: "wght", value: 50 } ] }, 62 { name: "Light", values: [ { axis: "wght", value: 66 } ] }, 63 { name: "Medium", values: [ { axis: "wght", value: 106 } ] }, 64 { name: "Regular", values: [ { axis: "wght", value: 84 } ] }, 65 { name: "SemiBold", values: [ { axis: "wght", value: 130 } ] }, 66 { name: "Thin", values: [ { axis: "wght", value: 40 } ] }, 67 ]; 68 69 const GinghamInstances = [ 70 { name: "Bold", values: [ { axis: "wght", value: 700 }, { axis: "wdth", value: 100 } ] }, 71 { name: "Condensed Bold", values: [ { axis: "wght", value: 700 }, { axis: "wdth", value: 1 } ] }, 72 { name: "Condensed Light", values: [ { axis: "wght", value: 300 }, { axis: "wdth", value: 1 } ] }, 73 { name: "Condensed Regular", values: [ { axis: "wght", value: 400 }, { axis: "wdth", value: 1 } ] }, 74 { name: "Light", values: [ { axis: "wght", value: 300 }, { axis: "wdth", value: 100 } ] }, 75 { name: "Regular", values: [ { axis: "wght", value: 400 }, { axis: "wdth", value: 100 } ] }, 76 { name: "Wide Bold", values: [ { axis: "wght", value: 700 }, { axis: "wdth", value: 150 } ] }, 77 { name: "Wide Light", values: [ { axis: "wght", value: 300 }, { axis: "wdth", value: 150 } ] }, 78 { name: "Wide Regular", values: [ { axis: "wght", value: 400 }, { axis: "wdth", value: 150 } ] }, 79 ]; 80 81 const SkiaInstances = [ 82 { name: "Black", values: [ { axis: "wght", value: 3.2 }, { axis: "wdth", value: 1 } ] }, 83 { name: "Black Condensed", values: [ { axis: "wght", value: 3 }, { axis: "wdth", value: 0.7 } ] }, 84 { name: "Black Extended", values: [ { axis: "wght", value: 3.2 }, { axis: "wdth", value: 1.3 } ] }, 85 { name: "Bold", values: [ { axis: "wght", value: 1.95 }, { axis: "wdth", value: 1 } ] }, 86 { name: "Condensed", values: [ { axis: "wght", value: 1 }, { axis: "wdth", value: 0.62 } ] }, 87 { name: "Extended", values: [ { axis: "wght", value: 1 }, { axis: "wdth", value: 1.3 } ] }, 88 { name: "Light", values: [ { axis: "wght", value: 0.48 }, { axis: "wdth", value: 1 } ] }, 89 { name: "Light Condensed", values: [ { axis: "wght", value: 0.48 }, { axis: "wdth", value: 0.7 } ] }, 90 { name: "Light Extended", values: [ { axis: "wght", value: 0.48 }, { axis: "wdth", value: 1.3 } ] }, 91 { name: "Regular", values: [ { axis: "wght", value: 1 }, { axis: "wdth", value: 1 } ] }, 92 ]; 93 94 function checkInstances(instances, reference) { 95 is(instances.length, reference.length, "number of variation instances"); 96 instances.sort(function (a, b) { 97 return a.name.localeCompare(b.name, "en-US"); 98 }); 99 for (var i = 0; i < Math.min(instances.length, reference.length); ++i) { 100 var ref = reference[i]; 101 var inst = instances[i]; 102 is(inst.name, ref.name, "instance name"); 103 is(inst.values.length, ref.values.length, "number of values"); 104 for (var j = 0; j < Math.min(inst.values.length, ref.values.length); ++j) { 105 var v = inst.values[j]; 106 is(v.axis, ref.values[j].axis, "axis"); 107 isfuzzy(v.value, ref.values[j].value, kEpsilon, "value"); 108 } 109 } 110 } 111 112 function RunTest() { 113 // Ensure we're running with font-variations enabled 114 SpecialPowers.pushPrefEnv( 115 {'set': [['layout.css.font-variations.enabled', true], 116 ['gfx.downloadable_fonts.keep_variation_tables', true], 117 ['gfx.downloadable_fonts.otl_validation', false]]}, 118 function() { 119 var rng = document.createRange(); 120 var elem, fonts, f; 121 122 // First test element uses Arial (or a substitute), which has no variations 123 elem = document.getElementById("test1"); 124 rng.selectNode(elem); 125 fonts = InspectorUtils.getUsedFontFaces(rng); 126 is(fonts.length, 1, "number of fonts"); 127 f = fonts[0]; 128 is(f.getVariationAxes().length, 0, "no variations"); 129 is(f.getVariationInstances().length, 0, "no instances"); 130 131 if (!(kIsMac && kIsOldMac)) { 132 // Libre Franklin font should have a single axis: Weight. 133 elem = document.getElementById("test2"); 134 elem.style.display = "block"; 135 rng.selectNode(elem); 136 fonts = InspectorUtils.getUsedFontFaces(rng); 137 is(fonts.length, 1, "number of fonts"); 138 f = fonts[0]; 139 is(f.name, "Libre Franklin", "font name"); 140 checkAxes(f.getVariationAxes(), LibreFranklinAxes); 141 checkInstances(f.getVariationInstances(), LibreFranklinInstances); 142 143 // Gingham font should have two axes: Weight and Width. 144 elem = document.getElementById("test3"); 145 elem.style.display = "block"; 146 rng.selectNode(elem); 147 fonts = InspectorUtils.getUsedFontFaces(rng); 148 is(fonts.length, 1, "number of fonts"); 149 f = fonts[0]; 150 is(f.name, "Gingham Regular", "font name"); 151 checkAxes(f.getVariationAxes(), GinghamAxes); 152 checkInstances(f.getVariationInstances(), GinghamInstances); 153 } 154 155 if (kIsMac) { 156 // Only applies on macOS, where the Skia font is present 157 // by default, and has Weight and Width axes. 158 elem = document.getElementById("test4"); 159 rng.selectNode(elem); 160 fonts = InspectorUtils.getUsedFontFaces(rng); 161 is(fonts.length, 1, "number of fonts"); 162 f = fonts[0]; 163 is(f.name, "Skia", "font name"); 164 checkAxes(f.getVariationAxes(), SkiaAxes); 165 checkInstances(f.getVariationInstances(), SkiaInstances); 166 } 167 168 SimpleTest.finish(); 169 } 170 ); 171 } 172 173 ]]> 174 </script> 175 176 <!-- html:body contains elements the test will inspect --> 177 <body xmlns="http://www.w3.org/1999/xhtml"> 178 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1323743" 179 target="_blank">Mozilla Bug 1323743</a> 180 181 <!-- Using a non-variation font --> 182 <div id="test1">Hello world</div> 183 184 <!-- This element uses a variation font loaded with @font-face. 185 display:none used here to ensure loading of the webfont is deferred until 186 after we have set prefs required to preserve the variation tables. --> 187 <div id="test2" style="display:none">Hello world</div> 188 189 <!-- This element also uses a variation font loaded with @font-face. --> 190 <div id="test3" style="display:none">Hello world</div> 191 192 <!-- For macOS only, we also test with the system-installed Skia font --> 193 <div id="test4">Hello world</div> 194 </body> 195 196 </window>