Implement background-blend-mode and make align-items work in stylo

4 files changed, 43 insertions, 6 deletions

diff --git a/components/style/properties/gecko.mako.rs b/components/style/properties/gecko.mako.rs
index 86a1bbc9e5f..e0f187cc3cc 100644
--- a/components/style/properties/gecko.mako.rs
+++ b/components/style/properties/gecko.mako.rs
@@ -1571,7 +1571,8 @@ fn static_assert() {
 <% skip_background_longhands = """background-repeat
                                   background-image background-clip
                                   background-origin background-attachment
-                                  background-size background-position""" %>
+                                  background-size background-position
+                                  background-blend-mode""" %>
 <%self:impl_trait style_struct_name="Background"
                   skip_longhands="${skip_background_longhands}"
                   skip_additionals="*">
@@ -1586,6 +1587,29 @@ fn static_assert() {
             T::local => structs::NS_STYLE_IMAGELAYER_ATTACHMENT_LOCAL as u8,
         }
     </%self:simple_image_array_property>
+
+    <%self:simple_image_array_property name="blend_mode" shorthand="background" field_name="mBlendMode">
+        use properties::longhands::background_blend_mode::single_value::computed_value::T;
+
+        match servo {
+            T::normal => structs::NS_STYLE_BLEND_NORMAL as u8,
+            T::multiply => structs::NS_STYLE_BLEND_MULTIPLY as u8,
+            T::screen => structs::NS_STYLE_BLEND_SCREEN as u8,
+            T::overlay => structs::NS_STYLE_BLEND_OVERLAY as u8,
+            T::darken => structs::NS_STYLE_BLEND_DARKEN as u8,
+            T::lighten => structs::NS_STYLE_BLEND_LIGHTEN as u8,
+            T::color_dodge => structs::NS_STYLE_BLEND_COLOR_DODGE as u8,
+            T::color_burn => structs::NS_STYLE_BLEND_COLOR_BURN as u8,
+            T::hard_light => structs::NS_STYLE_BLEND_HARD_LIGHT as u8,
+            T::soft_light => structs::NS_STYLE_BLEND_SOFT_LIGHT as u8,
+            T::difference => structs::NS_STYLE_BLEND_DIFFERENCE as u8,
+            T::exclusion => structs::NS_STYLE_BLEND_EXCLUSION as u8,
+            T::hue => structs::NS_STYLE_BLEND_HUE as u8,
+            T::saturation => structs::NS_STYLE_BLEND_SATURATION as u8,
+            T::color => structs::NS_STYLE_BLEND_COLOR as u8,
+            T::luminosity => structs::NS_STYLE_BLEND_LUMINOSITY as u8,
+        }
+    </%self:simple_image_array_property>
 </%self:impl_trait>
 
 <%self:impl_trait style_struct_name="List"
diff --git a/components/style/properties/longhand/background.mako.rs b/components/style/properties/longhand/background.mako.rs
index 4b2c073fb6c..adc7e44e0a9 100644
--- a/components/style/properties/longhand/background.mako.rs
+++ b/components/style/properties/longhand/background.mako.rs
@@ -339,3 +339,10 @@ ${helpers.single_keyword("background-origin",
         }))
     }
 </%helpers:vector_longhand>
+
+// https://drafts.fxtf.org/compositing/#background-blend-mode
+${helpers.single_keyword("background-blend-mode",
+                         """normal multiply screen overlay darken lighten color-dodge
+                            color-burn hard-light soft-light difference exclusion hue
+                            saturation color luminosity""",
+                         vector="true", products="gecko", animatable=False)}
diff --git a/components/style/properties/longhand/position.mako.rs b/components/style/properties/longhand/position.mako.rs
index 0d05c2253d8..3ea20109771 100644
--- a/components/style/properties/longhand/position.mako.rs
+++ b/components/style/properties/longhand/position.mako.rs
@@ -79,13 +79,13 @@ ${helpers.single_keyword("justify-content", "flex-start flex-end center space-be
                          products="servo",
                          animatable=False)}
 
-// FIXME(heycam): Disable align-items in geckolib since we don't support the Gecko initial value
-// 'normal' yet.
-${helpers.single_keyword("align-items", "stretch flex-start flex-end center baseline",
+// https://drafts.csswg.org/css-flexbox/#propdef-align-items
+// FIXME: This is a workaround for 'normal' value. We don't support the Gecko initial value 'normal' yet.
+${helpers.single_keyword("align-items", "stretch flex-start flex-end center baseline" if product == "servo"
+                         else "normal stretch flex-start flex-end center baseline",
                          need_clone=True,
                          gecko_constant_prefix="NS_STYLE_ALIGN",
-                         animatable=False,
-                         products="servo")}
+                         animatable=False)}
 
 ${helpers.single_keyword("align-content", "stretch flex-start flex-end center space-between space-around",
                          gecko_constant_prefix="NS_STYLE_ALIGN",
@@ -103,8 +103,11 @@ ${helpers.predefined_type("flex-shrink", "Number",
                           needs_context=False,
                           animatable=True)}
 
+// https://drafts.csswg.org/css-align/#align-self-property
+// FIXME: We don't support the Gecko value 'normal' yet.
 ${helpers.single_keyword("align-self", "auto stretch flex-start flex-end center baseline",
                          need_clone=True,
+                         extra_gecko_values="normal",
                          gecko_constant_prefix="NS_STYLE_ALIGN",
                          animatable=False)}
 
diff --git a/components/style/properties/properties.mako.rs b/components/style/properties/properties.mako.rs
index 508936e873d..06e05fe750a 100644
--- a/components/style/properties/properties.mako.rs
+++ b/components/style/properties/properties.mako.rs
@@ -1687,6 +1687,9 @@ pub fn apply_declarations<'a, F, I>(viewport_size: Size2D<Au>,
                     align_items::flex_start => align_self::flex_start,
                     align_items::flex_end => align_self::flex_end,
                     align_items::center => align_self::center,
+                    % if product == "gecko":
+                        align_items::normal => align_self::normal,
+                    % endif
                 };
             style.mutate_position().set_align_self(self_align);
         }