fix(css): normalize CSSOM properties and flush pending styles

Author: andycall

webf/lib/src/css/style_declaration.dart

@@ -218,11 +218,13 @@ class CSSStyleDeclaration extends DynamicBindingObject
   /// Exposed for components (e.g., CSS variable resolver) that need to
   /// preserve importance when updating dependent properties.
   bool isImportant(String propertyName) {
-    return _importants[propertyName] == true;
+    return _importants[_normalizePropertyName(propertyName)] == true;
   }
 
   bool get hasImportantDeclarations => _importants.isNotEmpty;
 
+  bool get hasPendingProperties => _pendingProperties.isNotEmpty;
+
   bool get hasInheritedPendingProperty {
     return _pendingProperties.keys
         .any((key) => isInheritedPropertyString(_kebabize(key)));
@@ -243,6 +245,11 @@ class CSSStyleDeclaration extends DynamicBindingObject
   /// value is a String containing the value of the property.
   /// If not set, returns the empty string.
   String getPropertyValue(String propertyName) {
+    propertyName = _normalizePropertyName(propertyName);
+    return _getPropertyValueByNormalizedName(propertyName);
+  }
+
+  String _getPropertyValueByNormalizedName(String propertyName) {
     // Get the latest pending value first.
     return _pendingProperties[propertyName]?.value ??
         _properties[propertyName]?.value ??
@@ -251,6 +258,11 @@ class CSSStyleDeclaration extends DynamicBindingObject
 
   /// Returns the baseHref associated with a property value if available.
   String? getPropertyBaseHref(String propertyName) {
+    propertyName = _normalizePropertyName(propertyName);
+    return _getPropertyBaseHrefByNormalizedName(propertyName);
+  }
+
+  String? _getPropertyBaseHrefByNormalizedName(String propertyName) {
     return _pendingProperties[propertyName]?.baseHref ??
         _properties[propertyName]?.baseHref;
   }
@@ -389,8 +401,8 @@ class CSSStyleDeclaration extends DynamicBindingObject
     final List<String> propertyNames = _structuralPropertyNames();
     return Object.hashAll(propertyNames.map((propertyName) => Object.hash(
           propertyName,
-          getPropertyValue(propertyName),
-          getPropertyBaseHref(propertyName),
+          _getPropertyValueByNormalizedName(propertyName),
+          _getPropertyBaseHrefByNormalizedName(propertyName),
           _importants[propertyName] == true,
         )));
   }
@@ -405,12 +417,12 @@ class CSSStyleDeclaration extends DynamicBindingObject
     for (int index = 0; index < propertyNames.length; index++) {
       final String propertyName = propertyNames[index];
       if (propertyName != otherPropertyNames[index]) return false;
-      if (getPropertyValue(propertyName) !=
-          other.getPropertyValue(propertyName)) {
+      if (_getPropertyValueByNormalizedName(propertyName) !=
+          other._getPropertyValueByNormalizedName(propertyName)) {
         return false;
       }
-      if (getPropertyBaseHref(propertyName) !=
-          other.getPropertyBaseHref(propertyName)) {
+      if (_getPropertyBaseHrefByNormalizedName(propertyName) !=
+          other._getPropertyBaseHrefByNormalizedName(propertyName)) {
         return false;
       }
       if ((_importants[propertyName] == true) !=
@@ -424,6 +436,7 @@ class CSSStyleDeclaration extends DynamicBindingObject
 
   /// Removes a property from the CSS declaration.
   void removeProperty(String propertyName, [bool? isImportant]) {
+    propertyName = _normalizePropertyName(propertyName);
     switch (propertyName) {
       case PADDING:
         return CSSStyleProperty.removeShorthandPadding(this, isImportant);
@@ -888,7 +901,7 @@ class CSSStyleDeclaration extends DynamicBindingObject
     String? baseHref,
     bool validate = true,
   }) {
-    propertyName = propertyName.trim();
+    propertyName = _normalizePropertyName(propertyName);
 
     // Null or empty value means should be removed.
     if (isNullOrEmptyValue(value)) {
@@ -1561,3 +1574,14 @@ class CSSStyleDeclaration extends DynamicBindingObject
 String _kebabize(String str) {
   return kebabizeCamelCase(str);
 }
+
+String _normalizePropertyName(String propertyName) {
+  final String trimmed = propertyName.trim();
+  if (trimmed.isEmpty || trimmed.startsWith('--')) {
+    return trimmed;
+  }
+  if (trimmed.contains('-')) {
+    return camelize(trimmed.toLowerCase());
+  }
+  return trimmed;
+}

webf/lib/src/dom/element.dart

@@ -2523,8 +2523,9 @@ abstract class Element extends ContainerNode
       CSSStyleDeclaration newStyle = CSSStyleDeclaration();
       applyStyle(newStyle);
       bool hasInheritedPendingProperty = false;
+      final bool hadPendingProperties = style.hasPendingProperties;
       final bool merged = style.merge(newStyle);
-      if (merged) {
+      if (merged || hadPendingProperties) {
         hasInheritedPendingProperty = style.hasInheritedPendingProperty;
         style.flushPendingProperties();
       }

webf/test/src/css/style_declaration_merge_test.dart

@@ -9,6 +9,19 @@ void main() {
     setupTest();
   });
 
+  group('CSSStyleDeclaration CSSOM property names', () {
+    test('accepts kebab-case property names', () {
+      final CSSStyleDeclaration style = CSSStyleDeclaration();
+
+      style.setProperty('background-color', 'blue', isImportant: true);
+
+      expect(style.getPropertyValue('background-color'), 'blue');
+      expect(style.getPropertyValue(BACKGROUND_COLOR), 'blue');
+      expect(style.isImportant('background-color'), isTrue);
+      expect(style.isImportant(BACKGROUND_COLOR), isTrue);
+    });
+  });
+
   group('CSSStyleDeclaration.union', () {
     test('adopts important declarations into an empty receiver', () {
       final CSSStyleDeclaration current = CSSStyleDeclaration();