From ee034943b68115180583da23e39f3079b07d014d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 16:27:25 +0900
Subject: [PATCH 01/35] feat(css): implement stylesheet rule management

Adds a CSS rule parser and implements `insertRule`, `deleteRule`, and
`replaceSync` in `CSSStyleSheet`. Also updates `CSSRuleList` to use
dynamic storage and populates sheets from `<style>` elements.
---
 src/browser/css/Parser.zig                | 140 ++++++++++++++++++++++
 src/browser/webapi/css/CSSRuleList.zig    |  26 +++-
 src/browser/webapi/css/CSSStyleRule.zig   |  16 +++
 src/browser/webapi/css/CSSStyleSheet.zig  |  48 +++++---
 src/browser/webapi/element/html/Style.zig |   4 +
 5 files changed, 215 insertions(+), 19 deletions(-)

diff --git a/src/browser/css/Parser.zig b/src/browser/css/Parser.zig
index 34309631..526aa1db 100644
--- a/src/browser/css/Parser.zig
+++ b/src/browser/css/Parser.zig
@@ -293,3 +293,143 @@ fn isBang(token: Tokenizer.Token) bool {
         else => false,
     };
 }
+
+pub const Rule = struct {
+    selector: []const u8,
+    block: []const u8,
+};
+
+pub fn parseStylesheet(input: []const u8) RulesIterator {
+    return RulesIterator.init(input);
+}
+
+pub const RulesIterator = struct {
+    input: []const u8,
+    stream: TokenStream,
+
+    pub fn init(input: []const u8) RulesIterator {
+        return .{
+            .input = input,
+            .stream = TokenStream.init(input),
+        };
+    }
+
+    pub fn next(self: *RulesIterator) ?Rule {
+        var selector_start: ?usize = null;
+        var selector_end: ?usize = null;
+
+        // Skip leading trivia
+        while (self.stream.peek()) |peeked| {
+            if (!isWhitespaceOrComment(peeked.token)) break;
+            _ = self.stream.next();
+        }
+
+        while (true) {
+            const peeked = self.stream.peek() orelse return null;
+
+            if (isCurlyBlockStart(peeked.token)) {
+                if (selector_start == null) {
+                    self.skipBlock();
+                    continue;
+                }
+
+                const open_brace = self.stream.next() orelse return null;
+                const block_start = open_brace.end;
+                var block_end = block_start;
+
+                var depth: usize = 1;
+                while (true) {
+                    const span = self.stream.next() orelse {
+                        block_end = self.input.len;
+                        break;
+                    };
+                    if (isCurlyBlockStart(span.token)) {
+                        depth += 1;
+                    } else if (isCurlyBlockEnd(span.token)) {
+                        depth -= 1;
+                        if (depth == 0) {
+                            block_end = span.start;
+                            break;
+                        }
+                    }
+                }
+
+                var selector = self.input[selector_start.?..selector_end.?];
+                selector = std.mem.trim(u8, selector, &std.ascii.whitespace);
+
+                return .{
+                    .selector = selector,
+                    .block = self.input[block_start..block_end],
+                };
+            }
+
+            if (peeked.token == .at_keyword) {
+                self.skipAtRule();
+                selector_start = null;
+                selector_end = null;
+                continue;
+            }
+
+            const span = self.stream.next() orelse return null;
+            if (!isWhitespaceOrComment(span.token)) {
+                if (selector_start == null) selector_start = span.start;
+                selector_end = span.end;
+            }
+        }
+    }
+
+    fn skipBlock(self: *RulesIterator) void {
+        const span = self.stream.next() orelse return;
+        if (!isCurlyBlockStart(span.token)) return;
+
+        var depth: usize = 1;
+        while (true) {
+            const next_span = self.stream.next() orelse return;
+            if (isCurlyBlockStart(next_span.token)) {
+                depth += 1;
+            } else if (isCurlyBlockEnd(next_span.token)) {
+                depth -= 1;
+                if (depth == 0) return;
+            }
+        }
+    }
+
+    fn skipAtRule(self: *RulesIterator) void {
+        _ = self.stream.next(); // consume @keyword
+        var depth: usize = 0;
+        var saw_block = false;
+
+        while (true) {
+            const peeked = self.stream.peek() orelse return;
+            if (!saw_block and isSemicolon(peeked.token) and depth == 0) {
+                _ = self.stream.next();
+                return;
+            }
+
+            const span = self.stream.next() orelse return;
+            if (isWhitespaceOrComment(span.token)) continue;
+
+            if (isCurlyBlockStart(span.token)) {
+                depth += 1;
+                saw_block = true;
+            } else if (isCurlyBlockEnd(span.token)) {
+                if (depth > 0) depth -= 1;
+                if (saw_block and depth == 0) return;
+            }
+        }
+    }
+};
+
+fn isCurlyBlockStart(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .curly_bracket_block => true,
+        else => false,
+    };
+}
+
+fn isCurlyBlockEnd(token: Tokenizer.Token) bool {
+    return switch (token) {
+        .close_curly_bracket => true,
+        else => false,
+    };
+}
diff --git a/src/browser/webapi/css/CSSRuleList.zig b/src/browser/webapi/css/CSSRuleList.zig
index 7e727a56..7f9d1a77 100644
--- a/src/browser/webapi/css/CSSRuleList.zig
+++ b/src/browser/webapi/css/CSSRuleList.zig
@@ -5,21 +5,39 @@ const CSSRule = @import("CSSRule.zig");
 
 const CSSRuleList = @This();
 
