Expand single-layer CSS mask shorthands

experiments/WebScene.NativeEngine.Probe/native/css_property_metadata.json

@@ -157,7 +157,8 @@
     "column-count", "columns", "css-float", "direction", "empty-cells",
     "fill-opacity", "fill-rule", "filter", "font-stretch", "font-style",
     "font-variant", "grid", "grid-template-areas", "inset-block", "inset-inline",
-    "mask-composite", "mask-image", "mask-position", "mask-repeat", "mask-size",
+    "-webkit-mask", "-webkit-mask-composite", "-webkit-mask-image", "-webkit-mask-position", "-webkit-mask-repeat", "-webkit-mask-size",
+    "mask", "mask-composite", "mask-image", "mask-mode", "mask-position", "mask-repeat", "mask-size",
     "moz-transform", "order", "orphans", "outline-offset", "outline-style",
     "resize", "stroke-linecap", "stroke-linejoin", "text-decoration", "text-indent",
     "text-overflow", "webkit-transform", "widows", "zoom"
@@ -245,7 +246,8 @@
     "grid-area", "grid-auto-columns", "grid-auto-flow", "grid-column", "grid-column-end", "grid-column-start", "grid-row", "grid-row-end",
     "grid-row-start", "grid-gap", "grid-row-gap", "grid-column-gap", "inset-block", "inset-inline", "inset-inline-start",
     "inset-inline-end", "margin-block", "margin-inline", "margin-inline-start", "margin-inline-end",
-    "list-style", "list-style-position", "list-style-type", "mask-composite", "mask-image", "mask-position", "mask-repeat", "mask-size", "padding-block",
+    "list-style", "list-style-position", "list-style-type", "-webkit-mask", "-webkit-mask-composite", "-webkit-mask-image", "-webkit-mask-position", "-webkit-mask-repeat", "-webkit-mask-size",
+    "mask", "mask-composite", "mask-image", "mask-mode", "mask-position", "mask-repeat", "mask-size", "padding-block",
     "padding-inline", "padding-inline-start", "padding-inline-end", "border-inline-start",
     "border-inline-end", "border-inline-start-width", "border-inline-end-width",
     "border-inline-start-color", "border-inline-end-color", "border-start-start-radius",

experiments/WebScene.NativeEngine.Probe/native/generated/webscene_css_property_identity.inc

@@ -209,7 +209,7 @@ inline constexpr std::array native_typed_property_identity_catalog{
     native_typed_property_identity{"contain-intrinsic-size", css_property_id::contain_intrinsic_size},
 };
 
