@acemir/cssom 0.9.16 → 0.9.17

package/build/CSSOM.js

@@ -1,6 +1,123 @@
 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 RangeError for index out of bounds.
+ * 
+ * @param {Object} context - The CSSOM object
+ * @param {string} [message] - Optional custom message, defaults to 'INDEX_SIZE_ERR'
+ */
+function throwIndexSizeError(context, message) {
+	throwError(context, 'RangeError', message || 'INDEX_SIZE_ERR');
+}
+
+/**
+ * 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,
+	throwIndexSizeError: throwIndexSizeError,
+	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 +296,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 +389,9 @@ Object.defineProperty(CSSOM.CSSNestedDeclarations.prototype, "cssText", {
   enumerable: true,
 });
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/cssom/#the-cssgroupingrule-interface
@@ -270,10 +423,10 @@ CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
  */
  CSSOM.CSSGroupingRule.prototype.insertRule = function insertRule(rule, index) {
 	if (index < 0 || index > this.cssRules.length) {
-		throw new RangeError("INDEX_SIZE_ERR");
+		errorUtils.throwIndexSizeError(this);
 	}
 	var cssRule = CSSOM.parse(rule).cssRules[0];
-	cssRule.parentRule = this;
+	cssRule.__parentRule = this;
 	this.cssRules.splice(index, 0, cssRule);
 	return index;
 };
@@ -292,12 +445,15 @@ CSSOM.CSSGroupingRule.prototype.constructor = CSSOM.CSSGroupingRule;
  */
  CSSOM.CSSGroupingRule.prototype.deleteRule = function deleteRule(index) {
 	if (index < 0 || index >= this.cssRules.length) {
-		throw new RangeError("INDEX_SIZE_ERR");
+		errorUtils.throwIndexSizeError(this);
 	}
-	this.cssRules.splice(index, 1)[0].parentRule = null;
+	this.cssRules.splice(index, 1)[0].__parentRule = null;
 };
 
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-counter-styles/#the-csscounterstylerule-interface
@@ -312,6 +468,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 +486,9 @@ CSSOM.CSSConditionRule.prototype.conditionText = ''
 CSSOM.CSSConditionRule.prototype.cssText = ''
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#cssstylerule
@@ -334,14 +496,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() {
@@ -364,8 +552,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 +704,9 @@ CSSOM.CSSStyleRule.parse = function(ruleText) {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#the-medialist-interface
@@ -570,6 +761,9 @@ CSSOM.MediaList.prototype = {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#cssmediarule
@@ -611,6 +805,9 @@ Object.defineProperties(CSSOM.CSSMediaRule.prototype, {
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-contain-3/
@@ -650,6 +847,9 @@ Object.defineProperties(CSSOM.CSSContainerRule.prototype, {
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-conditional-3/#the-csssupportsrule-interface
@@ -675,6 +875,9 @@ Object.defineProperty(CSSOM.CSSSupportsRule.prototype, "cssText", {
 });
 
 
+
+
+
 /**
  * @constructor
  * @see http://dev.w3.org/csswg/cssom/#cssimportrule
@@ -847,6 +1050,9 @@ Object.defineProperty(CSSOM.CSSImportRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/cssom/#the-cssnamespacerule-interface
@@ -914,14 +1120,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,6 +1140,19 @@ 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() {
@@ -940,6 +1162,9 @@ Object.defineProperty(CSSOM.CSSFontFaceRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/shadow-dom/#host-at-rule
@@ -968,6 +1193,9 @@ Object.defineProperty(CSSOM.CSSHostRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/shadow-dom/#host-at-rule
@@ -996,14 +1224,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,13 +1279,13 @@ 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', 'CSSStyleSheet');
 	}
 	if (index === void 0) {
 		index = 0;
 	}
 	if (index < 0 || index > this.cssRules.length) {
-		throw new (this._globalObject && this._globalObject.RangeError || RangeError)("INDEX_SIZE_ERR");
+		errorUtils.throwIndexSizeError(this);
 	}
 	var ruleToParse = String(rule);
 	var parsedSheet = CSSOM.parse(ruleToParse);
@@ -1053,10 +1294,10 @@ CSSOM.CSSStyleSheet.prototype.insertRule = function(rule, index) {
 		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', 'CSSStyleSheet', ruleToParse, domExceptionName);
 	}
 	var cssRule = parsedSheet.cssRules[0];
-	cssRule.parentStyleSheet = this;
+	cssRule.__parentStyleSheet = this;
 	this.cssRules.splice(index, 0, cssRule);
 	return index;
 };
@@ -1077,21 +1318,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', 'CSSStyleSheet');
 	}
 	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', 'CSSStyleSheet', 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 'CSSStyleSheet': Deleting a CSSNamespaceRule is not allowed when there is rules other than @import, @layer statement, or @namespace.", "InvalidStateError");
 		}
 	}
 	this.cssRules.splice(index, 1);
@@ -1113,6 +1354,9 @@ CSSOM.CSSStyleSheet.prototype.toString = function() {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/css3-animations/#DOM-CSSKeyframesRule
@@ -1121,14 +1365,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 +1409,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 +1589,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 +1600,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 + " }";
   }
 });
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://developer.mozilla.org/en/CSS/@-moz-document
@@ -1225,6 +1680,9 @@ CSSOM.MatcherList.prototype = {
 
 
 
+
+
+
 /**
  * @constructor
  * @see https://developer.mozilla.org/en/CSS/@-moz-document
@@ -1254,6 +1712,9 @@ Object.defineProperty(CSSOM.CSSDocumentRule.prototype, "cssText", {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSValue
@@ -1290,6 +1751,9 @@ CSSOM.CSSValue.prototype = {
 
 
 
+
+
+
 /**
  * @constructor
  * @see http://msdn.microsoft.com/en-us/library/ms537634(v=vs.85).aspx
@@ -1625,6 +2089,8 @@ CSSOM.CSSValueExpression.prototype._findMatchedIdx = function(token, idx, sep) {
 
 
 
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-cascade-5/#csslayerblockrule
@@ -1654,6 +2120,8 @@ Object.defineProperties(CSSOM.CSSLayerBlockRule.prototype, {
 });
 
 
+
+
 /**
  * @constructor
  * @see https://drafts.csswg.org/css-cascade-5/#csslayerstatementrule
@@ -1678,6 +2146,9 @@ Object.defineProperties(CSSOM.CSSLayerStatementRule.prototype, {
 });
 
 
+
+
+
 /**
  * @param {string} token
  */
@@ -2463,7 +2934,7 @@ CSSOM.parse = function parse(token, errorHandler) {
 				}
 
 				if (parentRule) {
-					styleRule.parentRule = parentRule;
+					styleRule.__parentRule = parentRule;
 					ancestorRules.push(parentRule);
 				}
 
@@ -2473,48 +2944,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 +2995,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 +3010,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 +3036,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 +3053,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 +3073,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 +3090,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 +3185,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 +3203,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 +3227,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 +3267,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 +3395,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 +3452,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