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 type="text/javascript" src="/MochiKit/MochiKit.js"></script>
   7   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   8   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
   9 </head>
  10 <body>
  11 <p>@font-face parsing (<a
  12   target="_blank"
  13   href="https://bugzilla.mozilla.org/show_bug.cgi?id=441469"
  14 >bug 441469</a>)</p>
  15 <pre id="display"></pre>
  16 <style type="text/css" id="testbox"></style>
  17 <script class="testbody" type="text/javascript">
  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     { rule: _("src: url(\"/fonts/Mouse\") format(\"truetype\", \"opentype\");"),
 107       d: { "src" : "url(\"/fonts/Mouse\") format(\"truetype\", \"opentype\")" } },
 108
 109     { rule: _("src: url(\"/fonts/Mouse\"), url(\"/fonts/Rat\");"),
 110       d: { "src" : "url(\"/fonts/Mouse\"), url(\"/fonts/Rat\")" } },
 111
 112     { rule: _("src: local(Mouse), url(\"/fonts/Mouse\");"),
 113       d: { "src" : "local(\"Mouse\"), url(\"/fonts/Mouse\")" },
 114       noncanonical: true },
 115
 116     { rule: _("src: local(\"老鼠\"), url(\"/fonts/Mouse\");"),
 117       d: { "src" : "local(\"老鼠\"), url(\"/fonts/Mouse\")" } },
 118
 119     { rule: _("src: local(\"老鼠\"), url(\"/fonts/Mouse\") format(\"truetype\");"),
 120       d: { "src" : "local(\"老鼠\"), url(\"/fonts/Mouse\") format(\"truetype\")" } },
 121
 122     // Correct but unusual src:
 123     { rule: _("src: local(Hoefler Text);"),
 124       d: {"src" : "local(\"Hoefler Text\")"}, noncanonical: true },
 125
 126     // Incorrect src:
 127     { rule: _("src: \"/fonts/Mouse\";"), d: {} },
 128     { rule: _("src: /fonts/Mouse;"), d: {} },
 129     { rule: _("src: url(\"/fonts/Mouse\") format(truetype);"), d: {} },
 130     { rule: _("src: url(\"/fonts/Mouse\") format(\"truetype\",opentype);"), d: {} },
 131     { rule: _("src: local(*);"), d: {} },
 132     { rule: _("src: format(\"truetype\");"), d: {} },
 133     { rule: _("src: local(Mouse) format(\"truetype\");"), d: {} },
 134     { rule: _("src: local(Mouse, Rat);"), d: {} },
 135     { rule: _("src: local(sans-serif);"), d: {} }
 136
 137     // unicode-range is not implemented (bug 443976).
 138     // tests for that omitted for now.
 139   ];
 140
 141   var display = document.getElementById("display");
 142   var sheet = document.styleSheets[1];
 143
 144   for (var curTest = 0; curTest < testset.length; curTest++) {
 145     try {
 146       while(sheet.cssRules.length > 0)
 147         sheet.deleteRule(0);
 148       sheet.insertRule(testset[curTest].rule, 0);
 149     } catch (e if e instanceof DOMException) {
 150       ok(e.code == DOMException.SYNTAX_ERR
 151          && !('d' in testset[curTest]),
 152          testset[curTest].rule + " syntax error thrown", e);
 153     } catch (e) {
 154       ok(false, testset[curTest].rule, "During prep: " + e);
 155     }
 156
 157     try {
 158       if (testset[curTest].d) {
 159         is(sheet.cssRules.length, 1,
 160            testset[curTest].rule + " rule count");
 161            is(sheet.cssRules[0].type, 5 /*FONT_FACE_RULE*/,
 162            testset[curTest].rule + " rule type");
 163
 164         var d = testset[curTest].d;
 165         var s = sheet.cssRules[0].style;
 166         var n = 0;
 167
 168         // everything is set that should be
 169         for (var name in d) {
 170           is(s.getPropertyValue(name), d[name],
 171              testset[curTest].rule + " (prop " + name + ")");
 172           n++;
 173         }
 174         // nothing else is set
 175         is(s.length, n, testset[curTest].rule + "prop count");
 176         for (var i = 0; i < s.length; i++) {
 177           ok(s[i] in d, testset[curTest].rule,
 178              "Unexpected item #" + i + ": " + s[i]);
 179         }
 180
 181         // round-tripping of cssText
 182         // this is a strong test; it's okay if the exact serialization
 183         // changes in the future
 184         if (n && !testset[curTest].noncanonical) {
 185           is(sheet.cssRules[0].cssText.replace(/[ \n]+/g, " "),
 186              testset[curTest].rule,
 187              testset[curTest].rule + " rule text");
 188         }
 189       } else {
 190         if (sheet.cssRules.length == 0) {
 191           is(sheet.cssRules.length, 0,
 192              testset[curTest].rule + " rule count (0)");
 193         } else {
 194           is(sheet.cssRules.length, 1,
 195              testset[curTest].rule + " rule count (1 non-fontface)");
 196           isnot(sheet.cssRules[0].type, 5 /*FONT_FACE_RULE*/,
 197                 testset[curTest].rule + " rule type (1 non-fontface)");
 198         }
 199       }
 200     } catch (e) {
 201       ok(false, testset[curTest].rule, "During test: " + e);
 202     }
 203   }
 204 </script>
 205 </body>
 206 </html>