Merge pull request #1597 from lightpanda-io/CSSStyleProperties_setNamed

add CSSStyleProperties array set support

src/browser/tests/element/css_style_properties.html

@@ -121,6 +121,29 @@
 }
 </script>
 
+<script id="propertyAssignment">
+{
+  const div = $('#test-div');
+  div.style.cssText = '';
+
+  // camelCase assignment
+  div.style.opacity = '0.5';
+  testing.expectEqual('0.5', div.style.opacity);
+
+  // bracket notation assignment
+  div.style['filter'] = 'blur(5px)';
+  testing.expectEqual('blur(5px)', div.style.filter);
+
+  // numeric value coerced to string
+  div.style.opacity = 1;
+  testing.expectEqual('1', div.style.opacity);
+
+  // assigning method names should be ignored (not intercepted)
+  div.style.setProperty('color', 'blue');
+  testing.expectEqual('blue', div.style.color);
+}
+</script>
+
 <script id="prototypeChainCheck">
 {
   const div = $('#test-div');

src/browser/webapi/css/CSSStyleProperties.zig

@@ -37,6 +37,14 @@ pub fn asCSSStyleDeclaration(self: *CSSStyleProperties) *CSSStyleDeclaration {
     return self._proto;
 }
 
+pub fn setNamed(self: *CSSStyleProperties, name: []const u8, value: []const u8, page: *Page) !void {
+    if (method_names.has(name)) {
+        return error.NotHandled;
+    }
+    const dash_case = camelCaseToDashCase(name, &page.buf);
+    try self._proto.setProperty(dash_case, value, null, page);
+}
+
 pub fn getNamed(self: *CSSStyleProperties, name: []const u8, page: *Page) ![]const u8 {
     if (method_names.has(name)) {
         return error.NotHandled;
@@ -108,6 +116,9 @@ fn isKnownCSSProperty(dash_case: []const u8) bool {
         .{ "display", {} },
         .{ "visibility", {} },
         .{ "opacity", {} },
+        .{ "filter", {} },
+        .{ "transform", {} },
+        .{ "transition", {} },
         .{ "position", {} },
         .{ "top", {} },
         .{ "bottom", {} },
@@ -201,5 +212,5 @@ pub const JsApi = struct {
         pub var class_id: bridge.ClassId = undefined;
     };
 
-    pub const @"[]" = bridge.namedIndexed(CSSStyleProperties.getNamed, null, null, .{});
+    pub const @"[]" = bridge.namedIndexed(CSSStyleProperties.getNamed, CSSStyleProperties.setNamed, null, .{});
 };