LibWeb/CSS: Evaluate media queries in shadow roots
Some checks are pending
CI / Lagom (false, FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, macos-14, macOS, Clang) (push) Waiting to run
CI / Lagom (false, NO_FUZZ, ubuntu-24.04, Linux, GNU) (push) Waiting to run
CI / Lagom (true, NO_FUZZ, ubuntu-24.04, Linux, Clang) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (macos-14, macOS, macOS-universal2) (push) Waiting to run
Package the js repl as a binary artifact / build-and-package (ubuntu-24.04, Linux, Linux-x86_64) (push) Waiting to run
Run test262 and test-wasm / run_and_update_results (push) Waiting to run
Lint Code / lint (push) Waiting to run
Push notes / build (push) Waiting to run

This fixes a rendering issue on https://prodengi.kz/ that someone on
Discord reported. :^)
This commit is contained in:
thislooksfun 2024-10-19 15:35:41 -05:00 committed by Sam Atkins
parent 1aab7b51ea
commit 0b775da7c7
Notes: github-actions[bot] 2024-10-20 06:58:04 +00:00
5 changed files with 43 additions and 13 deletions

View file

@ -0,0 +1 @@
rgb(0, 255, 0)

View file

@ -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>

View file

@ -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);
});
}
}

View file

@ -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());

View file

@ -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>);