chore: render overflow clip margin

davesnx · Jan 24, 2025 · 09cc34b · 09cc34b
1 parent aabed6a
commit 09cc34b
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 9 deletions.
diff --git a/packages/ppx/src/Property_to_runtime.re b/packages/ppx/src/Property_to_runtime.re
@@ -2191,8 +2191,22 @@ let overflow =
       }
   );
 
-/* let overflow_clip_margin =
-   unsupportedProperty(Property_parser.property_overflow_clip_margin); */
+let overflow_clip_margin =
+  polymorphic(
+    Property_parser.property_overflow_clip_margin,
+    (~loc, (clipEdgeOrigin, margin)) =>
+    [
+      [%expr
+        CSS.overflowClipMargin2(
+          ~clipEdgeOrigin=?[%e
+            render_option(~loc, variant_to_expression, clipEdgeOrigin)
+          ],
+          ~margin=?[%e render_option(~loc, render_extended_length, margin)],
+          (),
+        )
+      ],
+    ]
+  );
 
 let overflow_block =
   monomorphic(
@@ -5261,6 +5275,7 @@ let properties = [
   ("overflow-anchor", found(overflow_anchor)),
   ("overflow-block", found(overflow_block)),
   ("overflow-clip-box", found(overflow_clip_box)),
+  ("overflow-clip-margin", found(overflow_clip_margin)),
   ("overflow-inline", found(overflow_inline)),
   ("overflow-wrap", found(overflow_wrap)),
   ("overflow-x", found(overflow_x)),

diff --git a/packages/ppx/test/css-support/overflow-module.t/run.t b/packages/ppx/test/css-support/overflow-module.t/run.t
@@ -45,10 +45,34 @@ If this test fail means that the module is not in sync with the ppx
   CSS.scrollbarGutter(`stable);
   CSS.scrollbarGutter(`stableBothEdges);
   CSS.scrollbarGutter(`stableBothEdges);
-  CSS.unsafe({js|overflowClipMargin|js}, {js|content-box|js});
-  CSS.unsafe({js|overflowClipMargin|js}, {js|padding-box|js});
-  CSS.unsafe({js|overflowClipMargin|js}, {js|border-box|js});
-  CSS.unsafe({js|overflowClipMargin|js}, {js|20px|js});
-  CSS.unsafe({js|overflowClipMargin|js}, {js|1em|js});
-  CSS.unsafe({js|overflowClipMargin|js}, {js|content-box 5px|js});
-  CSS.unsafe({js|overflowClipMargin|js}, {js|5px content-box|js});
+  CSS.overflowClipMargin2(
+    ~clipEdgeOrigin=?Some(`contentBox),
+    ~margin=?None,
+    (),
+  );
+  CSS.overflowClipMargin2(
+    ~clipEdgeOrigin=?Some(`paddingBox),
+    ~margin=?None,
+    (),
+  );
+  CSS.overflowClipMargin2(
+    ~clipEdgeOrigin=?Some(`borderBox),
+    ~margin=?None,
+    (),
+  );
+  CSS.overflowClipMargin2(
+    ~clipEdgeOrigin=?None,
+    ~margin=?Some(`pxFloat(20.)),
+    (),
+  );
+  CSS.overflowClipMargin2(~clipEdgeOrigin=?None, ~margin=?Some(`em(1.)), ());
+  CSS.overflowClipMargin2(
+    ~clipEdgeOrigin=?Some(`contentBox),
+    ~margin=?Some(`pxFloat(5.)),
+    (),
+  );
+  CSS.overflowClipMargin2(
+    ~clipEdgeOrigin=?Some(`contentBox),
+    ~margin=?Some(`pxFloat(5.)),
+    (),
+  );