From 0b775da7c72a85c099f35d8caf2e7b66721a4483 Mon Sep 17 00:00:00 2001
From: thislooksfun <tlf@thislooks.fun>
Date: Sat, 19 Oct 2024 15:35:41 -0500
Subject: [PATCH] LibWeb/CSS: Evaluate media queries in shadow roots

This fixes a rendering issue on https://prodengi.kz/ that someone on
Discord reported. :^)
---
 .../expected/ShadowDOM/css-media-queries.txt  |  1 +
 .../input/ShadowDOM/css-media-queries.html    | 21 +++++++++++++++++++
 .../Libraries/LibWeb/CSS/StyleComputer.cpp    | 10 ++-------
 Userland/Libraries/LibWeb/DOM/Document.cpp    | 21 +++++++++++++++----
 Userland/Libraries/LibWeb/DOM/Document.h      |  3 ++-
 5 files changed, 43 insertions(+), 13 deletions(-)
 create mode 100644 Tests/LibWeb/Text/expected/ShadowDOM/css-media-queries.txt
 create mode 100644 Tests/LibWeb/Text/input/ShadowDOM/css-media-queries.html

diff --git a/Tests/LibWeb/Text/expected/ShadowDOM/css-media-queries.txt b/Tests/LibWeb/Text/expected/ShadowDOM/css-media-queries.txt
new file mode 100644
index 00000000000..49b2a8c8ee2
--- /dev/null
+++ b/Tests/LibWeb/Text/expected/ShadowDOM/css-media-queries.txt
@@ -0,0 +1 @@
+rgb(0, 255, 0)
diff --git a/Tests/LibWeb/Text/input/ShadowDOM/css-media-queries.html b/Tests/LibWeb/Text/input/ShadowDOM/css-media-queries.html
new file mode 100644
index 00000000000..eefe5e2186d
--- /dev/null
+++ b/Tests/LibWeb/Text/input/ShadowDOM/css-media-queries.html
@@ -0,0 +1,21 @@
+<div id="myShadowHost">
+<template shadowrootmode="open">
+<style>
+span { color: red; }
+@media (min-width: 0px) {
+span { color: lime; }
+}
+@media (max-width: 0px) {
+span { color: blue !important; }
+}
+</style>
+<span></span>
+</template>
+</div>
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        let span = myShadowHost.shadowRoot.firstElementChild.nextElementSibling;
+        println(getComputedStyle(span).color);
+    });
+</script>
diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
index 62c05fc6a45..b47f1676b5c 100644
--- a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
+++ b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -328,14 +328,8 @@ void StyleComputer::for_each_stylesheet(CascadeOrigin cascade_origin, Callback c
             callback(*m_user_style_sheet, {});
     }
     if (cascade_origin == CascadeOrigin::Author) {
-        document().for_each_active_css_style_sheet([&](CSSStyleSheet& sheet) {
-            callback(sheet, {});
-        });
-
-        const_cast<DOM::Document&>(document()).for_each_shadow_root([&](DOM::ShadowRoot& shadow_root) {
-            shadow_root.for_each_css_style_sheet([&](CSSStyleSheet& sheet) {
-                callback(sheet, &shadow_root);
-            });
+        document().for_each_active_css_style_sheet([&](auto& sheet, auto shadow_root) {
+            callback(sheet, shadow_root);
         });
     }
 }
diff --git a/Userland/Libraries/LibWeb/DOM/Document.cpp b/Userland/Libraries/LibWeb/DOM/Document.cpp
index 5d4d0bb761e..1f8a864bb79 100644
--- a/Userland/Libraries/LibWeb/DOM/Document.cpp
+++ b/Userland/Libraries/LibWeb/DOM/Document.cpp
@@ -2784,7 +2784,7 @@ void Document::evaluate_media_rules()
         return;
 
     bool any_media_queries_changed_match_state = false;
-    for_each_active_css_style_sheet([&](CSS::CSSStyleSheet& style_sheet) {
+    for_each_active_css_style_sheet([&](CSS::CSSStyleSheet& style_sheet, auto) {
         if (style_sheet.evaluate_media_queries(*window))
             any_media_queries_changed_match_state = true;
     });
@@ -5173,21 +5173,28 @@ WebIDL::ExceptionOr<void> Document::set_adopted_style_sheets(JS::Value new_value
     return {};
 }
 
-void Document::for_each_active_css_style_sheet(Function<void(CSS::CSSStyleSheet&)>&& callback) const
+void Document::for_each_active_css_style_sheet(Function<void(CSS::CSSStyleSheet&, JS::GCPtr<DOM::ShadowRoot>)>&& callback) const
 {
     if (m_style_sheets) {
         for (auto& style_sheet : m_style_sheets->sheets()) {
             if (!(style_sheet->is_alternate() && style_sheet->disabled()))
-                callback(*style_sheet);
+                callback(*style_sheet, {});
         }
     }
 
     if (m_adopted_style_sheets) {
         m_adopted_style_sheets->for_each<CSS::CSSStyleSheet>([&](auto& style_sheet) {
             if (!style_sheet.disabled())
-                callback(style_sheet);
+                callback(style_sheet, {});
         });
     }
+
+    for_each_shadow_root([&](auto& shadow_root) {
+        shadow_root.for_each_css_style_sheet([&](auto& style_sheet) {
+            if (!style_sheet.disabled())
+                callback(style_sheet, &shadow_root);
+        });
+    });
 }
 
 static Optional<CSS::CSSStyleSheet&> find_style_sheet_with_url(String const& url, CSS::CSSStyleSheet& style_sheet)
@@ -5277,6 +5284,12 @@ void Document::for_each_shadow_root(Function<void(DOM::ShadowRoot&)>&& callback)
         callback(shadow_root);
 }
 
+void Document::for_each_shadow_root(Function<void(DOM::ShadowRoot&)>&& callback) const
+{
+    for (auto& shadow_root : m_shadow_roots)
+        callback(shadow_root);
+}
+
 bool Document::is_decoded_svg() const
 {
     return is<Web::SVG::SVGDecodedImageData::SVGPageClient>(page().client());
diff --git a/Userland/Libraries/LibWeb/DOM/Document.h b/Userland/Libraries/LibWeb/DOM/Document.h
index 4fc1b5bc958..19dedc61103 100644
--- a/Userland/Libraries/LibWeb/DOM/Document.h
+++ b/Userland/Libraries/LibWeb/DOM/Document.h
@@ -162,7 +162,7 @@ public:
     CSS::StyleSheetList& style_sheets();
     CSS::StyleSheetList const& style_sheets() const;
 
-    void for_each_active_css_style_sheet(Function<void(CSS::CSSStyleSheet&)>&& callback) const;
+    void for_each_active_css_style_sheet(Function<void(CSS::CSSStyleSheet&, JS::GCPtr<DOM::ShadowRoot>)>&& callback) const;
 
     CSS::StyleSheetList* style_sheets_for_bindings() { return &style_sheets(); }
 
@@ -675,6 +675,7 @@ public:
     void register_shadow_root(Badge<DOM::ShadowRoot>, DOM::ShadowRoot&);
     void unregister_shadow_root(Badge<DOM::ShadowRoot>, DOM::ShadowRoot&);
     void for_each_shadow_root(Function<void(DOM::ShadowRoot&)>&& callback);
+    void for_each_shadow_root(Function<void(DOM::ShadowRoot&)>&& callback) const;
 
     void add_an_element_to_the_top_layer(JS::NonnullGCPtr<Element>);
     void request_an_element_to_be_remove_from_the_top_layer(JS::NonnullGCPtr<Element>);