From b17f20e2c57a0d71094ef66df8f3cf4a88f82c02 Mon Sep 17 00:00:00 2001 From: Karl Seguin Date: Mon, 26 May 2025 11:16:51 +0800 Subject: [PATCH 1/3] make getComptedStyle return an empty CSSStyleDeclaration --- src/browser/cssom/css_style_declaration.zig | 5 +++++ src/browser/html/elements.zig | 5 +---- src/browser/html/window.zig | 11 ++++++----- 3 files changed, 12 insertions(+), 9 deletions(-) diff --git a/src/browser/cssom/css_style_declaration.zig b/src/browser/cssom/css_style_declaration.zig index e3103dc0..00c8f039 100644 --- a/src/browser/cssom/css_style_declaration.zig +++ b/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, diff --git a/src/browser/html/elements.zig b/src/browser/html/elements.zig index bf55b923..d93ba2b4 100644 --- a/src/browser/html/elements.zig +++ b/src/browser/html/elements.zig @@ -109,10 +109,7 @@ pub const HTMLElement = struct { pub const prototype = *Element; pub const subtype = .node; - style: CSSStyleDeclaration = .{ - .store = .{}, - .order = .{}, - }, + style: CSSStyleDeclaration = .empty, pub fn get_style(e: *parser.ElementHTML, state: *SessionState) !*CSSStyleDeclaration { const self = try state.getOrCreateNodeWrapper(HTMLElement, @ptrCast(e)); diff --git a/src/browser/html/window.zig b/src/browser/html/window.zig index 7d747f04..47437aac 100644 --- a/src/browser/html/window.zig +++ b/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. - // 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. - pub fn _getComputedStyle(_: *Window, element: *parser.Element, pseudo_element: ?[]const u8) !?void { + // TODO: getComputedStyle should return a read-only CSSStyleDeclaration. + // We currently don't have a read-only one, so we return a new instance on + // 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 null; + return .empty; } }; From ecd593fb53fb014d0768b3b3e14a8661d7a307bf Mon Sep 17 00:00:00 2001 From: Karl Seguin Date: Mon, 26 May 2025 15:08:25 +0800 Subject: [PATCH 2/3] Add dummy Element.checkVisibility `checkVisibility` currently always return true. Also, when the visibility CSS property is checked, always return 'visible'. This allows the playwright click test to pass with a working getComputedStyle. It's also probably more accurate - by default, most elements are probably visible. But it still isn't great. Add named_get to CSSStyleDeclaration (allowing things like `style.display`). --- src/browser/cssom/css_style_declaration.zig | 22 ++++++++++++++++++++- src/browser/dom/element.zig | 12 +++++++++++ 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/src/browser/cssom/css_style_declaration.zig b/src/browser/cssom/css_style_declaration.zig index 00c8f039..08361906 100644 --- a/src/browser/cssom/css_style_declaration.zig +++ b/src/browser/cssom/css_style_declaration.zig @@ -95,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 { @@ -127,6 +136,11 @@ 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 { + std.debug.print("named_get: {s} {s}\n", .{name, self._getPropertyValue(name)}); + return self._getPropertyValue(name); + } }; const testing = @import("../../testing.zig"); @@ -164,6 +178,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" }, @@ -225,4 +240,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" }, + }, .{}); } diff --git a/src/browser/dom/element.zig b/src/browser/dom/element.zig index dd2a863d..6ab4dbfd 100644 --- a/src/browser/dom/element.zig +++ b/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 From b8cd0c1a778461e7c34d71913ea0e2a8dc38a165 Mon Sep 17 00:00:00 2001 From: Karl Seguin Date: Mon, 26 May 2025 15:43:21 +0800 Subject: [PATCH 3/3] remove debug statement --- src/browser/cssom/css_style_declaration.zig | 1 - 1 file changed, 1 deletion(-) diff --git a/src/browser/cssom/css_style_declaration.zig b/src/browser/cssom/css_style_declaration.zig index 08361906..62779f5f 100644 --- a/src/browser/cssom/css_style_declaration.zig +++ b/src/browser/cssom/css_style_declaration.zig @@ -138,7 +138,6 @@ pub const CSSStyleDeclaration = struct { } pub fn named_get(self: *const CSSStyleDeclaration, name: []const u8, _: *bool) []const u8 { - std.debug.print("named_get: {s} {s}\n", .{name, self._getPropertyValue(name)}); return self._getPropertyValue(name); } };