layout/style/test/test_font_face_parser.html

   1 <!DOCTYPE HTML><html>
   2 <!-- https://bugzilla.mozilla.org/show_bug.cgi?id=441469 -->
   3 <head>
   4   <meta http-equiv="content-type" content="text/html; charset=utf-8">
   5   <title>Test of @font-face parser</title>
   6   <script src="/tests/SimpleTest/SimpleTest.js"></script>
   7   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
   8 </head>
   9 <body>
  10 <p>@font-face parsing (<a
  11   target="_blank"
  12   href="https://bugzilla.mozilla.org/show_bug.cgi?id=441469"
  13 >bug 441469</a>)</p>
  14 <pre id="display"></pre>
  15 <style type="text/css" id="testbox"></style>
  16 <script class="testbody" type="text/javascript">
  17 function runTest() {
  18   function _(b) { return "@font-face { " + b + " }"; };
  19   var testset = [
  20     // Complete nonsense - shouldn't make a font-face rule at all.
  21     { rule: "@font-face;" },
  22     { rule: "font-face { }" },
  23     { rule: "@fontface { }" },
  24     { rule: "@namespace foo url(http://example.com/foo);" },
  25
  26     // Empty rule.
  27     { rule: "@font-face { }",   d: {} },
  28     { rule: "@font-face {",     d: {} },
  29     { rule: "@font-face { ; }", d: {}, noncanonical: true },
  30
  31     // Correct font-family.
  32     { rule: _("font-family: \"Mouse\";"), d: {"font-family" : "\"Mouse\""} },
  33     { rule: _("font-family: \"Mouse\""),  d: {"font-family" : "\"Mouse\""},
  34       noncanonical: true },
  35     { rule: _("font-family: Mouse;"),  d: {"font-family" : "Mouse" },
  36       noncanonical: true },
  37     { rule: _("font-family: Mouse"),  d: {"font-family" : "Mouse" },
  38       noncanonical: true },
  39
  40     // Correct but unusual font-family.
  41     { rule: _("font-family: Hoefler Text;"),
  42       d: {"font-family" : "Hoefler Text"},
  43       noncanonical: true },
  44
  45     // Incorrect font-family.
  46     { rule: _("font-family:"),        d: {} },
  47     { rule: _("font-family \"Mouse\""), d: {} },
  48     { rule: _("font-family: *"),      d: {} },
  49     { rule: _("font-family: Mouse, Rat"), d: {} },
  50     { rule: _("font-family: sans-serif"), d: {} },
  51
  52     // Correct font-style.
  53     { rule: _("font-style: normal;"),  d: {"font-style" : "normal"} },
  54     { rule: _("font-style: italic;"),  d: {"font-style" : "italic"} },
  55     { rule: _("font-style: oblique;"),  d: {"font-style" : "oblique"} },
  56
  57     // Correct font-weight.
  58     { rule: _("font-weight: 100;"),  d: {"font-weight" : "100"} },
  59     { rule: _("font-weight: 200;"),  d: {"font-weight" : "200"} },
  60     { rule: _("font-weight: 300;"),  d: {"font-weight" : "300"} },
  61     { rule: _("font-weight: 400;"),  d: {"font-weight" : "400"} },
  62     { rule: _("font-weight: 500;"),  d: {"font-weight" : "500"} },
  63     { rule: _("font-weight: 600;"),  d: {"font-weight" : "600"} },
  64     { rule: _("font-weight: 700;"),  d: {"font-weight" : "700"} },
  65     { rule: _("font-weight: 800;"),  d: {"font-weight" : "800"} },
  66     { rule: _("font-weight: 900;"),  d: {"font-weight" : "900"} },
  67     { rule: _("font-weight: normal;"),  d: {"font-weight" : "normal"} },
  68     { rule: _("font-weight: bold;"),    d: {"font-weight" : "bold"} },
  69
  70     // Incorrect font-weight.
  71     { rule: _("font-weight: bolder;"),  d: {} },
  72     { rule: _("font-weight: lighter;"), d: {} },
  73
  74     // Correct font-stretch.
  75     { rule: _("font-stretch: ultra-condensed;"),
  76       d: {"font-stretch" : "ultra-condensed"} },
  77     { rule: _("font-stretch: extra-condensed;"),
  78       d: {"font-stretch" : "extra-condensed"} },
  79     { rule: _("font-stretch: condensed;"),
  80       d: {"font-stretch" : "condensed"} },
  81     { rule: _("font-stretch: semi-condensed;"),
  82       d: {"font-stretch" : "semi-condensed"} },
  83     { rule: _("font-stretch: normal;"),
  84       d: {"font-stretch" : "normal"} },
  85     { rule: _("font-stretch: semi-expanded;"),
  86       d: {"font-stretch" : "semi-expanded"} },
  87     { rule: _("font-stretch: expanded;"),
  88       d: {"font-stretch" : "expanded"} },
  89     { rule: _("font-stretch: extra-expanded;"),
  90       d: {"font-stretch" : "extra-expanded"} },
  91     { rule: _("font-stretch: ultra-expanded;"),
  92       d: {"font-stretch" : "ultra-expanded"} },
  93
  94     // Incorrect font-stretch.
  95     { rule: _("font-stretch: wider;"),  d: {} },
  96     { rule: _("font-stretch: narrower;"), d: {} },
  97
  98     // Correct src:
  99     { rule: _("src: url(\"/fonts/Mouse\");"),
 100       d: { "src" : "url(\"/fonts/Mouse\")" } },
 101     { rule: _("src: url(/fonts/Mouse);"),
 102       d: { "src" : "url(\"/fonts/Mouse\")" }, noncanonical: true },
 103
 104     { rule: _("src: url(\"/fonts/Mouse\") format(\"truetype\");"),
 105       d: { "src" : "url(\"/fonts/Mouse\") format(\"truetype\")" } },
 106
 107     { rule: _("src: url(\"/fonts/Mouse\"), url(\"/fonts/Rat\");"),
 108       d: { "src" : "url(\"/fonts/Mouse\"), url(\"/fonts/Rat\")" } },
 109
 110     { rule: _("src: local(Mouse), url(\"/fonts/Mouse\");"),
 111       d: { "src" : "local(Mouse), url(\"/fonts/Mouse\")" },
 112       noncanonical: true },
 113
 114     { rule: _("src: local(\"老鼠\"), url(\"/fonts/Mouse\");"),
 115       d: { "src" : "local(\"老鼠\"), url(\"/fonts/Mouse\")" } },
 116
 117     { rule: _("src: local(\"老鼠\"), url(\"/fonts/Mouse\") format(\"truetype\");"),
 118       d: { "src" : "local(\"老鼠\"), url(\"/fonts/Mouse\") format(\"truetype\")" } },
 119
 120     { rule: _("src: url(\"/fonts/Mouse\") format(truetype);"),
 121       d: { "src" : "url(\"/fonts/Mouse\") format(truetype)" } },
 122
 123     // Correct but unusual src:
 124     { rule: _("src: local(Hoefler Text);"),
 125       d: {"src" : "local(Hoefler Text)"}, noncanonical: true },
 126
 127     // Incorrect src:
 128     { rule: _("src:"), d: {} },
 129     { rule: _("src: \"/fonts/Mouse\";"), d: {} },
 130     { rule: _("src: /fonts/Mouse;"), d: {} },
 131     { rule: _("src: url(\"/fonts/Mouse\") format(\"truetype\",opentype);"), d: {} },
 132     { rule: _("src: local(*);"), d: {} },
 133     { rule: _("src: format(\"truetype\");"), d: {} },
 134     { rule: _("src: local(Mouse) format(\"truetype\");"), d: {} },
 135     { rule: _("src: local(Mouse, Rat);"), d: {} },
 136     { rule: _("src: local(sans-serif);"), d: {} },
 137     { rule: _("src: url(\"/fonts/Mouse\") format(\"truetype\", \"opentype\");"), d: {} },
 138
 139     // Repeated descriptors
 140     { rule: _("font-weight: 700; font-weight: 200;"),
 141       d: {"font-weight" : "200"},
 142       noncanonical: true },
 143     { rule: _("src: url(\"/fonts/Cat\"); src: url(\"/fonts/Mouse\");"),
 144       d: { "src" : "url(\"/fonts/Mouse\")" },
 145       noncanonical: true },
 146     { rule: _("src: local(Cat); src: local(Mouse)"),
 147       d: { "src" : "local(Mouse)" },
 148       noncanonical: true },
 149
 150     // Correct parenthesis matching for local()
 151     { rule: _("src: local(Mouse); src: local(Cat(); src: local(Rat); )"),
 152       d: { "src" : "local(Mouse)" },
 153       noncanonical: true },
 154     { rule: _("src: local(Mouse); src: local(\"Cat\"; src: local(Rat); )"),
 155       d: { "src" : "local(Mouse)" },
 156       noncanonical: true },
 157
 158     // Correct parenthesis matching for format()
 159     { rule: _("src: url(\"/fonts/Mouse\"); " +
 160               "src: url(\"/fonts/Cat\") format(Cat(); src: local(Rat); )"),
 161       d: { "src" : "url(\"/fonts/Mouse\")" },
 162       noncanonical: true },
 163     { rule: _("src: url(\"/fonts/Mouse\"); " +
 164               "src: url(\"/fonts/Cat\") format(\"Cat\"; src: local(Rat); )"),
 165       d: { "src" : "url(\"/fonts/Mouse\")" },
 166       noncanonical: true },
 167     { rule: _("src: url(\"/fonts/Mouse\"); " +
 168               "src: url(\"/fonts/Cat\") format((); src: local(Rat); )"),
 169       d: { "src" : "url(\"/fonts/Mouse\")" },
 170       noncanonical: true },
 171
 172     // Correct unicode-range:
 173     { rule: _("unicode-range: U+A5;"), d: { "unicode-range" : "U+A5" } },
 174     { rule: _("unicode-range: U+00A5;"),
 175       d: { "unicode-range" : "U+A5" }, noncanonical: true },
 176     { rule: _("unicode-range: U+00a5;"),
 177       d: { "unicode-range" : "U+A5" }, noncanonical: true },
 178     { rule: _("unicode-range: u+00a5;"),
 179       d: { "unicode-range" : "U+A5" }, noncanonical: true },
 180     { rule: _("unicode-range: U+0-FF;"),
 181       d: { "unicode-range" : "U+0-FF" } },
 182     { rule: _("unicode-range: U+00??;"),
 183       d: { "unicode-range" : "U+0-FF" }, noncanonical: true },
 184     { rule: _("unicode-range: U+?"),
 185       d: { "unicode-range" : "U+0-F" }, noncanonical: true },
 186     { rule: _("unicode-range: U+590-5ff;"),
 187       d: { "unicode-range" : "U+590-5FF" }, noncanonical: true },
 188
 189     { rule: _("unicode-range: U+A5, U+4E00-9FFF, U+30??, U+FF00-FF9F;"),
 190       d: { "unicode-range" : "U+A5, U+4E00-9FFF, U+3000-30FF, U+FF00-FF9F" },
 191       noncanonical: true },
 192
 193     { rule: _("unicode-range: U+104??;"),
 194       d: { "unicode-range" : "U+10400-104FF" }, noncanonical: true },
 195     { rule: _("unicode-range: U+320??, U+321??, U+322??, U+323??, U+324??, U+325??;"),
 196       d: { "unicode-range" : "U+32000-320FF, U+32100-321FF, U+32200-322FF, U+32300-323FF, U+32400-324FF, U+32500-325FF" },
 197       noncanonical: true },
 198     { rule: _("unicode-range: U+100000-10ABCD;"),
 199       d: { "unicode-range" : "U+100000-10ABCD" } },
 200     { rule: _("unicode-range: U+0121 , U+1023"),
 201       d: { "unicode-range" : "U+121, U+1023" }, noncanonical: true },
 202     { rule: _("unicode-range: U+0121/**/, U+1023"),
 203       d: { "unicode-range" : "U+121, U+1023" }, noncanonical: true },
 204
 205     // Incorrect unicode-range:
 206     { rule: _("unicode-range:"), d: {} },
 207     { rule: _("unicode-range: U+"), d: {} },
 208     { rule: _("unicode-range: U+8FFFFFFF"), d: {} },
 209     { rule: _("unicode-range: U+8FFF-7000"), d: {} },
 210     { rule: _("unicode-range: U+8F??-9000"), d: {} },
 211     { rule: _("unicode-range: U+9000-9???"), d: {} },
 212     { rule: _("unicode-range: U+??00"), d: {} },
 213     { rule: _("unicode-range: U+12345678?"), d: {} },
 214     { rule: _("unicode-range: U+1????????"), d: {} },
 215     { rule: _("unicode-range: twelve"), d: {} },
 216     { rule: _("unicode-range: 1000"), d: {} },
 217     { rule: _("unicode-range: 13??"), d: {} },
 218     { rule: _("unicode-range: 1300-1377"), d: {} },
 219     { rule: _("unicode-range: U-1000"), d: {} },
 220     { rule: _("unicode-range: U+nnnn"), d: {} },
 221     { rule: _("unicode-range: U+0121 U+1023"), d: {} },
 222     { rule: _("unicode-range: U+ 0121"), d: {} },
 223     { rule: _("unicode-range: U +0121"), d: {} },
 224     { rule: _("unicode-range: U+0121-"), d: {} },
 225     { rule: _("unicode-range: U+0121- 1023"), d: {} },
 226     { rule: _("unicode-range: U+0121 -1023"), d: {} },
 227     { rule: _("unicode-range: U+012 ?"), d: {} },
 228     { rule: _("unicode-range: U+01 2?"), d: {} },
 229     { rule: _("unicode-range: U+A0000-12FFFF"), d: {} },
 230     { rule: _("unicode-range: U+??????"), d: {} },
 231
 232     // Thorough test of seven-digit rejection: all these are syntax errors
 233     { rule: _("unicode-range: U+1034560, U+A5"), d: {} },
 234     { rule: _("unicode-range: U+1034569, U+A5"), d: {} },
 235     { rule: _("unicode-range: U+103456a, U+A5"), d: {} },
 236     { rule: _("unicode-range: U+103456f, U+A5"), d: {} },
 237     { rule: _("unicode-range: U+103456?, U+A5"), d: {} },
 238     { rule: _("unicode-range: U+103456-1034560, U+A5"), d: {} },
 239     { rule: _("unicode-range: U+103456-1034569, U+A5"), d: {} },
 240     { rule: _("unicode-range: U+103456-103456a, U+A5"), d: {} },
 241     { rule: _("unicode-range: U+103456-103456f, U+A5"), d: {} },
 242
 243     // Syntactically invalid unicode-range tokens invalidate the
 244     // entire descriptor
 245     { rule: _("unicode-range: U+1, U+2, U+X"), d: {} },
 246     { rule: _("unicode-range: U+A5, U+0?F"), d: {} },
 247     { rule: _("unicode-range: U+A5, U+0F?-E00"), d: {} },
 248
 249     // Descending ranges and ranges outside 0-10FFFF are invalid
 250     { rule: _("unicode-range: U+A5, U+90-30"), d: {} },
 251     { rule: _("unicode-range: U+A5, U+220043"), d: {} },
 252
 253     // font-feature-settings
 254     { rule: _("font-feature-settings: normal;"),
 255       d: { "font-feature-settings" : "normal" } },
 256     { rule: _("font-feature-settings: \"dlig\";"),
 257       d: { "font-feature-settings" : "\"dlig\"" } },
 258     { rule: _("font-feature-settings: \"dlig\" 1;"),
 259       d: { "font-feature-settings" : "\"dlig\"" }, noncanonical: true },
 260     { rule: _("font-feature-settings: 'dlig' 1"),
 261       d: { "font-feature-settings" : "\"dlig\"" }, noncanonical: true },
 262
 263     // incorrect font-feature-settings
 264     { rule: _("font-feature-settings: dlig 1"), d: {} },
 265     { rule: _("font-feature-settings: none;"), d: {} },
 266     { rule: _("font-feature-settings: 0;"), d: {} },
 267     { rule: _("font-feature-settings: 3.14;"), d: {} },
 268     { rule: _("font-feature-settings: 'blah' 3.14;"), d: {} },
 269     { rule: _("font-feature-settings: 'dlig' 1 'hist' 0;"), d: {} },
 270     { rule: _("font-feature-settings: 'dlig=1,hist=1'"), d: {} },
 271
 272     // font-language-override:
 273     { rule: _("font-language-override: normal;"),
 274       d: { "font-language-override" : "normal" } },
 275     { rule: _("font-language-override: \"TRK\";"),
 276       d: { "font-language-override" : "\"TRK\"" } },
 277     { rule: _("font-language-override: 'TRK'"),
 278       d: { "font-language-override" : "\"TRK\"" }, noncanonical: true },
 279
 280     // incorrect font-language-override
 281     { rule: _("font-language-override: TRK"), d: {} },
 282     { rule: _("font-language-override: none;"), d: {} },
 283     { rule: _("font-language-override: 0;"), d: {} },
 284     { rule: _("font-language-override: #999;"), d: {} },
 285     { rule: _("font-language-override: 'TRK' 'SRB'"), d: {} },
 286     { rule: _("font-language-override: 'TRK', 'SRB'"), d: {} },
 287
 288     // font-display:
 289     { rule: _("font-display: auto;"),
 290       d: { "font-display" : "auto" } },
 291     { rule: _("font-display: block;"),
 292       d: { "font-display" : "block" } },
 293     { rule: _("font-display: swap;"),
 294       d: { "font-display" : "swap" } },
 295     { rule: _("font-display: fallback;"),
 296       d: { "font-display" : "fallback" } },
 297     { rule: _("font-display: optional;"),
 298       d: { "font-display" : "optional" } },
 299
 300     // incorrect font-display
 301     { rule: _("font-display: hidden"), d: {} },
 302     { rule: _("font-display: swap 3"), d: {} },
 303     { rule: _("font-display: block 2 swap 0"), d: {} },
 304     { rule: _("font-display: all"), d: {} },
 305   ];
 306
 307   var display = document.getElementById("display");
 308   var sheet = document.styleSheets[1];
 309
 310   for (var curTest = 0; curTest < testset.length; curTest++) {
 311     try {
 312       while(sheet.cssRules.length > 0)
 313         sheet.deleteRule(0);
 314       sheet.insertRule(testset[curTest].rule, 0);
 315     } catch (e) {
 316       ok(
 317         e.name == "SyntaxError"
 318           && e instanceof DOMException
 319           && e.code == DOMException.SYNTAX_ERR
 320           && !('d' in testset[curTest]),
 321         testset[curTest].rule + " syntax error thrown - " + e
 322       );
 323     }
 324
 325     try {
 326       if (testset[curTest].d) {
 327         is(sheet.cssRules.length, 1,
 328            testset[curTest].rule + " rule count");
 329            is(sheet.cssRules[0].type, 5 /*FONT_FACE_RULE*/,
 330            testset[curTest].rule + " rule type");
 331
 332         var d = testset[curTest].d;
 333         var s = sheet.cssRules[0].style;
 334         var n = 0;
 335
 336         is(s.getPropertyValue("pointless"), "", "Unknown descriptors don't assert");
 337
 338         // everything is set that should be
 339         for (var name in d) {
 340           is(s.getPropertyValue(name), d[name],
 341              testset[curTest].rule + " (prop " + name + ")");
 342           n++;
 343         }
 344         // nothing else is set
 345         is(s.length, n, testset[curTest].rule + "prop count");
 346         for (var i = 0; i < s.length; i++) {
 347           ok(
 348             s[i] in d,
 349             testset[curTest].rule +
 350             " - Unexpected item #" + i + ": " + s[i]
 351           );
 352         }
 353
 354         // round-tripping of cssText
 355         // this is a strong test; it's okay if the exact serialization
 356         // changes in the future
 357         if (n && !testset[curTest].noncanonical) {
 358           is(sheet.cssRules[0].cssText.replace(/[ \n]+/g, " "),
 359              testset[curTest].rule,
 360              testset[curTest].rule + " rule text");
 361         }
 362       } else {
 363         if (sheet.cssRules.length == 0) {
 364           is(sheet.cssRules.length, 0,
 365              testset[curTest].rule + " rule count (0)");
 366         } else {
 367           is(sheet.cssRules.length, 1,
 368              testset[curTest].rule + " rule count (1 non-fontface)");
 369           isnot(sheet.cssRules[0].type, 5 /*FONT_FACE_RULE*/,
 370                 testset[curTest].rule + " rule type (1 non-fontface)");
 371         }
 372       }
 373     } catch (e) {
 374       ok(false, testset[curTest].rule + " - During test: " + e);
 375     }
 376   }
 377   SimpleTest.finish();
 378 }
 379
 380 SimpleTest.waitForExplicitFinish();
 381 SpecialPowers.pushPrefEnv({ set: [["layout.css.font-display.enabled", true]] },
 382                           runTest);
 383 </script>
 384 </body>
 385 </html>