LibWeb/CSS: Implement revert-layer

An-n-ya · nico · commit 265c94269805 · 2024-10-31T21:51:50.000-04:00
With the introduction of the cascade layer, the 5th CSS-wide keyword, `revert-layer`, has been added. (cherry picked from commit bea7eec)
diff --git a/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSKeyword.cpp b/Meta/Lagom/Tools/CodeGenerators/LibWeb/GenerateCSSKeyword.cpp
@@ -77,6 +77,7 @@ inline bool is_css_wide_keyword(StringView name)
     return name.equals_ignoring_ascii_case("inherit"sv)
         || name.equals_ignoring_ascii_case("initial"sv)
         || name.equals_ignoring_ascii_case("revert"sv)
+        || name.equals_ignoring_ascii_case("revert-layer"sv)
         || name.equals_ignoring_ascii_case("unset"sv);
 }
 
diff --git a/Tests/LibWeb/Text/expected/css/revert-layer.txt b/Tests/LibWeb/Text/expected/css/revert-layer.txt
@@ -0,0 +1,4 @@
+    PASS: revert to base (first target)
+PASS: revert to base (second target)
+PASS: double revert (first target)
+PASS: double revert (second target)
diff --git a/Tests/LibWeb/Text/input/css/revert-layer.html b/Tests/LibWeb/Text/input/css/revert-layer.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<target class="first"></target>
+<target class="second"></target>
+<script src="../include.js"></script>
+<script>
+    test(() => {
+        // In all test cases, the rule specified as "color: green" should win.
+        var testCases = [
+            {
+                title: 'revert to base',
+                style: `
+                    @layer base, special;
+                    @layer special { target { color: revert-layer; } target.second { color: green; } }
+                    @layer base { target { color: green; } target.second { color: red; } }
+                `,
+            },
+            {
+                title: 'double revert',
+                style: `
+                    @layer layer1, layer2, layer3;
+                    @layer layer3 { target { color: revert-layer; } target.second { color: revert-layer; } }
+                    @layer layer2 { target { color: revert-layer; } target.second { color: green; } }
+                    @layer layer1 { target { color: green; } target.second { color: revert-layer; } }
+                `,
+            },
+        ];
+
+        for (let testCase of testCases) {
+            const styleElement = document.createElement('style');
+            styleElement.textContent = testCase['style'];
+            document.head.append(styleElement);
+
+            var targets = document.querySelectorAll('target');
+            for (let target of targets) {
+                let actual = window.getComputedStyle(target).color;
+                if (actual === 'rgb(0, 128, 0)') {
+                    println(`PASS: ${testCase['title']} (${target.classList[0]} target)`);
+                } else {
+                    println(`FAIL: ${testCase['title']} (${target.classList[0]} target) - Expected 'rgb(0, 128, 0)', got '${actual}'`);
+                }
+            }
+
+            styleElement.remove();
+        }
+
+    });
+</script>
diff --git a/Userland/Libraries/LibWeb/CSS/CSSStyleValue.h b/Userland/Libraries/LibWeb/CSS/CSSStyleValue.h
@@ -331,10 +331,11 @@ class CSSStyleValue : public RefCounted<CSSStyleValue> {
 
     // https://www.w3.org/TR/css-values-4/#common-keywords
     // https://drafts.csswg.org/css-cascade-4/#valdef-all-revert
-    bool is_css_wide_keyword() const { return is_inherit() || is_initial() || is_revert() || is_unset(); }
+    bool is_css_wide_keyword() const { return is_inherit() || is_initial() || is_revert() || is_unset() || is_revert_layer(); }
     bool is_inherit() const { return to_keyword() == Keyword::Inherit; }
     bool is_initial() const { return to_keyword() == Keyword::Initial; }
     bool is_revert() const { return to_keyword() == Keyword::Revert; }
+    bool is_revert_layer() const { return to_keyword() == Keyword::RevertLayer; }
     bool is_unset() const { return to_keyword() == Keyword::Unset; }
 
     bool has_auto() const;
diff --git a/Userland/Libraries/LibWeb/CSS/Keywords.json b/Userland/Libraries/LibWeb/CSS/Keywords.json
@@ -308,6 +308,7 @@
   "repeat-y",
   "reverse",
   "revert",
+  "revert-layer",
   "ridge",
   "right",
   "round",
diff --git a/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp b/Userland/Libraries/LibWeb/CSS/Parser/Parser.cpp
@@ -1757,7 +1757,10 @@ RefPtr<CSSStyleValue> Parser::parse_builtin_value(TokenStream<ComponentValue>& t
             transaction.commit();
             return CSSKeywordValue::create(Keyword::Revert);
         }
-        // FIXME: Implement `revert-layer` from CSS-CASCADE-5.
+        if (ident.equals_ignoring_ascii_case("revert-layer"sv)) {
+            transaction.commit();
+            return CSSKeywordValue::create(Keyword::RevertLayer);
+        }
     }
 
     return nullptr;
