Implement CSS :root selector matching to apply styles to layout view

[Copilot]

This PR implements support for the CSS :root pseudo-class selector, enabling styles to be applied to the document's root element (layout view). Previously, :root selectors could be parsed but were not matched during style computation, making them effectively non-functional.

Problem

The CSS selector parser already supported parsing :root selectors, but the matching logic in matchesSelectorComponentNonCombinator() had the :root case commented out:

// if (component.isRoot())
//   return element->isRootElement();

This meant that CSS rules like the following would be parsed but never applied:

:root {
    --primary-color: #007bff;
    font-size: 16px;
    background-color: white;
}

Solution

Core Implementation

1. Added isRootElement() helper function in matching.cpp:

   • Safely checks if an element is the document's root element
   • Compares the element with document.documentElement()
   • Includes proper error handling for edge cases

2. Enabled :root selector matching:

   • Uncommented and implemented the :root case in matchesSelectorComponentNonCombinator()
   • Integrates seamlessly with the existing selector matching system

Integration Flow

The implementation works through the existing style computation pipeline:

1. Document Rendering: RenderHTMLDocument::onExecute() processes elements
2. Style Computation: Window::getComputedStyle() iterates through CSS rules
3. Selector Matching: matchesSelectorList() calls the new :root matching logic
4. Style Application: Matched styles are applied to the root element via adoptStyle()

Testing

Added comprehensive test cases covering:

• Standalone :root selector parsing
• Complex selectors combining :root with other components (e.g., :root.theme-dark)
• Multiple selector lists containing :root
• Verification of component types and string representations

Impact

This change enables:

• CSS Custom Properties: Global CSS variables defined on :root
• Root-level Styling: Base typography, colors, and layout properties
• Theme Systems: Dynamic theming using :root class combinations
• Better CSS Architecture: Standard CSS practices for global styles

Example Usage

/* Global CSS variables and base styles */
:root {
    --primary-color: #007bff;
    --font-family: 'Helvetica, Arial, sans-serif';
    font-size: 16px;
    line-height: 1.5;
}

/* Dark theme variant */
:root.dark-theme {
    --primary-color: #6f42c1;
    --background-color: #1a1a1a;
    --text-color: #ffffff;
}

These styles will now be properly applied to the layout view's root element, providing the foundation for the entire document's styling system.

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

• registry.npmmirror.com
  • Triggering command: npm ci (dns block)
  • Triggering command: npm install (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to the custom allowlist in this repository's Copilot coding agent settings (admins only)

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.