Validate font-family and the font compound property.

Onno van der Zee · cscott · commit 2029acc7584e · 2016-02-05T14:51:51.000-05:00
This uses the Matcher framework to handle a fairly-complex shorthand property. This patch is based on a patch set by Onno van der Zee, originally submitted as PR #164. Using the Matcher framework allowed the original implementation to be greatly simplified, but many of the test cases are from the original patch set.
diff --git a/src/css/Properties.js b/src/css/Properties.js
@@ -313,18 +313,22 @@ var Properties = {
     "-ms-flex-wrap"                 : "nowrap | wrap | wrap-reverse",
     "float"                         : "left | right | none | inherit",
     "float-offset"                  : 1,
-    "font"                          : 1,
-    "font-family"                   : 1,
+    "font"                          : "<font-shorthand> | caption | icon | menu | message-box | small-caption | status-bar | inherit",
+    "font-family"                   : "<font-family> | inherit",
     "font-feature-settings"         : "<feature-tag-value> | normal | inherit",
     "font-kerning"                  : "auto | normal | none | initial | inherit | unset",
-    "font-size"                     : "<absolute-size> | <relative-size> | <length> | <percentage> | inherit",
+    "font-size"                     : "<font-size> | inherit",
     "font-size-adjust"              : "<number> | none | inherit",
-    "font-stretch"                  : "normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit",
-    "font-style"                    : "normal | italic | oblique | inherit",
-    "font-variant"                  : "normal | small-caps | inherit",
-    "font-variant-caps"             : "normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps",
+    "font-stretch"                  : "<font-stretch> | inherit",
+    "font-style"                    : "<font-style> | inherit",
+    "font-variant"                  : "<font-variant> | normal | none | inherit",
+    "font-variant-alternates"       : "<font-variant-alternates> | normal | inherit",
+    "font-variant-caps"             : "<font-variant-caps> | normal | inherit",
+    "font-variant-east-asian"       : "<font-variant-east-asian> | normal | inherit",
+    "font-variant-ligatures"        : "<font-variant-ligatures> | normal | none | inherit",
+    "font-variant-numeric"          : "<font-variant-numeric> | normal | inherit",
     "font-variant-position"         : "normal | sub | super | inherit | initial | unset",
-    "font-weight"                   : "normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit",
+    "font-weight"                   : "<font-weight> | inherit",
 
     //G
     "glyph-orientation-horizontal"  : "<glyph-angle> | inherit",
@@ -382,7 +386,7 @@ var Properties = {
     //L
     "left"                          : "<margin-width> | inherit",
     "letter-spacing"                : "<length> | normal | inherit",
-    "line-height"                   : "<number> | <length> | <percentage> | normal | inherit",
+    "line-height"                   : "<line-height> | inherit",
     "line-break"                    : "auto | loose | normal | strict",
     "line-stacking"                 : 1,
     "line-stacking-ruby"            : "exclude-ruby | include-ruby",
diff --git a/src/css/ValidationTypes.js b/src/css/ValidationTypes.js
@@ -387,6 +387,10 @@ ValidationTypes = {
                 !/^(unset|initial|inherit|will-change|auto|scroll-position|contents)$/i.test(part);
         },
 
+        "<string>": function(part){
+            return part.type === "string";
+        },
+
         "<length>": function(part){
             if (part.type === "function" && /^(?:\-(?:ms|moz|o|webkit)\-)?calc/i.test(part)){
                 return true;
@@ -507,6 +511,36 @@ ValidationTypes = {
         "<filter-function>": function(part){
             // custom() isn't actually in the spec
             return ValidationTypes.isLiteral(part, "blur() | brightness() | contrast() | custom() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia()");
+        },
+
+        "<generic-family>": function(part){
+            return ValidationTypes.isLiteral(part, "serif | sans-serif | cursive | fantasy | monospace");
+        },
+
+        "<ident-not-generic-family>": function(part){
+            return this["<ident>"](part) && !this["<generic-family>"](part);
+        },
+
+        "<font-size>": function(part){
+            var result = this["<absolute-size>"](part) || this["<relative-size>"](part) || this["<length>"](part) || this["<percentage>"](part);
+            return result;
+        },
+
+        "<font-stretch>": function(part){
+            return ValidationTypes.isLiteral(part, "normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded");
+        },
+
+        "<font-style>": function(part){
+            return ValidationTypes.isLiteral(part, "normal | italic | oblique");
+        },
+
+        "<font-weight>": function(part){
+            return ValidationTypes.isLiteral(part, "normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900");
+        },
+
+        "<line-height>": function(part){
+            var result = this["<number>"](part) || this["<length>"](part) || this["<percentage>"](part) || ValidationTypes.isLiteral(part, "normal");
+            return result;
         }
     },
 
@@ -584,6 +618,73 @@ ValidationTypes = {
         // * inherit
         Matcher.alt("none", "inherit", Matcher.cast("<flex-grow>").then(Matcher.cast("<flex-shrink>").question()).oror("<flex-basis>")),
 
+        "<font-family>":
+        // [ <family-name> | <generic-family> ]#
+        Matcher.cast("<generic-family> | <family-name>").hash(),
+
+        "<family-name>":
+        // <string> | <IDENT>+
+        Matcher.alt("<string>",
+                    Matcher.seq("<ident-not-generic-family>",
+                                Matcher.cast("<ident>").star())),
+
+        "<font-variant-alternates>":
+        Matcher.oror(// stylistic(<feature-value-name>)
+                     "stylistic()",
+                     "historical-forms",
+                     // styleset(<feature-value-name> #)
+                     "styleset()",
+                     // character-variant(<feature-value-name> #)
+                     "character-variant()",
+                     // swash(<feature-value-name>)
+                     "swash()",
+                     // ornaments(<feature-value-name>)
+                     "ornaments()",
+                     // annotation(<feature-value-name>)
+                     "annotation()"),
+
+        "<font-variant-caps>":
+        Matcher.cast("small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps"),
+
+        "<font-variant-css21>":
+        Matcher.cast("normal | small-caps"),
+
+        "<font-variant-ligatures>":
+        Matcher.oror(// <common-lig-values>
+                     "common-ligatures | no-common-ligatures",
+                     // <discretionary-lig-values>
+                     "discretionary-ligatures | no-discretionary-ligatures",
+                     // <historical-lig-values>
+                     "historical-ligatures | no-historical-ligatures",
+                     // <contextual-alt-values>
+                     "contextual | no-contextual"),
+
+        "<font-variant-numeric>":
+        Matcher.oror(// <numeric-figure-values>
+                     "lining-nums | oldstyle-nums",
+                     // <numeric-spacing-values>
+                     "proportional-nums | tabular-nums",
+                     // <numeric-fraction-values>
+                     "diagonal-fractions | stacked-fractions",
+                     "ordinal",
+                     "slashed-zero"),
+
+        "<font-variant-east-asian>":
+        Matcher.oror(// <east-asian-variant-values>
+                     "jis78 | jis83 | jis90 | jis04 | simplified | traditional",
+                     // <east-asian-width-values>
+                     "full-width | proportional-width",
+                     "ruby"),
+
+        "<font-shorthand>":
+        Matcher.seq(Matcher.oror("<font-style>",
+                                 "<font-variant-css21>",
+                                 "<font-weight>",
+                                 "<font-stretch>").question(),
+                    "<font-size>",
+                    Matcher.seq("/", "<line-height>").question(),
+                    "<font-family>"),
+
         "<text-decoration>":
         // none | [ underline || overline || line-through || blink ] | inherit
         Matcher.oror("underline", "overline", "line-through", "blink"),
@@ -593,3 +694,12 @@ ValidationTypes = {
         Matcher.alt("auto", Matcher.cast("<animateable-feature>").hash())
     }
 };
+
+// Because this is defined relative to other complex validation types,
+// we need to define it *after* the rest of the types are initialized.
+ValidationTypes.complex["<font-variant>"] =
+    Matcher.oror({ expand: "<font-variant-ligatures>" },
+                 { expand: "<font-variant-alternates>" },
+                 "<font-variant-caps>",
+                 { expand: "<font-variant-numeric>" },
+                 { expand: "<font-variant-east-asian>" });
diff --git a/tests/css/Validation.js b/tests/css/Validation.js
@@ -735,7 +735,154 @@
         }
     }));
 