diff --git a/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp b/Userland/Libraries/LibWeb/CSS/StyleComputer.cpp
@@ -789,7 +789,7 @@ void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_i
 void StyleComputer::set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, CSSStyleValue const& value, CSS::CSSStyleDeclaration const* declaration, StyleProperties const& style_for_revert, Important important)
 {
     for_each_property_expanding_shorthands(property_id, value, AllowUnresolved::No, [&](PropertyID shorthand_id, CSSStyleValue const& shorthand_value) {
-        if (shorthand_value.is_revert()) {
+        if (shorthand_value.is_revert() || shorthand_value.is_revert_layer()) {
             auto const& property_in_previous_cascade_origin = style_for_revert.m_data->m_property_values[to_underlying(shorthand_id)];
             if (property_in_previous_cascade_origin) {
                 style.set_property(shorthand_id, *property_in_previous_cascade_origin, StyleProperties::Inherited::No, important);
@@ -809,7 +809,7 @@ void StyleComputer::set_all_properties(DOM::Element& element, Optional<CSS::Sele
     for (auto i = to_underlying(CSS::first_longhand_property_id); i <= to_underlying(CSS::last_longhand_property_id); ++i) {
         auto property_id = (CSS::PropertyID)i;
 
-        if (value.is_revert()) {
+        if (value.is_revert() || value.is_revert_layer()) {
             style.revert_property(property_id, style_for_revert);
             continue;
         }
@@ -901,8 +901,12 @@ static void cascade_custom_properties(DOM::Element& element, Optional<CSS::Selec
     custom_properties.ensure_capacity(needed_capacity);
 
     for (auto const& matching_rule : matching_rules) {
-        for (auto const& it : matching_rule.rule->declaration().custom_properties())
+        for (auto const& it : matching_rule.rule->declaration().custom_properties()) {
+            auto style_value = it.value.value;
+            if (style_value->is_revert_layer())
+                continue;
             custom_properties.set(it.key, it.value);
+        }
     }
 
     if (!pseudo_element.has_value()) {
diff --git a/Userland/Libraries/LibWeb/CSS/StyleValues/CSSKeywordValue.h b/Userland/Libraries/LibWeb/CSS/StyleValues/CSSKeywordValue.h
@@ -33,6 +33,10 @@ class CSSKeywordValue : public StyleValueWithDefaultOperators<CSSKeywordValue> {
             static ValueComparingNonnullRefPtr<CSSKeywordValue> const revert_instance = adopt_ref(*new (nothrow) CSSKeywordValue(Keyword::Revert));
             return revert_instance;
         }
+        case Keyword::RevertLayer: {
+            static ValueComparingNonnullRefPtr<CSSKeywordValue> const revert_layer_instance = adopt_ref(*new (nothrow) CSSKeywordValue(Keyword::RevertLayer));
+            return revert_layer_instance;
+        }
         case Keyword::Unset: {
             static ValueComparingNonnullRefPtr<CSSKeywordValue> const unset_instance = adopt_ref(*new (nothrow) CSSKeywordValue(Keyword::Unset));
             return unset_instance;

Original file line number	Diff line number	Diff line change
`@@ -77,6 +77,7 @@ inline bool is_css_wide_keyword(StringView name)`
`77`	`77`	`return name.equals_ignoring_ascii_case("inherit"sv)`
`78`	`78`	`\|\| name.equals_ignoring_ascii_case("initial"sv)`
`79`	`79`	`\|\| name.equals_ignoring_ascii_case("revert"sv)`
	`80`	`+ \|\| name.equals_ignoring_ascii_case("revert-layer"sv)`
`80`	`81`	`\|\| name.equals_ignoring_ascii_case("unset"sv);`
`81`	`82`	`}`
`82`	`83`
Original file line number	Diff line number	Diff line change
`@@ -1757,7 +1757,10 @@ RefPtr<CSSStyleValue> Parser::parse_builtin_value(TokenStream<ComponentValue>& t`
`1757`	`1757`	`transaction.commit();`
`1758`	`1758`	`return CSSKeywordValue::create(Keyword::Revert);`
`1759`	`1759`	`}`
`1760`		- // FIXME: Implement `revert-layer` from CSS-CASCADE-5.
	`1760`	`+ if (ident.equals_ignoring_ascii_case("revert-layer"sv)) {`
	`1761`	`+ transaction.commit();`
	`1762`	`+ return CSSKeywordValue::create(Keyword::RevertLayer);`
	`1763`	`+ }`
`1761`	`1764`	`}`
`1762`	`1765`
`1763`	`1766`	`return nullptr;`