Merge pull request #692 from lightpanda-io/get_computed_style

make getComptedStyle return an empty CSSStyleDeclaration

src/browser/cssom/css_style_declaration.zig

@@ -33,6 +33,11 @@ pub const CSSStyleDeclaration = struct {
     store: std.StringHashMapUnmanaged(Property),
     order: std.ArrayListUnmanaged([]const u8),
 
+    pub const empty: CSSStyleDeclaration = .{
+        .store = .empty,
+        .order = .empty,
+    };
+
     const Property = struct {
         value: []const u8,
         priority: bool,
@@ -90,7 +95,16 @@ pub const CSSStyleDeclaration = struct {
 
     // TODO should handle properly shorthand properties and canonical forms
     pub fn _getPropertyValue(self: *const CSSStyleDeclaration, name: []const u8) []const u8 {
-        return if (self.store.get(name)) |prop| prop.value else "";
+        if (self.store.get(name)) |prop| {
+            return prop.value;
+        }
+
+        // default to everything being visible (unless it's been explicitly set)
+        if (std.mem.eql(u8, name, "visibility")) {
+            return "visible";
+        }
+
+        return "";
     }
 
     pub fn _item(self: *const CSSStyleDeclaration, index: usize) []const u8 {
@@ -122,6 +136,10 @@ pub const CSSStyleDeclaration = struct {
 
         gop.value_ptr.* = .{ .value = owned_value, .priority = is_important };
     }
+
+    pub fn named_get(self: *const CSSStyleDeclaration, name: []const u8, _: *bool) []const u8 {
+        return self._getPropertyValue(name);
+    }
 };
 
 const testing = @import("../../testing.zig");
@@ -159,6 +177,7 @@ test "CSSOM.CSSStyleDeclaration" {
         .{ "style.setProperty('color', 'green')", "undefined" },
         .{ "style.getPropertyValue('color')", "green" },
         .{ "style.length", "4" },
+        .{ "style.color", "green"},
 
         .{ "style.setProperty('padding', '10px', 'important')", "undefined" },
         .{ "style.getPropertyValue('padding')", "10px" },
@@ -220,4 +239,9 @@ test "CSSOM.CSSStyleDeclaration" {
         .{ "style.setProperty('border-bottom-left-radius', '5px')", "undefined" },
         .{ "style.getPropertyValue('border-bottom-left-radius')", "5px" },
     }, .{});
+
+    try runner.testCases(&.{
+        .{ "style.visibility", "visible" },
+        .{ "style.getPropertyValue('visibility')", "visible" },
+    }, .{});
 }

src/browser/dom/element.zig

@@ -407,6 +407,18 @@ pub const Element = struct {
     pub fn _scrollIntoViewIfNeeded(_: *parser.Element, center_if_needed: ?bool) void {
         _ = center_if_needed;
     }
+
+    const CheckVisibilityOpts = struct {
+        contentVisibilityAuto: bool,
+        opacityProperty: bool,
+        visibilityProperty: bool,
+    };
+
+    pub fn _checkVisibility(self: *parser.Element, opts: ?CheckVisibilityOpts) bool {
+        _ = self;
+        _ = opts;
+        return true;
+    }
 };
 
 // Tests

src/browser/html/elements.zig

@@ -109,10 +109,7 @@ pub const HTMLElement = struct {
     pub const prototype = *Element;
     pub const subtype = .node;
 
-    style: CSSStyleDeclaration = .{
+    style: CSSStyleDeclaration = .empty,
-        .store = .{},
-        .order = .{},
-    },
 
     pub fn get_style(e: *parser.ElementHTML, state: *SessionState) !*CSSStyleDeclaration {
         const self = try state.getOrCreateNodeWrapper(HTMLElement, @ptrCast(e));

src/browser/html/window.zig

@@ -31,6 +31,7 @@ const Console = @import("../console/console.zig").Console;
 const EventTarget = @import("../dom/event_target.zig").EventTarget;
 const MediaQueryList = @import("media_query_list.zig").MediaQueryList;
 const Performance = @import("performance.zig").Performance;
+const CSSStyleDeclaration = @import("../cssom/css_style_declaration.zig").CSSStyleDeclaration;
 
 const storage = @import("../storage/storage.zig");
 
@@ -237,13 +238,13 @@ pub const Window = struct {
         return timer_id;
     }
 
-    // NOT IMPLEMENTED - This is a dummy implementation that always returns null to deter PlayWright from using this path to solve click.js.
+    // TODO: getComputedStyle should return a read-only CSSStyleDeclaration.
-    // returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain.
+    // We currently don't have a read-only one, so we return a new instance on
-    pub fn _getComputedStyle(_: *Window, element: *parser.Element, pseudo_element: ?[]const u8) !?void {
+    // each call.
+    pub fn _getComputedStyle(_: *Window, element: *parser.Element, pseudo_element: ?[]const u8) !CSSStyleDeclaration {
         _ = element;
         _ = pseudo_element;
-        log.warn("Not implemented function getComputedStyle called, null returned", .{});
+        return .empty;
-        return null;
     }
 };