Fix background/overlay layout in DOM/HTML renderers (#429)

Sources/TokamakCore/Modifiers/StyleModifiers.swift

@@ -17,6 +17,15 @@
 
 import Foundation
 
+/// Override this View's body to provide a layout that fits the background to the content.
+public struct _BackgroundLayout<Content, Background>: _PrimitiveView
+  where Content: View, Background: View
+{
+  public let content: Content
+  public let background: Background
+  public let alignment: Alignment
+}
+
 public struct _BackgroundModifier<Background>: ViewModifier, EnvironmentReader
   where Background: View
 {
@@ -30,11 +39,11 @@ public struct _BackgroundModifier<Background>: ViewModifier, EnvironmentReader
   }
 
   public func body(content: Content) -> some View {
-    // FIXME: Clip to bounds of foreground.
-    ZStack(alignment: alignment) {
-      background
-      content
-    }
+    _BackgroundLayout(
+      content: content,
+      background: background,
+      alignment: alignment
+    )
   }
 
   mutating func setContent(from values: EnvironmentValues) {
@@ -113,6 +122,15 @@ public extension View {
   }
 }
 
+/// Override this View's body to provide a layout that fits the background to the content.
+public struct _OverlayLayout<Content, Overlay>: _PrimitiveView
+  where Content: View, Overlay: View
+{
+  public let content: Content
+  public let overlay: Overlay
+  public let alignment: Alignment
+}
+
 public struct _OverlayModifier<Overlay>: ViewModifier, EnvironmentReader
   where Overlay: View
 {
@@ -126,11 +144,11 @@ public struct _OverlayModifier<Overlay>: ViewModifier, EnvironmentReader
   }
 
   public func body(content: Content) -> some View {
-    // FIXME: Clip to content shape.
-    ZStack(alignment: alignment) {
-      content
-      overlay
-    }
+    _OverlayLayout(
+      content: content,
+      overlay: overlay,
+      alignment: alignment
+    )
   }
 
   mutating func setContent(from values: EnvironmentValues) {

Sources/TokamakStaticHTML/Modifiers/LayoutModifiers.swift

@@ -156,3 +156,63 @@ extension _AspectRatioLayout: DOMViewModifier {
     ]
   }
 }
+
+extension _BackgroundLayout: _HTMLPrimitive {
+  public var renderedBody: AnyView {
+    AnyView(
+      HTML(
+        "div",
+        ["style": "display: inline-grid; grid-template-columns: auto auto;"]
+      ) {
+        HTML(
+          "div",
+          ["style": """
+          display: flex;
+          justify-content: \(alignment.horizontal.flexAlignment);
+          align-items: \(alignment.vertical.flexAlignment);
+          grid-area: a;
+
+          width: 0; min-width: 100%;
+          height: 0; min-height: 100%;
+          overflow: hidden;
+          """]
+        ) {
+          background
+        }
+        HTML("div", ["style": "grid-area: a;"]) {
+          content
+        }
+      }
+    )
+  }
+}
+
+extension _OverlayLayout: _HTMLPrimitive {
+  public var renderedBody: AnyView {
+    AnyView(
+      HTML(
+        "div",
+        ["style": "display: inline-grid; grid-template-columns: auto auto;"]
+      ) {
+        HTML("div", ["style": "grid-area: a;"]) {
+          content
+        }
+        HTML(
+          "div",
+          ["style": """
+          display: flex;
+          justify-content: \(alignment.horizontal.flexAlignment);
+          align-items: \(alignment.vertical.flexAlignment);
+          grid-area: a;
+
+          width: 0; min-width: 100%;
+          height: 0; min-height: 100%;
+          overflow: hidden;
+          """]
+        ) {
+          overlay
+        }
+      }
+    )
+  }
+}

Tests/TokamakStaticHTMLTests/RenderingTests.swift

@@ -339,6 +339,59 @@ final class RenderingTests: XCTestCase {
       timeout: defaultSnapshotTimeout
     )
   }
+
+  func testBackground() {
+    assertSnapshot(
+      matching: Rectangle()
+        .fill(Color.blue)
+        .opacity(0.5)
+        .frame(width: 80, height: 80)
+        .background(
+          RoundedRectangle(cornerRadius: 10).fill(Color.red)
+        ),
+      as: .image(size: .init(width: 100, height: 100))
+    )
+
+    assertSnapshot(
+      matching: Rectangle()
+        .fill(Color.blue)
+        .opacity(0.5)
+        .frame(width: 80, height: 80)
+        .background(
+          RoundedRectangle(cornerRadius: 10)
+            .fill(Color.red)
+            .frame(width: 40, height: 40),
+          alignment: .bottomTrailing
+        ),
+      as: .image(size: .init(width: 100, height: 100))
+    )
+  }
+
+  func testOverlay() {
+    assertSnapshot(
+      matching: Rectangle()
+        .fill(Color.blue)
+        .frame(width: 80, height: 80)
+        .overlay(
+          RoundedRectangle(cornerRadius: 10)
+            .fill(Color.red.opacity(0.5))
+        ),
+      as: .image(size: .init(width: 100, height: 100))
+    )
+
+    assertSnapshot(
+      matching: Rectangle()
+        .fill(Color.blue)
+        .frame(width: 80, height: 80)
+        .overlay(
+          RoundedRectangle(cornerRadius: 10)
+            .fill(Color.red)
+            .frame(width: 40, height: 40),
+          alignment: .bottomTrailing
+        ),
+      as: .image(size: .init(width: 100, height: 100))
+    )
+  }
 }
 
 #endif