Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fix validation of background-position #33

Merged
merged 1 commit into from

2 participants

Michael Mattiacci Nicholas C. Zakas
Michael Mattiacci

Current version of background-position validator doesn't match W3C CSS3 spec.

This update fixes that, but does have one side effect: In some cases, in can output different error messages than it does now (see the output for left center right).

I don't like the count variable, but the version without it was more verbose and less clear to me.

Nicholas C. Zakas
Owner

Looks good to me, thanks!

Nicholas C. Zakas nzakas merged commit aecba50 into from
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Oct 8, 2012
  1. Fix validation of background-position

    Michael Mattiacci authored
This page is out of date. Refresh to see the latest.
Showing with 57 additions and 38 deletions.
  1. +47 −33 src/css/ValidationTypes.js
  2. +10 −5 tests/css/Validation.js
80 src/css/ValidationTypes.js
View
@@ -40,7 +40,7 @@ var ValidationTypes = {
},
/**
- * Determines if the next part(s) of the given expresion
+ * Determines if the next part(s) of the given expression
* are one of a group.
*/
isAnyOfGroup: function(expression, types) {
@@ -187,10 +187,16 @@ var ValidationTypes = {
var types = this,
result = false,
numeric = "<percentage> | <length>",
- xDir = "left | center | right",
- yDir = "top | center | bottom",
- part,
- i, len;
+ xDir = "left | right",
+ yDir = "top | bottom",
+ count = 0,
+ hasNext = function() {
+ return expression.hasNext() && expression.peek() != ",";
+ };
+
+ while (expression.peek(count) && expression.peek(count) != ",") {
+ count++;
+ }
/*
<position> = [
@@ -202,40 +208,48 @@ var ValidationTypes = {
[ center | [ left | right ] [ <percentage> | <length> ]? ] &&
[ center | [ top | bottom ] [ <percentage> | <length> ]? ]
]
+*/
-*/
-
- if (ValidationTypes.isAny(expression, "top | bottom")) {
- result = true;
+ if (count < 3) {
+ if (ValidationTypes.isAny(expression, xDir + " | center | " + numeric)) {
+ result = true;
+ ValidationTypes.isAny(expression, yDir + " | center | " + numeric);
+ } else if (ValidationTypes.isAny(expression, yDir)) {
+ result = true;
+ ValidationTypes.isAny(expression, xDir + " | center");
+ }
} else {
-
- //must be two-part
- if (ValidationTypes.isAny(expression, numeric)){
- if (expression.hasNext()){
- result = ValidationTypes.isAny(expression, numeric + " | " + yDir);
- }
- } else if (ValidationTypes.isAny(expression, xDir)){
- if (expression.hasNext()){
-
- //two- or three-part
- if (ValidationTypes.isAny(expression, yDir)){
+ if (ValidationTypes.isAny(expression, xDir)) {
+ if (ValidationTypes.isAny(expression, yDir)) {
+ result = true;
+ ValidationTypes.isAny(expression, numeric);
+ } else if (ValidationTypes.isAny(expression, numeric)) {
+ if (ValidationTypes.isAny(expression, yDir)) {
result = true;
-
ValidationTypes.isAny(expression, numeric);
-
- } else if (ValidationTypes.isAny(expression, numeric)){
-
- //could also be two-part, so check the next part
- if (ValidationTypes.isAny(expression, yDir)){
- ValidationTypes.isAny(expression, numeric);
- }
-
+ } else if (ValidationTypes.isAny(expression, "center")) {
result = true;
}
}
- }
- }
-
+ } else if (ValidationTypes.isAny(expression, yDir)) {
+ if (ValidationTypes.isAny(expression, xDir)) {
+ result = true;
+ ValidationTypes.isAny(expression, numeric);
+ } else if (ValidationTypes.isAny(expression, numeric)) {
+ if (ValidationTypes.isAny(expression, xDir)) {
+ result = true;
+ ValidationTypes.isAny(expression, numeric);
+ } else if (ValidationTypes.isAny(expression, "center")) {
+ result = true;
+ }
+ }
+ } else if (ValidationTypes.isAny(expression, "center")) {
+ if (ValidationTypes.isAny(expression, xDir + " | " + yDir)) {
+ result = true;
+ ValidationTypes.isAny(expression, numeric);
+ }
+ }
+ }
return result;
},
@@ -339,4 +353,4 @@ var ValidationTypes = {
return result;
}
}
-};
+};
15 tests/css/Validation.js
View
@@ -153,23 +153,28 @@
"top",
"bottom",
"center",
+ "100%",
"left center",
+ "bottom left",
"left 10px",
"center bottom",
"10% top",
"left 10px bottom",
"right top 5%",
- "center 3em center 10%",
+ "top 3em center",
+ "center top 3em",
+ "top 3em right 10%",
"top, bottom",
"left 10px, left 10px",
"right top 5%, left 10px bottom"
],
invalid: {
- "foo" : "Expected (<bg-position>) but found 'foo'.",
- "left center right" : "Expected end of value but found 'right'."
-
- }
+ "foo" : "Expected (<bg-position>) but found 'foo'.",
+ "10% left" : "Expected end of value but found 'left'.",
+ "left center right" : "Expected end of value but found 'center'.",
+ "center 3em right 10%": "Expected end of value but found '3em'.",
+ }
}));
suite.add(new ValidationTestCase({
Something went wrong with that request. Please try again.