@acemir/cssom 0.9.16 → 0.9.18

package/build/CSSOM.js

@@ -1,6 +1,112 @@
 var CSSOM = {};
 
 
+// Utility functions for CSSOM error handling
+
+/**
+ * Gets the appropriate error constructor from the global object context.
+ * Tries to find the error constructor from parentStyleSheet.__globalObject,
+ * then from __globalObject, then falls back to the native constructor.
+ * 
+ * @param {Object} context - The CSSOM object (rule, stylesheet, etc.)
+ * @param {string} errorType - The error type ('TypeError', 'RangeError', 'DOMException', etc.)
+ * @return {Function} The error constructor
+ */
+function getErrorConstructor(context, errorType) {
+	// Try parentStyleSheet.__globalObject first
+	if (context.parentStyleSheet && context.parentStyleSheet.__globalObject && context.parentStyleSheet.__globalObject[errorType]) {
+		return context.parentStyleSheet.__globalObject[errorType];
+	}
+	
+	// Try __parentStyleSheet (alternative naming)
+	if (context.__parentStyleSheet && context.__parentStyleSheet.__globalObject && context.__parentStyleSheet.__globalObject[errorType]) {
+		return context.__parentStyleSheet.__globalObject[errorType];
+	}
+	
+	// Try __globalObject on the context itself
+	if (context.__globalObject && context.__globalObject[errorType]) {
+		return context.__globalObject[errorType];
+	}
+	
+	// Fall back to native constructor
+	return (typeof global !== 'undefined' && global[errorType]) || 
+	       (typeof window !== 'undefined' && window[errorType]) || 
+	       eval(errorType);
+}
+
+/**
+ * Creates and throws an appropriate error with context-aware constructor.
+ * 
+ * @param {Object} context - The CSSOM object (rule, stylesheet, etc.)
+ * @param {string} errorType - The error type ('TypeError', 'RangeError', 'DOMException', etc.)
+ * @param {string} message - The error message
+ * @param {string} [name] - Optional name for DOMException
+ */
+function throwError(context, errorType, message, name) {
+	var ErrorConstructor = getErrorConstructor(context, errorType);
+	var error = new ErrorConstructor(message, name);
+	throw error;
+}
+
+/**
+ * Throws a TypeError for missing required arguments.
+ * 
+ * @param {Object} context - The CSSOM object
+ * @param {string} methodName - The method name (e.g., 'appendRule')
+ * @param {string} objectName - The object name (e.g., 'CSSKeyframesRule')
+ * @param {number} [required=1] - Number of required arguments
+ * @param {number} [provided=0] - Number of provided arguments
+ */
+function throwMissingArguments(context, methodName, objectName, required, provided) {
+	required = required || 1;
+	provided = provided || 0;
+	var message = "Failed to execute '" + methodName + "' on '" + objectName + "': " + 
+	              required + " argument" + (required > 1 ? "s" : "") + " required, but only " + 
+	              provided + " present.";
+	throwError(context, 'TypeError', message);
+}
+
+/**
+ * Throws a DOMException for parse errors.
+ * 
+ * @param {Object} context - The CSSOM object
+ * @param {string} methodName - The method name
+ * @param {string} objectName - The object name
+ * @param {string} rule - The rule that failed to parse
+ * @param {string} [name='SyntaxError'] - The DOMException name
+ */
+function throwParseError(context, methodName, objectName, rule, name) {
+	var message = "Failed to execute '" + methodName + "' on '" + objectName + "': " +
+	              "Failed to parse the rule '" + rule + "'.";
+	throwError(context, 'DOMException', message, name || 'SyntaxError');
+}
+
+/**
+ * Throws a DOMException for index errors.
+ * 
+ * @param {Object} context - The CSSOM object
+ * @param {string} methodName - The method name
+ * @param {string} objectName - The object name
+ * @param {number} index - The invalid index
+ * @param {number} maxIndex - The maximum valid index
+ * @param {string} [name='IndexSizeError'] - The DOMException name
+ */
+function throwIndexError(context, methodName, objectName, index, maxIndex, name) {
+	var message = "Failed to execute '" + methodName + "' on '" + objectName + "': " +
+	              "The index provided (" + index + ") is larger than the maximum index (" + maxIndex + ").";
+	throwError(context, 'DOMException', message, name || 'IndexSizeError');
+}
+
+var errorUtils = {
+	getErrorConstructor: getErrorConstructor,
+	throwError: throwError,
+	throwMissingArguments: throwMissingArguments,
+	throwParseError: throwParseError,
+	throwIndexError: throwIndexError
+};
+
+
+
 // NOTE: Check viability to add a validation for css values or use a dependency like csstree-validator
 /**
  * Regular expression to detect invalid characters in the value portion of a CSS style declaration.
@@ -179,58 +285,91 @@ CSSOM.CSSStyleDeclaration.prototype = {
 
 
 
+try {
+	CSSOM.CSSStyleDeclaration = require("cssstyle").CSSStyleDeclaration;
+} catch (e) {
+	// ignore
+}
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#the-cssrule-interface
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSRule
  */
 CSSOM.CSSRule = function CSSRule() {
-  this.parentRule = null;
-  this.parentStyleSheet = null;
+  this.__parentRule = null;
+  this.__parentStyleSheet = null;
 };
 
