Add CSSGroupingRule and CSSConditionRule

NV · Jun 20, 2021 · 6b6de70 · 6b6de70
1 parent 97bee09
commit 6b6de70
Show file tree

Hide file tree

Showing 9 changed files with 134 additions and 18 deletions.
diff --git a/lib/CSSConditionRule.js b/lib/CSSConditionRule.js
@@ -0,0 +1,25 @@
+//.CommonJS
+var CSSOM = {
+  CSSRule: require("./CSSRule").CSSRule,
+  CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule
+};
+///CommonJS
+
+
+/**
+ * @constructor
+ * @see https://www.w3.org/TR/css-conditional-3/#the-cssconditionrule-interface
+ */
+CSSOM.CSSConditionRule = function CSSConditionRule() {
+  CSSOM.CSSGroupingRule.call(this);
+  this.cssRules = [];
+};
+
+CSSOM.CSSConditionRule.prototype = new CSSOM.CSSGroupingRule();
+CSSOM.CSSConditionRule.prototype.constructor = CSSOM.CSSConditionRule;
+CSSOM.CSSConditionRule.prototype.conditionText = ''
+CSSOM.CSSConditionRule.prototype.cssText = ''
+
+//.CommonJS
+exports.CSSConditionRule = CSSOM.CSSConditionRule;
+///CommonJS
diff --git a/lib/CSSGroupingRule.js b/lib/CSSGroupingRule.js
@@ -0,0 +1,68 @@
+//.CommonJS
+var CSSOM = {
+	CSSRule: require("./CSSRule").CSSRule
+};
+///CommonJS
+
+
+/**
+ * @constructor
+ * @see https://drafts.csswg.org/cssom/#the-cssgroupingrule-interface
+ */
+CSSOM.CSSGroupingRule = function CSSGroupingRule() {
+	CSSOM.CSSRule.call(this);
+	this.cssRules = [];
+};
+
+CSSOM.CSSGroupingRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
+
+
+/**
+ * Used to insert a new CSS rule to a list of CSS rules.
+ *
+ * @example
+ *   cssGroupingRule.cssText
+ *   -> "body{margin:0;}"
+ *   cssGroupingRule.insertRule("img{border:none;}", 1)
+ *   -> 1
+ *   cssGroupingRule.cssText
+ *   -> "body{margin:0;}img{border:none;}"
+ *
+ * @param {string} rule
+ * @param {number} [index]
+ * @see https://www.w3.org/TR/cssom-1/#dom-cssgroupingrule-insertrule
+ * @return {number} The index within the grouping rule's collection of the newly inserted rule.
+ */
+ CSSOM.CSSGroupingRule.prototype.insertRule = function insertRule(rule, index) {
+	if (index < 0 || index > this.cssRules.length) {
+		throw new RangeError("INDEX_SIZE_ERR");
+	}
+	var cssRule = CSSOM.parse(rule).cssRules[0];
+	cssRule.parentRule = this;
+	this.cssRules.splice(index, 0, cssRule);
+	return index;
+};
+
+/**
+ * Used to delete a rule from the grouping rule.
+ *
+ *   cssGroupingRule.cssText
+ *   -> "img{border:none;}body{margin:0;}"
+ *   cssGroupingRule.deleteRule(0)
+ *   cssGroupingRule.cssText
+ *   -> "body{margin:0;}"
+ *
+ * @param {number} index within the grouping rule's rule list of the rule to remove.
+ * @see https://www.w3.org/TR/cssom-1/#dom-cssgroupingrule-deleterule
+ */
+ CSSOM.CSSGroupingRule.prototype.deleteRule = function deleteRule(index) {
+	if (index < 0 || index >= this.cssRules.length) {
+		throw new RangeError("INDEX_SIZE_ERR");
+	}
+	this.cssRules.splice(index, 1)[0].parentRule = null;
+};
+
+//.CommonJS
+exports.CSSGroupingRule = CSSOM.CSSGroupingRule;
+///CommonJS
diff --git a/lib/CSSMediaRule.js b/lib/CSSMediaRule.js
@@ -1,6 +1,8 @@
 //.CommonJS
 var CSSOM = {
 	CSSRule: require("./CSSRule").CSSRule,
+	CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
+	CSSConditionRule: require("./CSSConditionRule").CSSConditionRule,
 	MediaList: require("./MediaList").MediaList
 };
 ///CommonJS
