test_fontFaceRanges.xhtml (8602B)
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_fontFaceRanges.css"?> 5 <!-- 6 https://bugzilla.mozilla.org/show_bug.cgi?id=1435989 7 --> 8 <window title="Mozilla Bug 1435989" 9 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" 10 onload="RunTest();"> 11 <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"/> 12 13 <script type="application/javascript"> 14 <![CDATA[ 15 /** Test for Bug 1435989 */ 16 17 SimpleTest.waitForExplicitFinish(); 18 19 function expectRanges(f, ranges) { 20 var r = f.ranges; 21 is(r.length, ranges.length, "number of ranges"); 22 for (var i = 0; i < Math.min(r.length, ranges.length); i++) { 23 is(r[i].toString(), ranges[i], "text of range"); 24 } 25 } 26 27 function RunTest() { 28 var rng = document.createRange(); 29 var elem, fonts; 30 var familyNames = new Map(); 31 32 // Test element contains Latin & Chinese 33 elem = document.getElementById("test1"); 34 rng.selectNode(elem); 35 fonts = InspectorUtils.getUsedFontFaces(rng, 10); 36 is(fonts.length, 4, "number of font faces"); 37 for (var i = 0; i < fonts.length; i++) { 38 var f = fonts[i]; 39 familyNames.set(f.CSSFamilyName, true); 40 switch (true) { 41 case f.CSSFamilyName == "capitals": 42 expectRanges(f, ["H", "W"]); 43 break; 44 case f.CSSFamilyName == "lowercase": 45 expectRanges(f, ["ello", "orld"]); 46 break; 47 case f.CSSFamilyName == "gentium": 48 expectRanges(f, [" ", " ", " ", "!"]); 49 break; 50 default: 51 // We'll get a platform-dependent font for the Chinese characters, 52 // so we don't attempt to check its name. 53 expectRanges(f, ["\u4F60", "\u597D"]); 54 break; 55 } 56 } 57 is(familyNames.size, 4, "found all expected families"); 58 59 // Test element #test1 again, but limit maxRanges to 1 per face 60 elem = document.getElementById("test1"); 61 rng.selectNode(elem); 62 fonts = InspectorUtils.getUsedFontFaces(rng, 1); 63 is(fonts.length, 4, "number of font faces"); 64 familyNames.clear(); 65 for (var i = 0; i < fonts.length; i++) { 66 var f = fonts[i]; 67 familyNames.set(f.CSSFamilyName, true); 68 switch (true) { 69 case f.CSSFamilyName == "capitals": 70 expectRanges(f, ["H"]); 71 break; 72 case f.CSSFamilyName == "lowercase": 73 expectRanges(f, ["ello"]); 74 break; 75 case f.CSSFamilyName == "gentium": 76 expectRanges(f, [" "]); 77 break; 78 default: 79 // We'll get a platform-dependent font for the Chinese characters, 80 // so we don't attempt to check its name. 81 expectRanges(f, ["\u4F60"]); 82 break; 83 } 84 } 85 is(familyNames.size, 4, "found all expected families"); 86 87 // Test element contains Latin & Arabic (for bidi) 88 elem = document.getElementById("test2"); 89 rng.selectNode(elem); 90 fonts = InspectorUtils.getUsedFontFaces(rng, 10); 91 is(fonts.length, 4, "number of font faces"); 92 familyNames.clear(); 93 for (var i = 0; i < fonts.length; i++) { 94 var f = fonts[i]; 95 familyNames.set(f.CSSFamilyName, true); 96 switch (true) { 97 case f.CSSFamilyName == "capitals": 98 expectRanges(f, ["H", "W"]); 99 break; 100 case f.CSSFamilyName == "lowercase": 101 expectRanges(f, ["ello", "orld"]); 102 break; 103 case f.CSSFamilyName == "gentium": 104 expectRanges(f, [" ", " ", "!"]); 105 break; 106 default: 107 // We'll get a platform-dependent font for the Arabic characters, 108 // so we don't attempt to check its name. 109 expectRanges(f, ["العربي"]); 110 break; 111 } 112 } 113 is(familyNames.size, 4, "found all expected families"); 114 115 // Test element wrapped across multiple lines, including soft hyphens, 116 // one of which will be used as a line-break. 117 elem = document.getElementById("test3"); 118 rng.selectNode(elem); 119 fonts = InspectorUtils.getUsedFontFaces(rng, 10); 120 is(fonts.length, 3, "number of font faces"); 121 familyNames.clear(); 122 for (var i = 0; i < fonts.length; i++) { 123 var f = fonts[i]; 124 familyNames.set(f.CSSFamilyName, true); 125 switch (true) { 126 case f.CSSFamilyName == "capitals": 127 expectRanges(f, ["H", "W"]); 128 break; 129 case f.CSSFamilyName == "lowercase": 130 expectRanges(f, ["ello", "mul\u00ADti\u00ADline", "orld"]); 131 break; 132 case f.CSSFamilyName == "gentium": 133 expectRanges(f, [" ", " ", "!"]); 134 break; 135 default: 136 // There shouldn't be any other font used 137 ok(false, "unexpected font: " + f.CSSFamilyName); 138 break; 139 } 140 } 141 is(familyNames.size, 3, "found all expected families"); 142 143 // Test where textrun should continue across inline element boundaries 144 // (but we expect to get separate Range objects). 145 elem = document.getElementById("test4"); 146 rng.selectNode(elem); 147 fonts = InspectorUtils.getUsedFontFaces(rng, 10); 148 is(fonts.length, 3, "number of font faces"); 149 familyNames.clear(); 150 for (var i = 0; i < fonts.length; i++) { 151 var f = fonts[i]; 152 familyNames.set(f.CSSFamilyName, true); 153 switch (true) { 154 case f.CSSFamilyName == "capitals": 155 expectRanges(f, ["H"]); 156 break; 157 case f.CSSFamilyName == "lowercase": 158 expectRanges(f, ["ello", "cruel", "world"]); 159 break; 160 case f.CSSFamilyName == "gentium": 161 expectRanges(f, ["!"]); 162 break; 163 default: 164 // There shouldn't be any other font used 165 ok(false, "unexpected font: " + f.CSSFamilyName); 166 break; 167 } 168 } 169 is(familyNames.size, 3, "found all expected families"); 170 171 // Testcase involving collapsed whitespace, to test mapping from textrun 172 // offsets back to DOM content offsets. 173 elem = document.getElementById("test5"); 174 rng.selectNode(elem); 175 fonts = InspectorUtils.getUsedFontFaces(rng, 10); 176 is(fonts.length, 3, "number of font faces"); 177 familyNames.clear(); 178 for (var i = 0; i < fonts.length; i++) { 179 var f = fonts[i]; 180 familyNames.set(f.CSSFamilyName, true); 181 switch (true) { 182 case f.CSSFamilyName == "capitals": 183 expectRanges(f, ["H"]); 184 break; 185 case f.CSSFamilyName == "lowercase": 186 expectRanges(f, ["ello", "linked", "world"]); 187 break; 188 case f.CSSFamilyName == "gentium": 189 expectRanges(f, ["\n ", "\n ", "\n ", "!\n "]); 190 break; 191 default: 192 // There shouldn't be any other font used 193 ok(false, "unexpected font: " + f.CSSFamilyName); 194 break; 195 } 196 } 197 is(familyNames.size, 3, "found all expected families"); 198 199 // Test that fonts used in non-visible elements are not reported, 200 // nor non-visible ranges for fonts that are also used in visible content. 201 elem = document.getElementById("test6"); 202 rng.selectNode(elem); 203 fonts = InspectorUtils.getUsedFontFaces(rng, 10); 204 is(fonts.length, 2, "number of font faces"); 205 familyNames.clear(); 206 for (var i = 0; i < fonts.length; i++) { 207 var f = fonts[i]; 208 familyNames.set(f.CSSFamilyName, true); 209 switch (true) { 210 case f.CSSFamilyName == "capitals": 211 ok(false, "font used in hidden element should not be reported"); 212 break; 213 case f.CSSFamilyName == "lowercase": 214 expectRanges(f, ["hello", "visible", "world"]); 215 break; 216 case f.CSSFamilyName == "gentium": 217 expectRanges(f, ["\n ", "\n ", "\n ", "!"]); 218 break; 219 default: 220 // There shouldn't be any other font used 221 ok(false, "unexpected font: " + f.CSSFamilyName); 222 break; 223 } 224 } 225 is(familyNames.size, 2, "found all expected families"); 226 227 SimpleTest.finish(); 228 } 229 230 ]]> 231 </script> 232 233 <body xmlns="http://www.w3.org/1999/xhtml"> 234 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1435989" 235 target="_blank">Mozilla Bug 1435989</a> 236 <!-- We use @font-face with unicode-range to force different font faces to be used 237 for uppercase, lowercase, and non-letter Latin characters; and then the Chinese 238 and Arabic characters will result in font fallback being applied. --> 239 <div class="gentium" id="test1">Hello 你 <b>World</b> 好!</div> 240 <div class="gentium" id="test2">Hello العربي World!</div> 241 <div class="gentium" id="test3" style="width:3em">Hello mul­ti­line World!</div> 242 <div class="gentium" id="test4"><span>Hello</span><span>cruel</span>world!</div> 243 <div class="gentium" id="test5"> 244 Hello 245 <!-- comment --> 246 <a href="#foo">linked</a> 247 <!-- comment --> 248 world! 249 </div> 250 <div class="gentium" id="test6"> 251 hello 252 <a href="#foo" style="visibility:hidden">Non-Visible 253 <span style="visibility:visible">visible</span></a> 254 world!</div> 255 </body> 256 257 </window>