-CSSOM.CSSRule.UNKNOWN_RULE = 0; // obsolete
-CSSOM.CSSRule.STYLE_RULE = 1;
-CSSOM.CSSRule.CHARSET_RULE = 2; // obsolete
-CSSOM.CSSRule.IMPORT_RULE = 3;
-CSSOM.CSSRule.MEDIA_RULE = 4;
-CSSOM.CSSRule.FONT_FACE_RULE = 5;
-CSSOM.CSSRule.PAGE_RULE = 6;
-CSSOM.CSSRule.KEYFRAMES_RULE = 7;
-CSSOM.CSSRule.KEYFRAME_RULE = 8;
-CSSOM.CSSRule.MARGIN_RULE = 9;
-CSSOM.CSSRule.NAMESPACE_RULE = 10;
-CSSOM.CSSRule.COUNTER_STYLE_RULE = 11;
-CSSOM.CSSRule.SUPPORTS_RULE = 12;
-CSSOM.CSSRule.DOCUMENT_RULE = 13;
-CSSOM.CSSRule.FONT_FEATURE_VALUES_RULE = 14;
-CSSOM.CSSRule.VIEWPORT_RULE = 15;
-CSSOM.CSSRule.REGION_STYLE_RULE = 16;
-CSSOM.CSSRule.CONTAINER_RULE = 17;
-CSSOM.CSSRule.LAYER_BLOCK_RULE = 18;
-CSSOM.CSSRule.STARTING_STYLE_RULE = 1002;
-
-CSSOM.CSSRule.prototype = {
-  constructor: CSSOM.CSSRule,
-  //FIXME
-};
+Object.defineProperties(CSSOM.CSSRule.prototype, {
+
+  constructor: { value: CSSOM.CSSRule },
+
+  parentRule: {
+    get: function() {
+      return this.__parentRule
+    }
+  },
+
+  parentStyleSheet: {
+    get: function() {
+      return this.__parentStyleSheet
+    }
+  },
+  
+  UNKNOWN_RULE: { value: 0, enumerable: true }, // obsolet
+  STYLE_RULE: { value: 1, enumerable: true },
+  CHARSET_RULE: { value: 2, enumerable: true }, // obsolet
+  IMPORT_RULE: { value: 3, enumerable: true },
+  MEDIA_RULE: { value: 4, enumerable: true },
+  FONT_FACE_RULE: { value: 5, enumerable: true },
+  PAGE_RULE: { value: 6, enumerable: true },
+  KEYFRAMES_RULE: { value: 7, enumerable: true },
+  KEYFRAME_RULE: { value: 8, enumerable: true },
+  MARGIN_RULE: { value: 9, enumerable: true },
+  NAMESPACE_RULE: { value: 10, enumerable: true },
+  COUNTER_STYLE_RULE: { value: 11, enumerable: true },
+  SUPPORTS_RULE: { value: 12, enumerable: true },
+  DOCUMENT_RULE: { value: 13, enumerable: true },
+  FONT_FEATURE_VALUES_RULE: { value: 14, enumerable: true },
+  VIEWPORT_RULE: { value: 15, enumerable: true },
+  REGION_STYLE_RULE: { value: 16, enumerable: true },
+  CONTAINER_RULE: { value: 17, enumerable: true },
+  LAYER_BLOCK_RULE: { value: 18, enumerable: true },
+  STARTING_STYLE_RULE: { value: 1002, enumerable: true },
+})
+
+
+
+
 
-exports.CSSRule = CSSOM.CSSRule;
-///CommonJS
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-nesting-1/
  */
 CSSOM.CSSNestedDeclarations = function CSSNestedDeclarations() {
   CSSOM.CSSRule.call(this);
-  this.style = new CSSOM.CSSStyleDeclaration();
-  this.style.parentRule = this;
+  this.__style = new CSSOM.CSSStyleDeclaration();
+  this.__style.parentRule = this;
 };
 
 CSSOM.CSSNestedDeclarations.prototype = new CSSOM.CSSRule();
 CSSOM.CSSNestedDeclarations.prototype.constructor = CSSOM.CSSNestedDeclarations;
 CSSOM.CSSNestedDeclarations.prototype.type = 0;
 
+Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "style", {
+	get: function() {
+		return this.__style;	
+	},
+	set: function(value) {
+		if (typeof value === "string") {
+			this.__style.cssText = value;
+		} else {
+			this.__style = value;
+		}
+	}
+});
+
 Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "cssText", {
   get: function () {
     return this.style.cssText;
@@ -239,6 +378,9 @@ Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "cssText", {
   enumerable: true,
 });
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/cssom/#the-cssgroupingrule-interface
@@ -269,11 +411,42 @@ CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
  * @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");
+	if (rule === undefined && index === undefined) {
+		errorUtils.throwMissingArguments(this, 'insertRule', this.constructor.name);
+	}
+	if (index === void 0) {
+		index = 0;
 	}
-	var cssRule = CSSOM.parse(rule).cssRules[0];
-	cssRule.parentRule = this;
+	index = Number(index);
+	if (index < 0) {
+		index = 4294967296 + index;
+	}
+	if (index > this.cssRules.length) {
+		errorUtils.throwIndexError(this, 'insertRule', this.constructor.name, index, this.cssRules.length);
+	}
+	
+	var ruleToParse = String(rule);
+	var parsedSheet = CSSOM.parse(ruleToParse);
+	if (parsedSheet.cssRules.length !== 1) {
+		errorUtils.throwParseError(this, 'insertRule', this.constructor.name, ruleToParse, 'SyntaxError');
+	}
+	var cssRule = parsedSheet.cssRules[0];
+	
+	// Check for rules that cannot be inserted inside a CSSGroupingRule
+	if (cssRule.constructor.name === 'CSSImportRule' || cssRule.constructor.name === 'CSSNamespaceRule') {
+		var ruleKeyword = cssRule.constructor.name === 'CSSImportRule' ? '@import' : '@namespace';
+		errorUtils.throwError(this, 'DOMException', 
+			"Failed to execute 'insertRule' on '" + this.constructor.name + "': " +
+			"'" + ruleKeyword + "' rules cannot be inserted inside a group rule.",
+			'HierarchyRequestError');
+	}
+	
+	// Check for CSSLayerStatementRule (@layer statement rules)
+	if (cssRule.constructor.name === 'CSSLayerStatementRule') {
+		errorUtils.throwParseError(this, 'insertRule', this.constructor.name, ruleToParse, 'SyntaxError');
+	}
+	
+	cssRule.__parentRule = this;
 	this.cssRules.splice(index, 0, cssRule);
 	return index;
 };
@@ -291,13 +464,23 @@ CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
  * @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");
+	if (index === undefined) {
+		errorUtils.throwMissingArguments(this, 'deleteRule', this.constructor.name);
 	}
-	this.cssRules.splice(index, 1)[0].parentRule = null;
+	index = Number(index);
+	if (index < 0) {
+		index = 4294967296 + index;
+	}
+	if (index >= this.cssRules.length) {
+		errorUtils.throwIndexError(this, 'deleteRule', this.constructor.name, index, this.cssRules.length);
+	}
+	this.cssRules.splice(index, 1)[0].__parentRule = null;
 };
 
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-counter-styles/#the-csscounterstylerule-interface
@@ -312,6 +495,9 @@ CSSOM.CSSCounterStyleRule.prototype.constructor = CSSOM.CSSCounterStyleRule;
 CSSOM.CSSCounterStyleRule.prototype.type = 11;
 
 
