Merge pull request #3516 from lightpanda-io/readonly-computedStyles

webapi: computedStyle are now readonly

src/browser/tests/element/styles.html

@@ -244,3 +244,23 @@
   testing.expectEqual('red', impDiv.style.getPropertyValue('color'));
 }
 </script>
+
+<script id="computedStyleReadOnly">
+{
+  const div = document.createElement('div');
+  div.setAttribute('style', 'color: red; margin: 1px');
+  document.body.appendChild(div);
+
+  const cs = window.getComputedStyle(div);
+  testing.expectError('NoModificationAllowedError', () => cs.setProperty('width', '10px'));
+  testing.expectError('NoModificationAllowedError', () => cs.setProperty('width', '10px', 'bogus'));
+  testing.expectError('NoModificationAllowedError', () => cs.removeProperty('color'));
+  testing.expectError('NoModificationAllowedError', () => { cs.cssText = ''; });
+  testing.expectError('NoModificationAllowedError', () => { cs.cssFloat = 'left'; });
+  testing.expectError('NoModificationAllowedError', () => { cs.color = 'blue'; });
+
+  testing.expectEqual('color: red; margin: 1px', div.getAttribute('style'));
+  div.style.width = '50px';
+  testing.expectEqual('50px', cs.getPropertyValue('width'));
+}
+</script>

src/browser/webapi/css/CSSStyleDeclaration.zig

@@ -153,6 +153,10 @@ pub fn getPropertyPriority(self: *const CSSStyleDeclaration, property_name: []co
 }
 
 pub fn setProperty(self: *CSSStyleDeclaration, property_name: []const u8, value: []const u8, priority_: ?[]const u8, frame: *Frame) !void {
+    if (self._is_computed) {
+        return error.NoModificationAllowed;
+    }
+
     // Validate priority
     const priority = priority_ orelse "";
     const important = if (priority.len > 0) blk: {
@@ -218,6 +222,9 @@ fn setPropertyImpl(self: *CSSStyleDeclaration, property_name: []const u8, value:
 }
 
 pub fn removeProperty(self: *CSSStyleDeclaration, property_name: []const u8, frame: *Frame) ![]const u8 {
+    if (self._is_computed) {
+        return error.NoModificationAllowed;
+    }
     const result = try self.removePropertyImpl(property_name, frame);
     try self.syncStyleAttribute(frame);
     return result;
@@ -277,6 +284,9 @@ fn getFloat(self: *const CSSStyleDeclaration, frame: *Frame) []const u8 {
 }
 
 fn setFloat(self: *CSSStyleDeclaration, value_: ?[]const u8, frame: *Frame) !void {
+    if (self._is_computed) {
+        return error.NoModificationAllowed;
+    }
     try self.setPropertyImpl("float", value_ orelse "", false, frame);
     try self.syncStyleAttribute(frame);
 }
@@ -288,6 +298,15 @@ fn getCssText(self: *const CSSStyleDeclaration, frame: *Frame) ![]const u8 {
 }
 
 pub fn setCssText(self: *CSSStyleDeclaration, text: []const u8, frame: *Frame) !void {
+    if (self._is_computed) {
+        return error.NoModificationAllowed;
+    }
+    try self.replaceCssText(text, frame);
+}
+
+// setCssText without the read-only check, for declarations that are never
+// computed (a CSSStyleRule's style).
+pub fn replaceCssText(self: *CSSStyleDeclaration, text: []const u8, frame: *Frame) !void {
     self.clearProperties(frame);
 
     try self.applyDeclarations(text, frame);

src/browser/webapi/css/CSSStyleSheet.zig

@@ -93,7 +93,7 @@ pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, maybe_index: ?u32, fra
 
             const style_props = try style_rule.getStyle(frame);
             const style = style_props.asCSSStyleDeclaration();
-            try style.setCssText(s.block, frame);
+            try style.replaceCssText(s.block, frame);
             break :blk style_rule._proto;
         },
         // Opaque placeholder for at-rules. The CSS engine doesn't apply
@@ -182,7 +182,7 @@ fn parseInto(self: *CSSStyleSheet, text: []const u8, frame: *Frame) CSSError!voi
 
                 const style_props = try style_rule.getStyle(frame);
                 const style = style_props.asCSSStyleDeclaration();
-                try style.setCssText(s.block, frame);
+                try style.replaceCssText(s.block, frame);
                 break :blk style_rule._proto;
             },
             .at_rule => |a| try CSSRule.initAtRule(atRuleTypeFor(a.keyword), a.text, frame),