-_rules: []*CSSRule = &.{},
+_rules: std.ArrayListUnmanaged(*CSSRule) = .{},
 
 pub fn init(page: *Page) !*CSSRuleList {
     return page._factory.create(CSSRuleList{});
 }
 
 pub fn length(self: *const CSSRuleList) u32 {
-    return @intCast(self._rules.len);
+    return @intCast(self._rules.items.len);
 }
 
 pub fn item(self: *const CSSRuleList, index: usize) ?*CSSRule {
-    if (index >= self._rules.len) {
+    if (index >= self._rules.items.len) {
         return null;
     }
-    return self._rules[index];
+    return self._rules.items[index];
+}
+
+pub fn insert(self: *CSSRuleList, index: u32, rule: *CSSRule, page: *Page) !void {
+    if (index > self._rules.items.len) {
+        return error.IndexSizeError; // Or standard DOMException mapped error
+    }
+    try self._rules.insert(page.arena, index, rule);
+}
+
+pub fn remove(self: *CSSRuleList, index: u32) void {
+    if (index >= self._rules.items.len) {
+        return; // Ignore or throw? Standard says IndexSizeError DOMException, but we might just no-op or return an error depending on the caller.
+    }
+    _ = self._rules.orderedRemove(index);
+}
+
+pub fn clear(self: *CSSRuleList) void {
+    self._rules.clearRetainingCapacity();
 }
 
 pub const JsApi = struct {
diff --git a/src/browser/webapi/css/CSSStyleRule.zig b/src/browser/webapi/css/CSSStyleRule.zig
index cff5ebae..767ae46e 100644
--- a/src/browser/webapi/css/CSSStyleRule.zig
+++ b/src/browser/webapi/css/CSSStyleRule.zig
@@ -34,6 +34,21 @@ pub fn getStyle(self: *CSSStyleRule, page: *Page) !*CSSStyleDeclaration {
     return style;
 }
 
+pub fn getCssText(self: *CSSStyleRule, page: *Page) ![]const u8 {
+    const style = try self.getStyle(page);
+    var buf = std.Io.Writer.Allocating.init(page.call_arena);
+    try buf.writer.print("{s} {{ ", .{self._selector_text});
+    try style.format(&buf.writer);
+    try buf.writer.writeAll(" }");
+    return buf.written();
+}
+
+pub fn setCssText(self: *CSSStyleRule, text: []const u8, page: *Page) !void {
+    _ = self;
+    _ = text;
+    _ = page;
+}
+
 pub const JsApi = struct {
     pub const bridge = js.Bridge(CSSStyleRule);
 
@@ -45,4 +60,5 @@ pub const JsApi = struct {
 
     pub const selectorText = bridge.accessor(CSSStyleRule.getSelectorText, CSSStyleRule.setSelectorText, .{});
     pub const style = bridge.accessor(CSSStyleRule.getStyle, null, .{});
+    pub const cssText = bridge.accessor(CSSStyleRule.getCssText, CSSStyleRule.setCssText, .{});
 };
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 5500f63c..673ff370 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -4,6 +4,8 @@ const Page = @import("../../Page.zig");
 const Element = @import("../Element.zig");
 const CSSRuleList = @import("CSSRuleList.zig");
 const CSSRule = @import("CSSRule.zig");
+const CSSStyleRule = @import("CSSStyleRule.zig");
+const Parser = @import("../../css/Parser.zig");
 
 const CSSStyleSheet = @This();
 
@@ -54,30 +56,46 @@ pub fn getOwnerRule(self: *const CSSStyleSheet) ?*CSSRule {
 }
 
 pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, index: u32, page: *Page) !u32 {
-    _ = self;
-    _ = rule;
-    _ = index;
-    _ = page;
-    return 0;
+    var it = Parser.parseStylesheet(rule);
+    const parsed_rule = it.next() orelse return error.SyntaxError;
+
+    const style_rule = try CSSStyleRule.init(page);
+    try style_rule.setSelectorText(parsed_rule.selector, page);
+
+    const style = try style_rule.getStyle(page);
+    try style.setCssText(parsed_rule.block, page);
+
+    const rules = try self.getCssRules(page);
+    try rules.insert(index, style_rule._proto, page);
+    return index;
 }
 
 pub fn deleteRule(self: *CSSStyleSheet, index: u32, page: *Page) !void {
-    _ = self;
-    _ = index;
-    _ = page;
+    const rules = try self.getCssRules(page);
+    rules.remove(index);
 }
 
 pub fn replace(self: *CSSStyleSheet, text: []const u8, page: *Page) !js.Promise {
-    _ = self;
-    _ = text;
-    // TODO: clear self.css_rules
+    try self.replaceSync(text, page);
     return page.js.local.?.resolvePromise({});
 }
 
-pub fn replaceSync(self: *CSSStyleSheet, text: []const u8) !void {
-    _ = self;
-    _ = text;
-    // TODO: clear self.css_rules
+pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) !void {
+    const rules = try self.getCssRules(page);
+    rules.clear();
+
+    var it = Parser.parseStylesheet(text);
+    var index: u32 = 0;
+    while (it.next()) |parsed_rule| {
+        const style_rule = try CSSStyleRule.init(page);
+        try style_rule.setSelectorText(parsed_rule.selector, page);
+
+        const style = try style_rule.getStyle(page);
+        try style.setCssText(parsed_rule.block, page);
+
+        try rules.insert(index, style_rule._proto, page);
+        index += 1;
+    }
 }
 
 pub const JsApi = struct {
diff --git a/src/browser/webapi/element/html/Style.zig b/src/browser/webapi/element/html/Style.zig
index 131b7634..3a5f4bc5 100644
--- a/src/browser/webapi/element/html/Style.zig
+++ b/src/browser/webapi/element/html/Style.zig
@@ -94,6 +94,10 @@ pub fn getSheet(self: *Style, page: *Page) !?*CSSStyleSheet {
     if (self._sheet) |sheet| return sheet;
     const sheet = try CSSStyleSheet.initWithOwner(self.asElement(), page);
     self._sheet = sheet;
+
+    const text = try self.asNode().getTextContentAlloc(page.call_arena);
+    try sheet.replaceSync(text, page);
+
     return sheet;
 }
 

From f58f6e8d651fd62f647317ecf53fcb293bb5dc2e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 20:23:59 +0900
Subject: [PATCH 02/35] css: improve CSSOM rule handling and serialization

Refactors `CSSRule` to a union type for better type safety and updates
`CSSStyleRule` to use `CSSStyleProperties`. Adds comprehensive tests for
`insertRule`, `deleteRule`, and `replaceSync`.
---
 src/browser/tests/css/stylesheet.html         | 54 +++++++++++++++++++
 src/browser/tests/element/html/style.html     | 14 +++++
 src/browser/webapi/css/CSSRule.zig            | 49 ++++++++++-------
 .../webapi/css/CSSStyleDeclaration.zig        |  3 +-
 src/browser/webapi/css/CSSStyleRule.zig       | 20 +++----
 src/browser/webapi/css/CSSStyleSheet.zig      |  6 ++-
 6 files changed, 115 insertions(+), 31 deletions(-)

diff --git a/src/browser/tests/css/stylesheet.html b/src/browser/tests/css/stylesheet.html
index ec7928af..84e99658 100644
--- a/src/browser/tests/css/stylesheet.html
+++ b/src/browser/tests/css/stylesheet.html
@@ -419,3 +419,57 @@
     testing.expectEqual('anchor-size(--foo width, anchor-size(--bar height))', div.style.width);
 }
 </script>
+
+<script id="CSSStyleSheet_insertRule_deleteRule">
+{
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    const sheet = style.sheet;
+
+    testing.expectEqual(0, sheet.cssRules.length);
+
+    sheet.insertRule('.test { color: green; }', 0);
+    testing.expectEqual(1, sheet.cssRules.length);
+    console.warn("constructor:", sheet.cssRules[0].constructor.name);
+    testing.expectEqual('.test', sheet.cssRules[0].selectorText);
+    testing.expectEqual('green', sheet.cssRules[0].style.color);
+
+    sheet.deleteRule(0);
+    testing.expectEqual(0, sheet.cssRules.length);
+}
+</script>
+
+<script id="CSSStyleSheet_replaceSync">
+{
+    const sheet = new CSSStyleSheet();
+    testing.expectEqual(0, sheet.cssRules.length);
+
+    sheet.replaceSync('.test { color: blue; }');
+    testing.expectEqual(1, sheet.cssRules.length);
+    testing.expectEqual('.test', sheet.cssRules[0].selectorText);
+    testing.expectEqual('blue', sheet.cssRules[0].style.color);
+
+    let replacedAsync = false;
+    testing.async(async () => {
+        await sheet.replace('.async-test { margin: 10px; }');
+        testing.expectEqual(1, sheet.cssRules.length);
+        testing.expectEqual('.async-test', sheet.cssRules[0].selectorText);
+        replacedAsync = true;
+    });
+    testing.eventually(() => testing.expectTrue(replacedAsync));
+}
+</script>
+
+<script id="CSSStyleRule_cssText">
+{
+    const sheet = new CSSStyleSheet();
+    sheet.replaceSync('.test { color: red; margin: 10px; }');
+
+    // Check serialization format
+    const cssText = sheet.cssRules[0].cssText;
+    testing.expectTrue(cssText.includes('.test { '));
+    testing.expectTrue(cssText.includes('color: red;'));
+    testing.expectTrue(cssText.includes('margin: 10px;'));
+    testing.expectTrue(cssText.includes('}'));
+}
+</script>
diff --git a/src/browser/tests/element/html/style.html b/src/browser/tests/element/html/style.html
index 8abbb229..ee393846 100644
--- a/src/browser/tests/element/html/style.html
+++ b/src/browser/tests/element/html/style.html
@@ -131,3 +131,17 @@
   testing.eventually(() => testing.expectEqual(true, result));
 }
 </script>
+
+<script id="style-tag-content-parsing">
+{
+  const style = document.createElement("style");
+  style.textContent = '.content-test { padding: 5px; }';
+  document.head.appendChild(style);
+
+  const sheet = style.sheet;
+  testing.expectTrue(sheet instanceof CSSStyleSheet);
+  testing.expectEqual(1, sheet.cssRules.length);
+  testing.expectEqual('.content-test', sheet.cssRules[0].selectorText);
+  testing.expectEqual('5px', sheet.cssRules[0].style.padding);
+}
+</script>
diff --git a/src/browser/webapi/css/CSSRule.zig b/src/browser/webapi/css/CSSRule.zig
index dcf41db9..6b03c53e 100644
--- a/src/browser/webapi/css/CSSRule.zig
+++ b/src/browser/webapi/css/CSSRule.zig
@@ -2,29 +2,42 @@ const std = @import("std");
 const js = @import("../../js/js.zig");
 const Page = @import("../../Page.zig");
 
+const CSSStyleRule = @import("CSSStyleRule.zig");
+
 const CSSRule = @This();
 
-pub const Type = enum(u16) {
-    style = 1,
-    charset = 2,
-    import = 3,
-    media = 4,
-    font_face = 5,
-    page = 6,
-    keyframes = 7,
-    keyframe = 8,
-    margin = 9,
-    namespace = 10,
-    counter_style = 11,
-    supports = 12,
-    document = 13,
-    font_feature_values = 14,
-    viewport = 15,
-    region_style = 16,
+pub const Type = union(enum) {
+    style: *CSSStyleRule,
+    charset: void,
+    import: void,
+    media: void,
+    font_face: void,
+    page: void,
+    keyframes: void,
+    keyframe: void,
+    margin: void,
+    namespace: void,
+    counter_style: void,
+    supports: void,
+    document: void,
+    font_feature_values: void,
+    viewport: void,
+    region_style: void,
 };
 
 _type: Type,
 
+pub fn as(self: *CSSRule, comptime T: type) *T {
+    return self.is(T).?;
+}
+
+pub fn is(self: *CSSRule, comptime T: type) ?*T {
+    switch (self._type) {
+        .style => |r| return if (T == CSSStyleRule) r else null,
+        else => return null,
+    }
+}
+
 pub fn init(rule_type: Type, page: *Page) !*CSSRule {
     return page._factory.create(CSSRule{
         ._type = rule_type,
@@ -32,7 +45,7 @@ pub fn init(rule_type: Type, page: *Page) !*CSSRule {
 }
 
 pub fn getType(self: *const CSSRule) u16 {
-    return @intFromEnum(self._type);
+    return @as(u16, @intFromEnum(std.meta.activeTag(self._type))) + 1;
 }
 
 pub fn getCssText(self: *const CSSRule, page: *Page) []const u8 {
diff --git a/src/browser/webapi/css/CSSStyleDeclaration.zig b/src/browser/webapi/css/CSSStyleDeclaration.zig
index ebaafbe0..e18bd459 100644
--- a/src/browser/webapi/css/CSSStyleDeclaration.zig
+++ b/src/browser/webapi/css/CSSStyleDeclaration.zig
@@ -180,8 +180,6 @@ pub fn getCssText(self: *const CSSStyleDeclaration, page: *Page) ![]const u8 {
 }
 
 pub fn setCssText(self: *CSSStyleDeclaration, text: []const u8, page: *Page) !void {
-    if (self._element == null) return;
-
     // Clear existing properties
     var node = self._properties.first;
     while (node) |n| {
@@ -197,6 +195,7 @@ pub fn setCssText(self: *CSSStyleDeclaration, text: []const u8, page: *Page) !vo
     while (it.next()) |declaration| {
         try self.setPropertyImpl(declaration.name, declaration.value, declaration.important, page);
     }
+
     try self.syncStyleAttribute(page);
 }
 
diff --git a/src/browser/webapi/css/CSSStyleRule.zig b/src/browser/webapi/css/CSSStyleRule.zig
index 767ae46e..6d07ab5d 100644
--- a/src/browser/webapi/css/CSSStyleRule.zig
+++ b/src/browser/webapi/css/CSSStyleRule.zig
@@ -2,19 +2,20 @@ const std = @import("std");
 const js = @import("../../js/js.zig");
 const Page = @import("../../Page.zig");
 const CSSRule = @import("CSSRule.zig");
-const CSSStyleDeclaration = @import("CSSStyleDeclaration.zig");
+const CSSStyleProperties = @import("CSSStyleProperties.zig");
 
 const CSSStyleRule = @This();
 
 _proto: *CSSRule,
 _selector_text: []const u8 = "",
-_style: ?*CSSStyleDeclaration = null,
+_style: ?*CSSStyleProperties = null,
 
 pub fn init(page: *Page) !*CSSStyleRule {
-    const rule = try CSSRule.init(.style, page);
-    return page._factory.create(CSSStyleRule{
-        ._proto = rule,
+    const style_rule = try page._factory.create(CSSStyleRule{
+        ._proto = undefined,
     });
+    style_rule._proto = try CSSRule.init(.{ .style = style_rule }, page);
+    return style_rule;
 }
 
 pub fn getSelectorText(self: *const CSSStyleRule) []const u8 {
@@ -25,17 +26,18 @@ pub fn setSelectorText(self: *CSSStyleRule, text: []const u8, page: *Page) !void
     self._selector_text = try page.dupeString(text);
 }
 
-pub fn getStyle(self: *CSSStyleRule, page: *Page) !*CSSStyleDeclaration {
+pub fn getStyle(self: *CSSStyleRule, page: *Page) !*CSSStyleProperties {
     if (self._style) |style| {
         return style;
     }
-    const style = try CSSStyleDeclaration.init(null, false, page);
+    const style = try CSSStyleProperties.init(null, false, page);
     self._style = style;
     return style;
 }
 
 pub fn getCssText(self: *CSSStyleRule, page: *Page) ![]const u8 {
-    const style = try self.getStyle(page);
+    const style_props = try self.getStyle(page);
+    const style = style_props.asCSSStyleDeclaration();
     var buf = std.Io.Writer.Allocating.init(page.call_arena);
     try buf.writer.print("{s} {{ ", .{self._selector_text});
     try style.format(&buf.writer);
@@ -54,7 +56,7 @@ pub const JsApi = struct {
 
     pub const Meta = struct {
         pub const name = "CSSStyleRule";
-        pub const prototype_chain = bridge.prototypeChain(CSSRule);
+        pub const prototype_chain = bridge.prototypeChain();
         pub var class_id: bridge.ClassId = undefined;
     };
 
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 673ff370..7474ea50 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -62,7 +62,8 @@ pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, index: u32, page: *Pag
     const style_rule = try CSSStyleRule.init(page);
     try style_rule.setSelectorText(parsed_rule.selector, page);
 
-    const style = try style_rule.getStyle(page);
+    const style_props = try style_rule.getStyle(page);
+    const style = style_props.asCSSStyleDeclaration();
     try style.setCssText(parsed_rule.block, page);
 
     const rules = try self.getCssRules(page);
@@ -90,7 +91,8 @@ pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) !void {
         const style_rule = try CSSStyleRule.init(page);
         try style_rule.setSelectorText(parsed_rule.selector, page);
 
-        const style = try style_rule.getStyle(page);
+        const style_props = try style_rule.getStyle(page);
+        const style = style_props.asCSSStyleDeclaration();
         try style.setCssText(parsed_rule.block, page);
 
         try rules.insert(index, style_rule._proto, page);

From 48dd80867bbee18a1a728b089786b1862afe0340 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 20:55:44 +0900
Subject: [PATCH 03/35] dom: support css display: none in checkVisibility

Updates `Element.checkVisibility` to iterate through document
stylesheets and check for matching rules with `display: none`.
Also ensures `<style>` elements register their sheets and
initializes them immediately upon addition to the DOM.
---
 src/browser/webapi/Element.zig            | 35 ++++++++++++++++++++++-
 src/browser/webapi/css/CSSStyleSheet.zig  |  2 ++
 src/browser/webapi/css/StyleSheetList.zig | 13 ++++++---
 src/browser/webapi/element/html/Style.zig |  7 +++++
 4 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 2b5db1f7..9ce7b0bc 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1041,6 +1041,8 @@ pub fn parentElement(self: *Element) ?*Element {
     return self._proto.parentElement();
 }
 
+const CSSStyleRule = @import("css/CSSStyleRule.zig");
+
 pub fn checkVisibility(self: *Element, page: *Page) bool {
     var current: ?*Element = self;
 
@@ -1051,9 +1053,40 @@ pub fn checkVisibility(self: *Element, page: *Page) bool {
                 return false;
             }
         }
+
+        // Also check if any global stylesheet hides this element
+        const doc_sheets = page.document.getStyleSheets(page) catch null;
+        if (doc_sheets) |sheets| {
+            var i: usize = 0;
+            if (sheets.length() > 0) log.info(.dom, "css.visibility.check", .{});
+            while (i < sheets.length()) : (i += 1) {
+                const sheet = sheets.item(i) orelse continue;
+                const rules = sheet.getCssRules(page) catch continue;
+                var j: usize = 0;
+                while (j < rules.length()) : (j += 1) {
+                    const rule = rules.item(j) orelse continue;
+                    if (rule.is(CSSStyleRule)) |style_rule| {
+                        const selector = style_rule.getSelectorText();
+                        // log.info(.dom, "check_visibility.eval {s}", .{selector});
+                        const does_match = el.matches(selector, page) catch |err| blk: {
+                            log.info(.dom, "check_visibility.err", .{ .err = err });
+                            break :blk false;
+                        };
+                        if (does_match) {
+                            const style = (style_rule.getStyle(page) catch continue).asCSSStyleDeclaration();
+                            const display = style.getPropertyValue("display", page);
+                            log.info(.dom, "check_visibility.hit", .{});
+                            if (std.mem.eql(u8, display, "none")) {
+                                return false;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
         current = el.parentElement();
     }
-
     return true;
 }
 
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 7474ea50..893c62df 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -61,6 +61,7 @@ pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, index: u32, page: *Pag
 
     const style_rule = try CSSStyleRule.init(page);
     try style_rule.setSelectorText(parsed_rule.selector, page);
+    @import("../../../log.zig").info(.dom, "css.rule.add {s}", .{parsed_rule.selector});
 
     const style_props = try style_rule.getStyle(page);
     const style = style_props.asCSSStyleDeclaration();
@@ -90,6 +91,7 @@ pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) !void {
     while (it.next()) |parsed_rule| {
         const style_rule = try CSSStyleRule.init(page);
         try style_rule.setSelectorText(parsed_rule.selector, page);
+        @import("../../../log.zig").info(.dom, "css.rule.add {s}", .{parsed_rule.selector});
 
         const style_props = try style_rule.getStyle(page);
         const style = style_props.asCSSStyleDeclaration();
diff --git a/src/browser/webapi/css/StyleSheetList.zig b/src/browser/webapi/css/StyleSheetList.zig
index c44dc601..07aa0f4e 100644
--- a/src/browser/webapi/css/StyleSheetList.zig
+++ b/src/browser/webapi/css/StyleSheetList.zig
@@ -5,19 +5,24 @@ const CSSStyleSheet = @import("CSSStyleSheet.zig");
 
 const StyleSheetList = @This();
 
-_sheets: []*CSSStyleSheet = &.{},
+_sheets: std.ArrayListUnmanaged(*CSSStyleSheet) = .{},
 
 pub fn init(page: *Page) !*StyleSheetList {
     return page._factory.create(StyleSheetList{});
 }
 
 pub fn length(self: *const StyleSheetList) u32 {
-    return @intCast(self._sheets.len);
+    return @intCast(self._sheets.items.len);
 }
 
 pub fn item(self: *const StyleSheetList, index: usize) ?*CSSStyleSheet {
-    if (index >= self._sheets.len) return null;
-    return self._sheets[index];
+    if (index >= self._sheets.items.len) return null;
+    return self._sheets.items[index];
+}
+
+pub fn add(self: *StyleSheetList, sheet: *CSSStyleSheet, page: *Page) !void {
+    @import("../../../log.zig").info(.dom, "css.sheet.add", .{});
+    try self._sheets.append(page.arena, sheet);
 }
 
 pub const JsApi = struct {
diff --git a/src/browser/webapi/element/html/Style.zig b/src/browser/webapi/element/html/Style.zig
index 3a5f4bc5..9c30da1a 100644
--- a/src/browser/webapi/element/html/Style.zig
+++ b/src/browser/webapi/element/html/Style.zig
@@ -78,6 +78,7 @@ pub fn setDisabled(self: *Style, disabled: bool, page: *Page) !void {
 
 const CSSStyleSheet = @import("../../css/CSSStyleSheet.zig");
 pub fn getSheet(self: *Style, page: *Page) !?*CSSStyleSheet {
+    @import("../../../../log.zig").info(.dom, "css.style.get_sheet", .{});
     // Per spec, sheet is null for disconnected elements or non-CSS types.
     // Valid types: absent (defaults to "text/css"), empty string, or
     // case-insensitive match for "text/css".
@@ -98,10 +99,16 @@ pub fn getSheet(self: *Style, page: *Page) !?*CSSStyleSheet {
     const text = try self.asNode().getTextContentAlloc(page.call_arena);
     try sheet.replaceSync(text, page);
 
+    const sheets = try page.document.getStyleSheets(page);
+    try sheets.add(sheet, page);
+
     return sheet;
 }
 
 pub fn styleAddedCallback(self: *Style, page: *Page) !void {
+    // Force stylesheet initialization so rules are parsed immediately
+    _ = self.getSheet(page) catch null;
+
     // if we're planning on navigating to another page, don't trigger load event.
     if (page.isGoingAway()) {
         return;

From b2b609a309c197839e34152a3fa8fb17dec177fd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 22:07:58 +0900
Subject: [PATCH 04/35] dom: remove verbose logging and simplify css logic

---
 src/browser/webapi/Element.zig                 | 8 +-------
 src/browser/webapi/css/CSSStyleDeclaration.zig | 2 --
 src/browser/webapi/css/CSSStyleSheet.zig       | 2 --
 src/browser/webapi/css/StyleSheetList.zig      | 1 -
 src/browser/webapi/element/html/Style.zig      | 1 -
 5 files changed, 1 insertion(+), 13 deletions(-)

diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 9ce7b0bc..5469e82b 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1058,7 +1058,6 @@ pub fn checkVisibility(self: *Element, page: *Page) bool {
         const doc_sheets = page.document.getStyleSheets(page) catch null;
         if (doc_sheets) |sheets| {
             var i: usize = 0;
-            if (sheets.length() > 0) log.info(.dom, "css.visibility.check", .{});
             while (i < sheets.length()) : (i += 1) {
                 const sheet = sheets.item(i) orelse continue;
                 const rules = sheet.getCssRules(page) catch continue;
@@ -1067,15 +1066,10 @@ pub fn checkVisibility(self: *Element, page: *Page) bool {
                     const rule = rules.item(j) orelse continue;
                     if (rule.is(CSSStyleRule)) |style_rule| {
                         const selector = style_rule.getSelectorText();
-                        // log.info(.dom, "check_visibility.eval {s}", .{selector});
-                        const does_match = el.matches(selector, page) catch |err| blk: {
-                            log.info(.dom, "check_visibility.err", .{ .err = err });
-                            break :blk false;
-                        };
+                        const does_match = el.matches(selector, page) catch false;
                         if (does_match) {
                             const style = (style_rule.getStyle(page) catch continue).asCSSStyleDeclaration();
                             const display = style.getPropertyValue("display", page);
-                            log.info(.dom, "check_visibility.hit", .{});
                             if (std.mem.eql(u8, display, "none")) {
                                 return false;
                             }
diff --git a/src/browser/webapi/css/CSSStyleDeclaration.zig b/src/browser/webapi/css/CSSStyleDeclaration.zig
index e18bd459..c120f7b1 100644
--- a/src/browser/webapi/css/CSSStyleDeclaration.zig
+++ b/src/browser/webapi/css/CSSStyleDeclaration.zig
@@ -172,8 +172,6 @@ pub fn setFloat(self: *CSSStyleDeclaration, value_: ?[]const u8, page: *Page) !v
 }
 
 pub fn getCssText(self: *const CSSStyleDeclaration, page: *Page) ![]const u8 {
-    if (self._element == null) return "";
-
     var buf = std.Io.Writer.Allocating.init(page.call_arena);
     try self.format(&buf.writer);
     return buf.written();
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 893c62df..7474ea50 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -61,7 +61,6 @@ pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, index: u32, page: *Pag
 
     const style_rule = try CSSStyleRule.init(page);
     try style_rule.setSelectorText(parsed_rule.selector, page);
-    @import("../../../log.zig").info(.dom, "css.rule.add {s}", .{parsed_rule.selector});
 
     const style_props = try style_rule.getStyle(page);
     const style = style_props.asCSSStyleDeclaration();
@@ -91,7 +90,6 @@ pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) !void {
     while (it.next()) |parsed_rule| {
         const style_rule = try CSSStyleRule.init(page);
         try style_rule.setSelectorText(parsed_rule.selector, page);
-        @import("../../../log.zig").info(.dom, "css.rule.add {s}", .{parsed_rule.selector});
 
         const style_props = try style_rule.getStyle(page);
         const style = style_props.asCSSStyleDeclaration();
diff --git a/src/browser/webapi/css/StyleSheetList.zig b/src/browser/webapi/css/StyleSheetList.zig
index 07aa0f4e..6cfe3a6e 100644
--- a/src/browser/webapi/css/StyleSheetList.zig
+++ b/src/browser/webapi/css/StyleSheetList.zig
@@ -21,7 +21,6 @@ pub fn item(self: *const StyleSheetList, index: usize) ?*CSSStyleSheet {
 }
 
 pub fn add(self: *StyleSheetList, sheet: *CSSStyleSheet, page: *Page) !void {
-    @import("../../../log.zig").info(.dom, "css.sheet.add", .{});
     try self._sheets.append(page.arena, sheet);
 }
 
diff --git a/src/browser/webapi/element/html/Style.zig b/src/browser/webapi/element/html/Style.zig
index 9c30da1a..b6389d61 100644
--- a/src/browser/webapi/element/html/Style.zig
+++ b/src/browser/webapi/element/html/Style.zig
@@ -78,7 +78,6 @@ pub fn setDisabled(self: *Style, disabled: bool, page: *Page) !void {
 
 const CSSStyleSheet = @import("../../css/CSSStyleSheet.zig");
 pub fn getSheet(self: *Style, page: *Page) !?*CSSStyleSheet {
-    @import("../../../../log.zig").info(.dom, "css.style.get_sheet", .{});
     // Per spec, sheet is null for disconnected elements or non-CSS types.
     // Valid types: absent (defaults to "text/css"), empty string, or
     // case-insensitive match for "text/css".

From d918ec694b4f946859da981664ee93a801f1687b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 22:15:14 +0900
Subject: [PATCH 05/35] css: add log filter to CSSStyleSheet test

---
 src/browser/webapi/Element.zig           | 1 +
 src/browser/webapi/css/CSSStyleSheet.zig | 2 ++
 2 files changed, 3 insertions(+)

diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 5469e82b..fe0406b9 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1081,6 +1081,7 @@ pub fn checkVisibility(self: *Element, page: *Page) bool {
 
         current = el.parentElement();
     }
+
     return true;
 }
 
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 7474ea50..5ab48e77 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -124,5 +124,7 @@ pub const JsApi = struct {
 
 const testing = @import("../../../testing.zig");
 test "WebApi: CSSStyleSheet" {
+    const filter: testing.LogFilter = .init(.js);
+    defer filter.deinit();
     try testing.htmlRunner("css/stylesheet.html", .{});
 }

From e0343a3f6d97272efb005b470ac657e08a365219 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 22:23:59 +0900
Subject: [PATCH 06/35] Replace ArrayListUnmanaged with ArrayList

---
 src/SemanticTree.zig                      | 2 +-
 src/browser/webapi/css/CSSRuleList.zig    | 2 +-
 src/browser/webapi/css/StyleSheetList.zig | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/SemanticTree.zig b/src/SemanticTree.zig
index 8f5eb755..1a0910d2 100644
--- a/src/SemanticTree.zig
+++ b/src/SemanticTree.zig
@@ -225,7 +225,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
 }
 
 fn extractSelectOptions(node: *Node, page: *Page, arena: std.mem.Allocator) ![]OptionData {
-    var options = std.ArrayListUnmanaged(OptionData){};
+    var options: std.ArrayList(OptionData) = .empty;
     var it = node.childrenIterator();
     while (it.next()) |child| {
         if (child.is(Element)) |el| {
diff --git a/src/browser/webapi/css/CSSRuleList.zig b/src/browser/webapi/css/CSSRuleList.zig
index 7f9d1a77..e769bfbd 100644
--- a/src/browser/webapi/css/CSSRuleList.zig
+++ b/src/browser/webapi/css/CSSRuleList.zig
@@ -5,7 +5,7 @@ const CSSRule = @import("CSSRule.zig");
 
 const CSSRuleList = @This();
 
-_rules: std.ArrayListUnmanaged(*CSSRule) = .{},
+_rules: std.ArrayList(*CSSRule) = .empty,
 
 pub fn init(page: *Page) !*CSSRuleList {
     return page._factory.create(CSSRuleList{});
diff --git a/src/browser/webapi/css/StyleSheetList.zig b/src/browser/webapi/css/StyleSheetList.zig
index 6cfe3a6e..11efb45c 100644
--- a/src/browser/webapi/css/StyleSheetList.zig
+++ b/src/browser/webapi/css/StyleSheetList.zig
@@ -5,7 +5,7 @@ const CSSStyleSheet = @import("CSSStyleSheet.zig");
 
 const StyleSheetList = @This();
 
-_sheets: std.ArrayListUnmanaged(*CSSStyleSheet) = .{},
+_sheets: std.ArrayList(*CSSStyleSheet) = .empty,
 
 pub fn init(page: *Page) !*StyleSheetList {
     return page._factory.create(StyleSheetList{});

From 798f68d0ce9b0b95b882c91de443cee26f27965e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 22:29:51 +0900
Subject: [PATCH 07/35] css: remove curly block helper functions

---
 src/browser/css/Parser.zig | 30 ++++++++----------------------
 1 file changed, 8 insertions(+), 22 deletions(-)

diff --git a/src/browser/css/Parser.zig b/src/browser/css/Parser.zig
index 526aa1db..51463bce 100644
--- a/src/browser/css/Parser.zig
+++ b/src/browser/css/Parser.zig
@@ -327,7 +327,7 @@ pub const RulesIterator = struct {
         while (true) {
             const peeked = self.stream.peek() orelse return null;
 
-            if (isCurlyBlockStart(peeked.token)) {
+            if (peeked.token == .curly_bracket_block) {
                 if (selector_start == null) {
                     self.skipBlock();
                     continue;
@@ -343,9 +343,9 @@ pub const RulesIterator = struct {
                         block_end = self.input.len;
                         break;
                     };
-                    if (isCurlyBlockStart(span.token)) {
+                    if (span.token == .curly_bracket_block) {
                         depth += 1;
-                    } else if (isCurlyBlockEnd(span.token)) {
+                    } else if (span.token == .close_curly_bracket) {
                         depth -= 1;
                         if (depth == 0) {
                             block_end = span.start;
@@ -380,14 +380,14 @@ pub const RulesIterator = struct {
 
     fn skipBlock(self: *RulesIterator) void {
         const span = self.stream.next() orelse return;
-        if (!isCurlyBlockStart(span.token)) return;
+        if (span.token != .curly_bracket_block) return;
 
         var depth: usize = 1;
         while (true) {
             const next_span = self.stream.next() orelse return;
-            if (isCurlyBlockStart(next_span.token)) {
+            if (next_span.token == .curly_bracket_block) {
                 depth += 1;
-            } else if (isCurlyBlockEnd(next_span.token)) {
+            } else if (next_span.token == .close_curly_bracket) {
                 depth -= 1;
                 if (depth == 0) return;
             }
@@ -409,27 +409,13 @@ pub const RulesIterator = struct {
             const span = self.stream.next() orelse return;
             if (isWhitespaceOrComment(span.token)) continue;
 
-            if (isCurlyBlockStart(span.token)) {
+            if (span.token == .curly_bracket_block) {
                 depth += 1;
                 saw_block = true;
-            } else if (isCurlyBlockEnd(span.token)) {
+            } else if (span.token == .close_curly_bracket) {
                 if (depth > 0) depth -= 1;
                 if (saw_block and depth == 0) return;
             }
         }
     }
 };
-
-fn isCurlyBlockStart(token: Tokenizer.Token) bool {
-    return switch (token) {
-        .curly_bracket_block => true,
-        else => false,
-    };
-}
-
-fn isCurlyBlockEnd(token: Tokenizer.Token) bool {
-    return switch (token) {
-        .close_curly_bracket => true,
-        else => false,
-    };
-}

From 2aef4ab677612036cb1a37bf56a93f45ae847bb1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 22:32:06 +0900
Subject: [PATCH 08/35] webapi.Element: optimize checkVisibility and refactor
 loops

---
 src/browser/webapi/Element.zig | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index fe0406b9..0d41ee1f 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1044,6 +1044,7 @@ pub fn parentElement(self: *Element) ?*Element {
 const CSSStyleRule = @import("css/CSSStyleRule.zig");
 
 pub fn checkVisibility(self: *Element, page: *Page) bool {
+    const doc_sheets = page.document.getStyleSheets(page) catch null;
     var current: ?*Element = self;
 
     while (current) |el| {
@@ -1055,14 +1056,11 @@ pub fn checkVisibility(self: *Element, page: *Page) bool {
         }
 
         // Also check if any global stylesheet hides this element
-        const doc_sheets = page.document.getStyleSheets(page) catch null;
         if (doc_sheets) |sheets| {
-            var i: usize = 0;
-            while (i < sheets.length()) : (i += 1) {
+            for (0..sheets.length()) |i| {
                 const sheet = sheets.item(i) orelse continue;
                 const rules = sheet.getCssRules(page) catch continue;
-                var j: usize = 0;
-                while (j < rules.length()) : (j += 1) {
+                for (0..rules.length()) |j| {
                     const rule = rules.item(j) orelse continue;
                     if (rule.is(CSSStyleRule)) |style_rule| {
                         const selector = style_rule.getSelectorText();

From de2b1cc6fe60da5a6e853ca308eaa557a8f61d07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 22:40:01 +0900
Subject: [PATCH 09/35] css: throw IndexSizeError in deleteRule and insertRule

---
 src/browser/tests/css/stylesheet.html          | 9 +++++++++
 src/browser/webapi/css/CSSRuleList.zig         | 6 +++---
 src/browser/webapi/css/CSSStyleDeclaration.zig | 1 -
 src/browser/webapi/css/CSSStyleSheet.zig       | 6 +++---
 4 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/browser/tests/css/stylesheet.html b/src/browser/tests/css/stylesheet.html
index 84e99658..7eab1a4e 100644
--- a/src/browser/tests/css/stylesheet.html
+++ b/src/browser/tests/css/stylesheet.html
@@ -436,6 +436,15 @@
 
     sheet.deleteRule(0);
     testing.expectEqual(0, sheet.cssRules.length);
+
+    let caught = false;
+    try {
+        sheet.deleteRule(5);
+    } catch (e) {
+        caught = true;
+        testing.expectEqual('IndexSizeError', e.name);
+    }
+    testing.expectTrue(caught);
 }
 </script>
 
diff --git a/src/browser/webapi/css/CSSRuleList.zig b/src/browser/webapi/css/CSSRuleList.zig
index e769bfbd..6c159aa2 100644
--- a/src/browser/webapi/css/CSSRuleList.zig
+++ b/src/browser/webapi/css/CSSRuleList.zig
@@ -24,14 +24,14 @@ pub fn item(self: *const CSSRuleList, index: usize) ?*CSSRule {
 
 pub fn insert(self: *CSSRuleList, index: u32, rule: *CSSRule, page: *Page) !void {
     if (index > self._rules.items.len) {
-        return error.IndexSizeError; // Or standard DOMException mapped error
+        return error.IndexSizeError;
     }
     try self._rules.insert(page.arena, index, rule);
 }
 
-pub fn remove(self: *CSSRuleList, index: u32) void {
+pub fn remove(self: *CSSRuleList, index: u32) !void {
     if (index >= self._rules.items.len) {
-        return; // Ignore or throw? Standard says IndexSizeError DOMException, but we might just no-op or return an error depending on the caller.
+        return error.IndexSizeError;
     }
     _ = self._rules.orderedRemove(index);
 }
diff --git a/src/browser/webapi/css/CSSStyleDeclaration.zig b/src/browser/webapi/css/CSSStyleDeclaration.zig
index c120f7b1..13499033 100644
--- a/src/browser/webapi/css/CSSStyleDeclaration.zig
+++ b/src/browser/webapi/css/CSSStyleDeclaration.zig
@@ -193,7 +193,6 @@ pub fn setCssText(self: *CSSStyleDeclaration, text: []const u8, page: *Page) !vo
     while (it.next()) |declaration| {
         try self.setPropertyImpl(declaration.name, declaration.value, declaration.important, page);
     }
-
     try self.syncStyleAttribute(page);
 }
 
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 5ab48e77..70f9c2ad 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -73,7 +73,7 @@ pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, index: u32, page: *Pag
 
 pub fn deleteRule(self: *CSSStyleSheet, index: u32, page: *Page) !void {
     const rules = try self.getCssRules(page);
-    rules.remove(index);
+    try rules.remove(index);
 }
 
 pub fn replace(self: *CSSStyleSheet, text: []const u8, page: *Page) !js.Promise {
@@ -116,8 +116,8 @@ pub const JsApi = struct {
     pub const disabled = bridge.accessor(CSSStyleSheet.getDisabled, CSSStyleSheet.setDisabled, .{});
     pub const cssRules = bridge.accessor(CSSStyleSheet.getCssRules, null, .{});
     pub const ownerRule = bridge.accessor(CSSStyleSheet.getOwnerRule, null, .{});
-    pub const insertRule = bridge.function(CSSStyleSheet.insertRule, .{});
-    pub const deleteRule = bridge.function(CSSStyleSheet.deleteRule, .{});
+    pub const insertRule = bridge.function(CSSStyleSheet.insertRule, .{ .dom_exception = true });
+    pub const deleteRule = bridge.function(CSSStyleSheet.deleteRule, .{ .dom_exception = true });
     pub const replace = bridge.function(CSSStyleSheet.replace, .{});
     pub const replaceSync = bridge.function(CSSStyleSheet.replaceSync, .{});
 };

From dfe04960c0b47f0f99097687795542d0f7cb48a9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 12 Mar 2026 22:47:41 +0900
Subject: [PATCH 10/35] css: remove cssText setter from CSSRule and
 CSSStyleRule

---
 src/browser/webapi/css/CSSRule.zig      | 17 ++++-------------
 src/browser/webapi/css/CSSStyleRule.zig |  8 +-------
 2 files changed, 5 insertions(+), 20 deletions(-)

diff --git a/src/browser/webapi/css/CSSRule.zig b/src/browser/webapi/css/CSSRule.zig
index 6b03c53e..a96fe82b 100644
--- a/src/browser/webapi/css/CSSRule.zig
+++ b/src/browser/webapi/css/CSSRule.zig
@@ -48,20 +48,11 @@ pub fn getType(self: *const CSSRule) u16 {
     return @as(u16, @intFromEnum(std.meta.activeTag(self._type))) + 1;
 }
 
-pub fn getCssText(self: *const CSSRule, page: *Page) []const u8 {
-    _ = self;
-    _ = page;
+pub fn getCssText(_: *const CSSRule, _: *Page) []const u8 {
     return "";
 }
 
-pub fn setCssText(self: *CSSRule, text: []const u8, page: *Page) !void {
-    _ = self;
-    _ = text;
-    _ = page;
-}
-
-pub fn getParentRule(self: *const CSSRule) ?*CSSRule {
-    _ = self;
+pub fn getParentRule(_: *const CSSRule) ?*CSSRule {
     return null;
 }
 
@@ -75,8 +66,8 @@ pub const JsApi = struct {
 
     pub const Meta = struct {
         pub const name = "CSSRule";
-        pub var class_id: bridge.ClassId = undefined;
         pub const prototype_chain = bridge.prototypeChain();
+        pub var class_id: bridge.ClassId = undefined;
     };
 
     pub const STYLE_RULE = 1;
@@ -97,7 +88,7 @@ pub const JsApi = struct {
     pub const REGION_STYLE_RULE = 16;
 
     pub const @"type" = bridge.accessor(CSSRule.getType, null, .{});
-    pub const cssText = bridge.accessor(CSSRule.getCssText, CSSRule.setCssText, .{});
+    pub const cssText = bridge.accessor(CSSRule.getCssText, null, .{});
     pub const parentRule = bridge.accessor(CSSRule.getParentRule, null, .{});
     pub const parentStyleSheet = bridge.accessor(CSSRule.getParentStyleSheet, null, .{});
 };
diff --git a/src/browser/webapi/css/CSSStyleRule.zig b/src/browser/webapi/css/CSSStyleRule.zig
index 6d07ab5d..561d39c1 100644
--- a/src/browser/webapi/css/CSSStyleRule.zig
+++ b/src/browser/webapi/css/CSSStyleRule.zig
@@ -45,12 +45,6 @@ pub fn getCssText(self: *CSSStyleRule, page: *Page) ![]const u8 {
     return buf.written();
 }
 
-pub fn setCssText(self: *CSSStyleRule, text: []const u8, page: *Page) !void {
-    _ = self;
-    _ = text;
-    _ = page;
-}
-
 pub const JsApi = struct {
     pub const bridge = js.Bridge(CSSStyleRule);
 
@@ -62,5 +56,5 @@ pub const JsApi = struct {
 
     pub const selectorText = bridge.accessor(CSSStyleRule.getSelectorText, CSSStyleRule.setSelectorText, .{});
     pub const style = bridge.accessor(CSSStyleRule.getStyle, null, .{});
-    pub const cssText = bridge.accessor(CSSStyleRule.getCssText, CSSStyleRule.setCssText, .{});
+    pub const cssText = bridge.accessor(CSSStyleRule.getCssText, null, .{});
 };

From 84d76cf90d4ddb851315cd58de1bd8ca3c7961cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 13 Mar 2026 13:33:33 +0900
Subject: [PATCH 11/35] browser: improve visibility and interactivity CSS
 checks

Adds support for `pointer-events: none` in interactivity classification
and expands `checkVisibility` to include `visibility` and `opacity`.
Refactors CSS property lookup into a shared helper.
---
 src/SemanticTree.zig           |  2 +-
 src/browser/interactive.zig    | 10 ++++-
 src/browser/tests/css.html     | 30 ++++++++++++++
 src/browser/webapi/Element.zig | 72 +++++++++++++++++++++-------------
 4 files changed, 84 insertions(+), 30 deletions(-)

diff --git a/src/SemanticTree.zig b/src/SemanticTree.zig
index 1a0910d2..b60b3ea6 100644
--- a/src/SemanticTree.zig
+++ b/src/SemanticTree.zig
@@ -133,7 +133,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         }
 
         if (el.is(Element.Html)) |html_el| {
-            if (interactive.classifyInteractivity(el, html_el, listener_targets) != null) {
+            if (interactive.classifyInteractivity(self.page, el, html_el, listener_targets) != null) {
                 is_interactive = true;
             }
         }
diff --git a/src/browser/interactive.zig b/src/browser/interactive.zig
index 2d03db51..fa45257f 100644
--- a/src/browser/interactive.zig
+++ b/src/browser/interactive.zig
@@ -146,7 +146,7 @@ pub fn collectInteractiveElements(
             else => {},
         }
 
-        const itype = classifyInteractivity(el, html_el, listener_targets) orelse continue;
+        const itype = classifyInteractivity(page, el, html_el, listener_targets) orelse continue;
 
         const listener_types = getListenerTypes(
             el.asEventTarget(),
@@ -210,10 +210,13 @@ pub fn buildListenerTargetMap(page: *Page, arena: Allocator) !ListenerTargetMap
 }
 
 pub fn classifyInteractivity(
+    page: *Page,
     el: *Element,
     html_el: *Element.Html,
     listener_targets: ListenerTargetMap,
 ) ?InteractivityType {
+    if (el.hasPointerEventsNone(page)) return null;
+
     // 1. Native interactive by tag
     switch (el.getTag()) {
         .button, .summary, .details, .select, .textarea => return .native,
@@ -519,6 +522,11 @@ test "browser.interactive: disabled by fieldset" {
     try testing.expect(!elements[1].disabled);
 }
 
+test "browser.interactive: pointer-events none" {
+    const elements = try testInteractive("<button style=\"pointer-events: none;\">Click me</button>");
+    try testing.expectEqual(0, elements.len);
+}
+
 test "browser.interactive: non-interactive div" {
     const elements = try testInteractive("<div>Just text</div>");
     try testing.expectEqual(0, elements.len);
diff --git a/src/browser/tests/css.html b/src/browser/tests/css.html
index 70fdff47..ede62285 100644
--- a/src/browser/tests/css.html
+++ b/src/browser/tests/css.html
@@ -77,3 +77,33 @@
     testing.expectEqual('\uFFFDabc', CSS.escape('\x00abc'));
   }
 </script>
+
+<script id="checkVisibility">
+  {
+    const el = document.createElement("div");
+    document.documentElement.appendChild(el);
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.style.display = "none";
+    testing.expectEqual(false, el.checkVisibility());
+
+    el.style.display = "block";
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.style.visibility = "hidden";
+    testing.expectEqual(false, el.checkVisibility());
+
+    el.style.visibility = "collapse";
+    testing.expectEqual(false, el.checkVisibility());
+
+    el.style.visibility = "visible";
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.style.opacity = "0";
+    testing.expectEqual(false, el.checkVisibility());
+
+    el.style.opacity = "1";
+    testing.expectEqual(true, el.checkVisibility());
+    document.documentElement.removeChild(el);
+  }
+</script>
diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 0d41ee1f..9fa62280 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1042,40 +1042,56 @@ pub fn parentElement(self: *Element) ?*Element {
 }
 
 const CSSStyleRule = @import("css/CSSStyleRule.zig");
+const StyleSheetList = @import("css/StyleSheetList.zig");
+
+pub fn hasPointerEventsNone(self: *Element, page: *Page) bool {
+    const doc_sheets = page.document.getStyleSheets(page) catch null;
+    var current: ?*Element = self;
+    while (current) |el| {
+        if (checkCssProperty(el, page, doc_sheets, "pointer-events", &[_][]const u8{"none"})) return true;
+        current = el.parentElement();
+    }
+    return false;
+}
+
+fn checkCssProperty(el: *Element, page: *Page, doc_sheets: ?*StyleSheetList, property_name: []const u8, target_values: []const []const u8) bool {
+    if (el.getOrCreateStyle(page) catch null) |style| {
+        const val = style.asCSSStyleDeclaration().getPropertyValue(property_name, page);
+        for (target_values) |target| {
+            if (std.mem.eql(u8, val, target)) return true;
+        }
+    }
+
+    if (doc_sheets) |sheets| {
+        for (0..sheets.length()) |i| {
+            const sheet = sheets.item(i) orelse continue;
+            const rules = sheet.getCssRules(page) catch continue;
+            for (0..rules.length()) |j| {
+                const rule = rules.item(j) orelse continue;
+                if (rule.is(CSSStyleRule)) |style_rule| {
+                    const selector = style_rule.getSelectorText();
+                    if (el.matches(selector, page) catch false) {
+                        const style = (style_rule.getStyle(page) catch continue).asCSSStyleDeclaration();
+                        const val = style.getPropertyValue(property_name, page);
+                        for (target_values) |target| {
+                            if (std.mem.eql(u8, val, target)) return true;
+                        }
+                    }
+                }
+            }
+        }
+    }
+    return false;
+}
 
 pub fn checkVisibility(self: *Element, page: *Page) bool {
     const doc_sheets = page.document.getStyleSheets(page) catch null;
     var current: ?*Element = self;
 
     while (current) |el| {
-        if (el.getStyle(page)) |style| {
-            const display = style.asCSSStyleDeclaration().getPropertyValue("display", page);
-            if (std.mem.eql(u8, display, "none")) {
-                return false;
-            }
-        }
-
-        // Also check if any global stylesheet hides this element
-        if (doc_sheets) |sheets| {
-            for (0..sheets.length()) |i| {
-                const sheet = sheets.item(i) orelse continue;
-                const rules = sheet.getCssRules(page) catch continue;
-                for (0..rules.length()) |j| {
-                    const rule = rules.item(j) orelse continue;
-                    if (rule.is(CSSStyleRule)) |style_rule| {
-                        const selector = style_rule.getSelectorText();
-                        const does_match = el.matches(selector, page) catch false;
-                        if (does_match) {
-                            const style = (style_rule.getStyle(page) catch continue).asCSSStyleDeclaration();
-                            const display = style.getPropertyValue("display", page);
-                            if (std.mem.eql(u8, display, "none")) {
-                                return false;
-                            }
-                        }
-                    }
-                }
-            }
-        }
+        if (checkCssProperty(el, page, doc_sheets, "display", &[_][]const u8{"none"})) return false;
+        if (checkCssProperty(el, page, doc_sheets, "visibility", &[_][]const u8{ "hidden", "collapse" })) return false;
+        if (checkCssProperty(el, page, doc_sheets, "opacity", &[_][]const u8{"0"})) return false;
 
         current = el.parentElement();
     }

From f37862a25d1968c7c9c1c789a4e4428353ecde68 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 13 Mar 2026 14:00:07 +0900
Subject: [PATCH 12/35] perf: cache css properties for visibility and
 interactivity

Introduces `CssCache` to store computed CSS properties, avoiding
redundant stylesheet lookups during DOM traversals.
---
 src/SemanticTree.zig           |  14 ++--
 src/browser/interactive.zig    |   7 +-
 src/browser/webapi/Element.zig | 123 +++++++++++++++++++++++++++------
 3 files changed, 113 insertions(+), 31 deletions(-)

diff --git a/src/SemanticTree.zig b/src/SemanticTree.zig
index b60b3ea6..e0cd0d8a 100644
--- a/src/SemanticTree.zig
+++ b/src/SemanticTree.zig
@@ -45,7 +45,8 @@ pub fn jsonStringify(self: @This(), jw: *std.json.Stringify) error{WriteFailed}!
         log.err(.app, "listener map failed", .{ .err = err });
         return error.WriteFailed;
     };
-    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets) catch |err| {
+    var css_cache: Element.CssCache = .empty;
+    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets, &css_cache) catch |err| {
         log.err(.app, "semantic tree json dump failed", .{ .err = err });
         return error.WriteFailed;
     };
@@ -58,7 +59,8 @@ pub fn textStringify(self: @This(), writer: *std.Io.Writer) error{WriteFailed}!v
         log.err(.app, "listener map failed", .{ .err = err });
         return error.WriteFailed;
     };
-    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets) catch |err| {
+    var css_cache: Element.CssCache = .empty;
+    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets, &css_cache) catch |err| {
         log.err(.app, "semantic tree text dump failed", .{ .err = err });
         return error.WriteFailed;
     };
@@ -82,7 +84,7 @@ const NodeData = struct {
     node_name: []const u8,
 };
 
-fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_name: ?[]const u8, visitor: anytype, index: usize, listener_targets: interactive.ListenerTargetMap) !void {
+fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_name: ?[]const u8, visitor: anytype, index: usize, listener_targets: interactive.ListenerTargetMap, css_cache: ?*Element.CssCache) !void {
     // 1. Skip non-content nodes
     if (node.is(Element)) |el| {
         const tag = el.getTag();
@@ -92,7 +94,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         if (tag == .datalist or tag == .option or tag == .optgroup) return;
 
         // Check visibility using the engine's checkVisibility which handles CSS display: none
-        if (!el.checkVisibility(self.page)) {
+        if (!el.checkVisibilityCached(self.page, css_cache)) {
             return;
         }
 
@@ -133,7 +135,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         }
 
         if (el.is(Element.Html)) |html_el| {
-            if (interactive.classifyInteractivity(self.page, el, html_el, listener_targets) != null) {
+            if (interactive.classifyInteractivity(self.page, el, html_el, listener_targets, css_cache) != null) {
                 is_interactive = true;
             }
         }
@@ -213,7 +215,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
             }
             gop.value_ptr.* += 1;
 
-            try self.walk(child, xpath_buffer, name, visitor, gop.value_ptr.*, listener_targets);
+            try self.walk(child, xpath_buffer, name, visitor, gop.value_ptr.*, listener_targets, css_cache);
         }
     }
 
diff --git a/src/browser/interactive.zig b/src/browser/interactive.zig
index fa45257f..487032e9 100644
--- a/src/browser/interactive.zig
+++ b/src/browser/interactive.zig
@@ -133,6 +133,8 @@ pub fn collectInteractiveElements(
     // so classify and getListenerTypes are both O(1) per element.
     const listener_targets = try buildListenerTargetMap(page, arena);
 
+    var css_cache: Element.CssCache = .empty;
+
     var results: std.ArrayList(InteractiveElement) = .empty;
 
     var tw = TreeWalker.Full.init(root, .{});
@@ -146,7 +148,7 @@ pub fn collectInteractiveElements(
             else => {},
         }
 
-        const itype = classifyInteractivity(page, el, html_el, listener_targets) orelse continue;
+        const itype = classifyInteractivity(page, el, html_el, listener_targets, &css_cache) orelse continue;
 
         const listener_types = getListenerTypes(
             el.asEventTarget(),
@@ -214,8 +216,9 @@ pub fn classifyInteractivity(
     el: *Element,
     html_el: *Element.Html,
     listener_targets: ListenerTargetMap,
+    cache: ?*Element.CssCache,
 ) ?InteractivityType {
-    if (el.hasPointerEventsNone(page)) return null;
+    if (el.hasPointerEventsNoneCached(page, cache)) return null;
 
     // 1. Native interactive by tag
     switch (el.getTag()) {
diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 9fa62280..3703c82d 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1044,24 +1044,23 @@ pub fn parentElement(self: *Element) ?*Element {
 const CSSStyleRule = @import("css/CSSStyleRule.zig");
 const StyleSheetList = @import("css/StyleSheetList.zig");
 
-pub fn hasPointerEventsNone(self: *Element, page: *Page) bool {
-    const doc_sheets = page.document.getStyleSheets(page) catch null;
-    var current: ?*Element = self;
-    while (current) |el| {
-        if (checkCssProperty(el, page, doc_sheets, "pointer-events", &[_][]const u8{"none"})) return true;
-        current = el.parentElement();
-    }
-    return false;
-}
+pub const CssProperties = struct {
+    display_none: bool = false,
+    visibility_hidden: bool = false,
+    opacity_zero: bool = false,
+    pointer_events_none: bool = false,
+};
 
-fn checkCssProperty(el: *Element, page: *Page, doc_sheets: ?*StyleSheetList, property_name: []const u8, target_values: []const []const u8) bool {
-    if (el.getOrCreateStyle(page) catch null) |style| {
-        const val = style.asCSSStyleDeclaration().getPropertyValue(property_name, page);
-        for (target_values) |target| {
-            if (std.mem.eql(u8, val, target)) return true;
-        }
+pub const CssCache = std.AutoHashMapUnmanaged(*Element, CssProperties);
+
+pub fn getCssProperties(el: *Element, page: *Page, doc_sheets: ?*StyleSheetList, cache: ?*CssCache) CssProperties {
+    if (cache) |c| {
+        if (c.get(el)) |props| return props;
     }
 
+    var props = CssProperties{};
+
+    // Check stylesheets first
     if (doc_sheets) |sheets| {
         for (0..sheets.length()) |i| {
             const sheet = sheets.item(i) orelse continue;
@@ -1072,33 +1071,111 @@ fn checkCssProperty(el: *Element, page: *Page, doc_sheets: ?*StyleSheetList, pro
                     const selector = style_rule.getSelectorText();
                     if (el.matches(selector, page) catch false) {
                         const style = (style_rule.getStyle(page) catch continue).asCSSStyleDeclaration();
-                        const val = style.getPropertyValue(property_name, page);
-                        for (target_values) |target| {
-                            if (std.mem.eql(u8, val, target)) return true;
+
+                        const display = style.getPropertyValue("display", page);
+                        if (std.mem.eql(u8, display, "none")) {
+                            props.display_none = true;
+                        } else if (display.len > 0) {
+                            props.display_none = false;
+                        }
+
+                        const visibility = style.getPropertyValue("visibility", page);
+                        if (std.mem.eql(u8, visibility, "hidden") or std.mem.eql(u8, visibility, "collapse")) {
+                            props.visibility_hidden = true;
+                        } else if (visibility.len > 0) {
+                            props.visibility_hidden = false;
+                        }
+
+                        const opacity = style.getPropertyValue("opacity", page);
+                        if (std.mem.eql(u8, opacity, "0")) {
+                            props.opacity_zero = true;
+                        } else if (opacity.len > 0) {
+                            props.opacity_zero = false;
+                        }
+
+                        const pointer_events = style.getPropertyValue("pointer-events", page);
+                        if (std.mem.eql(u8, pointer_events, "none")) {
+                            props.pointer_events_none = true;
+                        } else if (pointer_events.len > 0) {
+                            props.pointer_events_none = false;
                         }
                     }
                 }
             }
         }
     }
+
+    // Check inline styles overrides
+    if (el.getOrCreateStyle(page) catch null) |style| {
+        const decl = style.asCSSStyleDeclaration();
+        const display = decl.getPropertyValue("display", page);
+        if (std.mem.eql(u8, display, "none")) {
+            props.display_none = true;
+        } else if (display.len > 0) {
+            props.display_none = false;
+        }
+
+        const visibility = decl.getPropertyValue("visibility", page);
+        if (std.mem.eql(u8, visibility, "hidden") or std.mem.eql(u8, visibility, "collapse")) {
+            props.visibility_hidden = true;
+        } else if (visibility.len > 0) {
+            props.visibility_hidden = false;
+        }
+
+        const opacity = decl.getPropertyValue("opacity", page);
+        if (std.mem.eql(u8, opacity, "0")) {
+            props.opacity_zero = true;
+        } else if (opacity.len > 0) {
+            props.opacity_zero = false;
+        }
+
+        const pointer_events = decl.getPropertyValue("pointer-events", page);
+        if (std.mem.eql(u8, pointer_events, "none")) {
+            props.pointer_events_none = true;
+        } else if (pointer_events.len > 0) {
+            props.pointer_events_none = false;
+        }
+    }
+
+    if (cache) |c| {
+        c.put(page.call_arena, el, props) catch {};
+    }
+
+    return props;
+}
+
+pub fn hasPointerEventsNoneCached(self: *Element, page: *Page, cache: ?*CssCache) bool {
+    const doc_sheets = page.document.getStyleSheets(page) catch null;
+    var current: ?*Element = self;
+    while (current) |el| {
+        const props = getCssProperties(el, page, doc_sheets, cache);
+        if (props.pointer_events_none) return true;
+        current = el.parentElement();
+    }
     return false;
 }
 
-pub fn checkVisibility(self: *Element, page: *Page) bool {
+pub fn hasPointerEventsNone(self: *Element, page: *Page) bool {
+    return self.hasPointerEventsNoneCached(page, null);
+}
+
+pub fn checkVisibilityCached(self: *Element, page: *Page, cache: ?*CssCache) bool {
     const doc_sheets = page.document.getStyleSheets(page) catch null;
     var current: ?*Element = self;
 
     while (current) |el| {
-        if (checkCssProperty(el, page, doc_sheets, "display", &[_][]const u8{"none"})) return false;
-        if (checkCssProperty(el, page, doc_sheets, "visibility", &[_][]const u8{ "hidden", "collapse" })) return false;
-        if (checkCssProperty(el, page, doc_sheets, "opacity", &[_][]const u8{"0"})) return false;
-
+        const props = getCssProperties(el, page, doc_sheets, cache);
+        if (props.display_none or props.visibility_hidden or props.opacity_zero) return false;
         current = el.parentElement();
     }
 
     return true;
 }
 
+pub fn checkVisibility(self: *Element, page: *Page) bool {
+    return self.checkVisibilityCached(page, null);
+}
+
 fn getElementDimensions(self: *Element, page: *Page) struct { width: f64, height: f64 } {
     var width: f64 = 5.0;
     var height: f64 = 5.0;

From df5e978247e0678eddbac5d9dd294f05e6d640c7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?=
 <1671644+arrufat@users.noreply.github.com>
Date: Sat, 14 Mar 2026 19:54:43 +0900
Subject: [PATCH 13/35] tests: remove warning

Co-authored-by: Karl Seguin <karlseguin@users.noreply.github.com>
---
 src/browser/tests/css/stylesheet.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/browser/tests/css/stylesheet.html b/src/browser/tests/css/stylesheet.html
index 7eab1a4e..b9176351 100644
--- a/src/browser/tests/css/stylesheet.html
+++ b/src/browser/tests/css/stylesheet.html
@@ -430,7 +430,6 @@
 
     sheet.insertRule('.test { color: green; }', 0);
     testing.expectEqual(1, sheet.cssRules.length);
-    console.warn("constructor:", sheet.cssRules[0].constructor.name);
     testing.expectEqual('.test', sheet.cssRules[0].selectorText);
     testing.expectEqual('green', sheet.cssRules[0].style.color);
 

From e2563e57f28ec04a0848e1e3b4703d73d4819d9b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?=
 <1671644+arrufat@users.noreply.github.com>
Date: Sat, 14 Mar 2026 20:18:51 +0900
Subject: [PATCH 14/35] webapi.Element: make getCssProperties private

Co-authored-by: Karl Seguin <karlseguin@users.noreply.github.com>
---
 src/browser/webapi/Element.zig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 3703c82d..3b2a8c2b 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1053,7 +1053,7 @@ pub const CssProperties = struct {
 
 pub const CssCache = std.AutoHashMapUnmanaged(*Element, CssProperties);
 
-pub fn getCssProperties(el: *Element, page: *Page, doc_sheets: ?*StyleSheetList, cache: ?*CssCache) CssProperties {
+fn getCssProperties(el: *Element, page: *Page, doc_sheets: ?*StyleSheetList, cache: ?*CssCache) CssProperties {
     if (cache) |c| {
         if (c.get(el)) |props| return props;
     }

From e362a9cbc3ed4b59d080a60ff97fea5805ade3a7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?=
 <1671644+arrufat@users.noreply.github.com>
Date: Sat, 14 Mar 2026 20:29:54 +0900
Subject: [PATCH 15/35] webapi.Element: use dot notation

Co-authored-by: Karl Seguin <karlseguin@users.noreply.github.com>
---
 src/browser/webapi/Element.zig | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 3b2a8c2b..4a1d324e 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1148,7 +1148,7 @@ pub fn hasPointerEventsNoneCached(self: *Element, page: *Page, cache: ?*CssCache
     const doc_sheets = page.document.getStyleSheets(page) catch null;
     var current: ?*Element = self;
     while (current) |el| {
-        const props = getCssProperties(el, page, doc_sheets, cache);
+        const props = el.getCssProperties(page, doc_sheets, cache);
         if (props.pointer_events_none) return true;
         current = el.parentElement();
     }

From 351e44343db35e9e78f7faa113cb0cc62f623a6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Sat, 14 Mar 2026 19:58:28 +0900
Subject: [PATCH 16/35] css: make CSSStyleSheet.insertRule index optional

---
 src/browser/tests/css/stylesheet.html    | 21 +++++++++++++++++++++
 src/browser/webapi/css/CSSStyleSheet.zig |  3 ++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/src/browser/tests/css/stylesheet.html b/src/browser/tests/css/stylesheet.html
index b9176351..8e284e66 100644
--- a/src/browser/tests/css/stylesheet.html
+++ b/src/browser/tests/css/stylesheet.html
@@ -447,6 +447,27 @@
 }
 </script>
 
+<script id="CSSStyleSheet_insertRule_default_index">
+{
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    const sheet = style.sheet;
+
+    testing.expectEqual(0, sheet.cssRules.length);
+
+    // Call without index, should default to 0
+    sheet.insertRule('.test-default { color: blue; }');
+    testing.expectEqual(1, sheet.cssRules.length);
+    testing.expectEqual('.test-default', sheet.cssRules[0].selectorText);
+
+    // Insert another rule without index, should default to 0 and push the first one to index 1
+    sheet.insertRule('.test-at-0 { color: red; }');
+    testing.expectEqual(2, sheet.cssRules.length);
+    testing.expectEqual('.test-at-0', sheet.cssRules[0].selectorText);
+    testing.expectEqual('.test-default', sheet.cssRules[1].selectorText);
+}
+</script>
+
 <script id="CSSStyleSheet_replaceSync">
 {
     const sheet = new CSSStyleSheet();
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 70f9c2ad..33f3e609 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -55,7 +55,8 @@ pub fn getOwnerRule(self: *const CSSStyleSheet) ?*CSSRule {
     return self._owner_rule;
 }
 
-pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, index: u32, page: *Page) !u32 {
+pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, maybe_index: ?u32, page: *Page) !u32 {
+    const index = maybe_index orelse 0;
     var it = Parser.parseStylesheet(rule);
     const parsed_rule = it.next() orelse return error.SyntaxError;
 

From bc19079dada9ef69da474d4d94e1c18bfa0c43f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Sat, 14 Mar 2026 20:03:25 +0900
Subject: [PATCH 17/35] css: add unit tests for RulesIterator

---
 src/browser/css/Parser.zig | 51 ++++++++++++++++++++++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/src/browser/css/Parser.zig b/src/browser/css/Parser.zig
index 51463bce..053e9435 100644
--- a/src/browser/css/Parser.zig
+++ b/src/browser/css/Parser.zig
@@ -419,3 +419,54 @@ pub const RulesIterator = struct {
         }
     }
 };
+
+const testing = std.testing;
+
+test "RulesIterator: single rule" {
+    var it = RulesIterator.init(".test { color: red; }");
+    const rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings(".test", rule.selector);
+    try testing.expectEqualStrings(" color: red; ", rule.block);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: multiple rules" {
+    var it = RulesIterator.init("h1 { margin: 0; } p { padding: 10px; }");
+
+    var rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings("h1", rule.selector);
+    try testing.expectEqualStrings(" margin: 0; ", rule.block);
+
+    rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings("p", rule.selector);
+    try testing.expectEqualStrings(" padding: 10px; ", rule.block);
+
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: skips at-rules without block" {
+    var it = RulesIterator.init("@import url('style.css'); .test { color: red; }");
+
+    const rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings(".test", rule.selector);
+    try testing.expectEqualStrings(" color: red; ", rule.block);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: skips at-rules with block" {
+    var it = RulesIterator.init("@media screen { .test { color: blue; } } .test2 { color: green; }");
+
+    const rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings(".test2", rule.selector);
+    try testing.expectEqualStrings(" color: green; ", rule.block);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
+
+test "RulesIterator: comments and whitespace" {
+    var it = RulesIterator.init("  /* comment */  .test  /* comment */ { /* comment */ color: red; } \n\t");
+
+    const rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings(".test", rule.selector);
+    try testing.expectEqualStrings(" /* comment */ color: red; ", rule.block);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}

From 66a86541d1c2c6c919abdb025b3322f89fe90c6d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Sat, 14 Mar 2026 20:11:30 +0900
Subject: [PATCH 18/35] css: handle top-level semicolons in parser

---
 src/browser/css/Parser.zig            | 21 +++++++++++++++------
 src/browser/tests/css/stylesheet.html | 12 ++++++++++++
 2 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/src/browser/css/Parser.zig b/src/browser/css/Parser.zig
index 053e9435..401baecb 100644
--- a/src/browser/css/Parser.zig
+++ b/src/browser/css/Parser.zig
@@ -318,12 +318,6 @@ pub const RulesIterator = struct {
         var selector_start: ?usize = null;
         var selector_end: ?usize = null;
 
-        // Skip leading trivia
-        while (self.stream.peek()) |peeked| {
-            if (!isWhitespaceOrComment(peeked.token)) break;
-            _ = self.stream.next();
-        }
-
         while (true) {
             const peeked = self.stream.peek() orelse return null;
 
@@ -370,6 +364,11 @@ pub const RulesIterator = struct {
                 continue;
             }
 
+            if (selector_start == null and (isWhitespaceOrComment(peeked.token) or isSemicolon(peeked.token))) {
+                _ = self.stream.next();
+                continue;
+            }
+
             const span = self.stream.next() orelse return null;
             if (!isWhitespaceOrComment(span.token)) {
                 if (selector_start == null) selector_start = span.start;
@@ -470,3 +469,13 @@ test "RulesIterator: comments and whitespace" {
     try testing.expectEqualStrings(" /* comment */ color: red; ", rule.block);
     try testing.expectEqual(@as(?Rule, null), it.next());
 }
+
+test "RulesIterator: top-level semicolons" {
+    var it = RulesIterator.init("*{}; ; p{}");
+    var rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings("*", rule.selector);
+
+    rule = it.next() orelse return error.MissingRule;
+    try testing.expectEqualStrings("p", rule.selector);
+    try testing.expectEqual(@as(?Rule, null), it.next());
+}
diff --git a/src/browser/tests/css/stylesheet.html b/src/browser/tests/css/stylesheet.html
index 8e284e66..41ed60df 100644
--- a/src/browser/tests/css/stylesheet.html
+++ b/src/browser/tests/css/stylesheet.html
@@ -468,6 +468,18 @@
 }
 </script>
 
+<script id="CSSStyleSheet_insertRule_semicolon">
+{
+    const style = document.createElement('style');
+    document.head.appendChild(style);
+    const sheet = style.sheet;
+
+    // Should not throw even with trailing semicolon
+    sheet.insertRule('*{};');
+    testing.expectEqual(1, sheet.cssRules.length);
+}
+</script>
+
 <script id="CSSStyleSheet_replaceSync">
 {
     const sheet = new CSSStyleSheet();

From 55a9976d4623c2b11e8bbcc0a258ac8d098d41b1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Sat, 14 Mar 2026 20:17:41 +0900
Subject: [PATCH 19/35] css: CSSStyleSheet.replace() should resolve to the
 stylesheet

---
 src/browser/tests/css/stylesheet.html    | 3 ++-
 src/browser/webapi/css/CSSStyleSheet.zig | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/browser/tests/css/stylesheet.html b/src/browser/tests/css/stylesheet.html
index 41ed60df..af6ba4ef 100644
--- a/src/browser/tests/css/stylesheet.html
+++ b/src/browser/tests/css/stylesheet.html
@@ -492,7 +492,8 @@
 
     let replacedAsync = false;
     testing.async(async () => {
-        await sheet.replace('.async-test { margin: 10px; }');
+        const result = await sheet.replace('.async-test { margin: 10px; }');
+        testing.expectTrue(result === sheet);
         testing.expectEqual(1, sheet.cssRules.length);
         testing.expectEqual('.async-test', sheet.cssRules[0].selectorText);
         replacedAsync = true;
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 33f3e609..aa8655f1 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -79,7 +79,7 @@ pub fn deleteRule(self: *CSSStyleSheet, index: u32, page: *Page) !void {
 
 pub fn replace(self: *CSSStyleSheet, text: []const u8, page: *Page) !js.Promise {
     try self.replaceSync(text, page);
-    return page.js.local.?.resolvePromise({});
+    return page.js.local.?.resolvePromise(self);
 }
 
 pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) !void {

From 3fde349b9f6d74930232ff88f4f67bb0f680905d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Sat, 14 Mar 2026 20:26:51 +0900
Subject: [PATCH 20/35] webapi): reorder css function params and merge pointer
 events

---
 src/SemanticTree.zig           |  2 +-
 src/browser/interactive.zig    |  2 +-
 src/browser/webapi/Element.zig | 16 ++++++----------
 3 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/src/SemanticTree.zig b/src/SemanticTree.zig
index e0cd0d8a..8e64b034 100644
--- a/src/SemanticTree.zig
+++ b/src/SemanticTree.zig
@@ -94,7 +94,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         if (tag == .datalist or tag == .option or tag == .optgroup) return;
 
         // Check visibility using the engine's checkVisibility which handles CSS display: none
-        if (!el.checkVisibilityCached(self.page, css_cache)) {
+        if (!el.checkVisibilityCached(css_cache, self.page)) {
             return;
         }
 
diff --git a/src/browser/interactive.zig b/src/browser/interactive.zig
index 487032e9..ed3895cf 100644
--- a/src/browser/interactive.zig
+++ b/src/browser/interactive.zig
@@ -218,7 +218,7 @@ pub fn classifyInteractivity(
     listener_targets: ListenerTargetMap,
     cache: ?*Element.CssCache,
 ) ?InteractivityType {
-    if (el.hasPointerEventsNoneCached(page, cache)) return null;
+    if (el.hasPointerEventsNone(cache, page)) return null;
 
     // 1. Native interactive by tag
     switch (el.getTag()) {
diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index 4a1d324e..d2d61451 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -1053,7 +1053,7 @@ pub const CssProperties = struct {
 
 pub const CssCache = std.AutoHashMapUnmanaged(*Element, CssProperties);
 
-fn getCssProperties(el: *Element, page: *Page, doc_sheets: ?*StyleSheetList, cache: ?*CssCache) CssProperties {
+fn getCssProperties(el: *Element, doc_sheets: ?*StyleSheetList, cache: ?*CssCache, page: *Page) CssProperties {
     if (cache) |c| {
         if (c.get(el)) |props| return props;
     }
@@ -1144,27 +1144,23 @@ fn getCssProperties(el: *Element, page: *Page, doc_sheets: ?*StyleSheetList, cac
     return props;
 }
 
-pub fn hasPointerEventsNoneCached(self: *Element, page: *Page, cache: ?*CssCache) bool {
+pub fn hasPointerEventsNone(self: *Element, cache: ?*CssCache, page: *Page) bool {
     const doc_sheets = page.document.getStyleSheets(page) catch null;
     var current: ?*Element = self;
     while (current) |el| {
-        const props = el.getCssProperties(page, doc_sheets, cache);
+        const props = el.getCssProperties(doc_sheets, cache, page);
         if (props.pointer_events_none) return true;
         current = el.parentElement();
     }
     return false;
 }
 
-pub fn hasPointerEventsNone(self: *Element, page: *Page) bool {
-    return self.hasPointerEventsNoneCached(page, null);
-}
-
-pub fn checkVisibilityCached(self: *Element, page: *Page, cache: ?*CssCache) bool {
+pub fn checkVisibilityCached(self: *Element, cache: ?*CssCache, page: *Page) bool {
     const doc_sheets = page.document.getStyleSheets(page) catch null;
     var current: ?*Element = self;
 
     while (current) |el| {
-        const props = getCssProperties(el, page, doc_sheets, cache);
+        const props = getCssProperties(el, doc_sheets, cache, page);
         if (props.display_none or props.visibility_hidden or props.opacity_zero) return false;
         current = el.parentElement();
     }
@@ -1173,7 +1169,7 @@ pub fn checkVisibilityCached(self: *Element, page: *Page, cache: ?*CssCache) boo
 }
 
 pub fn checkVisibility(self: *Element, page: *Page) bool {
-    return self.checkVisibilityCached(page, null);
+    return self.checkVisibilityCached(null, page);
 }
 
 fn getElementDimensions(self: *Element, page: *Page) struct { width: f64, height: f64 } {

From e29778d72bfdc592d2c1fe329a13cc4a1067431e Mon Sep 17 00:00:00 2001
From: Karl Seguin <k@openmymind.io>
Date: Tue, 17 Mar 2026 13:40:51 +0800
Subject: [PATCH 21/35] Introduce StyleManager

A Page now has a StyleManager. The StyleManager currently answers two questions:
1 - Is an element hidden
2 - Does an element have pointer-events == none

This is used in calls such as element.checkVisibility which, on some pages, can
be called tens of thousands of times (often through other methods, like
element.getBoundingClientRect). This _can_ be a bottleneck.

The StyleManager keeps a list of rules. The rules include the selector,
specificity, and properties that we care about. Rules in a stylesheet that
contain no properties of interest are ignored. This is the first and likely
most significant optimization. Presumably, most CSS rules don't have a
display/visibility/opacity or pointer-events property.

The list is rules is cached until stylesheets are modified or delete. When this
happens, the StyleManager is flagged as "dirty" and rebuilt on-demand in the
next query.  This is our second major optimization.

For now, to check if an element is visible, we still need to scan all rules.
But having a pre-build subset of all the rules is a first step.

The next step might be to optimize the matching, or possibly optimizing common
cases (e.g. id and/or simple class selector)
---
 src/SemanticTree.zig                          |  18 +-
 src/browser/Page.zig                          |  18 +
 src/browser/StyleManager.zig                  | 572 ++++++++++++++++++
 src/browser/interactive.zig                   |   4 +-
 src/browser/tests/css.html                    |  30 -
 .../tests/element/check_visibility.html       | 226 +++++++
 src/browser/webapi/Document.zig               |   2 +-
 src/browser/webapi/Element.zig                | 168 +----
 .../webapi/css/CSSStyleDeclaration.zig        |  63 +-
 src/browser/webapi/css/CSSStyleSheet.zig      |  10 +
 src/browser/webapi/css/StyleSheetList.zig     |   9 +
 src/browser/webapi/element/html/Style.zig     |   5 +-
 12 files changed, 922 insertions(+), 203 deletions(-)
 create mode 100644 src/browser/StyleManager.zig
 create mode 100644 src/browser/tests/element/check_visibility.html

diff --git a/src/SemanticTree.zig b/src/SemanticTree.zig
index b64f222d..95561c9f 100644
--- a/src/SemanticTree.zig
+++ b/src/SemanticTree.zig
@@ -45,8 +45,9 @@ pub fn jsonStringify(self: @This(), jw: *std.json.Stringify) error{WriteFailed}!
         log.err(.app, "listener map failed", .{ .err = err });
         return error.WriteFailed;
     };
-    var css_cache: Element.CssCache = .empty;
-    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets, &css_cache) catch |err| {
+    var visibility_cache: Element.VisibilityCache = .empty;
+    var pointer_events_cache: Element.PointerEventsCache = .empty;
+    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets, &visibility_cache, &pointer_events_cache) catch |err| {
         log.err(.app, "semantic tree json dump failed", .{ .err = err });
         return error.WriteFailed;
     };
@@ -59,8 +60,9 @@ pub fn textStringify(self: @This(), writer: *std.Io.Writer) error{WriteFailed}!v
         log.err(.app, "listener map failed", .{ .err = err });
         return error.WriteFailed;
     };
-    var css_cache: Element.CssCache = .empty;
-    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets, &css_cache) catch |err| {
+    var visibility_cache: Element.VisibilityCache = .empty;
+    var pointer_events_cache: Element.PointerEventsCache = .empty;
+    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets, &visibility_cache, &pointer_events_cache) catch |err| {
         log.err(.app, "semantic tree text dump failed", .{ .err = err });
         return error.WriteFailed;
     };
@@ -84,7 +86,7 @@ const NodeData = struct {
     node_name: []const u8,
 };
 
-fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_name: ?[]const u8, visitor: anytype, index: usize, listener_targets: interactive.ListenerTargetMap, css_cache: ?*Element.CssCache) !void {
+fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_name: ?[]const u8, visitor: anytype, index: usize, listener_targets: interactive.ListenerTargetMap, visibility_cache: ?*Element.VisibilityCache, pointer_events_cache: ?*Element.PointerEventsCache) !void {
     // 1. Skip non-content nodes
     if (node.is(Element)) |el| {
         const tag = el.getTag();
@@ -94,7 +96,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         if (tag == .datalist or tag == .option or tag == .optgroup) return;
 
         // Check visibility using the engine's checkVisibility which handles CSS display: none
-        if (!el.checkVisibilityCached(css_cache, self.page)) {
+        if (!el.checkVisibilityCached(visibility_cache, self.page)) {
             return;
         }
 
@@ -135,7 +137,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         }
 
         if (el.is(Element.Html)) |html_el| {
-            if (interactive.classifyInteractivity(self.page, el, html_el, listener_targets, css_cache) != null) {
+            if (interactive.classifyInteractivity(self.page, el, html_el, listener_targets, pointer_events_cache) != null) {
                 is_interactive = true;
             }
         }
@@ -215,7 +217,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
             }
             gop.value_ptr.* += 1;
 
-            try self.walk(child, xpath_buffer, name, visitor, gop.value_ptr.*, listener_targets, css_cache);
+            try self.walk(child, xpath_buffer, name, visitor, gop.value_ptr.*, listener_targets, visibility_cache, pointer_events_cache);
         }
     }
 
diff --git a/src/browser/Page.zig b/src/browser/Page.zig
index cb62cb31..e8df5ab0 100644
--- a/src/browser/Page.zig
+++ b/src/browser/Page.zig
@@ -35,6 +35,7 @@ const Factory = @import("Factory.zig");
 const Session = @import("Session.zig");
 const EventManager = @import("EventManager.zig");
 const ScriptManager = @import("ScriptManager.zig");
+const StyleManager = @import("StyleManager.zig");
 
 const Parser = @import("parser/Parser.zig");
 
@@ -143,6 +144,7 @@ _blob_urls: std.StringHashMapUnmanaged(*Blob) = .{},
 /// A call to `documentIsComplete` (which calls `_documentIsComplete`) resets it.
 _to_load: std.ArrayList(*Element.Html) = .{},
 
+_style_manager: StyleManager,
 _script_manager: ScriptManager,
 
 // List of active live ranges (for mutation updates per DOM spec)
@@ -268,6 +270,7 @@ pub fn init(self: *Page, frame_id: u32, session: *Session, parent: ?*Page) !void
         ._factory = factory,
         ._pending_loads = 1, // always 1 for the ScriptManager
         ._type = if (parent == null) .root else .frame,
+        ._style_manager = undefined,
         ._script_manager = undefined,
         ._event_manager = EventManager.init(session.page_arena, self),
     };
@@ -297,6 +300,9 @@ pub fn init(self: *Page, frame_id: u32, session: *Session, parent: ?*Page) !void
         ._visual_viewport = visual_viewport,
     });
 
+    self._style_manager = try StyleManager.init(self);
+    errdefer self._style_manager.deinit();
+
     const browser = session.browser;
     self._script_manager = ScriptManager.init(browser.allocator, browser.http_client, self);
     errdefer self._script_manager.deinit();
@@ -353,6 +359,7 @@ pub fn deinit(self: *Page, abort_http: bool) void {
     }
 
     self._script_manager.deinit();
+    self._style_manager.deinit();
 
     session.releaseArena(self.call_arena);
 }
@@ -2538,6 +2545,17 @@ pub fn removeNode(self: *Page, parent: *Node, child: *Node, opts: RemoveNodeOpts
         }
 
         Element.Html.Custom.invokeDisconnectedCallbackOnElement(el, self);
+
+        // If a <style> element is being removed, remove its sheet from the list
+        if (el.is(Element.Html.Style)) |style| {
+            if (style._sheet) |sheet| {
+                if (self.document._style_sheets) |sheets| {
+                    sheets.remove(sheet);
+                }
+                style._sheet = null;
+            }
+            self._style_manager.sheetModified();
+        }
     }
 }
 
diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
new file mode 100644
index 00000000..d968c38a
--- /dev/null
+++ b/src/browser/StyleManager.zig
@@ -0,0 +1,572 @@
+// Copyright (C) 2023-2026  Lightpanda (Selecy SAS)
+//
+// Francis Bouvier <francis@lightpanda.io>
+// Pierre Tachoire <pierre@lightpanda.io>
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+const std = @import("std");
+
+const log = @import("../log.zig");
+const String = @import("../string.zig").String;
+
+const Page = @import("Page.zig");
+
+const CssParser = @import("css/Parser.zig");
+const Element = @import("webapi/Element.zig");
+
+const Selector = @import("webapi/selector/Selector.zig");
+const SelectorParser = @import("webapi/selector/Parser.zig");
+const SelectorList = @import("webapi/selector/List.zig");
+
+const CSSStyleRule = @import("webapi/css/CSSStyleRule.zig");
+const CSSStyleSheet = @import("webapi/css/CSSStyleSheet.zig");
+const CSSStyleProperties = @import("webapi/css/CSSStyleProperties.zig");
+const CSSStyleProperty = @import("webapi/css/CSSStyleDeclaration.zig").Property;
+
+const Allocator = std.mem.Allocator;
+
+pub const VisibilityCache = std.AutoHashMapUnmanaged(*Element, bool);
+pub const PointerEventsCache = std.AutoHashMapUnmanaged(*Element, bool);
+
+// Tracks visibility-relevant CSS rules from <style> elements.
+const StyleManager = @This();
+
+page: *Page,
+
+arena: Allocator,
+
+// Sorted in document order. Only ryles that we care about (display, visibility, ...)
+rules: std.ArrayList(VisibilityRule) = .empty,
+
+// When true, rules need to be rebuilt
+dirty: bool = false,
+
+pub fn init(page: *Page) !StyleManager {
+    return .{
+        .page = page,
+        .arena = try page.getArena(.{ .debug = "StyleManager" }),
+    };
+}
+
+pub fn deinit(self: *StyleManager) void {
+    self.page.releaseArena(self.arena);
+}
+
+pub fn sheetAdded(self: *StyleManager, sheet: *CSSStyleSheet) !void {
+    const css_rules = sheet._css_rules orelse return;
+
+    for (css_rules._rules.items) |rule| {
+        const style_rule = rule.is(CSSStyleRule) orelse continue;
+        try self.addRule(style_rule);
+    }
+}
+
+pub fn sheetRemoved(self: *StyleManager) void {
+    self.dirty = true;
+}
+
+pub fn sheetModified(self: *StyleManager) void {
+    self.dirty = true;
+}
+
+/// Rebuilds the rule list from all document stylesheets.
+/// Called lazily when dirty flag is set and rules are needed.
+fn rebuildIfDirty(self: *StyleManager) !void {
+    if (!self.dirty) {
+        return;
+    }
+
+    self.dirty = false;
+    const item_count = self.rules.items.len;
+
+    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(self.arena.ptr));
+    _ = arena.reset(.retain_capacity);
+
+    self.rules = try .initCapacity(self.arena, item_count);
+    const sheets = self.page.document._style_sheets orelse return;
+    for (sheets._sheets.items) |sheet| {
+        self.sheetAdded(sheet) catch |err| {
+            log.err(.browser, "StyleManager sheetAdded", .{ .err = err });
+            return err;
+        };
+    }
+}
+
+// Check if an element is hidden based on options.
+// By default only checks display:none.
+// Walks up the tree to check ancestors.
+pub fn isHidden(self: *StyleManager, el: *Element, cache: ?*VisibilityCache, options: CheckVisibilityOptions) bool {
+    var current: ?*Element = el;
+
+    while (current) |elem| {
+        // Check cache first (only when checking all properties for caching consistency)
+        if (cache) |c| {
+            if (c.get(elem)) |hidden| {
+                if (hidden) {
+                    return true;
+                }
+                current = elem.parentElement();
+                continue;
+            }
+        }
+
+        const hidden = self.isElementHidden(elem, options);
+
+        // Store in cache
+        if (cache) |c| {
+            c.put(self.page.call_arena, elem, hidden) catch {};
+        }
+
+        if (hidden) {
+            return true;
+        }
+        current = elem.parentElement();
+    }
+
+    return false;
+}
+
+/// Check if a single element (not ancestors) is hidden.
+fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOptions) bool {
+    // Track best match per property (value + specificity)
+    // Initialize spec to INLINE_SPECIFICITY for properties we don't care about - this makes
+    // the loop naturally skip them since no stylesheet rule can have specificity >= INLINE_SPECIFICITY
+    var display_none: ?bool = null;
+    var display_spec: u32 = 0;
+
+    var visibility_hidden: ?bool = null;
+    var visibility_spec: u32 = 0;
+
+    var opacity_zero: ?bool = null;
+    var opacity_spec: u32 = 0;
+
+    // Check inline styles FIRST - they use INLINE_SPECIFICITY so no stylesheet can beat them
+    if (getInlineStyleProperty(el, comptime .wrap("display"), self.page)) |property| {
+        if (property._value.eql(comptime .wrap("none"))) {
+            return true; // Early exit for hiding value
+        }
+        display_none = false;
+        display_spec = INLINE_SPECIFICITY;
+    }
+
+    if (options.check_visibility) {
+        if (getInlineStyleProperty(el, comptime .wrap("visibility"), self.page)) |property| {
+            if (property._value.eql(comptime .wrap("hidden")) or property._value.eql(comptime .wrap("collapse"))) {
+                return true;
+            }
+            visibility_hidden = false;
+            visibility_spec = INLINE_SPECIFICITY;
+        }
+    } else {
+        // This can't be beat. Setting this means that, when checking rules
+        // we no longer have to check if options.check_visibility is enabled.
+        // We can just compare the specificity.
+        visibility_spec = INLINE_SPECIFICITY;
+    }
+
+    if (options.check_opacity) {
+        if (getInlineStyleProperty(el, comptime .wrap("opacity"), self.page)) |property| {
+            if (property._value.eql(comptime .wrap("0"))) {
+                return true;
+            }
+            opacity_zero = false;
+            opacity_spec = INLINE_SPECIFICITY;
+        }
+    } else {
+        opacity_spec = INLINE_SPECIFICITY;
+    }
+
+    if (display_spec == INLINE_SPECIFICITY and visibility_spec == INLINE_SPECIFICITY and opacity_spec == INLINE_SPECIFICITY) {
+        return false;
+    }
+
+    self.rebuildIfDirty() catch return false;
+
+    for (self.rules.items) |rule| {
+        // Skip rules that can't possibly update any property we care about
+        const dominated = (rule.props.display_none == null or rule.specificity < display_spec) and
+            (rule.props.visibility_hidden == null or rule.specificity < visibility_spec) and
+            (rule.props.opacity_zero == null or rule.specificity < opacity_spec);
+        if (dominated) continue;
+
+        if (matchesSelector(el, rule.selector, self.page)) {
+            if (rule.props.display_none != null and rule.specificity >= display_spec) {
+                display_none = rule.props.display_none;
+                display_spec = rule.specificity;
+            }
+            if (rule.props.visibility_hidden != null and rule.specificity >= visibility_spec) {
+                visibility_hidden = rule.props.visibility_hidden;
+                visibility_spec = rule.specificity;
+            }
+            if (rule.props.opacity_zero != null and rule.specificity >= opacity_spec) {
+                opacity_zero = rule.props.opacity_zero;
+                opacity_spec = rule.specificity;
+            }
+        }
+    }
+
+    return (display_none orelse false) or (visibility_hidden orelse false) or (opacity_zero orelse false);
+}
+
+/// Check if an element has pointer-events:none.
+/// Checks inline style first - if set, skips stylesheet lookup.
+/// Walks up the tree to check ancestors.
+pub fn hasPointerEventsNone(self: *StyleManager, el: *Element, cache: ?*PointerEventsCache) bool {
+    var current: ?*Element = el;
+
+    while (current) |elem| {
+        // Check cache first
+        if (cache) |c| {
+            if (c.get(elem)) |pe_none| {
+                if (pe_none) return true;
+                current = elem.parentElement();
+                continue;
+            }
+        }
+
+        const pe_none = self.elementHasPointerEventsNone(elem);
+
+        // Store in cache
+        if (cache) |c| {
+            c.put(self.page.call_arena, elem, pe_none) catch {};
+        }
+
+        if (pe_none) return true;
+        current = elem.parentElement();
+    }
+
+    return false;
+}
+
+/// Check if a single element (not ancestors) has pointer-events:none.
+fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
+    const page = self.page;
+
+    var result: ?bool = null;
+    var best_spec: u32 = 0;
+
+    // Check inline style first
+    if (getInlineStyleProperty(el, .wrap("pointer-events"), page)) |property| {
+        if (property._value.eql(comptime .wrap("none"))) {
+            return true;
+        }
+        // Inline set to non-none - no stylesheet can override
+        return false;
+    }
+
+    // Check stylesheet rules
+    self.rebuildIfDirty() catch return false;
+
+    for (self.rules.items) |rule| {
+        if (rule.props.pointer_events_none == null or rule.specificity < best_spec) {
+            continue;
+        }
+
+        if (matchesSelector(el, rule.selector, page)) {
+            result = rule.props.pointer_events_none;
+            best_spec = rule.specificity;
+        }
+    }
+
+    return result orelse false;
+}
+
+// Extracts visibility-relevant rules from a CSS rule.
+// Creates one VisibilityRule per selector (not per selector list) so each has correct specificity.
+fn addRule(self: *StyleManager, style_rule: *CSSStyleRule) !void {
+    const selector_text = style_rule._selector_text;
+    if (selector_text.len == 0) {
+        return;
+    }
+
+    // Check if the rule has visibility-relevant properties
+    const style = style_rule._style orelse return;
+    const props = extractVisibilityProperties(style);
+    if (!props.isRelevant()) {
+        return;
+    }
+
+    // Parse the selector list
+    const selectors = SelectorParser.parseList(self.arena, selector_text, self.page) catch return;
+    if (selectors.len == 0) {
+        return;
+    }
+
+    // Create one rule per selector - each has its own specificity
+    // e.g., "#id, .class { display: none }" becomes two rules with different specificities
+    for (selectors) |selector| {
+        const rule = VisibilityRule{
+            .props = props,
+            .selector = selector,
+            .specificity = computeSpecificity(selector),
+        };
+        try self.rules.append(self.arena, rule);
+    }
+}
+
+/// Extracts visibility-relevant properties from a style declaration.
+fn extractVisibilityProperties(style: *CSSStyleProperties) VisibilityProperties {
+    var props = VisibilityProperties{};
+    const decl = style.asCSSStyleDeclaration();
+
+    if (decl.findProperty(comptime .wrap("display"))) |property| {
+        props.display_none = property._value.eql(comptime .wrap("none"));
+    }
+
+    if (decl.findProperty(comptime .wrap("visibility"))) |property| {
+        props.visibility_hidden = property._value.eql(comptime .wrap("hidden")) or property._value.eql(comptime .wrap("collapse"));
+    }
+
+    if (decl.findProperty(comptime .wrap("opacity"))) |property| {
+        props.opacity_zero = property._value.eql(comptime .wrap("0"));
+    }
+
+    if (decl.findProperty(.wrap("pointer-events"))) |property| {
+        props.pointer_events_none = property._value.eql(comptime .wrap("none"));
+    }
+
+    return props;
+}
+
+// Computes CSS specificity for a selector.
+// Returns packed value: (id_count << 20) | (class_count << 10) | element_count
+pub fn computeSpecificity(selector: Selector.Selector) u32 {
+    var ids: u32 = 0;
+    var classes: u32 = 0; // includes classes, attributes, pseudo-classes
+    var elements: u32 = 0; // includes elements, pseudo-elements
+
+    // Count specificity for first compound
+    countCompoundSpecificity(selector.first, &ids, &classes, &elements);
+
+    // Count specificity for subsequent segments
+    for (selector.segments) |segment| {
+        countCompoundSpecificity(segment.compound, &ids, &classes, &elements);
+    }
+
+    // Pack into single u32: (ids << 20) | (classes << 10) | elements
+    // This gives us 10 bits each, supporting up to 1023 of each type
+    return (ids << 20) | (classes << 10) | elements;
+}
+
+fn countCompoundSpecificity(compound: Selector.Compound, ids: *u32, classes: *u32, elements: *u32) void {
+    for (compound.parts) |part| {
+        switch (part) {
+            .id => ids.* += 1,
+            .class => classes.* += 1,
+            .tag, .tag_name => elements.* += 1,
+            .universal => {}, // zero specificity
+            .attribute => classes.* += 1,
+            .pseudo_class => |pc| {
+                switch (pc) {
+                    // :where() has zero specificity
+                    .where => {},
+                    // :not(), :is(), :has() take specificity of their most specific argument
+                    .not, .is, .has => |nested| {
+                        var max_nested: u32 = 0;
+                        for (nested) |nested_sel| {
+                            const spec = computeSpecificity(nested_sel);
+                            if (spec > max_nested) max_nested = spec;
+                        }
+                        // Unpack and add to our counts
+                        ids.* += (max_nested >> 20) & 0x3FF;
+                        classes.* += (max_nested >> 10) & 0x3FF;
+                        elements.* += max_nested & 0x3FF;
+                    },
+                    // All other pseudo-classes count as class-level specificity
+                    else => classes.* += 1,
+                }
+            },
+        }
+    }
+}
+
+fn matchesSelector(el: *Element, selector: Selector.Selector, page: *Page) bool {
+    const node = el.asNode();
+    return SelectorList.matches(node, selector, node, page);
+}
+
+const VisibilityProperties = struct {
+    display_none: ?bool = null,
+    visibility_hidden: ?bool = null,
+    opacity_zero: ?bool = null,
+    pointer_events_none: ?bool = null,
+
+    // returne true if any field in VisibilityProperties is not null
+    fn isRelevant(self: VisibilityProperties) bool {
+        return self.display_none != null or
+            self.visibility_hidden != null or
+            self.opacity_zero != null or
+            self.pointer_events_none != null;
+    }
+};
+
+const VisibilityRule = struct {
+    selector: Selector.Selector, // Single selector, not a list
+    props: VisibilityProperties,
+
+    // Packed specificity: (id_count << 20) | (class_count << 10) | element_count
+    // Document order is implicit in array position - equal specificity with later position wins
+    specificity: u32,
+};
+
+const CheckVisibilityOptions = struct {
+    check_opacity: bool = false,
+    check_visibility: bool = false,
+};
+
+// Inline styles always win over stylesheets - use max u32 as sentinel
+const INLINE_SPECIFICITY: u32 = std.math.maxInt(u32);
+
+fn getInlineStyleProperty(el: *Element, property_name: String, page: *Page) ?*CSSStyleProperty {
+    const style = el.getOrCreateStyle(page) catch |err| {
+        log.err(.browser, "StyleManager getOrCreateStyle", .{ .err = err });
+        return null;
+    };
+    return style.asCSSStyleDeclaration().findProperty(property_name);
+}
+
+const testing = @import("../testing.zig");
+test "StyleManager: computeSpecificity: element selector" {
+    // div -> (0, 0, 1)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .tag = .div }} },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: class selector" {
+    // .foo -> (0, 1, 0)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .class = "foo" }} },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 10, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: id selector" {
+    // #bar -> (1, 0, 0)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .id = "bar" }} },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 20, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: combined selector" {
+    // div.foo#bar -> (1, 1, 1)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .tag = .div },
+            .{ .class = "foo" },
+            .{ .id = "bar" },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual((1 << 20) | (1 << 10) | 1, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: universal selector" {
+    // * -> (0, 0, 0)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.universal} },
+        .segments = &.{},
+    };
+    try testing.expectEqual(0, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: multiple classes" {
+    // .a.b.c -> (0, 3, 0)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .class = "a" },
+            .{ .class = "b" },
+            .{ .class = "c" },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(3 << 10, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: descendant combinator" {
+    // div span -> (0, 0, 2)
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .tag = .div }} },
+        .segments = &.{
+            .{ .combinator = .descendant, .compound = .{ .parts = &.{.{ .tag = .span }} } },
+        },
+    };
+    try testing.expectEqual(2, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: :where() has zero specificity" {
+    // :where(.foo) -> (0, 0, 0) regardless of what's inside
+    const inner_selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .class = "foo" }} },
+        .segments = &.{},
+    };
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .pseudo_class = .{ .where = &.{inner_selector} } },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(0, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: :not() takes inner specificity" {
+    // :not(.foo) -> (0, 1, 0) - takes specificity of .foo
+    const inner_selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .class = "foo" }} },
+        .segments = &.{},
+    };
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .pseudo_class = .{ .not = &.{inner_selector} } },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 10, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: :is() takes most specific inner" {
+    // :is(.foo, #bar) -> (1, 0, 0) - takes the most specific (#bar)
+    const class_selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .class = "foo" }} },
+        .segments = &.{},
+    };
+    const id_selector = Selector.Selector{
+        .first = .{ .parts = &.{.{ .id = "bar" }} },
+        .segments = &.{},
+    };
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .pseudo_class = .{ .is = &.{ class_selector, id_selector } } },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 20, computeSpecificity(selector));
+}
+
+test "StyleManager: computeSpecificity: pseudo-class (general)" {
+    // :hover -> (0, 1, 0) - pseudo-classes count as class-level
+    const selector = Selector.Selector{
+        .first = .{ .parts = &.{
+            .{ .pseudo_class = .hover },
+        } },
+        .segments = &.{},
+    };
+    try testing.expectEqual(1 << 10, computeSpecificity(selector));
+}
diff --git a/src/browser/interactive.zig b/src/browser/interactive.zig
index ed3895cf..b3325e97 100644
--- a/src/browser/interactive.zig
+++ b/src/browser/interactive.zig
@@ -133,7 +133,7 @@ pub fn collectInteractiveElements(
     // so classify and getListenerTypes are both O(1) per element.
     const listener_targets = try buildListenerTargetMap(page, arena);
 
-    var css_cache: Element.CssCache = .empty;
+    var css_cache: Element.PointerEventsCache = .empty;
 
     var results: std.ArrayList(InteractiveElement) = .empty;
 
@@ -216,7 +216,7 @@ pub fn classifyInteractivity(
     el: *Element,
     html_el: *Element.Html,
     listener_targets: ListenerTargetMap,
-    cache: ?*Element.CssCache,
+    cache: ?*Element.PointerEventsCache,
 ) ?InteractivityType {
     if (el.hasPointerEventsNone(cache, page)) return null;
 
diff --git a/src/browser/tests/css.html b/src/browser/tests/css.html
index ede62285..70fdff47 100644
--- a/src/browser/tests/css.html
+++ b/src/browser/tests/css.html
@@ -77,33 +77,3 @@
     testing.expectEqual('\uFFFDabc', CSS.escape('\x00abc'));
   }
 </script>
-
-<script id="checkVisibility">
-  {
-    const el = document.createElement("div");
-    document.documentElement.appendChild(el);
-    testing.expectEqual(true, el.checkVisibility());
-
-    el.style.display = "none";
-    testing.expectEqual(false, el.checkVisibility());
-
-    el.style.display = "block";
-    testing.expectEqual(true, el.checkVisibility());
-
-    el.style.visibility = "hidden";
-    testing.expectEqual(false, el.checkVisibility());
-
-    el.style.visibility = "collapse";
-    testing.expectEqual(false, el.checkVisibility());
-
-    el.style.visibility = "visible";
-    testing.expectEqual(true, el.checkVisibility());
-
-    el.style.opacity = "0";
-    testing.expectEqual(false, el.checkVisibility());
-
-    el.style.opacity = "1";
-    testing.expectEqual(true, el.checkVisibility());
-    document.documentElement.removeChild(el);
-  }
-</script>
diff --git a/src/browser/tests/element/check_visibility.html b/src/browser/tests/element/check_visibility.html
new file mode 100644
index 00000000..eeb7ec25
--- /dev/null
+++ b/src/browser/tests/element/check_visibility.html
@@ -0,0 +1,226 @@
+<!DOCTYPE html>
+<script src="../testing.js"></script>
+<body></body>
+
+<!-
+<script id="inline_display_none">
+  {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.style.display = "none";
+    testing.expectEqual(false, el.checkVisibility());
+
+    el.style.display = "block";
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<script id="inline_visibility_hidden">
+  {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+
+    el.style.visibility = "hidden";
+    // Without visibilityProperty option, visibility:hidden is not checked
+    testing.expectEqual(true, el.checkVisibility());
+    // With visibilityProperty: true, visibility:hidden is detected
+    testing.expectEqual(false, el.checkVisibility({ visibilityProperty: true }));
+
+    el.style.visibility = "collapse";
+    testing.expectEqual(false, el.checkVisibility({ visibilityProperty: true }));
+
+    el.style.visibility = "visible";
+    testing.expectEqual(true, el.checkVisibility({ visibilityProperty: true }));
+
+    el.remove();
+  }
+</script>
+
+<script id="inline_opacity_zero">
+  {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+
+    el.style.opacity = "0";
+    // Without checkOpacity option, opacity:0 is not checked
+    testing.expectEqual(true, el.checkVisibility());
+    // With checkOpacity: true, opacity:0 is detected
+    testing.expectEqual(false, el.checkVisibility({ checkOpacity: true }));
+
+    el.style.opacity = "0.5";
+    testing.expectEqual(true, el.checkVisibility({ checkOpacity: true }));
+
+    el.style.opacity = "1";
+    testing.expectEqual(true, el.checkVisibility({ checkOpacity: true }));
+
+    el.remove();
+  }
+</script>
+
+<script id="parent_hidden_hides_child">
+  {
+    const parent = document.createElement("div");
+    const child = document.createElement("span");
+    parent.appendChild(child);
+    document.body.appendChild(parent);
+
+    testing.expectEqual(true, child.checkVisibility());
+
+    // display:none on parent hides children (no option needed)
+    parent.style.display = "none";
+    testing.expectEqual(false, child.checkVisibility());
+
+    // visibility:hidden on parent - needs visibilityProperty option
+    parent.style.display = "block";
+    parent.style.visibility = "hidden";
+    testing.expectEqual(true, child.checkVisibility()); // without option
+    testing.expectEqual(false, child.checkVisibility({ visibilityProperty: true }));
+
+    // opacity:0 on parent - needs checkOpacity option
+    parent.style.visibility = "visible";
+    parent.style.opacity = "0";
+    testing.expectEqual(true, child.checkVisibility()); // without option
+    testing.expectEqual(false, child.checkVisibility({ checkOpacity: true }));
+
+    parent.remove();
+  }
+</script>
+
+<style id="style-basic">
+  .hidden-by-class { display: none; }
+  .visible-by-class { display: block; }
+</style>
+<script id="style_tag_basic">
+  {
+    const el = document.createElement("div");
+    document.body.appendChild(el);
+
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.className = "hidden-by-class";
+    testing.expectEqual(false, el.checkVisibility());
+
+    el.className = "visible-by-class";
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.className = "";
+    el.remove();
+  }
+</script>
+
+<style id="style-specificity">
+  .spec-hidden { display: none; }
+  #spec-visible { display: block; }
+</style>
+<script id="specificity_id_beats_class">
+  {
+    const el = document.createElement("div");
+    el.id = "spec-visible";
+    el.className = "spec-hidden";
+    document.body.appendChild(el);
+
+    // ID selector (#spec-visible: display:block) should beat class selector (.spec-hidden: display:none)
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<style id="style-order-1">
+  .order-test { display: none; }
+</style>
+<style id="style-order-2">
+  .order-test { display: block; }
+</style>
+<script id="rule_order_later_wins">
+  {
+    const el = document.createElement("div");
+    el.className = "order-test";
+    document.body.appendChild(el);
+
+    // Second style block should win (display: block)
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<style id="style-override">
+  .should-be-hidden { display: none; }
+</style>
+<script id="inline_overrides_stylesheet">
+  {
+    const el = document.createElement("div");
+    el.className = "should-be-hidden";
+    document.body.appendChild(el);
+
+    testing.expectEqual(false, el.checkVisibility());
+
+    // Inline style should override
+    el.style.display = "block";
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<script id="dynamic_style_element">
+  {
+    const el = document.createElement("div");
+    el.className = "dynamic-style-test";
+    document.body.appendChild(el);
+
+    testing.expectEqual(true, el.checkVisibility());
+
+    // Add a style element
+    const style = document.createElement("style");
+    style.textContent = ".dynamic-style-test { display: none; }";
+    document.head.appendChild(style);
+
+    testing.expectEqual(false, el.checkVisibility());
+
+    // Remove the style element
+    style.remove();
+    testing.expectEqual(true, el.checkVisibility());
+
+    el.remove();
+  }
+</script>
+
+<script id="deep_nesting">
+  {
+    const levels = 5;
+    let current = document.body;
+    const elements = [];
+
+    for (let i = 0; i < levels; i++) {
+      const el = document.createElement("div");
+      current.appendChild(el);
+      elements.push(el);
+      current = el;
+    }
+
+    // All should be visible
+    for (let i = 0; i < levels; i++) {
+      testing.expectEqual(true, elements[i].checkVisibility());
+    }
+
+    // Hide middle element
+    elements[2].style.display = "none";
+
+    // Elements 0, 1 should still be visible
+    testing.expectEqual(true, elements[0].checkVisibility());
+    testing.expectEqual(true, elements[1].checkVisibility());
+
+    // Elements 2, 3, 4 should be hidden
+    testing.expectEqual(false, elements[2].checkVisibility());
+    testing.expectEqual(false, elements[3].checkVisibility());
+    testing.expectEqual(false, elements[4].checkVisibility());
+
+    elements[0].remove();
+  }
+</script>
diff --git a/src/browser/webapi/Document.zig b/src/browser/webapi/Document.zig
index 53a0b07a..33e29952 100644
--- a/src/browser/webapi/Document.zig
+++ b/src/browser/webapi/Document.zig
@@ -586,7 +586,7 @@ pub fn elementFromPoint(self: *Document, x: f64, y: f64, page: *Page) !?*Element
     while (stack.items.len > 0) {
         const node = stack.pop() orelse break;
         if (node.is(Element)) |element| {
-            if (element.checkVisibility(page)) {
+            if (element.checkVisibilityCached(null, page)) {
                 const rect = element.getBoundingClientRectForVisible(page);
                 if (x >= rect.getLeft() and x <= rect.getRight() and y >= rect.getTop() and y <= rect.getBottom()) {
                     topmost = element;
diff --git a/src/browser/webapi/Element.zig b/src/browser/webapi/Element.zig
index d2d61451..58cc168c 100644
--- a/src/browser/webapi/Element.zig
+++ b/src/browser/webapi/Element.zig
@@ -24,6 +24,7 @@ const String = @import("../../string.zig").String;
 
 const js = @import("../js/js.zig");
 const Page = @import("../Page.zig");
+const StyleManager = @import("../StyleManager.zig");
 const reflect = @import("../reflect.zig");
 
 const Node = @import("Node.zig");
@@ -1041,135 +1042,32 @@ pub fn parentElement(self: *Element) ?*Element {
     return self._proto.parentElement();
 }
 
-const CSSStyleRule = @import("css/CSSStyleRule.zig");
-const StyleSheetList = @import("css/StyleSheetList.zig");
+/// Cache for visibility checks - re-exported from StyleManager for convenience.
+pub const VisibilityCache = StyleManager.VisibilityCache;
 
-pub const CssProperties = struct {
-    display_none: bool = false,
-    visibility_hidden: bool = false,
-    opacity_zero: bool = false,
-    pointer_events_none: bool = false,
+/// Cache for pointer-events checks - re-exported from StyleManager for convenience.
+pub const PointerEventsCache = StyleManager.PointerEventsCache;
+
+pub fn hasPointerEventsNone(self: *Element, cache: ?*PointerEventsCache, page: *Page) bool {
+    return page._style_manager.hasPointerEventsNone(self, cache);
+}
+
+pub fn checkVisibilityCached(self: *Element, cache: ?*VisibilityCache, page: *Page) bool {
+    return !page._style_manager.isHidden(self, cache, .{});
+}
+
+const CheckVisibilityOpts = struct {
+    checkOpacity: bool = false,
+    opacityProperty: bool = false,
+    checkVisibilityCSS: bool = false,
+    visibilityProperty: bool = false,
 };
-
-pub const CssCache = std.AutoHashMapUnmanaged(*Element, CssProperties);
-
-fn getCssProperties(el: *Element, doc_sheets: ?*StyleSheetList, cache: ?*CssCache, page: *Page) CssProperties {
-    if (cache) |c| {
-        if (c.get(el)) |props| return props;
-    }
-
-    var props = CssProperties{};
-
-    // Check stylesheets first
-    if (doc_sheets) |sheets| {
-        for (0..sheets.length()) |i| {
-            const sheet = sheets.item(i) orelse continue;
-            const rules = sheet.getCssRules(page) catch continue;
-            for (0..rules.length()) |j| {
-                const rule = rules.item(j) orelse continue;
-                if (rule.is(CSSStyleRule)) |style_rule| {
-                    const selector = style_rule.getSelectorText();
-                    if (el.matches(selector, page) catch false) {
-                        const style = (style_rule.getStyle(page) catch continue).asCSSStyleDeclaration();
-
-                        const display = style.getPropertyValue("display", page);
-                        if (std.mem.eql(u8, display, "none")) {
-                            props.display_none = true;
-                        } else if (display.len > 0) {
-                            props.display_none = false;
-                        }
-
-                        const visibility = style.getPropertyValue("visibility", page);
-                        if (std.mem.eql(u8, visibility, "hidden") or std.mem.eql(u8, visibility, "collapse")) {
-                            props.visibility_hidden = true;
-                        } else if (visibility.len > 0) {
-                            props.visibility_hidden = false;
-                        }
-
-                        const opacity = style.getPropertyValue("opacity", page);
-                        if (std.mem.eql(u8, opacity, "0")) {
-                            props.opacity_zero = true;
-                        } else if (opacity.len > 0) {
-                            props.opacity_zero = false;
-                        }
-
-                        const pointer_events = style.getPropertyValue("pointer-events", page);
-                        if (std.mem.eql(u8, pointer_events, "none")) {
-                            props.pointer_events_none = true;
-                        } else if (pointer_events.len > 0) {
-                            props.pointer_events_none = false;
-                        }
-                    }
-                }
-            }
-        }
-    }
-
-    // Check inline styles overrides
-    if (el.getOrCreateStyle(page) catch null) |style| {
-        const decl = style.asCSSStyleDeclaration();
-        const display = decl.getPropertyValue("display", page);
-        if (std.mem.eql(u8, display, "none")) {
-            props.display_none = true;
-        } else if (display.len > 0) {
-            props.display_none = false;
-        }
-
-        const visibility = decl.getPropertyValue("visibility", page);
-        if (std.mem.eql(u8, visibility, "hidden") or std.mem.eql(u8, visibility, "collapse")) {
-            props.visibility_hidden = true;
-        } else if (visibility.len > 0) {
-            props.visibility_hidden = false;
-        }
-
-        const opacity = decl.getPropertyValue("opacity", page);
-        if (std.mem.eql(u8, opacity, "0")) {
-            props.opacity_zero = true;
-        } else if (opacity.len > 0) {
-            props.opacity_zero = false;
-        }
-
-        const pointer_events = decl.getPropertyValue("pointer-events", page);
-        if (std.mem.eql(u8, pointer_events, "none")) {
-            props.pointer_events_none = true;
-        } else if (pointer_events.len > 0) {
-            props.pointer_events_none = false;
-        }
-    }
-
-    if (cache) |c| {
-        c.put(page.call_arena, el, props) catch {};
-    }
-
-    return props;
-}
-
-pub fn hasPointerEventsNone(self: *Element, cache: ?*CssCache, page: *Page) bool {
-    const doc_sheets = page.document.getStyleSheets(page) catch null;
-    var current: ?*Element = self;
-    while (current) |el| {
-        const props = el.getCssProperties(doc_sheets, cache, page);
-        if (props.pointer_events_none) return true;
-        current = el.parentElement();
-    }
-    return false;
-}
-
-pub fn checkVisibilityCached(self: *Element, cache: ?*CssCache, page: *Page) bool {
-    const doc_sheets = page.document.getStyleSheets(page) catch null;
-    var current: ?*Element = self;
-
-    while (current) |el| {
-        const props = getCssProperties(el, doc_sheets, cache, page);
-        if (props.display_none or props.visibility_hidden or props.opacity_zero) return false;
-        current = el.parentElement();
-    }
-
-    return true;
-}
-
-pub fn checkVisibility(self: *Element, page: *Page) bool {
-    return self.checkVisibilityCached(null, page);
+pub fn checkVisibility(self: *Element, opts_: ?CheckVisibilityOpts, page: *Page) bool {
+    const opts = opts_ orelse CheckVisibilityOpts{};
+    return !page._style_manager.isHidden(self, null, .{
+        .check_opacity = opts.checkOpacity or opts.opacityProperty,
+        .check_visibility = opts.visibilityProperty or opts.checkVisibilityCSS,
+    });
 }
 
 fn getElementDimensions(self: *Element, page: *Page) struct { width: f64, height: f64 } {
@@ -1206,7 +1104,7 @@ fn getElementDimensions(self: *Element, page: *Page) struct { width: f64, height
 }
 
 pub fn getClientWidth(self: *Element, page: *Page) f64 {
-    if (!self.checkVisibility(page)) {
+    if (!self.checkVisibilityCached(null, page)) {
         return 0.0;
     }
     const dims = self.getElementDimensions(page);
@@ -1214,7 +1112,7 @@ pub fn getClientWidth(self: *Element, page: *Page) f64 {
 }
 
 pub fn getClientHeight(self: *Element, page: *Page) f64 {
-    if (!self.checkVisibility(page)) {
+    if (!self.checkVisibilityCached(null, page)) {
         return 0.0;
     }
     const dims = self.getElementDimensions(page);
@@ -1222,7 +1120,7 @@ pub fn getClientHeight(self: *Element, page: *Page) f64 {
 }
 
 pub fn getBoundingClientRect(self: *Element, page: *Page) DOMRect {
-    if (!self.checkVisibility(page)) {
+    if (!self.checkVisibilityCached(null, page)) {
         return .{
             ._x = 0.0,
             ._y = 0.0,
@@ -1252,7 +1150,7 @@ pub fn getBoundingClientRectForVisible(self: *Element, page: *Page) DOMRect {
 }
 
 pub fn getClientRects(self: *Element, page: *Page) ![]DOMRect {
-    if (!self.checkVisibility(page)) {
+    if (!self.checkVisibilityCached(null, page)) {
         return &.{};
     }
     const rects = try page.call_arena.alloc(DOMRect, 1);
@@ -1297,7 +1195,7 @@ pub fn getScrollWidth(self: *Element, page: *Page) f64 {
 }
 
 pub fn getOffsetHeight(self: *Element, page: *Page) f64 {
-    if (!self.checkVisibility(page)) {
+    if (!self.checkVisibilityCached(null, page)) {
         return 0.0;
     }
     const dims = self.getElementDimensions(page);
@@ -1305,7 +1203,7 @@ pub fn getOffsetHeight(self: *Element, page: *Page) f64 {
 }
 
 pub fn getOffsetWidth(self: *Element, page: *Page) f64 {
-    if (!self.checkVisibility(page)) {
+    if (!self.checkVisibilityCached(null, page)) {
         return 0.0;
     }
     const dims = self.getElementDimensions(page);
@@ -1313,14 +1211,14 @@ pub fn getOffsetWidth(self: *Element, page: *Page) f64 {
 }
 
 pub fn getOffsetTop(self: *Element, page: *Page) f64 {
-    if (!self.checkVisibility(page)) {
+    if (!self.checkVisibilityCached(null, page)) {
         return 0.0;
     }
     return calculateDocumentPosition(self.asNode());
 }
 
 pub fn getOffsetLeft(self: *Element, page: *Page) f64 {
-    if (!self.checkVisibility(page)) {
+    if (!self.checkVisibilityCached(null, page)) {
         return 0.0;
     }
     return calculateSiblingPosition(self.asNode());
diff --git a/src/browser/webapi/css/CSSStyleDeclaration.zig b/src/browser/webapi/css/CSSStyleDeclaration.zig
index 13499033..d207c11a 100644
--- a/src/browser/webapi/css/CSSStyleDeclaration.zig
+++ b/src/browser/webapi/css/CSSStyleDeclaration.zig
@@ -77,10 +77,11 @@ pub fn item(self: *const CSSStyleDeclaration, index: u32) []const u8 {
 
 pub fn getPropertyValue(self: *const CSSStyleDeclaration, property_name: []const u8, page: *Page) []const u8 {
     const normalized = normalizePropertyName(property_name, &page.buf);
-    const prop = self.findProperty(normalized) orelse {
+    const wrapped = String.wrap(normalized);
+    const prop = self.findProperty(wrapped) orelse {
         // Only return default values for computed styles
         if (self._is_computed) {
-            return getDefaultPropertyValue(self, normalized);
+            return getDefaultPropertyValue(self, wrapped);
         }
         return "";
     };
@@ -89,7 +90,7 @@ pub fn getPropertyValue(self: *const CSSStyleDeclaration, property_name: []const
 
 pub fn getPropertyPriority(self: *const CSSStyleDeclaration, property_name: []const u8, page: *Page) []const u8 {
     const normalized = normalizePropertyName(property_name, &page.buf);
-    const prop = self.findProperty(normalized) orelse return "";
+    const prop = self.findProperty(.wrap(normalized)) orelse return "";
     return if (prop._important) "important" else "";
 }
 
@@ -120,7 +121,7 @@ fn setPropertyImpl(self: *CSSStyleDeclaration, property_name: []const u8, value:
     const normalized_value = try normalizePropertyValue(page.call_arena, normalized, value);
 
     // Find existing property
-    if (self.findProperty(normalized)) |existing| {
+    if (self.findProperty(.wrap(normalized))) |existing| {
         existing._value = try String.init(page.arena, normalized_value, .{});
         existing._important = important;
         return;
@@ -144,7 +145,7 @@ pub fn removeProperty(self: *CSSStyleDeclaration, property_name: []const u8, pag
 
 fn removePropertyImpl(self: *CSSStyleDeclaration, property_name: []const u8, page: *Page) ![]const u8 {
     const normalized = normalizePropertyName(property_name, &page.buf);
-    const prop = self.findProperty(normalized) orelse return "";
+    const prop = self.findProperty(.wrap(normalized)) orelse return "";
 
     // the value might not be on the heap (it could be inlined in the small string
     // optimization), so we need to dupe it.
@@ -208,11 +209,11 @@ pub fn format(self: *const CSSStyleDeclaration, writer: *std.Io.Writer) !void {
     }
 }
 
-fn findProperty(self: *const CSSStyleDeclaration, name: []const u8) ?*Property {
+pub fn findProperty(self: *const CSSStyleDeclaration, name: String) ?*Property {
     var node = self._properties.first;
     while (node) |n| {
         const prop = Property.fromNodeLink(n);
-        if (prop._name.eqlSlice(name)) {
+        if (prop._name.eql(name)) {
             return prop;
         }
         node = n.next;
@@ -617,26 +618,36 @@ fn isLengthProperty(name: []const u8) bool {
     return length_properties.has(name);
 }
 
-fn getDefaultPropertyValue(self: *const CSSStyleDeclaration, normalized_name: []const u8) []const u8 {
-    if (std.mem.eql(u8, normalized_name, "visibility")) {
-        return "visible";
+fn getDefaultPropertyValue(self: *const CSSStyleDeclaration, name: String) []const u8 {
+    switch (name.len) {
+        5 => {
+            if (name.eql(comptime .wrap("color"))) {
+                const element = self._element orelse return "";
+                return getDefaultColor(element);
+            }
+        },
+        7 => {
+            if (name.eql(comptime .wrap("opacity"))) {
+                return "1";
+            }
+            if (name.eql(comptime .wrap("display"))) {
+                const element = self._element orelse return "";
+                return getDefaultDisplay(element);
+            }
+        },
+        10 => {
+            if (name.eql(comptime .wrap("visibility"))) {
+                return "visible";
+            }
+        },
+        16 => {
+            if (name.eqlSlice("background-color")) {
+                // transparent
+                return "rgba(0, 0, 0, 0)";
+            }
+        },
+        else => {},
     }
-    if (std.mem.eql(u8, normalized_name, "opacity")) {
-        return "1";
-    }
-    if (std.mem.eql(u8, normalized_name, "display")) {
-        const element = self._element orelse return "";
-        return getDefaultDisplay(element);
-    }
-    if (std.mem.eql(u8, normalized_name, "color")) {
-        const element = self._element orelse return "";
-        return getDefaultColor(element);
-    }
-    if (std.mem.eql(u8, normalized_name, "background-color")) {
-        // transparent
-        return "rgba(0, 0, 0, 0)";
-    }
-
     return "";
 }
 
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index aa8655f1..2b41fffa 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -69,12 +69,19 @@ pub fn insertRule(self: *CSSStyleSheet, rule: []const u8, maybe_index: ?u32, pag
 
     const rules = try self.getCssRules(page);
     try rules.insert(index, style_rule._proto, page);
+
+    // Notify StyleManager that rules have changed
+    page._style_manager.sheetModified();
+
     return index;
 }
 
 pub fn deleteRule(self: *CSSStyleSheet, index: u32, page: *Page) !void {
     const rules = try self.getCssRules(page);
     try rules.remove(index);
+
+    // Notify StyleManager that rules have changed
+    page._style_manager.sheetModified();
 }
 
 pub fn replace(self: *CSSStyleSheet, text: []const u8, page: *Page) !js.Promise {
@@ -99,6 +106,9 @@ pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) !void {
         try rules.insert(index, style_rule._proto, page);
         index += 1;
     }
+
+    // Notify StyleManager that rules have changed
+    page._style_manager.sheetModified();
 }
 
 pub const JsApi = struct {
diff --git a/src/browser/webapi/css/StyleSheetList.zig b/src/browser/webapi/css/StyleSheetList.zig
index 11efb45c..c0732c73 100644
--- a/src/browser/webapi/css/StyleSheetList.zig
+++ b/src/browser/webapi/css/StyleSheetList.zig
@@ -24,6 +24,15 @@ pub fn add(self: *StyleSheetList, sheet: *CSSStyleSheet, page: *Page) !void {
     try self._sheets.append(page.arena, sheet);
 }
 
+pub fn remove(self: *StyleSheetList, sheet: *CSSStyleSheet) void {
+    for (self._sheets.items, 0..) |s, i| {
+        if (s == sheet) {
+            _ = self._sheets.orderedRemove(i);
+            return;
+        }
+    }
+}
+
 pub const JsApi = struct {
     pub const bridge = js.Bridge(StyleSheetList);
 
diff --git a/src/browser/webapi/element/html/Style.zig b/src/browser/webapi/element/html/Style.zig
index b6389d61..fc52cf38 100644
--- a/src/browser/webapi/element/html/Style.zig
+++ b/src/browser/webapi/element/html/Style.zig
@@ -106,7 +106,10 @@ pub fn getSheet(self: *Style, page: *Page) !?*CSSStyleSheet {
 
 pub fn styleAddedCallback(self: *Style, page: *Page) !void {
     // Force stylesheet initialization so rules are parsed immediately
-    _ = self.getSheet(page) catch null;
+    if (self.getSheet(page) catch null) |sheet| {
+        // Notify StyleManager about the new stylesheet
+        page._style_manager.sheetAdded(sheet) catch {};
+    }
 
     // if we're planning on navigating to another page, don't trigger load event.
     if (page.isGoingAway()) {

From dda5e2c5427d73a0099d64e39646643f0dcca6d2 Mon Sep 17 00:00:00 2001
From: Karl Seguin <karlseguin@users.noreply.github.com>
Date: Thu, 19 Mar 2026 06:47:40 +0800
Subject: [PATCH 22/35] Apply suggestions from code review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Adrià Arrufat <1671644+arrufat@users.noreply.github.com>
---
 src/browser/StyleManager.zig | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index d968c38a..000bd89d 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -357,7 +357,7 @@ pub fn computeSpecificity(selector: Selector.Selector) u32 {
 
     // Pack into single u32: (ids << 20) | (classes << 10) | elements
     // This gives us 10 bits each, supporting up to 1023 of each type
-    return (ids << 20) | (classes << 10) | elements;
+    return (@min(ids, 1023) << 20) | (@min(classes, 1023) << 10) | @min(elements, 1023);
 }
 
 fn countCompoundSpecificity(compound: Selector.Compound, ids: *u32, classes: *u32, elements: *u32) void {
@@ -379,6 +379,7 @@ fn countCompoundSpecificity(compound: Selector.Compound, ids: *u32, classes: *u3
                             const spec = computeSpecificity(nested_sel);
                             if (spec > max_nested) max_nested = spec;
                         }
+                    max_nested = @min(max_nested, 1023);
                         // Unpack and add to our counts
                         ids.* += (max_nested >> 20) & 0x3FF;
                         classes.* += (max_nested >> 10) & 0x3FF;

From c1bb27c45046ea242892af16b5655110537f6540 Mon Sep 17 00:00:00 2001
From: Karl Seguin <k@openmymind.io>
Date: Thu, 19 Mar 2026 06:52:41 +0800
Subject: [PATCH 23/35] better encapsulate arena reset

---
 src/ArenaPool.zig            | 5 +++++
 src/browser/StyleManager.zig | 5 +----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/ArenaPool.zig b/src/ArenaPool.zig
index 2f8de17f..608445f6 100644
--- a/src/ArenaPool.zig
+++ b/src/ArenaPool.zig
@@ -100,6 +100,11 @@ pub fn reset(_: *const ArenaPool, allocator: Allocator, retain: usize) void {
     _ = arena.reset(.{ .retain_with_limit = retain });
 }
 
+pub fn resetRetain(_: *const ArenaPool, allocator: Allocator) void {
+    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(allocator.ptr));
+    _ = arena.reset(.retain_capacity);
+}
+
 const testing = std.testing;
 
 test "arena pool - basic acquire and use" {
diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 000bd89d..a7765814 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -90,10 +90,7 @@ fn rebuildIfDirty(self: *StyleManager) !void {
 
     self.dirty = false;
     const item_count = self.rules.items.len;
-
-    const arena: *std.heap.ArenaAllocator = @ptrCast(@alignCast(self.arena.ptr));
-    _ = arena.reset(.retain_capacity);
-
+    self.page._session.arena_pool.resetRetain(self.arena);
     self.rules = try .initCapacity(self.arena, item_count);
     const sheets = self.page.document._style_sheets orelse return;
     for (sheets._sheets.items) |sheet| {

From 10e379e4fb55fc484e5d1635426d814ae9f549f0 Mon Sep 17 00:00:00 2001
From: Karl Seguin <k@openmymind.io>
Date: Thu, 19 Mar 2026 07:00:26 +0800
Subject: [PATCH 24/35] fix clamping

---
 src/browser/StyleManager.zig | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index a7765814..4163b657 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -354,7 +354,7 @@ pub fn computeSpecificity(selector: Selector.Selector) u32 {
 
     // Pack into single u32: (ids << 20) | (classes << 10) | elements
     // This gives us 10 bits each, supporting up to 1023 of each type
-    return (@min(ids, 1023) << 20) | (@min(classes, 1023) << 10) | @min(elements, 1023);
+    return (@as(u32, @min(ids, 1023)) << 20) | (@as(u32, @min(classes, 1023)) << 10) | @min(elements, 1023);
 }
 
 fn countCompoundSpecificity(compound: Selector.Compound, ids: *u32, classes: *u32, elements: *u32) void {
@@ -376,7 +376,6 @@ fn countCompoundSpecificity(compound: Selector.Compound, ids: *u32, classes: *u3
                             const spec = computeSpecificity(nested_sel);
                             if (spec > max_nested) max_nested = spec;
                         }
-                    max_nested = @min(max_nested, 1023);
                         // Unpack and add to our counts
                         ids.* += (max_nested >> 20) & 0x3FF;
                         classes.* += (max_nested >> 10) & 0x3FF;

From b2a996e5c704f3c15e6c78c12d595adc8553c7a8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Thu, 19 Mar 2026 11:13:04 +0900
Subject: [PATCH 25/35] StyleManager: restore dirty state on rebuild allocation
 failure

---
 src/browser/StyleManager.zig | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 4163b657..211e4fed 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -89,6 +89,8 @@ fn rebuildIfDirty(self: *StyleManager) !void {
     }
 
     self.dirty = false;
+    errdefer self.dirty = true;
+
     const item_count = self.rules.items.len;
     self.page._session.arena_pool.resetRetain(self.arena);
     self.rules = try .initCapacity(self.arena, item_count);

From 94d8f90a96748afc0ce964bbed5ff6ce5a49f71d Mon Sep 17 00:00:00 2001
From: Karl Seguin <k@openmymind.io>
Date: Thu, 19 Mar 2026 08:44:21 +0800
Subject: [PATCH 26/35] Bucket stylesheet rules

In the first iteration of this, we kept an ArrayList of all rules with
visibility properties. Why bother evaluating if a rule's selector matches an
element if that rule doesn't have any meanignful (i.e. visibility) properties?

This commit enhances that approach by bucketing the rules. Given the following
selectors:

.hidden {....}
.footer > .small {...}

We can store the rules based on their right-most selector. So, given an element
we can do:

if (getId(el)) |id| {
   const rules = id_lookup.get(id) orelse continue;
   // check rules
}

if (getClasses(el)) |classes| {
   for (classes) |c| {
     const rules = class_lookup(c) orelse continue;
     // chck rules
   }
}
...

On an amazon product page, the total list of visibility-related rules was ~230.
Now, scanning 230 rules for a match isn't _aweful_, but remember that this has
to be done up the ancestor tree AND, for Amazon, this is called over 20K times.

This change requires that the StyleManager becomes more matching/parsing-aware
but a typical visibility check on that same Amazon product page only has to
check 2 rules (down from 230) and often has to check 0 rules.

Also, we now filter out a few more interactive-related pseudo-elements, e.g.
:hover. These aren't supported by the browser as a whole (i.e. they can _never_
match), so they can be filtered out early, when building the rules lookup.
---
 src/browser/StyleManager.zig | 299 ++++++++++++++++++++++++++++++-----
 1 file changed, 263 insertions(+), 36 deletions(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 211e4fed..57fea65d 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -41,14 +41,24 @@ pub const VisibilityCache = std.AutoHashMapUnmanaged(*Element, bool);
 pub const PointerEventsCache = std.AutoHashMapUnmanaged(*Element, bool);
 
 // Tracks visibility-relevant CSS rules from <style> elements.
+// Rules are bucketed by their rightmost selector part for fast lookup.
 const StyleManager = @This();
 
+const Tag = Element.Tag;
+const RuleList = std.ArrayList(VisibilityRule);
+
 page: *Page,
 
 arena: Allocator,
 
-// Sorted in document order. Only ryles that we care about (display, visibility, ...)
-rules: std.ArrayList(VisibilityRule) = .empty,
+// Bucketed rules for fast lookup - keyed by rightmost selector part
+id_rules: std.StringHashMapUnmanaged(RuleList) = .empty,
+class_rules: std.StringHashMapUnmanaged(RuleList) = .empty,
+tag_rules: std.AutoHashMapUnmanaged(Tag, RuleList) = .empty,
+other_rules: RuleList = .empty, // universal, attribute, pseudo-class endings
+
+// Document order counter for tie-breaking equal specificity
+next_doc_order: u32 = 0,
 
 // When true, rules need to be rebuilt
 dirty: bool = false,
@@ -91,9 +101,15 @@ fn rebuildIfDirty(self: *StyleManager) !void {
     self.dirty = false;
     errdefer self.dirty = true;
 
-    const item_count = self.rules.items.len;
     self.page._session.arena_pool.resetRetain(self.arena);
-    self.rules = try .initCapacity(self.arena, item_count);
+
+    // Clear all buckets and reset document order
+    self.id_rules = .empty;
+    self.class_rules = .empty;
+    self.tag_rules = .empty;
+    self.other_rules = .empty;
+    self.next_doc_order = 0;
+
     const sheets = self.page.document._style_sheets orelse return;
     for (sheets._sheets.items) |sheet| {
         self.sheetAdded(sheet) catch |err| {
@@ -193,27 +209,97 @@ fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOp
 
     self.rebuildIfDirty() catch return false;
 
-    for (self.rules.items) |rule| {
-        // Skip rules that can't possibly update any property we care about
-        const dominated = (rule.props.display_none == null or rule.specificity < display_spec) and
-            (rule.props.visibility_hidden == null or rule.specificity < visibility_spec) and
-            (rule.props.opacity_zero == null or rule.specificity < opacity_spec);
-        if (dominated) continue;
+    // Track doc_order for tie-breaking (0 = inline style, which always wins)
+    var display_doc_order: u32 = 0;
+    var visibility_doc_order: u32 = 0;
+    var opacity_doc_order: u32 = 0;
 
-        if (matchesSelector(el, rule.selector, self.page)) {
-            if (rule.props.display_none != null and rule.specificity >= display_spec) {
-                display_none = rule.props.display_none;
-                display_spec = rule.specificity;
-            }
-            if (rule.props.visibility_hidden != null and rule.specificity >= visibility_spec) {
-                visibility_hidden = rule.props.visibility_hidden;
-                visibility_spec = rule.specificity;
-            }
-            if (rule.props.opacity_zero != null and rule.specificity >= opacity_spec) {
-                opacity_zero = rule.props.opacity_zero;
-                opacity_spec = rule.specificity;
+    // Helper to check a single rule
+    const Ctx = struct {
+        display_none: *?bool,
+        display_spec: *u32,
+        display_doc_order: *u32,
+        visibility_hidden: *?bool,
+        visibility_spec: *u32,
+        visibility_doc_order: *u32,
+        opacity_zero: *?bool,
+        opacity_spec: *u32,
+        opacity_doc_order: *u32,
+        el: *Element,
+        page: *Page,
+
+        // Returns true if (spec, doc_order) beats (best_spec, best_doc_order)
+        fn beats(spec: u32, doc_order: u32, best_spec: u32, best_doc_order: u32) bool {
+            return spec > best_spec or (spec == best_spec and doc_order > best_doc_order);
+        }
+
+        fn checkRule(ctx: @This(), rule: VisibilityRule) void {
+            // Skip rules that can't possibly beat current best for any property
+            const dominated = (rule.props.display_none == null or !beats(rule.specificity, rule.doc_order, ctx.display_spec.*, ctx.display_doc_order.*)) and
+                (rule.props.visibility_hidden == null or !beats(rule.specificity, rule.doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*)) and
+                (rule.props.opacity_zero == null or !beats(rule.specificity, rule.doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*));
+            if (dominated) return;
+
+            if (matchesSelector(ctx.el, rule.selector, ctx.page)) {
+                if (rule.props.display_none != null and beats(rule.specificity, rule.doc_order, ctx.display_spec.*, ctx.display_doc_order.*)) {
+                    ctx.display_none.* = rule.props.display_none;
+                    ctx.display_spec.* = rule.specificity;
+                    ctx.display_doc_order.* = rule.doc_order;
+                }
+                if (rule.props.visibility_hidden != null and beats(rule.specificity, rule.doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*)) {
+                    ctx.visibility_hidden.* = rule.props.visibility_hidden;
+                    ctx.visibility_spec.* = rule.specificity;
+                    ctx.visibility_doc_order.* = rule.doc_order;
+                }
+                if (rule.props.opacity_zero != null and beats(rule.specificity, rule.doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*)) {
+                    ctx.opacity_zero.* = rule.props.opacity_zero;
+                    ctx.opacity_spec.* = rule.specificity;
+                    ctx.opacity_doc_order.* = rule.doc_order;
+                }
             }
         }
+    };
+    const ctx = Ctx{
+        .display_none = &display_none,
+        .display_spec = &display_spec,
+        .display_doc_order = &display_doc_order,
+        .visibility_hidden = &visibility_hidden,
+        .visibility_spec = &visibility_spec,
+        .visibility_doc_order = &visibility_doc_order,
+        .opacity_zero = &opacity_zero,
+        .opacity_spec = &opacity_spec,
+        .opacity_doc_order = &opacity_doc_order,
+        .el = el,
+        .page = self.page,
+    };
+
+    if (el.getAttributeSafe(comptime .wrap("id"))) |id| {
+        if (self.id_rules.get(id)) |rules| {
+            for (rules.items) |rule| {
+                ctx.checkRule(rule);
+            }
+        }
+    }
+
+    if (el.getAttributeSafe(comptime .wrap("class"))) |class_attr| {
+        var it = std.mem.tokenizeAny(u8, class_attr, &std.ascii.whitespace);
+        while (it.next()) |class| {
+            if (self.class_rules.get(class)) |rules| {
+                for (rules.items) |rule| {
+                    ctx.checkRule(rule);
+                }
+            }
+        }
+    }
+
+    if (self.tag_rules.get(el.getTag())) |rules| {
+        for (rules.items) |rule| {
+            ctx.checkRule(rule);
+        }
+    }
+
+    for (self.other_rules.items) |rule| {
+        ctx.checkRule(rule);
     }
 
     return (display_none orelse false) or (visibility_hidden orelse false) or (opacity_zero orelse false);
@@ -237,12 +323,13 @@ pub fn hasPointerEventsNone(self: *StyleManager, el: *Element, cache: ?*PointerE
 
         const pe_none = self.elementHasPointerEventsNone(elem);
 
-        // Store in cache
         if (cache) |c| {
             c.put(self.page.call_arena, elem, pe_none) catch {};
         }
 
-        if (pe_none) return true;
+        if (pe_none) {
+            return true;
+        }
         current = elem.parentElement();
     }
 
@@ -253,30 +340,66 @@ pub fn hasPointerEventsNone(self: *StyleManager, el: *Element, cache: ?*PointerE
 fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
     const page = self.page;
 
-    var result: ?bool = null;
-    var best_spec: u32 = 0;
-
     // Check inline style first
     if (getInlineStyleProperty(el, .wrap("pointer-events"), page)) |property| {
         if (property._value.eql(comptime .wrap("none"))) {
             return true;
         }
-        // Inline set to non-none - no stylesheet can override
         return false;
     }
 
     // Check stylesheet rules
     self.rebuildIfDirty() catch return false;
 
-    for (self.rules.items) |rule| {
-        if (rule.props.pointer_events_none == null or rule.specificity < best_spec) {
-            continue;
+    var result: ?bool = null;
+    var best_spec: u32 = 0;
+    var best_doc_order: u32 = 0;
+
+    // Helper to check a single rule
+    const checkRule = struct {
+        fn beats(spec: u32, doc_order: u32, b_spec: u32, b_doc_order: u32) bool {
+            return spec > b_spec or (spec == b_spec and doc_order > b_doc_order);
         }
 
-        if (matchesSelector(el, rule.selector, page)) {
-            result = rule.props.pointer_events_none;
-            best_spec = rule.specificity;
+        fn check(rule: VisibilityRule, res: *?bool, spec: *u32, doc_order: *u32, elem: *Element, p: *Page) void {
+            if (rule.props.pointer_events_none == null or !beats(rule.specificity, rule.doc_order, spec.*, doc_order.*)) {
+                return;
+            }
+            if (matchesSelector(elem, rule.selector, p)) {
+                res.* = rule.props.pointer_events_none;
+                spec.* = rule.specificity;
+                doc_order.* = rule.doc_order;
+            }
         }
+    }.check;
+
+    if (el.getAttributeSafe(comptime .wrap("id"))) |id| {
+        if (self.id_rules.get(id)) |rules| {
+            for (rules.items) |rule| {
+                checkRule(rule, &result, &best_spec, &best_doc_order, el, page);
+            }
+        }
+    }
+
+    if (el.getAttributeSafe(comptime .wrap("class"))) |class_attr| {
+        var it = std.mem.tokenizeAny(u8, class_attr, &std.ascii.whitespace);
+        while (it.next()) |class| {
+            if (self.class_rules.get(class)) |rules| {
+                for (rules.items) |rule| {
+                    checkRule(rule, &result, &best_spec, &best_doc_order, el, page);
+                }
+            }
+        }
+    }
+
+    if (self.tag_rules.get(el.getTag())) |rules| {
+        for (rules.items) |rule| {
+            checkRule(rule, &result, &best_spec, &best_doc_order, el, page);
+        }
+    }
+
+    for (self.other_rules.items) |rule| {
+        checkRule(rule, &result, &best_spec, &best_doc_order, el, page);
     }
 
     return result orelse false;
@@ -284,6 +407,7 @@ fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
 
 // Extracts visibility-relevant rules from a CSS rule.
 // Creates one VisibilityRule per selector (not per selector list) so each has correct specificity.
+// Buckets rules by their rightmost selector part for fast lookup.
 fn addRule(self: *StyleManager, style_rule: *CSSStyleRule) !void {
     const selector_text = style_rule._selector_text;
     if (selector_text.len == 0) {
@@ -306,15 +430,96 @@ fn addRule(self: *StyleManager, style_rule: *CSSStyleRule) !void {
     // Create one rule per selector - each has its own specificity
     // e.g., "#id, .class { display: none }" becomes two rules with different specificities
     for (selectors) |selector| {
+        // Get the rightmost compound (last segment, or first if no segments)
+        const rightmost = if (selector.segments.len > 0)
+            selector.segments[selector.segments.len - 1].compound
+        else
+            selector.first;
+
+        // Find the bucketing key from rightmost compound
+        const bucket_key = getBucketKey(rightmost) orelse continue; // skip if dynamic pseudo-class
+
         const rule = VisibilityRule{
             .props = props,
             .selector = selector,
             .specificity = computeSpecificity(selector),
+            .doc_order = self.next_doc_order,
         };
-        try self.rules.append(self.arena, rule);
+        self.next_doc_order += 1;
+
+        // Add to appropriate bucket
+        switch (bucket_key) {
+            .id => |id| {
+                const gop = try self.id_rules.getOrPut(self.arena, id);
+                if (!gop.found_existing) gop.value_ptr.* = .empty;
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .class => |class| {
+                const gop = try self.class_rules.getOrPut(self.arena, class);
+                if (!gop.found_existing) gop.value_ptr.* = .empty;
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .tag => |tag| {
+                const gop = try self.tag_rules.getOrPut(self.arena, tag);
+                if (!gop.found_existing) gop.value_ptr.* = .empty;
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .other => {
+                try self.other_rules.append(self.arena, rule);
+            },
+        }
     }
 }
 
+const BucketKey = union(enum) {
+    id: []const u8,
+    class: []const u8,
+    tag: Tag,
+    other,
+};
+
+/// Returns the bucket key for a compound selector, or null if the selector
+/// ends with a dynamic pseudo-class that we should skip (hover, active, focus, etc.)
+fn getBucketKey(compound: Selector.Compound) ?BucketKey {
+    // Iterate parts in reverse to find the most specific bucketing key
+    // Priority: id > class > tag > other
+    var best_key: BucketKey = .other;
+
+    for (compound.parts) |part| {
+        switch (part) {
+            .id => |id| {
+                best_key = .{ .id = id };
+            },
+            .class => |class| {
+                if (best_key != .id) {
+                    best_key = .{ .class = class };
+                }
+            },
+            .tag => |tag| {
+                if (best_key == .other) {
+                    best_key = .{ .tag = tag };
+                }
+            },
+            .tag_name => {
+                // Custom tag - put in other bucket (can't efficiently look up)
+                // Keep current best_key if we have something better
+            },
+            .pseudo_class => |pc| {
+                // Skip dynamic pseudo-classes - they depend on interaction state
+                switch (pc) {
+                    .hover, .active, .focus, .focus_within, .focus_visible, .visited, .target => {
+                        return null; // Skip this selector entirely
+                    },
+                    else => {},
+                }
+            },
+            .universal, .attribute => {},
+        }
+    }
+
+    return best_key;
+}
+
 /// Extracts visibility-relevant properties from a style declaration.
 fn extractVisibilityProperties(style: *CSSStyleProperties) VisibilityProperties {
     var props = VisibilityProperties{};
@@ -416,8 +621,10 @@ const VisibilityRule = struct {
     props: VisibilityProperties,
 
     // Packed specificity: (id_count << 20) | (class_count << 10) | element_count
-    // Document order is implicit in array position - equal specificity with later position wins
     specificity: u32,
+
+    // Document order for tie-breaking equal specificity (higher = later in document)
+    doc_order: u32,
 };
 
 const CheckVisibilityOptions = struct {
@@ -569,3 +776,23 @@ test "StyleManager: computeSpecificity: pseudo-class (general)" {
     };
     try testing.expectEqual(1 << 10, computeSpecificity(selector));
 }
+
+test "StyleManager: document order tie-breaking" {
+    // When specificity is equal, higher doc_order (later in document) wins
+    const beats = struct {
+        fn f(spec: u32, doc_order: u32, best_spec: u32, best_doc_order: u32) bool {
+            return spec > best_spec or (spec == best_spec and doc_order > best_doc_order);
+        }
+    }.f;
+
+    // Higher specificity always wins regardless of doc_order
+    try testing.expect(beats(2, 0, 1, 10));
+    try testing.expect(!beats(1, 10, 2, 0));
+
+    // Equal specificity: higher doc_order wins
+    try testing.expect(beats(1, 5, 1, 3)); // doc_order 5 > 3
+    try testing.expect(!beats(1, 3, 1, 5)); // doc_order 3 < 5
+
+    // Equal specificity and doc_order: no win
+    try testing.expect(!beats(1, 5, 1, 5));
+}

From b7bf86fd858ddba22781761437e11900b3f38a02 Mon Sep 17 00:00:00 2001
From: Karl Seguin <k@openmymind.io>
Date: Thu, 19 Mar 2026 10:22:19 +0800
Subject: [PATCH 27/35] update comments to reflect preference-based bucketing

---
 src/browser/StyleManager.zig | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 57fea65d..42813e34 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -478,11 +478,10 @@ const BucketKey = union(enum) {
     other,
 };
 
-/// Returns the bucket key for a compound selector, or null if the selector
-/// ends with a dynamic pseudo-class that we should skip (hover, active, focus, etc.)
+/// Returns the best bucket key for a compound selector, or null if it contains
+/// a dynamic pseudo-class we should skip (hover, active, focus, etc.)
+/// Priority: id > class > tag > other
 fn getBucketKey(compound: Selector.Compound) ?BucketKey {
-    // Iterate parts in reverse to find the most specific bucketing key
-    // Priority: id > class > tag > other
     var best_key: BucketKey = .other;
 
     for (compound.parts) |part| {

From 1695ea81d2f260b46622fc20898ca542cf7246b0 Mon Sep 17 00:00:00 2001
From: Karl Seguin <k@openmymind.io>
Date: Thu, 19 Mar 2026 11:46:58 +0800
Subject: [PATCH 28/35] on rebuild, pre-size lookups based on previous sizes

---
 src/browser/StyleManager.zig | 20 +++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 42813e34..5582d23a 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -100,16 +100,26 @@ fn rebuildIfDirty(self: *StyleManager) !void {
 
     self.dirty = false;
     errdefer self.dirty = true;
+    const id_rules_count = self.id_rules.count();
+    const class_rules_count = self.class_rules.count();
+    const tag_rules_count = self.tag_rules.count();
+    const other_rules_count = self.other_rules.items.len;
 
     self.page._session.arena_pool.resetRetain(self.arena);
 
-    // Clear all buckets and reset document order
-    self.id_rules = .empty;
-    self.class_rules = .empty;
-    self.tag_rules = .empty;
-    self.other_rules = .empty;
     self.next_doc_order = 0;
 
+    self.id_rules = .empty;
+    try self.id_rules.ensureUnusedCapacity(self.arena, id_rules_count);
+
+    self.class_rules = .empty;
+    try self.class_rules.ensureUnusedCapacity(self.arena, class_rules_count);
+
+    self.tag_rules = .empty;
+    try self.tag_rules.ensureUnusedCapacity(self.arena, tag_rules_count);
+
+    self.other_rules = try .initCapacity(self.arena, other_rules_count);
+
     const sheets = self.page.document._style_sheets orelse return;
     for (sheets._sheets.items) |sheet| {
         self.sheetAdded(sheet) catch |err| {

From e56ffe4b60088799c1bb9afb4abc9c4c60281c1b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 20 Mar 2026 10:12:57 +0900
Subject: [PATCH 29/35] SemanticTree): use WalkContext for walk function

---
 src/SemanticTree.zig | 47 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/src/SemanticTree.zig b/src/SemanticTree.zig
index f6b2fca5..94a63616 100644
--- a/src/SemanticTree.zig
+++ b/src/SemanticTree.zig
@@ -49,7 +49,13 @@ pub fn jsonStringify(self: @This(), jw: *std.json.Stringify) error{WriteFailed}!
     };
     var visibility_cache: Element.VisibilityCache = .empty;
     var pointer_events_cache: Element.PointerEventsCache = .empty;
-    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets, &visibility_cache, &pointer_events_cache, 0) catch |err| {
+    var ctx: WalkContext = .{
+        .xpath_buffer = &xpath_buffer,
+        .listener_targets = listener_targets,
+        .visibility_cache = &visibility_cache,
+        .pointer_events_cache = &pointer_events_cache,
+    };
+    self.walk(&ctx, self.dom_node, null, &visitor, 1, 0) catch |err| {
         log.err(.app, "semantic tree json dump failed", .{ .err = err });
         return error.WriteFailed;
     };
@@ -64,7 +70,13 @@ pub fn textStringify(self: @This(), writer: *std.Io.Writer) error{WriteFailed}!v
     };
     var visibility_cache: Element.VisibilityCache = .empty;
     var pointer_events_cache: Element.PointerEventsCache = .empty;
-    self.walk(self.dom_node, &xpath_buffer, null, &visitor, 1, listener_targets, &visibility_cache, &pointer_events_cache, 0) catch |err| {
+    var ctx: WalkContext = .{
+        .xpath_buffer = &xpath_buffer,
+        .listener_targets = listener_targets,
+        .visibility_cache = &visibility_cache,
+        .pointer_events_cache = &pointer_events_cache,
+    };
+    self.walk(&ctx, self.dom_node, null, &visitor, 1, 0) catch |err| {
         log.err(.app, "semantic tree text dump failed", .{ .err = err });
         return error.WriteFailed;
     };
@@ -88,7 +100,22 @@ const NodeData = struct {
     node_name: []const u8,
 };
 
-fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_name: ?[]const u8, visitor: anytype, index: usize, listener_targets: interactive.ListenerTargetMap, visibility_cache: ?*Element.VisibilityCache, pointer_events_cache: ?*Element.PointerEventsCache, current_depth: u32) !void {
+const WalkContext = struct {
+    xpath_buffer: *std.ArrayList(u8),
+    listener_targets: interactive.ListenerTargetMap,
+    visibility_cache: *Element.VisibilityCache,
+    pointer_events_cache: *Element.PointerEventsCache,
+};
+
+fn walk(
+    self: @This(),
+    ctx: *WalkContext,
+    node: *Node,
+    parent_name: ?[]const u8,
+    visitor: anytype,
+    index: usize,
+    current_depth: u32,
+) !void {
     if (current_depth > self.max_depth) return;
 
     // 1. Skip non-content nodes
@@ -100,7 +127,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         if (tag == .datalist or tag == .option or tag == .optgroup) return;
 
         // Check visibility using the engine's checkVisibility which handles CSS display: none
-        if (!el.checkVisibilityCached(visibility_cache, self.page)) {
+        if (!el.checkVisibilityCached(ctx.visibility_cache, self.page)) {
             return;
         }
 
@@ -141,7 +168,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         }
 
         if (el.is(Element.Html)) |html_el| {
-            if (interactive.classifyInteractivity(self.page, el, html_el, listener_targets, pointer_events_cache) != null) {
+            if (interactive.classifyInteractivity(self.page, el, html_el, ctx.listener_targets, ctx.pointer_events_cache) != null) {
                 is_interactive = true;
             }
         }
@@ -149,9 +176,9 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         node_name = "root";
     }
 
-    const initial_xpath_len = xpath_buffer.items.len;
-    try appendXPathSegment(node, xpath_buffer.writer(self.arena), index);
-    const xpath = xpath_buffer.items;
+    const initial_xpath_len = ctx.xpath_buffer.items.len;
+    try appendXPathSegment(node, ctx.xpath_buffer.writer(self.arena), index);
+    const xpath = ctx.xpath_buffer.items;
 
     var name = try axn.getName(self.page, self.arena);
 
@@ -237,7 +264,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
             }
             gop.value_ptr.* += 1;
 
-            try self.walk(child, xpath_buffer, name, visitor, gop.value_ptr.*, listener_targets, visibility_cache, pointer_events_cache, current_depth + 1);
+            try self.walk(ctx, child, name, visitor, gop.value_ptr.*, current_depth + 1);
         }
     }
 
@@ -245,7 +272,7 @@ fn walk(self: @This(), node: *Node, xpath_buffer: *std.ArrayList(u8), parent_nam
         try visitor.leave();
     }
 
-    xpath_buffer.shrinkRetainingCapacity(initial_xpath_len);
+    ctx.xpath_buffer.shrinkRetainingCapacity(initial_xpath_len);
 }
 
 fn extractSelectOptions(node: *Node, page: *Page, arena: std.mem.Allocator) ![]OptionData {

From 5404ca723c266503e9ae76fed4a5dda73b42ae03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 20 Mar 2026 10:18:16 +0900
Subject: [PATCH 30/35] SemanticTree: move NodeData initialization closer to
 usage

---
 src/SemanticTree.zig | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/SemanticTree.zig b/src/SemanticTree.zig
index 94a63616..6366890f 100644
--- a/src/SemanticTree.zig
+++ b/src/SemanticTree.zig
@@ -196,18 +196,6 @@ fn walk(
         name = null;
     }
 
-    var data = NodeData{
-        .id = cdp_node.id,
-        .axn = axn,
-        .role = role,
-        .name = name,
-        .value = value,
-        .options = options,
-        .xpath = xpath,
-        .is_interactive = is_interactive,
-        .node_name = node_name,
-    };
-
     var should_visit = true;
     if (self.interactive_only) {
         var keep = false;
@@ -239,6 +227,18 @@ fn walk(
 
     var did_visit = false;
     var should_walk_children = true;
+    var data: NodeData = .{
+        .id = cdp_node.id,
+        .axn = axn,
+        .role = role,
+        .name = name,
+        .value = value,
+        .options = options,
+        .xpath = xpath,
+        .is_interactive = is_interactive,
+        .node_name = node_name,
+    };
+
     if (should_visit) {
         should_walk_children = try visitor.visit(node, &data);
         did_visit = true; // Always true if should_visit was true, because visit() executed and opened structures

From 448eca0c32f919ef4be826cb39af34aca1916ab4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 20 Mar 2026 12:02:48 +0900
Subject: [PATCH 31/35] StyleManager: optimize rule evaluation using SoA and
 early rejection

---
 src/browser/StyleManager.zig | 151 +++++++++++++++++++++--------------
 1 file changed, 89 insertions(+), 62 deletions(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 5582d23a..a7c8bb21 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -45,7 +45,7 @@ pub const PointerEventsCache = std.AutoHashMapUnmanaged(*Element, bool);
 const StyleManager = @This();
 
 const Tag = Element.Tag;
-const RuleList = std.ArrayList(VisibilityRule);
+const RuleList = std.MultiArrayList(VisibilityRule);
 
 page: *Page,
 
@@ -103,22 +103,23 @@ fn rebuildIfDirty(self: *StyleManager) !void {
     const id_rules_count = self.id_rules.count();
     const class_rules_count = self.class_rules.count();
     const tag_rules_count = self.tag_rules.count();
-    const other_rules_count = self.other_rules.items.len;
+    const other_rules_count = self.other_rules.len;
 
     self.page._session.arena_pool.resetRetain(self.arena);
 
     self.next_doc_order = 0;
 
     self.id_rules = .empty;
-    try self.id_rules.ensureUnusedCapacity(self.arena, id_rules_count);
+    try self.id_rules.ensureTotalCapacity(self.arena, id_rules_count);
 
     self.class_rules = .empty;
-    try self.class_rules.ensureUnusedCapacity(self.arena, class_rules_count);
+    try self.class_rules.ensureTotalCapacity(self.arena, class_rules_count);
 
     self.tag_rules = .empty;
-    try self.tag_rules.ensureUnusedCapacity(self.arena, tag_rules_count);
+    try self.tag_rules.ensureTotalCapacity(self.arena, tag_rules_count);
 
-    self.other_rules = try .initCapacity(self.arena, other_rules_count);
+    self.other_rules = .{};
+    try self.other_rules.ensureTotalCapacity(self.arena, other_rules_count);
 
     const sheets = self.page.document._style_sheets orelse return;
     for (sheets._sheets.items) |sheet| {
@@ -243,28 +244,52 @@ fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOp
             return spec > best_spec or (spec == best_spec and doc_order > best_doc_order);
         }
 
-        fn checkRule(ctx: @This(), rule: VisibilityRule) void {
-            // Skip rules that can't possibly beat current best for any property
-            const dominated = (rule.props.display_none == null or !beats(rule.specificity, rule.doc_order, ctx.display_spec.*, ctx.display_doc_order.*)) and
-                (rule.props.visibility_hidden == null or !beats(rule.specificity, rule.doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*)) and
-                (rule.props.opacity_zero == null or !beats(rule.specificity, rule.doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*));
-            if (dominated) return;
+        fn checkRules(ctx: @This(), rules: *const RuleList) void {
+            if (ctx.display_spec.* == INLINE_SPECIFICITY and
+                ctx.visibility_spec.* == INLINE_SPECIFICITY and
+                ctx.opacity_spec.* == INLINE_SPECIFICITY)
+            {
+                return;
+            }
 
-            if (matchesSelector(ctx.el, rule.selector, ctx.page)) {
-                if (rule.props.display_none != null and beats(rule.specificity, rule.doc_order, ctx.display_spec.*, ctx.display_doc_order.*)) {
-                    ctx.display_none.* = rule.props.display_none;
-                    ctx.display_spec.* = rule.specificity;
-                    ctx.display_doc_order.* = rule.doc_order;
+            const len = rules.len;
+            const specificities = rules.items(.specificity);
+            const doc_orders = rules.items(.doc_order);
+
+            for (0..len) |i| {
+                const spec = specificities[i];
+                const doc_order = doc_orders[i];
+
+                if (!beats(spec, doc_order, ctx.display_spec.*, ctx.display_doc_order.*) and
+                    !beats(spec, doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*) and
+                    !beats(spec, doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*))
+                {
+                    continue;
                 }
-                if (rule.props.visibility_hidden != null and beats(rule.specificity, rule.doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*)) {
-                    ctx.visibility_hidden.* = rule.props.visibility_hidden;
-                    ctx.visibility_spec.* = rule.specificity;
-                    ctx.visibility_doc_order.* = rule.doc_order;
-                }
-                if (rule.props.opacity_zero != null and beats(rule.specificity, rule.doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*)) {
-                    ctx.opacity_zero.* = rule.props.opacity_zero;
-                    ctx.opacity_spec.* = rule.specificity;
-                    ctx.opacity_doc_order.* = rule.doc_order;
+
+                const props = rules.items(.props)[i];
+                const dominated = (props.display_none == null or !beats(spec, doc_order, ctx.display_spec.*, ctx.display_doc_order.*)) and
+                    (props.visibility_hidden == null or !beats(spec, doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*)) and
+                    (props.opacity_zero == null or !beats(spec, doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*));
+                if (dominated) continue;
+
+                const selector = rules.items(.selector)[i];
+                if (matchesSelector(ctx.el, selector, ctx.page)) {
+                    if (props.display_none != null and beats(spec, doc_order, ctx.display_spec.*, ctx.display_doc_order.*)) {
+                        ctx.display_none.* = props.display_none;
+                        ctx.display_spec.* = spec;
+                        ctx.display_doc_order.* = doc_order;
+                    }
+                    if (props.visibility_hidden != null and beats(spec, doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*)) {
+                        ctx.visibility_hidden.* = props.visibility_hidden;
+                        ctx.visibility_spec.* = spec;
+                        ctx.visibility_doc_order.* = doc_order;
+                    }
+                    if (props.opacity_zero != null and beats(spec, doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*)) {
+                        ctx.opacity_zero.* = props.opacity_zero;
+                        ctx.opacity_spec.* = spec;
+                        ctx.opacity_doc_order.* = doc_order;
+                    }
                 }
             }
         }
@@ -285,9 +310,7 @@ fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOp
 
     if (el.getAttributeSafe(comptime .wrap("id"))) |id| {
         if (self.id_rules.get(id)) |rules| {
-            for (rules.items) |rule| {
-                ctx.checkRule(rule);
-            }
+            ctx.checkRules(&rules);
         }
     }
 
@@ -295,22 +318,16 @@ fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOp
         var it = std.mem.tokenizeAny(u8, class_attr, &std.ascii.whitespace);
         while (it.next()) |class| {
             if (self.class_rules.get(class)) |rules| {
-                for (rules.items) |rule| {
-                    ctx.checkRule(rule);
-                }
+                ctx.checkRules(&rules);
             }
         }
     }
 
     if (self.tag_rules.get(el.getTag())) |rules| {
-        for (rules.items) |rule| {
-            ctx.checkRule(rule);
-        }
+        ctx.checkRules(&rules);
     }
 
-    for (self.other_rules.items) |rule| {
-        ctx.checkRule(rule);
-    }
+    ctx.checkRules(&self.other_rules);
 
     return (display_none orelse false) or (visibility_hidden orelse false) or (opacity_zero orelse false);
 }
@@ -366,28 +383,44 @@ fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
     var best_doc_order: u32 = 0;
 
     // Helper to check a single rule
-    const checkRule = struct {
+    const checkRules = struct {
         fn beats(spec: u32, doc_order: u32, b_spec: u32, b_doc_order: u32) bool {
             return spec > b_spec or (spec == b_spec and doc_order > b_doc_order);
         }
 
-        fn check(rule: VisibilityRule, res: *?bool, spec: *u32, doc_order: *u32, elem: *Element, p: *Page) void {
-            if (rule.props.pointer_events_none == null or !beats(rule.specificity, rule.doc_order, spec.*, doc_order.*)) {
-                return;
-            }
-            if (matchesSelector(elem, rule.selector, p)) {
-                res.* = rule.props.pointer_events_none;
-                spec.* = rule.specificity;
-                doc_order.* = rule.doc_order;
+        fn check(rules: *const RuleList, res: *?bool, spec: *u32, doc_order: *u32, elem: *Element, p: *Page) void {
+            if (spec.* == INLINE_SPECIFICITY) return;
+
+            const len = rules.len;
+            const specificities = rules.items(.specificity);
+            const doc_orders = rules.items(.doc_order);
+
+            for (0..len) |i| {
+                const rule_spec = specificities[i];
+                const rule_doc_order = doc_orders[i];
+
+                if (!beats(rule_spec, rule_doc_order, spec.*, doc_order.*)) {
+                    continue;
+                }
+
+                const props = rules.items(.props)[i];
+                if (props.pointer_events_none == null) {
+                    continue;
+                }
+
+                const selector = rules.items(.selector)[i];
+                if (matchesSelector(elem, selector, p)) {
+                    res.* = props.pointer_events_none;
+                    spec.* = rule_spec;
+                    doc_order.* = rule_doc_order;
+                }
             }
         }
     }.check;
 
     if (el.getAttributeSafe(comptime .wrap("id"))) |id| {
         if (self.id_rules.get(id)) |rules| {
-            for (rules.items) |rule| {
-                checkRule(rule, &result, &best_spec, &best_doc_order, el, page);
-            }
+            checkRules(&rules, &result, &best_spec, &best_doc_order, el, page);
         }
     }
 
@@ -395,22 +428,16 @@ fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
         var it = std.mem.tokenizeAny(u8, class_attr, &std.ascii.whitespace);
         while (it.next()) |class| {
             if (self.class_rules.get(class)) |rules| {
-                for (rules.items) |rule| {
-                    checkRule(rule, &result, &best_spec, &best_doc_order, el, page);
-                }
+                checkRules(&rules, &result, &best_spec, &best_doc_order, el, page);
             }
         }
     }
 
     if (self.tag_rules.get(el.getTag())) |rules| {
-        for (rules.items) |rule| {
-            checkRule(rule, &result, &best_spec, &best_doc_order, el, page);
-        }
+        checkRules(&rules, &result, &best_spec, &best_doc_order, el, page);
     }
 
-    for (self.other_rules.items) |rule| {
-        checkRule(rule, &result, &best_spec, &best_doc_order, el, page);
-    }
+    checkRules(&self.other_rules, &result, &best_spec, &best_doc_order, el, page);
 
     return result orelse false;
 }
@@ -461,17 +488,17 @@ fn addRule(self: *StyleManager, style_rule: *CSSStyleRule) !void {
         switch (bucket_key) {
             .id => |id| {
                 const gop = try self.id_rules.getOrPut(self.arena, id);
-                if (!gop.found_existing) gop.value_ptr.* = .empty;
+                if (!gop.found_existing) gop.value_ptr.* = .{};
                 try gop.value_ptr.append(self.arena, rule);
             },
             .class => |class| {
                 const gop = try self.class_rules.getOrPut(self.arena, class);
-                if (!gop.found_existing) gop.value_ptr.* = .empty;
+                if (!gop.found_existing) gop.value_ptr.* = .{};
                 try gop.value_ptr.append(self.arena, rule);
             },
             .tag => |tag| {
                 const gop = try self.tag_rules.getOrPut(self.arena, tag);
-                if (!gop.found_existing) gop.value_ptr.* = .empty;
+                if (!gop.found_existing) gop.value_ptr.* = .{};
                 try gop.value_ptr.append(self.arena, rule);
             },
             .other => {

From 3e2be5b31742266c66c0e7af302082001ba7f2dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 20 Mar 2026 12:13:52 +0900
Subject: [PATCH 32/35] StyleManager: vectorize rule specificity checks with
 SIMD

---
 src/browser/StyleManager.zig | 232 +++++++++++++++++++++--------------
 1 file changed, 143 insertions(+), 89 deletions(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index a7c8bb21..72a0a322 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -166,25 +166,25 @@ pub fn isHidden(self: *StyleManager, el: *Element, cache: ?*VisibilityCache, opt
 
 /// Check if a single element (not ancestors) is hidden.
 fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOptions) bool {
-    // Track best match per property (value + specificity)
-    // Initialize spec to INLINE_SPECIFICITY for properties we don't care about - this makes
-    // the loop naturally skip them since no stylesheet rule can have specificity >= INLINE_SPECIFICITY
+    // Track best match per property (value + priority)
+    // Initialize priority to INLINE_PRIORITY for properties we don't care about - this makes
+    // the loop naturally skip them since no stylesheet rule can have priority >= INLINE_PRIORITY
     var display_none: ?bool = null;
-    var display_spec: u32 = 0;
+    var display_priority: u64 = 0;
 
     var visibility_hidden: ?bool = null;
-    var visibility_spec: u32 = 0;
+    var visibility_priority: u64 = 0;
 
     var opacity_zero: ?bool = null;
-    var opacity_spec: u32 = 0;
+    var opacity_priority: u64 = 0;
 
-    // Check inline styles FIRST - they use INLINE_SPECIFICITY so no stylesheet can beat them
+    // Check inline styles FIRST - they use INLINE_PRIORITY so no stylesheet can beat them
     if (getInlineStyleProperty(el, comptime .wrap("display"), self.page)) |property| {
         if (property._value.eql(comptime .wrap("none"))) {
             return true; // Early exit for hiding value
         }
         display_none = false;
-        display_spec = INLINE_SPECIFICITY;
+        display_priority = INLINE_PRIORITY;
     }
 
     if (options.check_visibility) {
@@ -193,13 +193,13 @@ fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOp
                 return true;
             }
             visibility_hidden = false;
-            visibility_spec = INLINE_SPECIFICITY;
+            visibility_priority = INLINE_PRIORITY;
         }
     } else {
         // This can't be beat. Setting this means that, when checking rules
         // we no longer have to check if options.check_visibility is enabled.
-        // We can just compare the specificity.
-        visibility_spec = INLINE_SPECIFICITY;
+        // We can just compare the priority.
+        visibility_priority = INLINE_PRIORITY;
     }
 
     if (options.check_opacity) {
@@ -208,87 +208,118 @@ fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOp
                 return true;
             }
             opacity_zero = false;
-            opacity_spec = INLINE_SPECIFICITY;
+            opacity_priority = INLINE_PRIORITY;
         }
     } else {
-        opacity_spec = INLINE_SPECIFICITY;
+        opacity_priority = INLINE_PRIORITY;
     }
 
-    if (display_spec == INLINE_SPECIFICITY and visibility_spec == INLINE_SPECIFICITY and opacity_spec == INLINE_SPECIFICITY) {
+    if (display_priority == INLINE_PRIORITY and visibility_priority == INLINE_PRIORITY and opacity_priority == INLINE_PRIORITY) {
         return false;
     }
 
     self.rebuildIfDirty() catch return false;
 
-    // Track doc_order for tie-breaking (0 = inline style, which always wins)
-    var display_doc_order: u32 = 0;
-    var visibility_doc_order: u32 = 0;
-    var opacity_doc_order: u32 = 0;
-
     // Helper to check a single rule
     const Ctx = struct {
         display_none: *?bool,
-        display_spec: *u32,
-        display_doc_order: *u32,
+        display_priority: *u64,
         visibility_hidden: *?bool,
-        visibility_spec: *u32,
-        visibility_doc_order: *u32,
+        visibility_priority: *u64,
         opacity_zero: *?bool,
-        opacity_spec: *u32,
-        opacity_doc_order: *u32,
+        opacity_priority: *u64,
         el: *Element,
         page: *Page,
 
-        // Returns true if (spec, doc_order) beats (best_spec, best_doc_order)
-        fn beats(spec: u32, doc_order: u32, best_spec: u32, best_doc_order: u32) bool {
-            return spec > best_spec or (spec == best_spec and doc_order > best_doc_order);
-        }
-
         fn checkRules(ctx: @This(), rules: *const RuleList) void {
-            if (ctx.display_spec.* == INLINE_SPECIFICITY and
-                ctx.visibility_spec.* == INLINE_SPECIFICITY and
-                ctx.opacity_spec.* == INLINE_SPECIFICITY)
+            if (ctx.display_priority.* == INLINE_PRIORITY and
+                ctx.visibility_priority.* == INLINE_PRIORITY and
+                ctx.opacity_priority.* == INLINE_PRIORITY)
             {
                 return;
             }
 
             const len = rules.len;
-            const specificities = rules.items(.specificity);
-            const doc_orders = rules.items(.doc_order);
+            const priorities = rules.items(.priority);
 
-            for (0..len) |i| {
-                const spec = specificities[i];
-                const doc_order = doc_orders[i];
+            const vec_len = std.simd.suggestVectorLength(u64) orelse 4;
+            var i: usize = 0;
 
-                if (!beats(spec, doc_order, ctx.display_spec.*, ctx.display_doc_order.*) and
-                    !beats(spec, doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*) and
-                    !beats(spec, doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*))
-                {
+            while (i + vec_len <= len) {
+                const p_chunk: @Vector(vec_len, u64) = priorities[i..][0..vec_len].*;
+                const min_priority = @min(@min(ctx.display_priority.*, ctx.visibility_priority.*), ctx.opacity_priority.*);
+                const min_p_vec: @Vector(vec_len, u64) = @splat(min_priority);
+
+                const cmp = p_chunk > min_p_vec;
+                const any_can_beat = @reduce(.Or, cmp);
+
+                if (!any_can_beat) {
+                    i += vec_len;
+                    continue;
+                }
+
+                for (0..vec_len) |j| {
+                    const idx = i + j;
+                    const p = priorities[idx];
+
+                    if (p <= ctx.display_priority.* and p <= ctx.visibility_priority.* and p <= ctx.opacity_priority.*) {
+                        continue;
+                    }
+
+                    const props = rules.items(.props)[idx];
+                    const dominated = (props.display_none == null or p <= ctx.display_priority.*) and
+                        (props.visibility_hidden == null or p <= ctx.visibility_priority.*) and
+                        (props.opacity_zero == null or p <= ctx.opacity_priority.*);
+
+                    if (dominated) continue;
+
+                    const selector = rules.items(.selector)[idx];
+                    if (matchesSelector(ctx.el, selector, ctx.page)) {
+                        if (props.display_none != null and p > ctx.display_priority.*) {
+                            ctx.display_none.* = props.display_none;
+                            ctx.display_priority.* = p;
+                        }
+                        if (props.visibility_hidden != null and p > ctx.visibility_priority.*) {
+                            ctx.visibility_hidden.* = props.visibility_hidden;
+                            ctx.visibility_priority.* = p;
+                        }
+                        if (props.opacity_zero != null and p > ctx.opacity_priority.*) {
+                            ctx.opacity_zero.* = props.opacity_zero;
+                            ctx.opacity_priority.* = p;
+                        }
+                    }
+                }
+                i += vec_len;
+            }
+
+            // Remainder
+            while (i < len) : (i += 1) {
+                const p = priorities[i];
+
+                if (p <= ctx.display_priority.* and p <= ctx.visibility_priority.* and p <= ctx.opacity_priority.*) {
                     continue;
                 }
 
                 const props = rules.items(.props)[i];
-                const dominated = (props.display_none == null or !beats(spec, doc_order, ctx.display_spec.*, ctx.display_doc_order.*)) and
-                    (props.visibility_hidden == null or !beats(spec, doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*)) and
-                    (props.opacity_zero == null or !beats(spec, doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*));
+                const dominated = (props.display_none == null or p <= ctx.display_priority.*) and
+                    (props.visibility_hidden == null or p <= ctx.visibility_priority.*) and
+                    (props.opacity_zero == null or p <= ctx.opacity_priority.*);
+
                 if (dominated) continue;
 
                 const selector = rules.items(.selector)[i];
                 if (matchesSelector(ctx.el, selector, ctx.page)) {
-                    if (props.display_none != null and beats(spec, doc_order, ctx.display_spec.*, ctx.display_doc_order.*)) {
+                    if (props.display_none != null and p > ctx.display_priority.*) {
                         ctx.display_none.* = props.display_none;
-                        ctx.display_spec.* = spec;
-                        ctx.display_doc_order.* = doc_order;
+                        ctx.display_priority.* = p;
                     }
-                    if (props.visibility_hidden != null and beats(spec, doc_order, ctx.visibility_spec.*, ctx.visibility_doc_order.*)) {
+                    if (props.visibility_hidden != null and p > ctx.visibility_priority.*) {
                         ctx.visibility_hidden.* = props.visibility_hidden;
-                        ctx.visibility_spec.* = spec;
-                        ctx.visibility_doc_order.* = doc_order;
+                        ctx.visibility_priority.* = p;
                     }
-                    if (props.opacity_zero != null and beats(spec, doc_order, ctx.opacity_spec.*, ctx.opacity_doc_order.*)) {
+                    if (props.opacity_zero != null and p > ctx.opacity_priority.*) {
                         ctx.opacity_zero.* = props.opacity_zero;
-                        ctx.opacity_spec.* = spec;
-                        ctx.opacity_doc_order.* = doc_order;
+                        ctx.opacity_priority.* = p;
                     }
                 }
             }
@@ -296,14 +327,11 @@ fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOp
     };
     const ctx = Ctx{
         .display_none = &display_none,
-        .display_spec = &display_spec,
-        .display_doc_order = &display_doc_order,
+        .display_priority = &display_priority,
         .visibility_hidden = &visibility_hidden,
-        .visibility_spec = &visibility_spec,
-        .visibility_doc_order = &visibility_doc_order,
+        .visibility_priority = &visibility_priority,
         .opacity_zero = &opacity_zero,
-        .opacity_spec = &opacity_spec,
-        .opacity_doc_order = &opacity_doc_order,
+        .opacity_priority = &opacity_priority,
         .el = el,
         .page = self.page,
     };
@@ -379,27 +407,58 @@ fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
     self.rebuildIfDirty() catch return false;
 
     var result: ?bool = null;
-    var best_spec: u32 = 0;
-    var best_doc_order: u32 = 0;
+    var best_priority: u64 = 0;
 
     // Helper to check a single rule
     const checkRules = struct {
-        fn beats(spec: u32, doc_order: u32, b_spec: u32, b_doc_order: u32) bool {
-            return spec > b_spec or (spec == b_spec and doc_order > b_doc_order);
-        }
-
-        fn check(rules: *const RuleList, res: *?bool, spec: *u32, doc_order: *u32, elem: *Element, p: *Page) void {
-            if (spec.* == INLINE_SPECIFICITY) return;
+        fn check(rules: *const RuleList, res: *?bool, current_priority: *u64, elem: *Element, p: *Page) void {
+            if (current_priority.* == INLINE_PRIORITY) return;
 
             const len = rules.len;
-            const specificities = rules.items(.specificity);
-            const doc_orders = rules.items(.doc_order);
+            const priorities = rules.items(.priority);
 
-            for (0..len) |i| {
-                const rule_spec = specificities[i];
-                const rule_doc_order = doc_orders[i];
+            const vec_len = std.simd.suggestVectorLength(u64) orelse 4;
+            var i: usize = 0;
 
-                if (!beats(rule_spec, rule_doc_order, spec.*, doc_order.*)) {
+            while (i + vec_len <= len) {
+                const p_chunk: @Vector(vec_len, u64) = priorities[i..][0..vec_len].*;
+                const min_p_vec: @Vector(vec_len, u64) = @splat(current_priority.*);
+
+                const cmp = p_chunk > min_p_vec;
+                const any_can_beat = @reduce(.Or, cmp);
+
+                if (!any_can_beat) {
+                    i += vec_len;
+                    continue;
+                }
+
+                for (0..vec_len) |j| {
+                    const idx = i + j;
+                    const priority = priorities[idx];
+
+                    if (priority <= current_priority.*) {
+                        continue;
+                    }
+
+                    const props = rules.items(.props)[idx];
+                    if (props.pointer_events_none == null) {
+                        continue;
+                    }
+
+                    const selector = rules.items(.selector)[idx];
+                    if (matchesSelector(elem, selector, p)) {
+                        res.* = props.pointer_events_none;
+                        current_priority.* = priority;
+                    }
+                }
+                i += vec_len;
+            }
+
+            // Remainder
+            while (i < len) : (i += 1) {
+                const priority = priorities[i];
+
+                if (priority <= current_priority.*) {
                     continue;
                 }
 
@@ -411,8 +470,7 @@ fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
                 const selector = rules.items(.selector)[i];
                 if (matchesSelector(elem, selector, p)) {
                     res.* = props.pointer_events_none;
-                    spec.* = rule_spec;
-                    doc_order.* = rule_doc_order;
+                    current_priority.* = priority;
                 }
             }
         }
@@ -420,7 +478,7 @@ fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
 
     if (el.getAttributeSafe(comptime .wrap("id"))) |id| {
         if (self.id_rules.get(id)) |rules| {
-            checkRules(&rules, &result, &best_spec, &best_doc_order, el, page);
+            checkRules(&rules, &result, &best_priority, el, page);
         }
     }
 
@@ -428,16 +486,16 @@ fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
         var it = std.mem.tokenizeAny(u8, class_attr, &std.ascii.whitespace);
         while (it.next()) |class| {
             if (self.class_rules.get(class)) |rules| {
-                checkRules(&rules, &result, &best_spec, &best_doc_order, el, page);
+                checkRules(&rules, &result, &best_priority, el, page);
             }
         }
     }
 
     if (self.tag_rules.get(el.getTag())) |rules| {
-        checkRules(&rules, &result, &best_spec, &best_doc_order, el, page);
+        checkRules(&rules, &result, &best_priority, el, page);
     }
 
-    checkRules(&self.other_rules, &result, &best_spec, &best_doc_order, el, page);
+    checkRules(&self.other_rules, &result, &best_priority, el, page);
 
     return result orelse false;
 }
@@ -479,8 +537,7 @@ fn addRule(self: *StyleManager, style_rule: *CSSStyleRule) !void {
         const rule = VisibilityRule{
             .props = props,
             .selector = selector,
-            .specificity = computeSpecificity(selector),
-            .doc_order = self.next_doc_order,
+            .priority = (@as(u64, computeSpecificity(selector)) << 32) | @as(u64, self.next_doc_order),
         };
         self.next_doc_order += 1;
 
@@ -656,11 +713,8 @@ const VisibilityRule = struct {
     selector: Selector.Selector, // Single selector, not a list
     props: VisibilityProperties,
 
-    // Packed specificity: (id_count << 20) | (class_count << 10) | element_count
-    specificity: u32,
-
-    // Document order for tie-breaking equal specificity (higher = later in document)
-    doc_order: u32,
+    // Packed priority: (specificity << 32) | doc_order
+    priority: u64,
 };
 
 const CheckVisibilityOptions = struct {
@@ -668,8 +722,8 @@ const CheckVisibilityOptions = struct {
     check_visibility: bool = false,
 };
 
-// Inline styles always win over stylesheets - use max u32 as sentinel
-const INLINE_SPECIFICITY: u32 = std.math.maxInt(u32);
+// Inline styles always win over stylesheets - use max u64 as sentinel
+const INLINE_PRIORITY: u64 = std.math.maxInt(u64);
 
 fn getInlineStyleProperty(el: *Element, property_name: String, page: *Page) ?*CSSStyleProperty {
     const style = el.getOrCreateStyle(page) catch |err| {

From 1353f76bf17cda59107223f0498f4ed7c8510c8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 20 Mar 2026 12:25:32 +0900
Subject: [PATCH 33/35] StyleManager: defer JS CSS rule allocation by lazy
 parsing

---
 src/browser/StyleManager.zig              | 79 +++++++++++++++++++++--
 src/browser/webapi/css/CSSStyleSheet.zig  | 11 +++-
 src/browser/webapi/element/html/Style.zig |  7 +-
 3 files changed, 84 insertions(+), 13 deletions(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 72a0a322..1b384efc 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -74,12 +74,77 @@ pub fn deinit(self: *StyleManager) void {
     self.page.releaseArena(self.arena);
 }
 
-pub fn sheetAdded(self: *StyleManager, sheet: *CSSStyleSheet) !void {
-    const css_rules = sheet._css_rules orelse return;
+fn parseSheet(self: *StyleManager, sheet: *CSSStyleSheet) !void {
+    if (sheet._css_rules) |css_rules| {
+        for (css_rules._rules.items) |rule| {
+            const style_rule = rule.is(CSSStyleRule) orelse continue;
+            try self.addRule(style_rule);
+        }
+        return;
+    }
 
-    for (css_rules._rules.items) |rule| {
-        const style_rule = rule.is(CSSStyleRule) orelse continue;
-        try self.addRule(style_rule);
+    const owner_node = sheet.getOwnerNode() orelse return;
+    if (owner_node.is(Element.Html.Style)) |style| {
+        const text = try style.asNode().getTextContentAlloc(self.arena);
+        var it = CssParser.parseStylesheet(text);
+        while (it.next()) |parsed_rule| {
+            try self.addRawRule(parsed_rule.selector, parsed_rule.block);
+        }
+    }
+}
+
+fn addRawRule(self: *StyleManager, selector_text: []const u8, block_text: []const u8) !void {
+    if (selector_text.len == 0) return;
+
+    var props = VisibilityProperties{};
+    var it = CssParser.parseDeclarationsList(block_text);
+    while (it.next()) |decl| {
+        const name = decl.name;
+        const val = decl.value;
+        if (std.ascii.eqlIgnoreCase(name, "display")) {
+            props.display_none = std.ascii.eqlIgnoreCase(val, "none");
+        } else if (std.ascii.eqlIgnoreCase(name, "visibility")) {
+            props.visibility_hidden = std.ascii.eqlIgnoreCase(val, "hidden") or std.ascii.eqlIgnoreCase(val, "collapse");
+        } else if (std.ascii.eqlIgnoreCase(name, "opacity")) {
+            props.opacity_zero = std.ascii.eqlIgnoreCase(val, "0");
+        } else if (std.ascii.eqlIgnoreCase(name, "pointer-events")) {
+            props.pointer_events_none = std.ascii.eqlIgnoreCase(val, "none");
+        }
+    }
+
+    if (!props.isRelevant()) return;
+
+    const selectors = SelectorParser.parseList(self.arena, selector_text, self.page) catch return;
+    for (selectors) |selector| {
+        const rightmost = if (selector.segments.len > 0) selector.segments[selector.segments.len - 1].compound else selector.first;
+        const bucket_key = getBucketKey(rightmost) orelse continue;
+        const rule = VisibilityRule{
+            .props = props,
+            .selector = selector,
+            .priority = (@as(u64, computeSpecificity(selector)) << 32) | @as(u64, self.next_doc_order),
+        };
+        self.next_doc_order += 1;
+
+        switch (bucket_key) {
+            .id => |id| {
+                const gop = try self.id_rules.getOrPut(self.arena, id);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .class => |class| {
+                const gop = try self.class_rules.getOrPut(self.arena, class);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .tag => |tag| {
+                const gop = try self.tag_rules.getOrPut(self.arena, tag);
+                if (!gop.found_existing) gop.value_ptr.* = .{};
+                try gop.value_ptr.append(self.arena, rule);
+            },
+            .other => {
+                try self.other_rules.append(self.arena, rule);
+            },
+        }
     }
 }
 
@@ -123,8 +188,8 @@ fn rebuildIfDirty(self: *StyleManager) !void {
 
     const sheets = self.page.document._style_sheets orelse return;
     for (sheets._sheets.items) |sheet| {
-        self.sheetAdded(sheet) catch |err| {
-            log.err(.browser, "StyleManager sheetAdded", .{ .err = err });
+        self.parseSheet(sheet) catch |err| {
+            log.err(.browser, "StyleManager parseSheet", .{ .err = err });
             return err;
         };
     }
diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index 6a37ecb5..f46e35df 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -46,8 +46,17 @@ pub fn setDisabled(self: *CSSStyleSheet, disabled: bool) void {
 
 pub fn getCssRules(self: *CSSStyleSheet, page: *Page) !*CSSRuleList {
     if (self._css_rules) |rules| return rules;
+
     const rules = try CSSRuleList.init(page);
     self._css_rules = rules;
+
+    if (self.getOwnerNode()) |owner| {
+        if (owner.is(Element.Html.Style)) |style| {
+            const text = try style.asNode().getTextContentAlloc(page.call_arena);
+            try self.replaceSync(text, page);
+        }
+    }
+
     return rules;
 }
 
@@ -89,7 +98,7 @@ pub fn replace(self: *CSSStyleSheet, text: []const u8, page: *Page) !js.Promise
     return page.js.local.?.resolvePromise(self);
 }
 
-pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) !void {
+pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) anyerror!void {
     const rules = try self.getCssRules(page);
     rules.clear();
 
diff --git a/src/browser/webapi/element/html/Style.zig b/src/browser/webapi/element/html/Style.zig
index fc52cf38..e6cac8c3 100644
--- a/src/browser/webapi/element/html/Style.zig
+++ b/src/browser/webapi/element/html/Style.zig
@@ -95,9 +95,6 @@ pub fn getSheet(self: *Style, page: *Page) !?*CSSStyleSheet {
     const sheet = try CSSStyleSheet.initWithOwner(self.asElement(), page);
     self._sheet = sheet;
 
-    const text = try self.asNode().getTextContentAlloc(page.call_arena);
-    try sheet.replaceSync(text, page);
-
     const sheets = try page.document.getStyleSheets(page);
     try sheets.add(sheet, page);
 
@@ -106,9 +103,9 @@ pub fn getSheet(self: *Style, page: *Page) !?*CSSStyleSheet {
 
 pub fn styleAddedCallback(self: *Style, page: *Page) !void {
     // Force stylesheet initialization so rules are parsed immediately
-    if (self.getSheet(page) catch null) |sheet| {
+    if (self.getSheet(page) catch null) |_| {
         // Notify StyleManager about the new stylesheet
-        page._style_manager.sheetAdded(sheet) catch {};
+        page._style_manager.sheetModified();
     }
 
     // if we're planning on navigating to another page, don't trigger load event.

From 35cdc3c348350ef9eb282bfcbc230ad956e8bd1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 20 Mar 2026 12:38:15 +0900
Subject: [PATCH 34/35] StyleManager: simplify rule evaluation by removing SIMD
 complexity

---
 src/browser/StyleManager.zig | 119 ++++-------------------------------
 1 file changed, 11 insertions(+), 108 deletions(-)

diff --git a/src/browser/StyleManager.zig b/src/browser/StyleManager.zig
index 1b384efc..d66162f4 100644
--- a/src/browser/StyleManager.zig
+++ b/src/browser/StyleManager.zig
@@ -304,76 +304,25 @@ fn isElementHidden(self: *StyleManager, el: *Element, options: CheckVisibilityOp
                 return;
             }
 
-            const len = rules.len;
             const priorities = rules.items(.priority);
+            const props_list = rules.items(.props);
+            const selectors = rules.items(.selector);
 
-            const vec_len = std.simd.suggestVectorLength(u64) orelse 4;
-            var i: usize = 0;
-
-            while (i + vec_len <= len) {
-                const p_chunk: @Vector(vec_len, u64) = priorities[i..][0..vec_len].*;
-                const min_priority = @min(@min(ctx.display_priority.*, ctx.visibility_priority.*), ctx.opacity_priority.*);
-                const min_p_vec: @Vector(vec_len, u64) = @splat(min_priority);
-
-                const cmp = p_chunk > min_p_vec;
-                const any_can_beat = @reduce(.Or, cmp);
-
-                if (!any_can_beat) {
-                    i += vec_len;
-                    continue;
-                }
-
-                for (0..vec_len) |j| {
-                    const idx = i + j;
-                    const p = priorities[idx];
-
-                    if (p <= ctx.display_priority.* and p <= ctx.visibility_priority.* and p <= ctx.opacity_priority.*) {
-                        continue;
-                    }
-
-                    const props = rules.items(.props)[idx];
-                    const dominated = (props.display_none == null or p <= ctx.display_priority.*) and
-                        (props.visibility_hidden == null or p <= ctx.visibility_priority.*) and
-                        (props.opacity_zero == null or p <= ctx.opacity_priority.*);
-
-                    if (dominated) continue;
-
-                    const selector = rules.items(.selector)[idx];
-                    if (matchesSelector(ctx.el, selector, ctx.page)) {
-                        if (props.display_none != null and p > ctx.display_priority.*) {
-                            ctx.display_none.* = props.display_none;
-                            ctx.display_priority.* = p;
-                        }
-                        if (props.visibility_hidden != null and p > ctx.visibility_priority.*) {
-                            ctx.visibility_hidden.* = props.visibility_hidden;
-                            ctx.visibility_priority.* = p;
-                        }
-                        if (props.opacity_zero != null and p > ctx.opacity_priority.*) {
-                            ctx.opacity_zero.* = props.opacity_zero;
-                            ctx.opacity_priority.* = p;
-                        }
-                    }
-                }
-                i += vec_len;
-            }
-
-            // Remainder
-            while (i < len) : (i += 1) {
-                const p = priorities[i];
-
+            for (priorities, props_list, selectors) |p, props, selector| {
+                // Fast skip using packed u64 priority
                 if (p <= ctx.display_priority.* and p <= ctx.visibility_priority.* and p <= ctx.opacity_priority.*) {
                     continue;
                 }
 
-                const props = rules.items(.props)[i];
+                // Logic for property dominance
                 const dominated = (props.display_none == null or p <= ctx.display_priority.*) and
                     (props.visibility_hidden == null or p <= ctx.visibility_priority.*) and
                     (props.opacity_zero == null or p <= ctx.opacity_priority.*);
 
                 if (dominated) continue;
 
-                const selector = rules.items(.selector)[i];
                 if (matchesSelector(ctx.el, selector, ctx.page)) {
+                    // Update best priorities
                     if (props.display_none != null and p > ctx.display_priority.*) {
                         ctx.display_none.* = props.display_none;
                         ctx.display_priority.* = p;
@@ -479,60 +428,14 @@ fn elementHasPointerEventsNone(self: *StyleManager, el: *Element) bool {
         fn check(rules: *const RuleList, res: *?bool, current_priority: *u64, elem: *Element, p: *Page) void {
             if (current_priority.* == INLINE_PRIORITY) return;
 
-            const len = rules.len;
             const priorities = rules.items(.priority);
+            const props_list = rules.items(.props);
+            const selectors = rules.items(.selector);
 
-            const vec_len = std.simd.suggestVectorLength(u64) orelse 4;
-            var i: usize = 0;
+            for (priorities, props_list, selectors) |priority, props, selector| {
+                if (priority <= current_priority.*) continue;
+                if (props.pointer_events_none == null) continue;
 
-            while (i + vec_len <= len) {
-                const p_chunk: @Vector(vec_len, u64) = priorities[i..][0..vec_len].*;
-                const min_p_vec: @Vector(vec_len, u64) = @splat(current_priority.*);
-
-                const cmp = p_chunk > min_p_vec;
-                const any_can_beat = @reduce(.Or, cmp);
-
-                if (!any_can_beat) {
-                    i += vec_len;
-                    continue;
-                }
-
-                for (0..vec_len) |j| {
-                    const idx = i + j;
-                    const priority = priorities[idx];
-
-                    if (priority <= current_priority.*) {
-                        continue;
-                    }
-
-                    const props = rules.items(.props)[idx];
-                    if (props.pointer_events_none == null) {
-                        continue;
-                    }
-
-                    const selector = rules.items(.selector)[idx];
-                    if (matchesSelector(elem, selector, p)) {
-                        res.* = props.pointer_events_none;
-                        current_priority.* = priority;
-                    }
-                }
-                i += vec_len;
-            }
-
-            // Remainder
-            while (i < len) : (i += 1) {
-                const priority = priorities[i];
-
-                if (priority <= current_priority.*) {
-                    continue;
-                }
-
-                const props = rules.items(.props)[i];
-                if (props.pointer_events_none == null) {
-                    continue;
-                }
-
-                const selector = rules.items(.selector)[i];
                 if (matchesSelector(elem, selector, p)) {
                     res.* = props.pointer_events_none;
                     current_priority.* = priority;

From 1feb121ba7dc375ff66254c7b061fa0e10b07d91 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Adri=C3=A0=20Arrufat?= <adria.arrufat@gmail.com>
Date: Fri, 20 Mar 2026 16:50:00 +0900
Subject: [PATCH 35/35] CSSStyleSheet: use explicit CSSError

---
 src/browser/webapi/css/CSSStyleSheet.zig | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/browser/webapi/css/CSSStyleSheet.zig b/src/browser/webapi/css/CSSStyleSheet.zig
index f46e35df..675e87f9 100644
--- a/src/browser/webapi/css/CSSStyleSheet.zig
+++ b/src/browser/webapi/css/CSSStyleSheet.zig
@@ -9,6 +9,14 @@ const Parser = @import("../../css/Parser.zig");
 
 const CSSStyleSheet = @This();
 
+pub const CSSError = error{
+    OutOfMemory,
+    IndexSizeError,
+    WriteFailed,
+    StringTooLarge,
+    SyntaxError,
+};
+
 _href: ?[]const u8 = null,
 _title: []const u8 = "",
 _disabled: bool = false,
@@ -93,12 +101,12 @@ pub fn deleteRule(self: *CSSStyleSheet, index: u32, page: *Page) !void {
     page._style_manager.sheetModified();
 }
 
-pub fn replace(self: *CSSStyleSheet, text: []const u8, page: *Page) !js.Promise {
+pub fn replace(self: *CSSStyleSheet, text: []const u8, page: *Page) CSSError!js.Promise {
     try self.replaceSync(text, page);
     return page.js.local.?.resolvePromise(self);
 }
 
-pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) anyerror!void {
+pub fn replaceSync(self: *CSSStyleSheet, text: []const u8, page: *Page) CSSError!void {
     const rules = try self.getCssRules(page);
     rules.clear();