+
+
+
 /**
  * @constructor
  * @see https://www.w3.org/TR/css-conditional-3/#the-cssconditionrule-interface
@@ -327,6 +513,9 @@ CSSOM.CSSConditionRule.prototype.conditionText = ''
 CSSOM.CSSConditionRule.prototype.cssText = ''
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#cssstylerule
@@ -334,14 +523,40 @@ CSSOM.CSSConditionRule.prototype.cssText = ''
  */
 CSSOM.CSSStyleRule = function CSSStyleRule() {
 	CSSOM.CSSGroupingRule.call(this);
-	this.selectorText = "";
-	this.style = new CSSOM.CSSStyleDeclaration();
-	this.style.parentRule = this;
+	this.__selectorText = "";
+	this.__style = new CSSOM.CSSStyleDeclaration();
+	this.__style.parentRule = this;
 };
 
 CSSOM.CSSStyleRule.prototype = new CSSOM.CSSGroupingRule();
 CSSOM.CSSStyleRule.prototype.constructor = CSSOM.CSSStyleRule;
-CSSOM.CSSStyleRule.prototype.type = 1;
+
+Object.defineProperty(CSSOM.CSSStyleRule.prototype, "type", {
+	value: 1,
+	writable: false
+});
+
+Object.defineProperty(CSSOM.CSSStyleRule.prototype, "selectorText", {
+	get: function() {
+		return this.__selectorText;	
+	},
+	set: function(value) {
+		this.__selectorText = value;
+	}
+});
+
+Object.defineProperty(CSSOM.CSSStyleRule.prototype, "style", {
+	get: function() {
+		return this.__style;	
+	},
+	set: function(value) {
+		if (typeof value === "string") {
+			this.__style.cssText = value;
+		} else {
+			this.__style = value;
+		}
+	}
+});
 
 Object.defineProperty(CSSOM.CSSStyleRule.prototype, "cssText", {
 	get: function() {
@@ -354,7 +569,7 @@ Object.defineProperty(CSSOM.CSSStyleRule.prototype, "cssText", {
 				valuesArr.push(this.cssRules.map(function(rule){ return rule.cssText }).join("\n  "));
 				values = valuesArr.join("\n  ") + "\n}"
 			} else {
-				values = " { " + this.style.cssText + " }";
+				values = " {" + (this.style.cssText ? " " + this.style.cssText : "") + " }";
 			}
 			text = this.selectorText + values;
 		} else {
@@ -364,8 +579,8 @@ Object.defineProperty(CSSOM.CSSStyleRule.prototype, "cssText", {
 	},
 	set: function(cssText) {
 		var rule = CSSOM.CSSStyleRule.parse(cssText);
-		this.style = rule.style;
-		this.selectorText = rule.selectorText;
+		this.__style = rule.style;
+		this.__selectorText = rule.selectorText;
 	}
 });
 
@@ -516,6 +731,9 @@ CSSOM.CSSStyleRule.parse = function(ruleText) {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#the-medialist-interface
@@ -570,6 +788,9 @@ CSSOM.MediaList.prototype = {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#cssmediarule
@@ -611,6 +832,9 @@ Object.defineProperties(CSSOM.CSSMediaRule.prototype, {
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-contain-3/
@@ -650,6 +874,9 @@ Object.defineProperties(CSSOM.CSSContainerRule.prototype, {
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-conditional-3/#the-csssupportsrule-interface
@@ -675,6 +902,9 @@ Object.defineProperty(CSSOM.CSSSupportsRule.prototype, "cssText", {
 });
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#cssimportrule
@@ -696,7 +926,7 @@ CSSOM.CSSImportRule.prototype.type = 3;
 Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
   get: function() {
     var mediaText = this.media.mediaText;
-    return "@import url(" + this.href + ")" + (this.layerName !== null ? " layer" + (this.layerName && "(" + this.layerName + ")") : "" ) + (this.supportsText ? " supports(" + this.supportsText + ")" : "" ) + (mediaText ? " " + mediaText : "") + ";";
+    return "@import url(\"" + this.href + "\")" + (this.layerName !== null ? " layer" + (this.layerName && "(" + this.layerName + ")") : "" ) + (this.supportsText ? " supports(" + this.supportsText + ")" : "" ) + (mediaText ? " " + mediaText : "") + ";";
   },
   set: function(cssText) {
     var i = 0;
@@ -714,7 +944,7 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
     var index;
 
     var layerRegExp = /layer\(([^)]*)\)/;
-    var layerRuleNameRegExp = /^(-?[_a-zA-Z]+[_a-zA-Z0-9-]*)$/;
+    var layerRuleNameRegExp = /^(-?[_a-zA-Z]+(\.[_a-zA-Z]+)*[_a-zA-Z0-9-]*)$/;
     var supportsRegExp = /supports\(([^)]+)\)/;
     var doubleOrMoreSpacesRegExp = /\s{2,}/g;
 
@@ -797,12 +1027,12 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
 
                 if (layerMatch) {
                   var layerName = layerMatch[1].trim();
-                  bufferTrimmed = bufferTrimmed.replace(layerRegExp, '')
-                    .replace(doubleOrMoreSpacesRegExp, ' ') // Replace double or more spaces with single space
-                    .trim();
 
                   if (layerName.match(layerRuleNameRegExp) !== null) {
                     this.layerName = layerMatch[1].trim();
+                    bufferTrimmed = bufferTrimmed.replace(layerRegExp, '')
+                      .replace(doubleOrMoreSpacesRegExp, ' ') // Replace double or more spaces with single space
+                      .trim();
                   } else {
                     // REVIEW: In the browser, an empty layer() is not processed as a unamed layer
                     // and treats the rest of the string as mediaText, ignoring the parse of supports()
@@ -847,6 +1077,9 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/cssom/#the-cssnamespacerule-interface
@@ -914,14 +1147,17 @@ Object.defineProperty(CSSOM.CSSNamespaceRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#css-font-face-rule
  */
 CSSOM.CSSFontFaceRule = function CSSFontFaceRule() {
 	CSSOM.CSSRule.call(this);
-	this.style = new CSSOM.CSSStyleDeclaration();
-	this.style.parentRule = this;
+	this.__style = new CSSOM.CSSStyleDeclaration();
+	this.__style.parentRule = this;
 };
 
 CSSOM.CSSFontFaceRule.prototype = new CSSOM.CSSRule();
@@ -931,15 +1167,31 @@ CSSOM.CSSFontFaceRule.prototype.type = 5;
 //CSSOM.CSSFontFaceRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
 //CSSOM.CSSFontFaceRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
 
+Object.defineProperty(CSSOM.CSSFontFaceRule.prototype, "style", {
+	get: function() {
+		return this.__style;	
+	},
+	set: function(value) {
+		if (typeof value === "string") {
+			this.__style.cssText = value;
+		} else {
+			this.__style = value;
+		}
+	}
+});
+
 // http://www.opensource.apple.com/source/WebCore/WebCore-955.66.1/css/WebKitCSSFontFaceRule.cpp
 Object.defineProperty(CSSOM.CSSFontFaceRule.prototype, "cssText", {
   get: function() {
-    return "@font-face { " + this.style.cssText + " }";
+    return "@font-face {" + (this.style.cssText ? " " + this.style.cssText : "") + " }";
   }
 });
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/shadow-dom/#host-at-rule
@@ -968,6 +1220,9 @@ Object.defineProperty(CSSOM.CSSHostRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/shadow-dom/#host-at-rule
@@ -996,14 +1251,27 @@ Object.defineProperty(CSSOM.CSSStartingStyleRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#the-stylesheet-interface
  */
 CSSOM.StyleSheet = function StyleSheet() {
-	this.parentStyleSheet = null;
+	this.__parentStyleSheet = null;
 };
 
+Object.defineProperties(CSSOM.StyleSheet.prototype, {
+	parentStyleSheet: {
+		get: function() {
+			return this.__parentStyleSheet;
+		}
+	}
+});
+
+
+
 
 
 /**
@@ -1038,25 +1306,113 @@ CSSOM.CSSStyleSheet.prototype.constructor = CSSOM.CSSStyleSheet;
  */
 CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
 	if (rule === undefined && index === undefined) {
-		throw new (this._globalObject && this._globalObject.TypeError || TypeError)("Failed to execute 'insertRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.")
+		errorUtils.throwMissingArguments(this, 'insertRule', this.constructor.name);
 	}
 	if (index === void 0) {
 		index = 0;
 	}
-	if (index < 0 || index > this.cssRules.length) {
-		throw new (this._globalObject && this._globalObject.RangeError || RangeError)("INDEX_SIZE_ERR");
+	index = Number(index);
+	if (index < 0) {
+		index = 4294967296 + index;
 	}
+	if (index > this.cssRules.length) {
+		errorUtils.throwIndexError(this, 'insertRule', this.constructor.name, index, this.cssRules.length);
+	}
+	
 	var ruleToParse = String(rule);
 	var parsedSheet = CSSOM.parse(ruleToParse);
 	if (parsedSheet.cssRules.length !== 1) {
-		var domExceptionName = "SyntaxError";
-		if (ruleToParse.trimStart().startsWith('@namespace')) {
-			domExceptionName = "InvalidStateError";
-		}
-		throw new (this._globalObject && this._globalObject.DOMException || DOMException)("Failed to execute 'insertRule' on 'CSSStyleSheet': Failed to parse the rule '" + ruleToParse + "'.", domExceptionName);
+		errorUtils.throwParseError(this, 'insertRule', this.constructor.name, ruleToParse, 'SyntaxError');
 	}
 	var cssRule = parsedSheet.cssRules[0];
-	cssRule.parentStyleSheet = this;
+	
+	// Helper function to find the last index of a specific rule constructor
+	function findLastIndexOfConstructor(rules, constructorName) {
+		for (var i = rules.length - 1; i >= 0; i--) {
+			if (rules[i].constructor.name === constructorName) {
+				return i;
+			}
+		}
+		return -1;
+	}
+	
+	// Helper function to find the first index of a rule that's NOT of specified constructors
+	function findFirstNonConstructorIndex(rules, constructorNames) {
+		for (var i = 0; i < rules.length; i++) {
+			if (constructorNames.indexOf(rules[i].constructor.name) === -1) {
+				return i;
+			}
+		}
+		return rules.length;
+	}
+	
+	// Validate rule ordering based on CSS specification
+	if (cssRule.constructor.name === 'CSSImportRule') {
+		// @import rules cannot be inserted after @layer rules that already exist
+		// They can only be inserted at the beginning or after other @import rules
+		var firstLayerIndex = findFirstNonConstructorIndex(this.cssRules, ['CSSImportRule']);
+		if (firstLayerIndex < this.cssRules.length && this.cssRules[firstLayerIndex].constructor.name === 'CSSLayerStatementRule' && index > firstLayerIndex) {
+			errorUtils.throwError(this, 'DOMException',
+				"Failed to execute 'insertRule' on '" + this.constructor.name + "': Failed to insert the rule.",
+				'HierarchyRequestError');
+		}
+		
+		// Also cannot insert after @namespace or other rules
+		var firstNonImportIndex = findFirstNonConstructorIndex(this.cssRules, ['CSSImportRule']);
+		if (index > firstNonImportIndex && firstNonImportIndex < this.cssRules.length && 
+		    this.cssRules[firstNonImportIndex].constructor.name !== 'CSSLayerStatementRule') {
+			errorUtils.throwError(this, 'DOMException',
+				"Failed to execute 'insertRule' on '" + this.constructor.name + "': Failed to insert the rule.",
+				'HierarchyRequestError');
+		}
+	} else if (cssRule.constructor.name === 'CSSNamespaceRule') {
+		// @namespace rules can come after @layer and @import, but before any other rules
+		// They cannot come before @import rules
+		var firstImportIndex = -1;
+		for (var i = 0; i < this.cssRules.length; i++) {
+			if (this.cssRules[i].constructor.name === 'CSSImportRule') {
+				firstImportIndex = i;
+				break;
+			}
+		}
+		var firstNonImportNamespaceIndex = findFirstNonConstructorIndex(this.cssRules, [
+			'CSSLayerStatementRule', 
+			'CSSImportRule', 
+			'CSSNamespaceRule'
+		]);
+		
+		// Cannot insert before @import rules
+		if (firstImportIndex !== -1 && index <= firstImportIndex) {
+			errorUtils.throwError(this, 'DOMException',
+				"Failed to execute 'insertRule' on '" + this.constructor.name + "': Failed to insert the rule.",
+				'HierarchyRequestError');
+		}
+		
+		// Cannot insert after other types of rules
+		if (index > firstNonImportNamespaceIndex) {
+			errorUtils.throwError(this, 'DOMException',
+				"Failed to execute 'insertRule' on '" + this.constructor.name + "': Failed to insert the rule.",
+				'HierarchyRequestError');
+		}
+	} else if (cssRule.constructor.name === 'CSSLayerStatementRule') {
+		// @layer statement rules can be inserted anywhere before @import and @namespace
+		// No additional restrictions beyond what's already handled
+	} else {
+		// Any other rule cannot be inserted before @import and @namespace
+		var firstNonSpecialRuleIndex = findFirstNonConstructorIndex(this.cssRules, [
+			'CSSLayerStatementRule',
+			'CSSImportRule',
+			'CSSNamespaceRule'
+		]);
+		
+		if (index < firstNonSpecialRuleIndex) {
+			errorUtils.throwError(this, 'DOMException',
+				"Failed to execute 'insertRule' on '" + this.constructor.name + "': Failed to insert the rule.",
+				'HierarchyRequestError');
+		}
+	}
+	
+	cssRule.__parentStyleSheet = this;
 	this.cssRules.splice(index, 0, cssRule);
 	return index;
 };
@@ -1077,21 +1433,21 @@ CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
  */
 CSSOM.CSSStyleSheet.prototype.deleteRule = function(index) {
 	if (index === undefined) {
-		throw new (this._globalObject && this._globalObject.TypeError || TypeError)("Failed to execute 'deleteRule' on 'CSSStyleSheet': 1 argument required, but only 0 present.")
+		errorUtils.throwMissingArguments(this, 'deleteRule', this.constructor.name);
 	}
 	index = Number(index);
 	if (index < 0) {
 		index = 4294967296 + index;
 	}
 	if (index >= this.cssRules.length) {
-		throw new (this._globalObject && this._globalObject.DOMException || DOMException)("Failed to execute 'deleteRule' on 'CSSStyleSheet': The index provided (" + index + ") is larger than the maximum index (" + this.cssRules.length + ").", "IndexSizeError");
+		errorUtils.throwIndexError(this, 'deleteRule', this.constructor.name, index, this.cssRules.length);
 	}
 	if (this.cssRules[index] && this.cssRules[index].constructor.name == "CSSNamespaceRule") {
 		var shouldContinue = this.cssRules.every(function (rule) {
 			return ['CSSImportRule','CSSLayerStatementRule','CSSNamespaceRule'].indexOf(rule.constructor.name) !== -1
 		});
 		if (!shouldContinue) {
-			throw new (this._globalObject && this._globalObject.DOMException || DOMException)("Failed to execute 'deleteRule' on 'CSSStyleSheet': Deleting a CSSNamespaceRule is not allowed when there is rules other than @import, @layer statement, or @namespace.", "InvalidStateError");
+			errorUtils.throwError(this, 'DOMException', "Failed to execute 'deleteRule' on '" + this.constructor.name + "': Failed to delete rule.", "InvalidStateError");
 		}
 	}
 	this.cssRules.splice(index, 1);
@@ -1113,6 +1469,9 @@ CSSOM.CSSStyleSheet.prototype.toString = function() {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/css3-animations/#DOM-CSSKeyframesRule
@@ -1121,14 +1480,42 @@ CSSOM.CSSKeyframesRule = function CSSKeyframesRule() {
 	CSSOM.CSSRule.call(this);
 	this.name = '';
 	this.cssRules = [];
+	
+	// Set up initial indexed access
+	this._setupIndexedAccess();
+	
+	// Override cssRules methods after initial setup, store references as non-enumerable properties
+	var self = this;
+	var originalPush = this.cssRules.push;
+	var originalSplice = this.cssRules.splice;
+	
+	// Create non-enumerable method overrides
+	Object.defineProperty(this.cssRules, 'push', {
+		value: function() {
+			var result = originalPush.apply(this, arguments);
+			self._setupIndexedAccess();
+			return result;
+		},
+		writable: true,
+		enumerable: false,
+		configurable: true
+	});
+	
+	Object.defineProperty(this.cssRules, 'splice', {
+		value: function() {
+			var result = originalSplice.apply(this, arguments);
+			self._setupIndexedAccess();
+			return result;
+		},
+		writable: true,
+		enumerable: false,
+		configurable: true
+	});
 };
 
 CSSOM.CSSKeyframesRule.prototype = new CSSOM.CSSRule();
 CSSOM.CSSKeyframesRule.prototype.constructor = CSSOM.CSSKeyframesRule;
 CSSOM.CSSKeyframesRule.prototype.type = 7;
-//FIXME
-//CSSOM.CSSKeyframesRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
-//CSSOM.CSSKeyframesRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
 
 // http://www.opensource.apple.com/source/WebCore/WebCore-955.66.1/css/WebKitCSSKeyframesRule.cpp
 Object.defineProperty(CSSOM.CSSKeyframesRule.prototype, "cssText", {
@@ -1137,10 +1524,177 @@ Object.defineProperty(CSSOM.CSSKeyframesRule.prototype, "cssText", {
     for (var i=0, length=this.cssRules.length; i < length; i++) {
       cssTexts.push(this.cssRules[i].cssText);
     }
-    return "@" + (this._vendorPrefix || '') + "keyframes " + this.name + (this.name && " ") + "{" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
+    var cssWideKeywords = ['initial', 'inherit', 'revert', 'revert-layer', 'unset', 'none'];
+    var processedName = cssWideKeywords.includes(this.name) ? '"' + this.name + '"' : this.name;
+    return "@" + (this._vendorPrefix || '') + "keyframes " + processedName + (processedName && " ") + "{" + (cssTexts.length ? "\n  " + cssTexts.join("\n  ") : "") + "\n}";
   }
 });
 
+/**
+ * Appends a new keyframe rule to the list of keyframes.
+ * 
+ * @param {string} rule - The keyframe rule string to append (e.g., "50% { opacity: 0.5; }")
+ * @see https://www.w3.org/TR/css-animations-1/#dom-csskeyframesrule-appendrule
+ */
+CSSOM.CSSKeyframesRule.prototype.appendRule = function appendRule(rule) {
+	if (arguments.length === 0) {
+		errorUtils.throwMissingArguments(this, 'appendRule', 'CSSKeyframesRule');
+	}
+	
+	var parsedRule;
+	try {
+		// Parse the rule string as a keyframe rule
+		var tempStyleSheet = CSSOM.parse("@keyframes temp { " + rule + " }");
+		if (tempStyleSheet.cssRules.length > 0 && tempStyleSheet.cssRules[0].cssRules.length > 0) {
+			parsedRule = tempStyleSheet.cssRules[0].cssRules[0];
+		} else {
+			throw new Error("Failed to parse keyframe rule");
+		}
+	} catch (e) {
+		errorUtils.throwParseError(this, 'appendRule', 'CSSKeyframesRule', rule);
+	}
+	
+	parsedRule.__parentRule = this;
+	this.cssRules.push(parsedRule);
+};
+
+/**
+ * Deletes a keyframe rule that matches the specified key.
+ * 
+ * @param {string} select - The keyframe selector to delete (e.g., "50%", "from", "to")
+ * @see https://www.w3.org/TR/css-animations-1/#dom-csskeyframesrule-deleterule
+ */
+CSSOM.CSSKeyframesRule.prototype.deleteRule = function deleteRule(select) {
+	if (arguments.length === 0) {
+		errorUtils.throwMissingArguments(this, 'deleteRule', 'CSSKeyframesRule');
+	}
+	
+	var normalizedSelect = this._normalizeKeyText(select);
+	
+	for (var i = 0; i < this.cssRules.length; i++) {
+		var rule = this.cssRules[i];
+		if (this._normalizeKeyText(rule.keyText) === normalizedSelect) {
+			rule.__parentRule = null;
+			this.cssRules.splice(i, 1);
+			return;
+		}
+	}
+};
+
+/**
+ * Finds and returns the keyframe rule that matches the specified key.
+ * When multiple rules have the same key, returns the last one.
+ * 
+ * @param {string} select - The keyframe selector to find (e.g., "50%", "from", "to")
+ * @return {CSSKeyframeRule|null} The matching keyframe rule, or null if not found
+ * @see https://www.w3.org/TR/css-animations-1/#dom-csskeyframesrule-findrule
+ */
+CSSOM.CSSKeyframesRule.prototype.findRule = function findRule(select) {
+	if (arguments.length === 0) {
+		errorUtils.throwMissingArguments(this, 'findRule', 'CSSKeyframesRule');
+	}
+	
+	var normalizedSelect = this._normalizeKeyText(select);
+	
+	// Iterate backwards to find the last matching rule
+	for (var i = this.cssRules.length - 1; i >= 0; i--) {
+		var rule = this.cssRules[i];
+		if (this._normalizeKeyText(rule.keyText) === normalizedSelect) {
+			return rule;
+		}
+	}
+	
+	return null;
+};
+
+/**
+ * Normalizes keyframe selector text for comparison.
+ * Handles "from" -> "0%" and "to" -> "100%" conversions and trims whitespace.
+ * 
+ * @private
+ * @param {string} keyText - The keyframe selector text to normalize
+ * @return {string} The normalized keyframe selector text
+ */
+CSSOM.CSSKeyframesRule.prototype._normalizeKeyText = function _normalizeKeyText(keyText) {
+	if (!keyText) return '';
+	
+	var normalized = keyText.toString().trim().toLowerCase();
+	
+	// Convert keywords to percentages for comparison
+	if (normalized === 'from') {
+		return '0%';
+	} else if (normalized === 'to') {
+		return '100%';
+	}
+	
+	return normalized;
+};
+
+/**
+ * Makes CSSKeyframesRule iterable over its cssRules.
+ * Allows for...of loops and other iterable methods.
+ */
+if (typeof Symbol !== 'undefined' && Symbol.iterator) {
+	CSSOM.CSSKeyframesRule.prototype[Symbol.iterator] = function() {
+		var index = 0;
+		var cssRules = this.cssRules;
+		
+		return {
+			next: function() {
+				if (index < cssRules.length) {
+					return { value: cssRules[index++], done: false };
+				} else {
+					return { done: true };
+				}
+			}
+		};
+	};
+}
+
+/**
+ * Adds indexed getters for direct access to cssRules by index.
+ * This enables rule[0], rule[1], etc. access patterns.
+ * Works in environments where Proxy is not available (like jsdom).
+ */
+CSSOM.CSSKeyframesRule.prototype._setupIndexedAccess = function() {
+	// Remove any existing indexed properties
+	for (var i = 0; i < 1000; i++) { // reasonable upper limit
+		if (this.hasOwnProperty(i)) {
+			delete this[i];
+		} else {
+			break;
+		}
+	}
+	
+	// Add indexed getters for current cssRules
+	for (var i = 0; i < this.cssRules.length; i++) {
+		(function(index) {
+			Object.defineProperty(this, index, {
+				get: function() {
+					return this.cssRules[index];
+				},
+				enumerable: false,
+				configurable: true
+			});
+		}.call(this, i));
+	}
+	
+	// Update length property
+	Object.defineProperty(this, 'length', {
+		get: function() {
+			return this.cssRules.length;
+		},
+		enumerable: false,
+		configurable: true
+	});
+};
+
+
+
+
+
+
+
 
 
 /**
@@ -1150,8 +1704,8 @@ Object.defineProperty(CSSOM.CSSKeyframesRule.prototype, "cssText", {
 CSSOM.CSSKeyframeRule = function CSSKeyframeRule() {
 	CSSOM.CSSRule.call(this);
 	this.keyText = '';
-	this.style = new CSSOM.CSSStyleDeclaration();
-	this.style.parentRule = this;
+	this.__style = new CSSOM.CSSStyleDeclaration();
+	this.__style.parentRule = this;
 };
 
 CSSOM.CSSKeyframeRule.prototype = new CSSOM.CSSRule();
@@ -1161,15 +1715,31 @@ CSSOM.CSSKeyframeRule.prototype.type = 8;
 //CSSOM.CSSKeyframeRule.prototype.insertRule = CSSStyleSheet.prototype.insertRule;
 //CSSOM.CSSKeyframeRule.prototype.deleteRule = CSSStyleSheet.prototype.deleteRule;
 
+Object.defineProperty(CSSOM.CSSKeyframeRule.prototype, "style", {
+	get: function() {
+		return this.__style;	
+	},
+	set: function(value) {
+		if (typeof value === "string") {
+			this.__style.cssText = value;
+		} else {
+			this.__style = value;
+		}
+	}
+});
+
 // http://www.opensource.apple.com/source/WebCore/WebCore-955.66.1/css/WebKitCSSKeyframeRule.cpp
 Object.defineProperty(CSSOM.CSSKeyframeRule.prototype, "cssText", {
   get: function() {
-    return this.keyText + " { " + this.style.cssText + " } ";
+    return this.keyText + " {" + (this.style.cssText ? " " + this.style.cssText : "") + " }";
   }
 });
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://developer.mozilla.org/en/CSS/@-moz-document
@@ -1225,6 +1795,9 @@ CSSOM.MatcherList.prototype = {
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://developer.mozilla.org/en/CSS/@-moz-document
@@ -1254,6 +1827,9 @@ Object.defineProperty(CSSOM.CSSDocumentRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue
@@ -1290,6 +1866,9 @@ CSSOM.CSSValue.prototype = {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx
@@ -1625,6 +2204,8 @@ CSSOM.CSSValueExpression.prototype._findMatchedIdx = function(token, idx, sep) {
 
 
 
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-cascade-5/#csslayerblockrule
@@ -1654,6 +2235,8 @@ Object.defineProperties(CSSOM.CSSLayerBlockRule.prototype, {
 });
 
 
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-cascade-5/#csslayerstatementrule
@@ -1678,11 +2261,20 @@ Object.defineProperties(CSSOM.CSSLayerStatementRule.prototype, {
 });
 
 
+
+
+
 /**
- * @param {string} token
+ * Parses a CSS string and returns a CSSOM.CSSStyleSheet object representing the parsed stylesheet.
+ *
+ * @param {string} token - The CSS string to parse.
+ * @param {object} [opts] - Optional parsing options.
+ * @param {object} [opts.globalObject] - An optional global object to attach to the stylesheet. Useful on jsdom webplatform tests.
+ * @param {function|boolean} [errorHandler] - Optional error handler function or `true` to use `console.error`.
+ * @returns {CSSOM.CSSStyleSheet} The parsed CSSStyleSheet object.
  */
-CSSOM.parse = function parse(token, errorHandler) {
-	errorHandler = errorHandler === undefined ? (console && console.error) : errorHandler;
+CSSOM.parse = function parse(token, opts, errorHandler) {
+	errorHandler = errorHandler === true ? (console && console.error) : errorHandler;
 
 	var i = 0;
 
@@ -1724,6 +2316,10 @@ CSSOM.parse = function parse(token, errorHandler) {
 
 	var styleSheet = new CSSOM.CSSStyleSheet();
 
+	if (opts && opts.globalObject) {
+		styleSheet.__globalObject = opts.globalObject;
+	}
+
 	// @type CSSStyleSheet|CSSMediaRule|CSSContainerRule|CSSSupportsRule|CSSFontFaceRule|CSSKeyframesRule|CSSDocumentRule
 	var currentScope = styleSheet;
 
@@ -2421,7 +3017,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 					i += "font-face".length;
 					fontFaceRule = new CSSOM.CSSFontFaceRule();
 					fontFaceRule.__starts = i;
-				}, parentRule && parentRule.constructor.name === "CSSStyleRule" );
+				}, true);
 				break;
 			} else {
 				atKeyframesRegExp.lastIndex = i;
@@ -2463,7 +3059,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 				}
 
 				if (parentRule) {
-					styleRule.parentRule = parentRule;
+					styleRule.__parentRule = parentRule;
 					ancestorRules.push(parentRule);
 				}
 
@@ -2473,48 +3069,48 @@ CSSOM.parse = function parse(token, errorHandler) {
 					return match;
 				});
 				styleRule.style.__starts = i;
-				styleRule.parentStyleSheet = styleSheet;
+				styleRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-name";
 			} else if (state === "atBlock") {
 				mediaRule.media.mediaText = buffer.trim();
 
 				if (parentRule) {
-					mediaRule.parentRule = parentRule;
+					mediaRule.__parentRule = parentRule;
 					ancestorRules.push(parentRule);
 				}
 
 				currentScope = parentRule = mediaRule;
-				mediaRule.parentStyleSheet = styleSheet;
+				mediaRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "containerBlock") {
 				containerRule.containerText = buffer.trim();
 
 				if (parentRule) {
-					containerRule.parentRule = parentRule;
+					containerRule.__parentRule = parentRule;
 					ancestorRules.push(parentRule);
 				}
 				currentScope = parentRule = containerRule;
-				containerRule.parentStyleSheet = styleSheet;
+				containerRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "counterStyleBlock") {
 				// TODO: Validate counter-style name. At least that it cannot be empty nor multiple
 				counterStyleRule.name = buffer.trim().replace(/\n/g, "");
 				currentScope = parentRule = counterStyleRule;
-				counterStyleRule.parentStyleSheet = styleSheet;
+				counterStyleRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 			} else if (state === "conditionBlock") {
 				supportsRule.conditionText = buffer.trim();
 
 				if (parentRule) {
-					supportsRule.parentRule = parentRule;
+					supportsRule.__parentRule = parentRule;
 					ancestorRules.push(parentRule);
 				}
 
 				currentScope = parentRule = supportsRule;
-				supportsRule.parentStyleSheet = styleSheet;
+				supportsRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "layerBlock") {
@@ -2524,12 +3120,12 @@ CSSOM.parse = function parse(token, errorHandler) {
 
 				if (isValidName) {
 					if (parentRule) {
-						layerBlockRule.parentRule = parentRule;
+						layerBlockRule.__parentRule = parentRule;
 						ancestorRules.push(parentRule);
 					}
 	
 					currentScope = parentRule = layerBlockRule;
-					layerBlockRule.parentStyleSheet = styleSheet;
+					layerBlockRule.__parentStyleSheet = styleSheet;
 				}
 				buffer = "";
 				state = "before-selector";
@@ -2539,25 +3135,25 @@ CSSOM.parse = function parse(token, errorHandler) {
 				}
 
 				currentScope = parentRule = hostRule;
-				hostRule.parentStyleSheet = styleSheet;
+				hostRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "startingStyleRule-begin") {
 				if (parentRule) {
-					startingStyleRule.parentRule = parentRule;
+					startingStyleRule.__parentRule = parentRule;
 					ancestorRules.push(parentRule);
 				}
 
 				currentScope = parentRule = startingStyleRule;
-				startingStyleRule.parentStyleSheet = styleSheet;
+				startingStyleRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
 
 			} else if (state === "fontFaceRule-begin") {
 				if (parentRule) {
-					fontFaceRule.parentRule = parentRule;
+					fontFaceRule.__parentRule = parentRule;
 				}
-				fontFaceRule.parentStyleSheet = styleSheet;
+				fontFaceRule.__parentStyleSheet = styleSheet;
 				styleRule = fontFaceRule;
 				buffer = "";
 				state = "before-name";
@@ -2565,9 +3161,9 @@ CSSOM.parse = function parse(token, errorHandler) {
 				keyframesRule.name = buffer.trim();
 				if (parentRule) {
 					ancestorRules.push(parentRule);
-					keyframesRule.parentRule = parentRule;
+					keyframesRule.__parentRule = parentRule;
 				}
-				keyframesRule.parentStyleSheet = styleSheet;
+				keyframesRule.__parentStyleSheet = styleSheet;
 				currentScope = parentRule = keyframesRule;
 				buffer = "";
 				state = "keyframeRule-begin";
@@ -2582,18 +3178,18 @@ CSSOM.parse = function parse(token, errorHandler) {
 				documentRule.matcher.matcherText = buffer.trim();
 				if (parentRule) {
 					ancestorRules.push(parentRule);
-					documentRule.parentRule = parentRule;
+					documentRule.__parentRule = parentRule;
 				}
 				currentScope = parentRule = documentRule;
-				documentRule.parentStyleSheet = styleSheet;
+				documentRule.__parentStyleSheet = styleSheet;
 				buffer = "";
 				state = "before-selector";
 			} else if (state === "before-name" || state === "name") {
 				if (styleRule.constructor.name === "CSSNestedDeclarations") {
 					if (styleRule.style.length) {
 						parentRule.cssRules.push(styleRule);
-						styleRule.parentRule = parentRule;
-						styleRule.parentStyleSheet = styleSheet;
+						styleRule.__parentRule = parentRule;
+						styleRule.__parentStyleSheet = styleSheet;
 						ancestorRules.push(parentRule);
 					} else {
 						// If the styleRule is empty, we can assume that it's a nested selector
@@ -2602,7 +3198,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 				} else {
 					currentScope = parentRule = styleRule;
 					ancestorRules.push(parentRule);
-					styleRule.parentStyleSheet = styleSheet;
+					styleRule.__parentStyleSheet = styleSheet;
 				}
 				
 				styleRule = new CSSOM.CSSStyleRule();
@@ -2619,7 +3215,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 						}).join(', ');
 				}
 				styleRule.style.__starts = i - buffer.length;
-				styleRule.parentRule = parentRule;
+				styleRule.__parentRule = parentRule;
 				nestedSelectorRule = styleRule;
 
 				buffer = "";
@@ -2714,7 +3310,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 					});
 					if (isValid) {
 						importRule = new CSSOM.CSSImportRule();
-						importRule.parentStyleSheet = importRule.styleSheet.parentStyleSheet = styleSheet;
+						importRule.__parentStyleSheet = importRule.styleSheet.__parentStyleSheet = styleSheet;
 						importRule.cssText = buffer + character;
 						styleSheet.cssRules.push(importRule);
 					}
@@ -2732,7 +3328,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 							testNamespaceRule.cssText = buffer + character;
 							
 							namespaceRule = testNamespaceRule;
-							namespaceRule.parentStyleSheet = namespaceRule.styleSheet.parentStyleSheet = styleSheet;
+							namespaceRule.__parentStyleSheet = namespaceRule.styleSheet.__parentStyleSheet = styleSheet;
 							styleSheet.cssRules.push(namespaceRule);
 							
 							// Track the namespace prefix for validation
@@ -2756,7 +3352,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 
 					if (!isInvalid) {
 						layerStatementRule = new CSSOM.CSSLayerStatementRule();
-						layerStatementRule.parentStyleSheet = styleSheet;
+						layerStatementRule.__parentStyleSheet = styleSheet;
 						layerStatementRule.__starts = layerBlockRule.__starts;
 						layerStatementRule.__ends = i;
 						layerStatementRule.nameList = nameListStr;
@@ -2796,9 +3392,9 @@ CSSOM.parse = function parse(token, errorHandler) {
 					}
 
 					if (parentRule) {
-						styleRule.parentRule = parentRule;
+						styleRule.__parentRule = parentRule;
 					}
-					styleRule.parentStyleSheet = styleSheet;
+					styleRule.__parentStyleSheet = styleSheet;
 
 					if (currentScope === styleRule) {
 						currentScope = parentRule || styleSheet;
@@ -2924,7 +3520,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 							|| parentRule.constructor.name === "CSSLayerBlockRule"
 							|| parentRule.constructor.name === "CSSStartingStyleRule"
 						) {
-							// parentRule.parentRule = styleRule;
+							// parentRule.__parentRule = styleRule;
 							state = "before-name";
 							if (styleRule !== parentRule) {
 								styleRule = new CSSOM.CSSNestedDeclarations();
@@ -2981,6 +3577,9 @@ CSSOM.parse = function parse(token, errorHandler) {
 
 
 
+
+
+
 /**
  * Produces a deep copy of stylesheet — the instance variables of stylesheet are copied recursively.
  * @param {CSSStyleSheet|CSSOM.CSSStyleSheet} stylesheet