LibWeb/CSS: Parse mask-size property

Author: https://github.com/InvalidUsernameException
Commit: 866e12f688
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/5511
Reviewed-by: https://github.com/AtkinsSJ ✅
Reviewed-by: https://github.com/Calme1709

Libraries/LibWeb/CSS/Parser/Parser.h

@@ -421,7 +421,7 @@ private:
     RefPtr<CSSStyleValue const> parse_aspect_ratio_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_background_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_single_background_position_x_or_y_value(TokenStream<ComponentValue>&, PropertyID);
-    RefPtr<CSSStyleValue const> parse_single_background_size_value(TokenStream<ComponentValue>&);
+    RefPtr<CSSStyleValue const> parse_single_background_size_value(PropertyID, TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_border_value(PropertyID, TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_border_image_value(TokenStream<ComponentValue>&);
     RefPtr<CSSStyleValue const> parse_border_image_slice_value(TokenStream<ComponentValue>&);

Libraries/LibWeb/CSS/Parser/PropertyParsing.cpp

@@ -480,7 +480,7 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue const>> Parser::parse_css_value
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
     case PropertyID::BackgroundSize:
-        if (auto parsed_value = parse_comma_separated_value_list(tokens, [this](auto& tokens) { return parse_single_background_size_value(tokens); }))
+        if (auto parsed_value = parse_comma_separated_value_list(tokens, [this, property_id](auto& tokens) { return parse_single_background_size_value(property_id, tokens); }))
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
     case PropertyID::Border:
@@ -677,6 +677,10 @@ Parser::ParseErrorOr<NonnullRefPtr<CSSStyleValue const>> Parser::parse_css_value
         if (auto parsed_value = parse_comma_separated_value_list(tokens, [this, property_id](auto& tokens) { return parse_single_repeat_style_value(property_id, tokens); }))
             return parsed_value.release_nonnull();
         return ParseError::SyntaxError;
+    case PropertyID::MaskSize:
+        if (auto parsed_value = parse_comma_separated_value_list(tokens, [this, property_id](auto& tokens) { return parse_single_background_size_value(property_id, tokens); }))
+            return parsed_value.release_nonnull();
+        return ParseError::SyntaxError;
     case PropertyID::Opacity:
     case PropertyID::FillOpacity:
     case PropertyID::FloodOpacity:
@@ -1299,7 +1303,7 @@ RefPtr<CSSStyleValue const> Parser::parse_background_value(TokenStream<Component
             auto background_size_transaction = tokens.begin_transaction();
             auto& maybe_slash = tokens.consume_a_token();
             if (maybe_slash.is_delim('/')) {
-                if (auto maybe_background_size = parse_single_background_size_value(tokens)) {
+                if (auto maybe_background_size = parse_single_background_size_value(PropertyID::BackgroundSize, tokens)) {
                     background_size_transaction.commit();
                     background_size = maybe_background_size.release_nonnull();
                     continue;
@@ -1453,7 +1457,7 @@ RefPtr<CSSStyleValue const> Parser::parse_single_background_position_x_or_y_valu
     return EdgeStyleValue::create(relative_edge, {});
 }
 
-RefPtr<CSSStyleValue const> Parser::parse_single_background_size_value(TokenStream<ComponentValue>& tokens)
+RefPtr<CSSStyleValue const> Parser::parse_single_background_size_value(PropertyID property, TokenStream<ComponentValue>& tokens)
 {
     auto transaction = tokens.begin_transaction();
 
@@ -1469,7 +1473,7 @@ RefPtr<CSSStyleValue const> Parser::parse_single_background_size_value(TokenStre
         return {};
     };
 
-    auto maybe_x_value = parse_css_value_for_property(PropertyID::BackgroundSize, tokens);
+    auto maybe_x_value = parse_css_value_for_property(property, tokens);
     if (!maybe_x_value)
         return nullptr;
     auto x_value = maybe_x_value.release_nonnull();
@@ -1479,7 +1483,7 @@ RefPtr<CSSStyleValue const> Parser::parse_single_background_size_value(TokenStre
         return x_value;
     }
 
-    auto maybe_y_value = parse_css_value_for_property(PropertyID::BackgroundSize, tokens);
+    auto maybe_y_value = parse_css_value_for_property(property, tokens);
     if (!maybe_y_value) {
         auto y_value = LengthPercentage { Length::make_auto() };
         auto x_size = get_length_percentage(*x_value);

Libraries/LibWeb/CSS/Properties.json

@@ -2439,6 +2439,23 @@
       "repeat-y"
     ]
   },
+  "mask-size": {
+    "affects-layout": false,
+    "animation-type": "repeatable-list",
+    "inherited": false,
+    "initial": "auto",
+    "max-values": 2,
+    "valid-types": [
+      "length [0,∞]",
+      "percentage [0,∞]"
+    ],
+    "valid-identifiers": [
+      "auto",
+      "cover",
+      "contain"
+    ],
+    "percentages-resolve-to": "length"
+  },
   "mask-type": {
     "animation-type": "discrete",
     "inherited": false,

Tests/LibWeb/Text/expected/css/CSSStyleDeclaration-has-indexed-property-getter.txt

@@ -191,6 +191,7 @@ All properties associated with getComputedStyle(document.body):
     "mask-mode",
     "mask-position",
     "mask-repeat",
+    "mask-size",
     "mask-type",
     "max-block-size",
     "max-height",

Tests/LibWeb/Text/expected/css/CSSStyleProperties-all-supported-properties-and-default-values.txt

@@ -535,6 +535,8 @@ All supported properties and their default values exposed from CSSStylePropertie
 'mask-position': '0% 0%'
 'maskRepeat': 'repeat'
 'mask-repeat': 'repeat'
+'maskSize': 'auto'
+'mask-size': 'auto'
 'maskType': 'luminance'
 'mask-type': 'luminance'
 'mathDepth': '0'

Tests/LibWeb/Text/expected/css/getComputedStyle-print-all.txt

@@ -189,6 +189,7 @@ mask-image: none
 mask-mode: match-source
 mask-position: 0% 0%
 mask-repeat: repeat
+mask-size: auto
 mask-type: luminance
 max-block-size: none
 max-height: none

Tests/LibWeb/Text/expected/wpt-import/css/css-cascade/all-prop-revert-layer.txt

@@ -1,8 +1,8 @@
 Harness status: OK
 
-Found 251 tests
+Found 252 tests
 
-244 Pass
+245 Pass
 7 Fail
 Pass	accent-color
 Pass	border-collapse
@@ -189,6 +189,7 @@ Pass	mask-composite
 Pass	mask-image
 Pass	mask-mode
 Pass	mask-repeat
+Pass	mask-size
 Pass	mask-type
 Pass	max-block-size
 Pass	max-height