Merge pull request #32 from papandreou/morekeyframes

Support for @Keyframes and @-moz-keyframes rules.

Author: Nikita Vasilyev

lib/CSSKeyframesRule.js

@@ -28,7 +28,7 @@ CSSOM.CSSKeyframesRule.prototype.__defineGetter__("cssText", function() {
 	for (var i=0, length=this.cssRules.length; i < length; i++) {
 		cssTexts.push("  " + this.cssRules[i].cssText);
 	}
-	return "@-webkit-keyframes " + this.name + " { \n" + cssTexts.join("\n") + "\n}";
+	return "@" + (this._vendorPrefix || '') + "keyframes " + this.name + " { \n" + cssTexts.join("\n") + "\n}";
 });
 
 

lib/parse.js

@@ -52,6 +52,8 @@ CSSOM.parse = function parse(token) {
 
 	var selector, name, value, priority="", styleRule, mediaRule, importRule, keyframesRule, keyframeRule;
 
+	var atKeyframesRegExp = /@(-(?:\w+-)+)?keyframes/g;
+
 	for (var character; character = token.charAt(i); i++) {
 
 		switch (character) {
@@ -134,15 +136,20 @@ CSSOM.parse = function parse(token) {
 				i += "import".length;
 				buffer += "@import";
 				break;
-			} else if (token.indexOf("@-webkit-keyframes", i) === i) {
-				state = "keyframesRule-begin";
-				keyframesRule = new CSSOM.CSSKeyframesRule;
-				keyframesRule.__starts = i;
-				i += "-webkit-keyframes".length;
-				buffer = "";
-				break;
-			} else if (state === "selector") {
-				state = "atRule";
+			} else {
+				atKeyframesRegExp.lastIndex = i;
+				var matchKeyframes = atKeyframesRegExp.exec(token);
+				if (matchKeyframes && matchKeyframes.index === i) {
+					state = "keyframesRule-begin";
+					keyframesRule = new CSSOM.CSSKeyframesRule;
+					keyframesRule.__starts = i;
+					keyframesRule._vendorPrefix = matchKeyframes[1]; // Will come out as undefined if no prefix was found
+					i += matchKeyframes[0].length - 1;
+					buffer = "";
+					break;
+				} else if (state == "selector") {
+					state = "atRule";
+				}
 			}
 			buffer += character;
 			break;

spec/parse.spec.js

@@ -707,13 +707,134 @@ var TESTS = [
 			return result;
 		})()
 	},
+	{
+		// Non-vendor prefixed @keyframes rule, from Twitter Bootstrap (progress-bars):
+		input: '@keyframes progress-bar-stripes {\n  from  { background-position: 0 0; }\n  to    { background-position: 40px 0; }\n}',
+		result: (function () {
+			var result = {
+				cssRules: [
+					{
+						name: "progress-bar-stripes",
+						_vendorPrefix: undefined,
+						cssRules: [
+							{
+								keyText: "from",
+								style: {
+									0: "background-position",
+									'background-position': "0 0",
+									length: 1
+								}
+							},
+							{
+								keyText: "to",
+								style: {
+									0: "background-position",
+									'background-position': "40px 0",
+									length: 1
+								}
+							}
+						],
+						parentRule: null
+					}
+				],
+				parentStyleSheet: null
+			};
+			result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[1].parentStyleSheet = result;
+			result.cssRules[0].cssRules[0].parentRule = result.cssRules[0].cssRules[1].parentRule = result.cssRules[0];
+			result.cssRules[0].cssRules[0].style.parentRule = result.cssRules[0].cssRules[0];
+			result.cssRules[0].cssRules[1].style.parentRule = result.cssRules[0].cssRules[1];
+			return result;
+		})()
+	},
+	{
+		// @keyframes with invalid vendor prefix followed by a valid one (make sure that the RegExp.lastIndex trick works as expected):
+		input: '@-moz-keyframes foo {} @--keyframes bar {} @-webkit-keyframes quux {}',
+		result: (function () {
+			var result = {
+				cssRules: [
+					{
+						name: "foo",
+						_vendorPrefix: "-moz-",
+						cssRules: [],
+						parentRule: null
+					},
+					{
+						selectorText: "@--keyframes bar",
+						style: {
+							length: 0
+						},
+						parentRule: null,
+						__starts: 0,
+						__ends: 14
+					},
+					{
+						name: "quux",
+						_vendorPrefix: "-webkit-",
+						cssRules: [],
+						parentRule: null
+					}
+				],
+				parentStyleSheet: null
+			};
+			result.cssRules[0].parentStyleSheet = result.cssRules[1].parentStyleSheet = result.cssRules[2].parentStyleSheet = result;
+			result.cssRules[1].style.parentRule = result.cssRules[1];
+			return result;
+		})()
+	},
+	{
+		input: "@-some-ridiculously-long-vendor-prefix-that-must-be-supported-keyframes therulename /*comment*/{0%{top:0px; left:0px; background:red;}100% {top:4em; left:40px; background:maroon;}}",
+		result: (function() {
+			var result = {
+				cssRules: [
+					{
+						name: "therulename",
+						_vendorPrefix: '-some-ridiculously-long-vendor-prefix-that-must-be-supported-',
+						cssRules: [
+							{
+								keyText: "0%",
+								style: {
+									0: "top",
+									1: "left",
+									2: "background",
+									top: "0px",
+									left: "0px",
+									background: "red",
+									length: 3
+								}
+							},
+							{
+								keyText: "100%",
+								style: {
+									0: "top",
+									1: "left",
+									2: "background",
+									top: "4em",
+									left: "40px",
+									background: "maroon",
+									length: 3
+								}
+							}
+						],
+						parentRule: null
+					}
+				],
+				parentStyleSheet: null
+			};
+			result.cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[0].parentStyleSheet = result.cssRules[0].cssRules[1].parentStyleSheet = result;
+			result.cssRules[0].cssRules[0].parentRule = result.cssRules[0].cssRules[1].parentRule = result.cssRules[0];
+			result.cssRules[0].cssRules[0].style.parentRule = result.cssRules[0].cssRules[0];
+			result.cssRules[0].cssRules[1].style.parentRule = result.cssRules[0].cssRules[1];
+			return result;
+		})()
+	},
 	{
 		input: "@-webkit-keyframes mymove {\nfrom {top:0px}\nto {top:200px}\n}",
 		result: (function() {
 			var result = {
 				cssRules: [
 					{
 						name: "mymove",
+						_vendorPrefix: '-webkit-',
 						cssRules: [
 							{
 								keyText: "from",
@@ -751,6 +872,7 @@ var TESTS = [
 				cssRules: [
 					{
 						name: "mymovepercent",
+						_vendorPrefix: '-webkit-',
 						cssRules: [
 							{
 								keyText: "0%",
@@ -813,7 +935,7 @@ describe('parse', function() {
 });
 
 /**
- * Recurcively remove all keys which start with '_'
+ * Recursively remove all keys which start with '_', except "_vendorPrefix", which needs to be tested against.
  * @param {Object} object
  */
 function removeUnderscored(object) {
@@ -823,7 +945,7 @@ function removeUnderscored(object) {
 	var keys = Object.keys(object);
 	for (var i = 0, length = keys.length; i < length; i++) {
 		var key = keys[i];
-		if (key[0] === '_') {
+		if (key[0] === '_' && key !== '_vendorPrefix') {
 			delete object[key];
 		} else {
 			var value = object[key];