-inline constexpr std::array<std::string_view, 54> native_storage_only_property_catalog{
+inline constexpr std::array<std::string_view, 62> native_storage_only_property_catalog{
     "accent-color",
     "align-content",
     "animation-direction",
@@ -245,8 +245,16 @@ inline constexpr std::array<std::string_view, 54> native_storage_only_property_c
     "grid-template-areas",
     "inset-block",
     "inset-inline",
+    "-webkit-mask",
+    "-webkit-mask-composite",
+    "-webkit-mask-image",
+    "-webkit-mask-position",
+    "-webkit-mask-repeat",
+    "-webkit-mask-size",
+    "mask",
     "mask-composite",
     "mask-image",
+    "mask-mode",
     "mask-position",
     "mask-repeat",
     "mask-size",

experiments/WebScene.NativeEngine.Probe/native/generated/webscene_css_supported_properties.inc

@@ -7,6 +7,12 @@ struct cssom_supported_property_metadata final {
 inline constexpr std::array cssom_supported_property_catalog{
     cssom_supported_property_metadata{"-moz-transform", "MozTransform"},
     cssom_supported_property_metadata{"-webkit-font-smoothing", "WebkitFontSmoothing"},
+    cssom_supported_property_metadata{"-webkit-mask", "WebkitMask"},
+    cssom_supported_property_metadata{"-webkit-mask-composite", "WebkitMaskComposite"},
+    cssom_supported_property_metadata{"-webkit-mask-image", "WebkitMaskImage"},
+    cssom_supported_property_metadata{"-webkit-mask-position", "WebkitMaskPosition"},
+    cssom_supported_property_metadata{"-webkit-mask-repeat", "WebkitMaskRepeat"},
+    cssom_supported_property_metadata{"-webkit-mask-size", "WebkitMaskSize"},
     cssom_supported_property_metadata{"-webkit-transform", "WebkitTransform"},
     cssom_supported_property_metadata{"accent-color", "accentColor"},
     cssom_supported_property_metadata{"align-content", "alignContent"},
@@ -168,8 +174,10 @@ inline constexpr std::array cssom_supported_property_catalog{
     cssom_supported_property_metadata{"margin-left", "marginLeft"},
     cssom_supported_property_metadata{"margin-right", "marginRight"},
     cssom_supported_property_metadata{"margin-top", "marginTop"},
+    cssom_supported_property_metadata{"mask", "mask"},
     cssom_supported_property_metadata{"mask-composite", "maskComposite"},
     cssom_supported_property_metadata{"mask-image", "maskImage"},
+    cssom_supported_property_metadata{"mask-mode", "maskMode"},
     cssom_supported_property_metadata{"mask-position", "maskPosition"},
     cssom_supported_property_metadata{"mask-repeat", "maskRepeat"},
     cssom_supported_property_metadata{"mask-size", "maskSize"},
@@ -238,4 +246,4 @@ inline constexpr std::array cssom_supported_property_catalog{
     cssom_supported_property_metadata{"zoom", "zoom"},
 };
 
-inline constexpr auto cssom_style_template_property_accessor_count = 420U;
+inline constexpr auto cssom_style_template_property_accessor_count = 435U;

experiments/WebScene.NativeEngine.Probe/native/webscene_css_application.h

@@ -19,6 +19,39 @@ void apply_resolved_declaration(native_document& document,dom_node& node,
     bool defer_transition_configuration = false)
 {
     const auto& name=declaration.name;
+    if (name == "mask") {
+        const auto parsed = parse_single_mask_shorthand(value);
+        if (!parsed.has_value()) {
+            decision.classification = "unsupported";
+            decision.semantic_slice = "single mask layer without geometry-box syntax";
+            return;
+        }
+        const std::array<std::pair<std::string_view, const std::string*>, 6> components{{
+            {"mask-image", &parsed->image},
+            {"mask-position", &parsed->position},
+            {"mask-size", &parsed->size},
+            {"mask-repeat", &parsed->repeat},
+            {"mask-composite", &parsed->composite},
+            {"mask-mode", &parsed->mode},
+        }};
+        for (const auto& [component_name, component_value] : components) {
+            css_declaration component{
+                std::string(component_name), *component_value, declaration.important};
+            component.property = property_id(component.name);
+            component.specified = compile_specified_value(
+                component.property, component.value);
+            apply_resolved_declaration(
+                document,
+                node,
+                component,
+                component.value,
+                inline_origin,
+                decision,
+                load_svg,
+                defer_transition_configuration);
+        }
+        return;
+    }
     const auto may_require_application_expansion =
         name.starts_with("border-") || name.starts_with("inset-");
     const auto* effective_metadata = may_require_application_expansion

experiments/WebScene.NativeEngine.Probe/native/webscene_css_declarations.h

@@ -1,19 +1,16 @@
 #pragma once
 #include "webscene_css_state.h"
 #include "webscene_css_parser.h"
+#include "webscene_css_effect_values.h"
 
 namespace webscene_native::css {
-inline std::string ascii_lower(std::string_view value) {
-    auto result=std::string(value);
-    for (auto &c:result) if(c>='A' && c<='Z') c=static_cast<char>(c+('a'-'A'));
-    return result;
-}
 inline bool valid_custom_property_name(std::string_view name) {
     if (!name.starts_with("--") || name.size()<=2) return false;
     return std::none_of(name.begin(),name.end(),[](unsigned char c) {
         return c<=0x20 || c==0x7f;
     });
 }
+
 inline void append_declaration(
         std::vector<css_declaration>& result,
         std::string_view raw_name,
@@ -27,16 +24,39 @@ inline void append_declaration(
         auto value = std::string(raw_value);
         const auto custom = name.starts_with("--");
         if (custom && !valid_custom_property_name(name)) return;
+        if (name == "-webkit-mask") name = "mask";
+        else if (name == "-webkit-mask-image") name = "mask-image";
+        else if (name == "-webkit-mask-position") name = "mask-position";
+        else if (name == "-webkit-mask-size") name = "mask-size";
+        else if (name == "-webkit-mask-repeat") name = "mask-repeat";
+        else if (name == "-webkit-mask-composite") name = "mask-composite";
         if (!custom && name.starts_with("-")
             && name != "-moz-transform"
             && name != "-webkit-transform"
             && name != "-webkit-font-smoothing") return;
         if (custom && value.empty() && preserve_empty_custom_properties) value = " ";
-        if (!name.empty() && !value.empty()) {
-            css_declaration declaration{std::move(name), std::move(value), important};
+        const auto append_one = [&](std::string property_name, std::string property_value) {
+            css_declaration declaration{
+                std::move(property_name), std::move(property_value), important};
             declaration.property = property_id(declaration.name);
-            declaration.specified = compile_specified_value(declaration.property, declaration.value);
+            declaration.specified = compile_specified_value(
+                declaration.property, declaration.value);
             result.push_back(std::move(declaration));
+        };
+        if (name == "mask" && !value.empty()) {
+            const auto parsed = parse_single_mask_shorthand(value);
+            if (!parsed.has_value()) {
+                append_one(std::move(name), std::move(value));
+                return;
+            }
+            append_one("mask-image", parsed->image);
+            append_one("mask-position", parsed->position);
+            append_one("mask-size", parsed->size);
+            append_one("mask-repeat", parsed->repeat);
+            append_one("mask-composite", parsed->composite);
+            append_one("mask-mode", parsed->mode);
+        } else if (!name.empty() && !value.empty()) {
+            append_one(std::move(name), std::move(value));
         }
     }