@Keyframes parsing: Use RegExp.lastIndex trick to avoid extracting a substring before matching.

Author: papandreou

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) {
@@ -135,11 +137,9 @@ CSSOM.parse = function parse(token) {
 				buffer += "@import";
 				break;
 			} else {
-				// A @keyframes rule can have an arbitrary vendor prefix, but unfortunately we cannot match a regular expression
-				// against 'token' starting at index 'i'. Extract a substring and match against that:
-				var nextBraceIndex = token.indexOf('{', i);
-				var matchKeyframes = token.substring(i, nextBraceIndex === -1 ? token.length : nextBraceIndex).match(/@((?:-\w+)+-)?keyframes/);
-				if (matchKeyframes) {
+				atKeyframesRegExp.lastIndex = i;
+				var matchKeyframes = atKeyframesRegExp.exec(token);
+				if (matchKeyframes && matchKeyframes.index === i) {
 					state = "keyframesRule-begin";
 					keyframesRule = new CSSOM.CSSKeyframesRule;
 					keyframesRule.__starts = i;

spec/parse.spec.js

@@ -746,6 +746,41 @@ var TESTS = [
 			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() {