fix(css): implement filter, backdrop-filter and text-shadow; warn on unrendered props (#29)

Closes #12. CSS filter chain (10 functions) on the group layer, backdrop-filter via clipped backdrop save-layer, css text-shadow bridged into Text/Counter, validator warnings for overflow-wrap/text-overflow. Five pixel-level regression tests.

Author: LeadcodeDev

crates/rustmotion-cli/src/commands/validate_schema.rs

@@ -60,6 +60,22 @@ fn validate_children(
     for (j, child) in children.iter().enumerate() {
         let p = format!("{}.children[{}]", path, j);
 
+        // Properties the CSS engine accepts but does not render yet — warn
+        // instead of staying silent so authors don't rely on a no-op.
+        let style = child.component.as_styled().style_config();
+        if style.overflow_wrap.is_some() {
+            warnings.push(format!(
+                "{}: style.overflow-wrap is accepted but not rendered yet (text wraps per style.wrap)",
+                p
+            ));
+        }
+        if style.text_overflow.is_some() {
+            warnings.push(format!(
+                "{}: style.text-overflow is accepted but not rendered yet (no ellipsis clipping)",
+                p
+            ));
+        }
+
         if let Some(timed) = child.component.as_timed() {
             let (start, end) = timed.timing();
             if let (Some(s), Some(e)) = (start, end) {
@@ -303,3 +319,32 @@ fn counter_display_len(
 
     sign + integer_digits + separator_chars + decimal_chars + prefix_len + suffix_len
 }
+
+#[cfg(test)]
+mod style_warning_tests {
+    use super::*;
+
+    #[test]
+    fn warns_on_accepted_but_unrendered_css_properties() {
+        // overflow-wrap and text-overflow parse into CssStyle but are not
+        // rendered yet; validate must say so instead of staying silent.
+        let child: ChildComponent = serde_json::from_value(serde_json::json!({
+            "type": "text",
+            "content": "hi",
+            "style": { "overflow-wrap": "break-word", "text-overflow": "ellipsis" }
+        }))
+        .unwrap();
+        let mut errors = Vec::new();
+        let mut warnings = Vec::new();
+        validate_children(&[child], "test", 4.0, &mut errors, &mut warnings);
+        assert!(errors.is_empty(), "unexpected errors: {errors:?}");
+        assert!(
+            warnings.iter().any(|w| w.contains("overflow-wrap")),
+            "missing overflow-wrap warning: {warnings:?}"
+        );
+        assert!(
+            warnings.iter().any(|w| w.contains("text-overflow")),
+            "missing text-overflow warning: {warnings:?}"
+        );
+    }
+}

crates/rustmotion-components/src/counter.rs

@@ -59,6 +59,7 @@ impl Counter {
         layout_width: f32,
         time: f64,
         scene_duration: f64,
+        ctx: &PaintCtx,
     ) -> Result<()> {
         use rustmotion_core::engine::animator::ease;
 
@@ -166,8 +167,23 @@ impl Counter {
         let descent = metrics.descent;
         let y = (line_height + ascent - descent) / 2.0;
 
-        // Draw shadow
-        if let Some(ref shadow) = self.text_shadow {
+        // Draw shadows — component field wins, else the bridged CSS
+        // `style.text-shadow` list (reverse order: first shadow on top).
+        let shadows: Vec<rustmotion_core::schema::TextShadow> = if let Some(s) = &self.text_shadow {
+            vec![s.clone()]
+        } else if let Some(list) = &self.style.text_shadow {
+            let lctx = rustmotion_core::css::units::LengthContext {
+                viewport_width: ctx.video_width as f32,
+                viewport_height: ctx.video_height as f32,
+                parent_size: layout_width.max(0.0),
+                font_size,
+                root_font_size: 16.0,
+            };
+            list.iter().map(|s| s.to_schema(&lctx)).collect()
+        } else {
+            Vec::new()
+        };
+        for shadow in shadows.iter().rev() {
             let mut sp = paint_from_hex(&shadow.color);
             if shadow.blur > 0.01 {
                 if let Some(filter) = skia_safe::image_filters::blur(
@@ -231,6 +247,6 @@ impl Painter for Counter {
         _props: &AnimatedProperties,
         ctx: &PaintCtx,
     ) {
-        let _ = self.paint(canvas, layout.width, ctx.time, ctx.scene_duration);
+        let _ = self.paint(canvas, layout.width, ctx.time, ctx.scene_duration, ctx);
     }
 }

crates/rustmotion-components/src/text.rs

@@ -315,6 +315,7 @@ impl Text {
         layout_width: f32,
         time: f64,
         props: &AnimatedProperties,
+        ctx: &PaintCtx,
     ) -> Result<()> {
         let font_size = self.style.font_size_px_or(48.0);
         let color = self.style.color_str_or("#FFFFFF");
@@ -388,21 +389,40 @@ impl Text {
         let descent = metrics.descent;
         let baseline_offset = (line_height_val + ascent - descent) / 2.0;
 
-        // Prepare optional shadow and stroke paints
-        let shadow_paint = self.text_shadow.as_ref().map(|shadow| {
-            let mut p = paint_from_hex(&shadow.color);
-            if shadow.blur > 0.01 {
-                if let Some(filter) = skia_safe::image_filters::blur(
-                    (shadow.blur, shadow.blur),
-                    skia_safe::TileMode::Clamp,
-                    None,
-                    None,
-                ) {
-                    p.set_image_filter(filter);
+        // Prepare optional shadow and stroke paints. The component-level
+        // `text-shadow` field wins; otherwise the CSS `style.text-shadow`
+        // list is bridged (it used to be parsed and silently dropped).
+        let shadows: Vec<rustmotion_core::schema::TextShadow> = if let Some(s) = &self.text_shadow {
+            vec![s.clone()]
+        } else if let Some(list) = &self.style.text_shadow {
+            let lctx = rustmotion_core::css::units::LengthContext {
+                viewport_width: ctx.video_width as f32,
+                viewport_height: ctx.video_height as f32,
+                parent_size: layout_width.max(0.0),
+                font_size,
+                root_font_size: 16.0,
+            };
+            list.iter().map(|s| s.to_schema(&lctx)).collect()
+        } else {
+            Vec::new()
+        };
+        let shadow_paints: Vec<(skia_safe::Paint, f32, f32)> = shadows
+            .iter()
+            .map(|shadow| {
+                let mut p = paint_from_hex(&shadow.color);
+                if shadow.blur > 0.01 {
+                    if let Some(filter) = skia_safe::image_filters::blur(
+                        (shadow.blur, shadow.blur),
+                        skia_safe::TileMode::Clamp,
+                        None,
+                        None,
+                    ) {
+                        p.set_image_filter(filter);
+                    }
                 }
-            }
-            (p, shadow.offset_x, shadow.offset_y)
-        });
+                (p, shadow.offset_x, shadow.offset_y)
+            })
+            .collect();
 
         let stroke_paint = self.stroke.as_ref().map(|stroke| {
             let mut p = paint_from_hex(&stroke.color);
@@ -486,8 +506,8 @@ impl Text {
                 }
             }
 
-            // Draw shadow
-            if let Some((ref sp, ox, oy)) = shadow_paint {
+            // Draw shadows — reverse order so the first CSS shadow ends on top.
+            for (sp, ox, oy) in shadow_paints.iter().rev() {
                 draw_text_with_fallback(
                     canvas,
                     line,
@@ -530,6 +550,6 @@ impl Painter for Text {
         props: &AnimatedProperties,
         ctx: &PaintCtx,
     ) {
-        let _ = self.paint(canvas, layout.width, ctx.time, props);
+        let _ = self.paint(canvas, layout.width, ctx.time, props, ctx);
     }
 }

crates/rustmotion-core/src/css/style.rs

@@ -643,6 +643,23 @@ fn one_f32() -> f32 {
     1.0
 }
 
+impl Color {
+    /// CSS-string form: pass strings through, format rgba as `#rrggbb[aa]`.
+    pub fn to_css_string(&self) -> String {
+        match self {
+            Color::String(s) => s.clone(),
+            Color::Rgba { r, g, b, a } => {
+                if *a >= 1.0 {
+                    format!("#{r:02x}{g:02x}{b:02x}")
+                } else {
+                    let alpha = (a.clamp(0.0, 1.0) * 255.0) as u8;
+                    format!("#{r:02x}{g:02x}{b:02x}{alpha:02x}")
+                }
+            }
+        }
+    }
+}
+
 // ---- Background ----
 
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema)]
@@ -757,6 +774,22 @@ pub struct TextShadow {
     pub color: Option<Color>,
 }
 
+impl TextShadow {
+    /// Resolve into the legacy schema shadow consumed by the text painters.
+    pub fn to_schema(&self, ctx: &crate::css::units::LengthContext) -> crate::schema::TextShadow {
+        crate::schema::TextShadow {
+            color: self
+                .color
+                .as_ref()
+                .map(Color::to_css_string)
+                .unwrap_or_else(|| "#000000".to_string()),
+            offset_x: self.offset_x.resolve(ctx),
+            offset_y: self.offset_y.resolve(ctx),
+            blur: self.blur.as_ref().map(|b| b.resolve(ctx)).unwrap_or(0.0),
+        }
+    }
+}
+
 // ---- Transform ----
 
 #[derive(Debug, Clone, PartialEq, Serialize, Deserialize, JsonSchema)]