+    suite.add(new ValidationTestCase({
+        property: "font",
+
+        valid: [
+            "italic small-caps 300 1.3em/10% Genova, 'Comic Sans', sans-serif",
+            "1.3em Shorties, sans-serif",
+            "12px monospace",
+            "caption",
+            "status-bar",
+            "12pt/14pt sans-serif",
+            "80% sans-serif",
+            "condensed 80% sans-serif",
+            "x-large/110% \"new century schoolbook\", serif",
+            "bold italic large Palatino, serif",
+            "normal small-caps 120%/120% fantasy",
+            "normal normal normal normal 12pt cursive",
+            "normal bold small-caps italic 18px 'font'",
+            "condensed oblique 12pt \"Helvetica Neue\", serif",
+            "inherit",
+        ],
+
+        invalid: {
+            "italic oblique bold 1.3em/10% Genova, 'Comic Sans', sans-serif" : "Expected (<font-shorthand> | caption | icon | menu | message-box | small-caption | status-bar | inherit) but found 'italic oblique bold 1.3em / 10% Genova , 'Comic Sans' , sans-serif'.",
+            "0.9em Nirwana, 'Comic Sans', sans-serif bold" : "Expected end of value but found 'bold'.",
+            "'Helvetica Neue', sans-serif 1.2em" : "Expected (<font-shorthand> | caption | icon | menu | message-box | small-caption | status-bar | inherit) but found ''Helvetica Neue' , sans-serif 1.2em'.",
+            "1.3em" : "Expected (<font-shorthand> | caption | icon | menu | message-box | small-caption | status-bar | inherit) but found '1.3em'.",
+            "cursive;" : "Expected (<font-shorthand> | caption | icon | menu | message-box | small-caption | status-bar | inherit) but found 'cursive'.",
+            "'Dormant', sans-serif;" : "Expected (<font-shorthand> | caption | icon | menu | message-box | small-caption | status-bar | inherit) but found ''Dormant' , sans-serif'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "font-family",
+
+        valid: [
+            "Futura, sans-serif",
+            "-Futura, sans-serif",
+            '"New Century Schoolbook", serif',
+            "'21st Century', fantasy",
+            "serif",
+            "sans-serif",
+            "cursive",
+            "fantasy",
+            "monospace",
+            // solve problem by quoting
+            "'Red/Black', sans-serif",
+            '"Lucida\\", Grande", sans-serif',
+            "'Ahem!}', sans-serif",
+            '"test@foo", sans-serif',
+            "'#POUND', sans-serif",
+            "'Hawaii 5-0', sans-serif",
+            // solve problem by escaping
+            "Red\\/Black, sans-serif",
+            '\\"Lucida\\", Grande, sans-serif',
+            "Ahem\\!, sans-serif",
+            "test\\@foo, sans-serif",
+            "\\#POUND, sans-serif",
+            "Hawaii\\ 5\\-0, sans-serif",
+            "yellowgreen"
+        ],
 
+        invalid: {
+            "--Futura, sans-serif"   : "Expected (<font-family> | inherit) but found '--Futura , sans-serif'.",
+            "Red/Black, sans-serif"  : "Expected end of value but found '/'.",
+            "'Lucida' Grande, sans-serif" : "Expected end of value but found 'Grande'.",
+            "Hawaii 5-0, sans-serif" : "Expected end of value but found '5'."
+        },
+
+        error: {
+            "47Futura, sans-serif" : "Unexpected token '47Futura' at line 1, col 20.",
+            "-7Futura, sans-serif" : "Unexpected token '7Futura' at line 1, col 21.",
+            "Ahem!, sans-serif"    : "Expected RBRACE at line 1, col 24.",
+            "test@foo, sans-serif" : "Expected RBRACE at line 1, col 24.",
+            "#POUND, sans-serif"   : "Expected a hex color but found '#POUND' at line 1, col 20."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "font-style",
+
+        valid: [
+            "normal", "italic", "oblique",
+            "inherit"
+        ]
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "font-variant",
+
+        valid: [
+            "normal", "none", "small-caps", "common-ligatures small-caps",
+            "inherit"
+        ]
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "font-variant-alternates",
+
+        valid: [
+            "normal", "historical-forms",
+            "stylistic(salt) styleset(ss01, ss02)",
+            "character-variant(cv03, cv04, cv05) swash(swsh)",
+            "ornaments(ornm2) annotation(nalt2)",
+            "inherit"
+        ]
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "font-variant-caps",
+
+        valid: [
+            "normal", "small-caps", "all-small-caps", "petite-caps",
+            "all-petite-caps", "unicase", "titling-caps", "inherit"
+        ]
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "font-variant-east-asian",
+
+        valid: [
+            "normal", "ruby", "jis78", "jis83", "jis90", "jis04",
+            "simplified", "traditional", "full-width", "proportional-width",
+            "ruby full-width jis83",
+            "inherit"
+        ]
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "font-variant-ligatures",
+
+        valid: [
+            "normal", "none",
+            "common-ligatures discretionary-ligatures historical-ligatures contextual",
+            "no-common-ligatures no-discretionary-ligatures no-historical-ligatures no-contextual",
+            "inherit"
+        ]
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "font-variant-numeric",
+
+        valid: [
+            "normal", "ordinal", "slashed-zero", "lining-nums",
+            "lining-nums proportional-nums diagonal-fractions ordinal",
+            "oldstyle-nums tabular-nums stacked-fractions slashed-zero",
+            "inherit"
+        ]
+    }));
 
     suite.add(new ValidationTestCase({
         property: "min-height",