@@ -12,26 +14,36 @@ var CSSOM = {
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSMediaRule
  */
 CSSOM.CSSMediaRule = function CSSMediaRule() {
-	CSSOM.CSSRule.call(this);
+	CSSOM.CSSConditionRule.call(this);
 	this.media = new CSSOM.MediaList();
-	this.cssRules = [];
 };
 
-CSSOM.CSSMediaRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSMediaRule.prototype = new CSSOM.CSSConditionRule();
 CSSOM.CSSMediaRule.prototype.constructor = CSSOM.CSSMediaRule;
 CSSOM.CSSMediaRule.prototype.type = 4;
-//FIXME
-//CSSOM.CSSMediaRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
-//CSSOM.CSSMediaRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
 
-// http://opensource.apple.com/source/WebCore/WebCore-658.28/css/CSSMediaRule.cpp
-Object.defineProperty(CSSOM.CSSMediaRule.prototype, "cssText", {
-  get: function() {
-    var cssTexts = [];
-    for (var i=0, length=this.cssRules.length; i < length; i++) {
-      cssTexts.push(this.cssRules[i].cssText);
-    }
-    return "@media " + this.media.mediaText + " {" + cssTexts.join("") + "}";
+// https://opensource.apple.com/source/WebCore/WebCore-7611.1.21.161.3/css/CSSMediaRule.cpp
+Object.defineProperties(CSSOM.CSSMediaRule.prototype, {
+  "conditionText": {
+    get: function() {
+      return this.media.mediaText;
+    },
+    set: function(value) {
+      this.media.mediaText = value;
+    },
+    configurable: true,
+    enumerable: true
+  },
+  "cssText": {
+    get: function() {
+      var cssTexts = [];
+      for (var i=0, length=this.cssRules.length; i < length; i++) {
+        cssTexts.push(this.cssRules[i].cssText);
+      }
+      return "@media " + this.media.mediaText + " {" + cssTexts.join("") + "}";
+    },
+    configurable: true,
+    enumerable: true
   }
 });
 

diff --git a/lib/CSSSupportsRule.js b/lib/CSSSupportsRule.js
@@ -1,6 +1,8 @@
 //.CommonJS
 var CSSOM = {
   CSSRule: require("./CSSRule").CSSRule,
+  CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
+  CSSConditionRule: require("./CSSConditionRule").CSSConditionRule
 };
 ///CommonJS
 
@@ -10,12 +12,10 @@ var CSSOM = {
  * @see https://drafts.csswg.org/css-conditional-3/#the-csssupportsrule-interface
  */
 CSSOM.CSSSupportsRule = function CSSSupportsRule() {
-  CSSOM.CSSRule.call(this);
-  this.conditionText = '';
-  this.cssRules = [];
+  CSSOM.CSSConditionRule.call(this);
 };
 
-CSSOM.CSSSupportsRule.prototype = new CSSOM.CSSRule();
+CSSOM.CSSSupportsRule.prototype = new CSSOM.CSSConditionRule();
 CSSOM.CSSSupportsRule.prototype.constructor = CSSOM.CSSSupportsRule;
 CSSOM.CSSSupportsRule.prototype.type = 12;
 

diff --git a/lib/clone.js b/lib/clone.js
@@ -1,7 +1,10 @@
 //.CommonJS
 var CSSOM = {
 	CSSStyleSheet: require("./CSSStyleSheet").CSSStyleSheet,
+	CSSRule: require("./CSSRule").CSSRule,
 	CSSStyleRule: require("./CSSStyleRule").CSSStyleRule,
+	CSSGroupingRule: require("./CSSGroupingRule").CSSGroupingRule,
+	CSSConditionRule: require("./CSSConditionRule").CSSConditionRule,
 	CSSMediaRule: require("./CSSMediaRule").CSSMediaRule,
 	CSSSupportsRule: require("./CSSSupportsRule").CSSSupportsRule,
 	CSSStyleDeclaration: require("./CSSStyleDeclaration").CSSStyleDeclaration,

diff --git a/lib/index.js b/lib/index.js
@@ -2,6 +2,8 @@
 
 exports.CSSStyleDeclaration = require('./CSSStyleDeclaration').CSSStyleDeclaration;
 exports.CSSRule = require('./CSSRule').CSSRule;
+exports.CSSGroupingRule = require('./CSSGroupingRule').CSSGroupingRule;
+exports.CSSConditionRule = require('./CSSConditionRule').CSSConditionRule;
 exports.CSSStyleRule = require('./CSSStyleRule').CSSStyleRule;
 exports.MediaList = require('./MediaList').MediaList;
 exports.CSSMediaRule = require('./CSSMediaRule').CSSMediaRule;

diff --git a/lib/parse.js b/lib/parse.js
@@ -451,7 +451,9 @@ exports.parse = CSSOM.parse;
 CSSOM.CSSStyleSheet = require("./CSSStyleSheet").CSSStyleSheet;
 CSSOM.CSSStyleRule = require("./CSSStyleRule").CSSStyleRule;
 CSSOM.CSSImportRule = require("./CSSImportRule").CSSImportRule;
+CSSOM.CSSGroupingRule = require("./CSSGroupingRule").CSSGroupingRule;
 CSSOM.CSSMediaRule = require("./CSSMediaRule").CSSMediaRule;
+CSSOM.CSSConditionRule = require("./CSSConditionRule").CSSConditionRule;
 CSSOM.CSSSupportsRule = require("./CSSSupportsRule").CSSSupportsRule;
 CSSOM.CSSFontFaceRule = require("./CSSFontFaceRule").CSSFontFaceRule;
 CSSOM.CSSHostRule = require("./CSSHostRule").CSSHostRule;

diff --git a/spec/parse.spec.js b/spec/parse.spec.js
@@ -728,6 +728,8 @@ var TESTS = [
 							0: "(min-width: 768px)",
 							length: 1
 						},
+						// This is currently incorrect.
+						// conditionText: "(min-width: 768px)",
 						cssRules: [
 							{
 								media: {

diff --git a/src/files.js b/src/files.js
@@ -2,6 +2,8 @@ exports.files = [
 	"CSSStyleDeclaration",
 	"CSSRule",
 	"CSSStyleRule",
+	"CSSGroupingRule",
+	"CSSConditionRule",
 	"MediaList",
 	"CSSMediaRule",
 	"CSSSupportsRule",