瀏覽代碼

LibWeb: Inherit CSS variables across shadow boundaries

This fixes a bunch of issues on https://wpt.fyi/
Andreas Kling 1 年之前
父節點
當前提交
de2b9eebe6

+ 1 - 0
Tests/LibWeb/Text/expected/ShadowDOM/css-variable-inheritance-across-shadow-boundary.txt

@@ -0,0 +1 @@
+  green    rgb(0, 128, 0)

+ 20 - 0
Tests/LibWeb/Text/input/ShadowDOM/css-variable-inheritance-across-shadow-boundary.html

@@ -0,0 +1,20 @@
+<style>
+:root {
+    --foo: green;
+}
+</style>
+<div id="myShadowHost">
+<template shadowrootmode="open">
+<style>
+span { color: var(--foo, red); }
+</style>
+<span>green</span>
+</template>
+</div>
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        let span = myShadowHost.shadowRoot.firstElementChild.nextElementSibling;
+        println(getComputedStyle(span).color);
+    });
+</script>

+ 1 - 1
Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp

@@ -7651,7 +7651,7 @@ static RefPtr<StyleValue const> get_custom_property(DOM::Element const& element,
             return it->value.value;
     }
 
-    for (auto const* current_element = &element; current_element; current_element = current_element->parent_element()) {
+    for (auto const* current_element = &element; current_element; current_element = current_element->parent_or_shadow_host_element()) {
         if (auto it = current_element->custom_properties({}).find(custom_property_name); it != current_element->custom_properties({}).end())
             return it->value.value;
     }