Adjust snapshot dimensions (#2787)

* Adjust snapshot dimensions

Setting the dimensions using CSS style on the element before taking a
snapshot.

* Update redwood-dom-testing/src/commonMain/kotlin/app/cash/redwood/dom/testing/DomSnapshotter.kt

Co-authored-by: Jake Wharton <[email protected]>

* apiDump

---------

Co-authored-by: Jake Wharton <[email protected]>

Author: rqcai

redwood-dom-testing/api/redwood-dom-testing.klib.api

@@ -9,7 +9,7 @@
 final class app.cash.redwood.dom.testing/DomSnapshotter { // app.cash.redwood.dom.testing/DomSnapshotter|null[0]
     constructor <init>(kotlin/String) // app.cash.redwood.dom.testing/DomSnapshotter.<init>|<init>(kotlin.String){}[0]
 
-    final suspend fun snapshot(org.w3c.dom/Element, kotlin/String = ..., kotlin/Boolean = ...) // app.cash.redwood.dom.testing/DomSnapshotter.snapshot|snapshot(org.w3c.dom.Element;kotlin.String;kotlin.Boolean){}[0]
+    final suspend fun snapshot(org.w3c.dom/Element, kotlin/String = ..., kotlin/Boolean = ..., kotlin/Int? = ..., kotlin/Int? = ...) // app.cash.redwood.dom.testing/DomSnapshotter.snapshot|snapshot(org.w3c.dom.Element;kotlin.String;kotlin.Boolean;kotlin.Int?;kotlin.Int?){}[0]
 
     final object Companion { // app.cash.redwood.dom.testing/DomSnapshotter.Companion|null[0]
         final inline fun invoke(): app.cash.redwood.dom.testing/DomSnapshotter // app.cash.redwood.dom.testing/DomSnapshotter.Companion.invoke|invoke(){}[0]

redwood-dom-testing/src/commonMain/kotlin/app/cash/redwood/dom/testing/DomSnapshotter.kt

@@ -17,6 +17,7 @@ package app.cash.redwood.dom.testing
 
 import kotlin.coroutines.resume
 import kotlin.coroutines.resumeWithException
+import kotlin.math.ceil
 import kotlinx.browser.document
 import kotlinx.coroutines.await
 import kotlinx.coroutines.suspendCancellableCoroutine
@@ -37,16 +38,24 @@ public class DomSnapshotter @PublishedApi internal constructor(
     element: Element,
     name: String = "snapshot",
     scrolling: Boolean = false,
+    width: Int? = null,
+    height: Int? = null,
   ) {
+    element.setAttribute(
+      "style",
+      "width: ${width?.let { "${it}px" } ?: "max-content"}; " +
+        "height: ${height?.let { "${it}px" } ?: "max-content"};",
+    )
+
     val image = HtmlToImage.toBlob(
       element = element,
       options = Options().apply {
         this.backgroundColor = "#ffff66"
-        this.width = 300
-        this.height = 100
-        this.canvasWidth = width
-        this.canvasHeight = height
-        this.pixelRatio = 3.0
+        this.width = ceil(element.getBoundingClientRect().width).toInt()
+        this.height = ceil(element.getBoundingClientRect().height).toInt()
+        this.canvasWidth = this.width
+        this.canvasHeight = this.height
+        this.pixelRatio = 1.0
       },
     ).await()