render: honor container item alignment

crates/obscura-render/src/lib.rs

@@ -287,6 +287,7 @@ pub struct LayoutStyle {
     /// one field for both made `text-align:left` shrink-wrap flex children.
     pub text_align: Option<taffy::AlignItems>,
     pub align_items: Option<taffy::AlignItems>,
+    pub justify_items: Option<taffy::JustifyItems>,
     pub align_self: Option<taffy::AlignSelf>,
     pub justify_self: Option<taffy::JustifySelf>,
     pub flex_direction: Option<taffy::FlexDirection>,
@@ -719,6 +720,7 @@ pub(crate) fn to_taffy_style(style: &LayoutStyle) -> Style {
         // `align-items` has no effect on a block formatting context.
         s.align_items = None;
     }
+    s.justify_items = style.justify_items;
     s.align_self = style.align_self;
     s.justify_self = style.justify_self;
     if let Some(jc) = style.justify_content {

crates/obscura-render/src/style.rs

@@ -422,13 +422,19 @@ fn apply_value(style: &mut LayoutStyle, name: &str, value: &str) {
             _ => {}
         },
         "align-items" => {
-            match value {
+            if let Some(Some(value)) = self_alignment_value(value) {
-                "center" => style.align_items = Some(taffy::AlignItems::CENTER),
+                style.align_items = Some(value);
-                "flex-start" | "start" => style.align_items = Some(taffy::AlignItems::FLEX_START),
+            }
-                "flex-end" | "end" => style.align_items = Some(taffy::AlignItems::FLEX_END),
+        },
-                "stretch" => style.align_items = Some(taffy::AlignItems::STRETCH),
+        "justify-items" => {
-                "baseline" => style.align_items = Some(taffy::AlignItems::BASELINE),
+            if let Some(Some(value)) = self_alignment_value(value) {
-                _ => {}
+                style.justify_items = Some(value);
+            }
+        },
+        "place-items" => {
+            if let Some((Some(align), Some(justify))) = self_alignment_pair(value) {
+                style.align_items = Some(align);
+                style.justify_items = Some(justify);
             }
         },
         "align-self" => {
@@ -2699,6 +2705,13 @@ mod tests {
         let shorthand = compute_style("div", Some("place-self:safe center flex-end"));
         assert_eq!(shorthand.align_self, Some(taffy::AlignSelf::SAFE_CENTER));
         assert_eq!(shorthand.justify_self, Some(taffy::JustifySelf::FLEX_END));
+
+        let parent = compute_style(
+            "div",
+            Some("align-items:start;justify-items:safe end;place-items:end center"),
+        );
+        assert_eq!(parent.align_items, Some(taffy::AlignItems::END));
+        assert_eq!(parent.justify_items, Some(taffy::JustifyItems::CENTER));
     }
 
     #[test]