From 6b6de7085ca7e5e13bd534120fea545e88ea0f83 Mon Sep 17 00:00:00 2001 From: Jonathan Neal Date: Mon, 14 Jun 2021 14:04:26 -0400 Subject: [PATCH] Add CSSGroupingRule and CSSConditionRule --- lib/CSSConditionRule.js | 25 +++++++++++++++ lib/CSSGroupingRule.js | 68 +++++++++++++++++++++++++++++++++++++++++ lib/CSSMediaRule.js | 40 +++++++++++++++--------- lib/CSSSupportsRule.js | 8 ++--- lib/clone.js | 3 ++ lib/index.js | 2 ++ lib/parse.js | 2 ++ spec/parse.spec.js | 2 ++ src/files.js | 2 ++ 9 files changed, 134 insertions(+), 18 deletions(-) create mode 100644 lib/CSSConditionRule.js create mode 100644 lib/CSSGroupingRule.js diff --git a/lib/CSSConditionRule.js b/lib/CSSConditionRule.js new file mode 100644 index 0000000..8d77efa --- /dev/null +++ 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 new file mode 100644 index 0000000..4555aba --- /dev/null +++ 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 index 367a35e..176d134 100644 --- 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 index 19f85d4..84854cd 100644 --- 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 index c6867f2..a4162ad 100644 --- 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 index e14826c..2098109 100644 --- 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 index 450df31..038ab01 100644 --- 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 index d66b153..32e509a 100644 --- 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 index d7cdaa1..12563c2 100644 --- a/src/files.js +++ b/src/files.js @@ -2,6 +2,8 @@ exports.files = [ "CSSStyleDeclaration", "CSSRule", "CSSStyleRule", + "CSSGroupingRule", + "CSSConditionRule", "MediaList", "CSSMediaRule", "CSSSupportsRule",