@media rules support. #1

http://nv.github.com/CSSOM/test/?%40mediaall%20{} fails.
dylang · Nov 1, 2010 · a4fdfdc · a4fdfdc
1 parent de8d254
commit a4fdfdc
Show file tree

Hide file tree

Showing 3 changed files with 71 additions and 7 deletions.
diff --git a/lib/CSSMediaRule.js b/lib/CSSMediaRule.js
@@ -14,7 +14,6 @@ var CSSOM = {
 CSSOM.CSSMediaRule = function CSSMediaRule() {
 	this.media = new CSSOM.MediaList;
 	this.cssRules = [];
-	this.type = 4;
 };
 
 CSSOM.CSSMediaRule.prototype = new CSSOM.CSSRule;

diff --git a/lib/parse.js b/lib/parse.js
@@ -100,6 +100,8 @@ CSSOM.parse = function parse(token, options) {
 		case "@":
 			if (token.indexOf("@media", i) == 0) {
 				state = "atBlock";
+				i += "media".length;
+				break;
 			} else if (state == "selector") {
 				state = "atRule";
 			}
@@ -114,7 +116,7 @@ CSSOM.parse = function parse(token, options) {
 				state = "name";
 			} else if (state == "atBlock") {
 				mediaRule = new CSSOM.CSSMediaRule;
-				mediaRule.selectorText = buffer.trim();
+				mediaRule.media.mediaText = buffer.trim();
 				currentScope = mediaRule;
 				buffer = "";
 				state = "selector";
@@ -147,7 +149,6 @@ CSSOM.parse = function parse(token, options) {
 				buffer = "";
 				state = "name";
 			} else if (state == "atRule") {
-				//tokens.push(["atRule", buffer]);
 				buffer = "";
 				state = "selector";
 			} else {
@@ -167,6 +168,9 @@ CSSOM.parse = function parse(token, options) {
 			} else if (state == "selector") {
 				// End of media rule.
 				// Nesting of media rules isn't supported
+				if (!mediaRule) {
+					throw "unexpected }";
+				}
 				styleSheet.cssRules.push(mediaRule);
 				currentScope = styleSheet;
 				buffer = "";

diff --git a/test/parse.test.js b/test/parse.test.js
@@ -182,7 +182,8 @@ var TESTS = [
 				}
 			]
 		}
-	}, {
+	},
+	{
 		input: "span {display: inline-block !important; vertical-align: middle !important} .error{color:red!important;}",
 		result: {
 			cssRules: [
@@ -206,15 +207,75 @@ var TESTS = [
 				}
 			]
 		}
-	}, {
-		input: "@media handheld {}",
+	},
+	{
+		input: "@media handheld, only screen and (max-device-width: 480px) {body{max-width:480px}}",
+		result: {
+			cssRules: [
+				{
+					media: {
+						0: "handheld",
+						1: "only screen and (max-device-width: 480px)",
+						length: 2
+					},
+					cssRules: [
+						{
+							selectorText: "body",
+							style: {
+								0: "max-width",
+								"max-width": "480px",
+								length: 1
+							}
+						}
+					]
+				}
+			]
+		}
+	},
+	{
+		input: "@media screen, screen, screen {/* Match Firefox and Opera behavior here rather than WebKit. \nSane person shouldn't write like this anyway. */}",
 		result: {
 			cssRules: [
 				{
-
+					media: {
+						0: "screen",
+						1: "screen",
+						2: "screen",
+						length: 3
+					},
+					cssRules: []
 				}
 			]
 		}
+	},
+	{
+		input: "@media/**/print {*{background:#fff}}",
+		result: {
+			cssRules: [
+				{
+					media: {
+						0: "print",
+						length: 1
+					},
+					cssRules: [
+						{
+							selectorText: "*",
+							style: {
+								0: "background",
+								background: "#fff",
+								length: 1
+							}
+						}
+					]
+				}
+			]
+		}
+	},
+	{
+		input: "@mediaall {}",
+		result: {
+			cssRules: []
+		}
 	}
 ];