Merge pull request #165 from ovanderzee/text-placement

Text placement, aligning and decoration

Author: frvge

src/css/Properties.js

@@ -9,7 +9,7 @@ var Properties = {
     "-webkit-align-content"         : "flex-start | flex-end | center | space-between | space-around | stretch",
     "-webkit-align-self"            : "auto | flex-start | flex-end | center | baseline | stretch",
     "alignment-adjust"              : "auto | baseline | before-edge | text-before-edge | middle | central | after-edge | text-after-edge | ideographic | alphabetic | hanging | mathematical | <percentage> | <length>",
-    "alignment-baseline"            : "baseline | use-script | before-edge | text-before-edge | after-edge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical",
+    "alignment-baseline"            : "auto | baseline | use-script | before-edge | text-before-edge | after-edge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical | inherit",
     "animation"                     : 1,
     "animation-delay"               : { multi: "<time>", comma: true },
     "animation-direction"           : { multi: "normal | alternate", comma: true },
@@ -272,7 +272,7 @@ var Properties = {
     //D
     "direction"                     : "ltr | rtl | inherit",
     "display"                       : "inline | block | list-item | inline-block | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | grid | inline-grid | run-in | ruby | ruby-base | ruby-text | ruby-base-container | ruby-text-container | contents | none | inherit | -moz-box | -moz-inline-block | -moz-inline-box | -moz-inline-grid | -moz-inline-stack | -moz-inline-table | -moz-grid | -moz-grid-group | -moz-grid-line | -moz-groupbox | -moz-deck | -moz-popup | -moz-stack | -moz-marker | -webkit-box | -webkit-inline-box | -ms-flexbox | -ms-inline-flexbox | flex | -webkit-flex | inline-flex | -webkit-inline-flex",
-    "dominant-baseline"             : 1,
+    "dominant-baseline"             : "auto | use-script | no-change | reset-size | ideographic | alphabetic | hanging | mathematical | central | middle | text-after-edge | text-before-edge | inherit",
     "drop-initial-after-adjust"     : "central | middle | after-edge | text-after-edge | ideographic | alphabetic | mathematical | <percentage> | <length>",
     "drop-initial-after-align"      : "baseline | use-script | before-edge | text-before-edge | after-edge | text-after-edge | central | middle | ideographic | alphabetic | hanging | mathematical",
     "drop-initial-before-adjust"    : "before-edge | text-before-edge | central | middle | hanging | mathematical | <percentage> | <length>",
@@ -325,6 +325,8 @@ var Properties = {
     "font-weight"                   : "normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit",
 
     //G
+    "glyph-orientation-horizontal"  : "<glyph-angle> | inherit",
+    "glyph-orientation-vertical"    : "auto | <glyph-angle> | inherit",
     "grid"                          : 1,
     "grid-area"                     : 1,
     "grid-auto-columns"             : 1,
@@ -494,9 +496,10 @@ var Properties = {
     "target-name"                   : 1,
     "target-new"                    : 1,
     "target-position"               : 1,
+    "text-anchor"                   : "start | middle | end | inherit",
     "text-align"                    : "left | right | center | justify | match-parent | start | end | inherit" ,
     "text-align-last"               : 1,
-    "text-decoration"               : 1,
+    "text-decoration"               : "none | <text-decoration> | inherit",
     "text-emphasis"                 : 1,
     "text-height"                   : 1,
     "text-indent"                   : "<length> | <percentage> | inherit",

src/css/ValidationTypes.js

@@ -148,6 +148,10 @@ var ValidationTypes = {
             return part.type === "angle";
         },
 
+        "<glyph-angle>": function(part){
+            return part.type == "angle" && part.units == 'deg';
+        },
+
         "<uri>": function(part){
             return part.type === "uri";
         },
@@ -460,6 +464,33 @@ var ValidationTypes = {
                 throw new ValidationError("Expected (none | [ <flex-grow> <flex-shrink>? || <flex-basis> ]) but found '" + expression.value.text + "'.", part.line, part.col);
             }
 
+            return result;
+        },
+
+        "<text-decoration>": function(expression) {
+            // none | [ underline || overline || line-through || blink ] | inherit
+            var part,
+                result,
+                someOf = "[ underline || overline || line-through || blink ]",
+                identifiers = {},
+                found;
+
+            do {
+                part = expression.next();
+                found = 0;
+                if (someOf.indexOf(part) > -1) {
+                    if (!identifiers[part]) {
+                        identifiers[part] = 0;
+                    }
+                    identifiers[part]++;
+                    found = identifiers[part];
+                }
+            } while (found == 1 && expression.hasNext());
+
+            result = found == 1 && !expression.hasNext();
+            if (found === 0 && JSON.stringify(identifiers) == '{}') {
+               expression.previous();
+            }
             return result;
         }
     }

tests/css/Validation.js

@@ -863,6 +863,57 @@
         }));
     });
 
+    suite.add(new ValidationTestCase({
+        property: "glyph-orientation-horizontal",
+
+        valid: [
+            "-43deg",
+            ".7deg",
+            "90deg",
+            "521deg",
+            "inherit"
+        ],
+
+        invalid: {
+            "auto" : "Expected (<glyph-angle> | inherit) but found 'auto'.",
+            "70rad" : "Expected (<glyph-angle> | inherit) but found '70rad'.",
+            "4grad" : "Expected (<glyph-angle> | inherit) but found '4grad'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "glyph-orientation-vertical",
+
+        valid: [
+            "auto",
+            "-43deg",
+            ".7deg",
+            "90deg",
+            "521deg",
+            "inherit"
+        ],
+
+        invalid: {
+            "70rad" : "Expected (auto | <glyph-angle> | inherit) but found '70rad'.",
+            "4grad" : "Expected (auto | <glyph-angle> | inherit) but found '4grad'."
+        }
+    }));
+
+    suite.add(new ValidationTestCase({
+        property: "text-anchor",
+
+        valid: [
+            "start",
+            "middle",
+            "end",
+            "inherit"
+        ],
+
+        invalid: {
+            "foo" : "Expected (start | middle | end | inherit) but found 'foo'."
+        }
+    }));
+
     suite.add(new ValidationTestCase({
         property: "text-align",
 
@@ -882,6 +933,25 @@
         }
     }));
 
+    suite.add(new ValidationTestCase({
+        property: "text-decoration",
+
+        valid: [
+            "none",
+            "underline",
+            "underline overline line-through blink",
+            "inherit"
+        ],
+
+        invalid: {
+            "none underline" : "Expected end of value but found 'underline'.",
+            "line-through none" : "Expected (none | <text-decoration> | inherit) but found 'line-through none'.",
+            "inherit blink" : "Expected end of value but found 'blink'.",
+            "overline inherit" : "Expected (none | <text-decoration> | inherit) but found 'overline inherit'.",
+            "foo" : "Expected (none | <text-decoration> | inherit) but found 'foo'."
+        }
+    }));
+
     suite.add(new ValidationTestCase({
         property: "text-rendering",