Add HTML implementation for opacity modifier (#415)

* Support `spacing` property on `HStack`/`VStack`

* Remove unused properties in `StackDemo`

* Implement stack spacing with grid gaps

* Fix GTK build

* Bump browser requirements in README.md

* Remove outdated FIXME

* Generalize snapshot timeouts

* Prevent excessive CSS style leaks of properties

* Add HTML implementation for `opacity` modifier

* Update tests name to reflect file name

* Fix missing semicolon in opacity style attribute

Co-authored-by: ezraberch <49635435+ezraberch@users.noreply.github.com>

* Remove duplicate declaration

Co-authored-by: ezraberch <49635435+ezraberch@users.noreply.github.com>

Sources/TokamakCore/Modifiers/Effects/OpacityEffect.swift

@@ -0,0 +1,34 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 1/20/21.
+//
+
+public struct _OpacityEffect: ViewModifier, Equatable {
+  public let opacity: Double
+
+  public init(opacity: Double) {
+    self.opacity = opacity
+  }
+
+  public func body(content: Content) -> some View {
+    content
+  }
+}
+
+public extension View {
+  func opacity(_ opacity: Double) -> some View {
+    modifier(_OpacityEffect(opacity: opacity))
+  }
+}

Sources/TokamakStaticHTML/Modifiers/Effects/OpacityEffect.swift

@@ -0,0 +1,24 @@
+// Copyright 2021 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 1/20/21.
+//
+
+import TokamakCore
+
+extension _OpacityEffect: DOMViewModifier {
+  public var attributes: [HTMLAttribute: String] {
+    ["style": "opacity: \(opacity); "]
+  }
+}

Tests/TokamakStaticHTMLTests/LayoutTests.swift → Tests/TokamakStaticHTMLTests/RenderingTests.swift

@@ -66,6 +66,8 @@ public extension Snapshotting where Value: View, Format == NSImage {
   }
 }
 
+private let defaultSnapshotTimeout: TimeInterval = 10
+
 struct Star: Shape {
   func path(in rect: CGRect) -> Path {
     Path { path in
@@ -107,9 +109,26 @@ struct Stacks: View {
   }
 }
 
-private let defaultSnapshotTimeout: TimeInterval = 10
+struct Opacity: View {
+  var body: some View {
+    ZStack {
+      Circle()
+        .fill(Color.red)
+        .opacity(0.5)
+        .frame(width: 25, height: 25)
+      Circle()
+        .fill(Color.green)
+        .opacity(0.5)
+        .frame(width: 50, height: 50)
+      Circle()
+        .fill(Color.blue)
+        .opacity(0.5)
+        .frame(width: 75, height: 75)
+    }
+  }
+}
 
-final class LayoutTests: XCTestCase {
+final class RenderingTests: XCTestCase {
   func testPath() {
     assertSnapshot(
       matching: Star().fill(Color(red: 1, green: 0.75, blue: 0.1, opacity: 1)),
@@ -139,6 +158,14 @@ final class LayoutTests: XCTestCase {
       timeout: defaultSnapshotTimeout
     )
   }
+
+  func testOpacity() {
+    assertSnapshot(
+      matching: Opacity().preferredColorScheme(.light),
+      as: .image(size: .init(width: 75, height: 75)),
+      timeout: defaultSnapshotTimeout
+    )
+  }
 }
 
 #endif