@effing/canvas 0.18.3 → 0.18.5

package/dist/index.js

@@ -650,7 +650,7 @@ async function drawImage(ctx, src, x, y, width, height, style, preloadedImage) {
 
 // src/jsx/draw/rect.ts
 function drawRect(ctx, x, y, width, height, style) {
-  const borderRadius = getBorderRadius(style);
+  const borderRadius = getBorderRadius(style, width, height);
   const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
   if (style.boxShadow) {
     drawBoxShadow(ctx, x, y, width, height, style.boxShadow, borderRadius);
@@ -677,16 +677,23 @@ function drawRect(ctx, x, y, width, height, style) {
   }
   drawBorders(ctx, x, y, width, height, style, borderRadius);
 }
-function getBorderRadius(style) {
+function resolveRadius(v, width, height) {
+  if (typeof v === "string" && v.endsWith("%")) {
+    const pct = parseFloat(v) / 100;
+    return pct * Math.min(width, height);
+  }
+  return toNumber(v);
+}
+function getBorderRadius(style, width, height) {
   return {
-    topLeft: toNumber(style.borderTopLeftRadius),
-    topRight: toNumber(style.borderTopRightRadius),
-    bottomRight: toNumber(style.borderBottomRightRadius),
-    bottomLeft: toNumber(style.borderBottomLeftRadius)
+    topLeft: resolveRadius(style.borderTopLeftRadius, width, height),
+    topRight: resolveRadius(style.borderTopRightRadius, width, height),
+    bottomRight: resolveRadius(style.borderBottomRightRadius, width, height),
+    bottomLeft: resolveRadius(style.borderBottomLeftRadius, width, height)
   };
 }
-function getBorderRadiusFromStyle(style) {
-  return getBorderRadius(style);
+function getBorderRadiusFromStyle(style, width, height) {
+  return getBorderRadius(style, width, height);
 }
 function drawBorders(ctx, x, y, width, height, style, borderRadius) {
   const hasRoundedCorners = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
@@ -795,6 +802,10 @@ function toNumber(v) {
 
 // src/jsx/draw/svg.ts
 import { Path2D } from "@napi-rs/canvas";
+function resolveCurrentColor(value, color) {
+  if (value?.toLowerCase() === "currentcolor") return color;
+  return value;
+}
 function mergeStyleIntoProps(props) {
   const style = props.style;
   if (!style) return props;
@@ -814,65 +825,66 @@ function drawSvgContainer(ctx, node, x, y, width, height) {
       ctx.translate(-vbX, -vbY);
     }
   }
+  const color = node.style.color ?? "black";
   const merged = mergeStyleIntoProps(node.props);
-  const inheritedFill = merged.fill ?? "black";
+  const inheritedFill = resolveCurrentColor(merged.fill, color) ?? "black";
   const children = node.props.children;
   if (children != null) {
     const childArray = Array.isArray(children) ? children : [children];
     for (const child of childArray) {
       if (child != null && typeof child === "object") {
-        drawSvgChild(ctx, child, inheritedFill);
+        drawSvgChild(ctx, child, inheritedFill, color);
       }
     }
   }
   ctx.restore();
 }
-function drawSvgChild(ctx, child, inheritedFill) {
+function drawSvgChild(ctx, child, inheritedFill, color) {
   const { type } = child;
   const props = mergeStyleIntoProps(child.props);
   switch (type) {
     case "path":
-      drawPath(ctx, props, inheritedFill);
+      drawPath(ctx, props, inheritedFill, color);
       break;
     case "circle":
-      drawCircle(ctx, props, inheritedFill);
+      drawCircle(ctx, props, inheritedFill, color);
       break;
     case "rect":
-      drawSvgRect(ctx, props, inheritedFill);
+      drawSvgRect(ctx, props, inheritedFill, color);
       break;
     case "line":
-      drawLine(ctx, props);
+      drawLine(ctx, props, color);
       break;
     case "ellipse":
-      drawEllipse(ctx, props, inheritedFill);
+      drawEllipse(ctx, props, inheritedFill, color);
       break;
     case "polygon":
-      drawPolygon(ctx, props, inheritedFill);
+      drawPolygon(ctx, props, inheritedFill, color);
       break;
     case "polyline":
-      drawPolyline(ctx, props, inheritedFill);
+      drawPolyline(ctx, props, inheritedFill, color);
       break;
     case "g":
-      drawGroup(ctx, child, inheritedFill);
+      drawGroup(ctx, child, inheritedFill, color);
       break;
   }
 }
-function drawPath(ctx, props, inheritedFill) {
+function drawPath(ctx, props, inheritedFill, color) {
   const d = props.d;
   if (!d) return;
   const path = new Path2D(d);
-  applyFillAndStroke(ctx, props, path, inheritedFill);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color);
 }
-function drawCircle(ctx, props, inheritedFill) {
+function drawCircle(ctx, props, inheritedFill, color) {
   const cx = Number(props.cx ?? 0);
   const cy = Number(props.cy ?? 0);
   const r = Number(props.r ?? 0);
   if (r <= 0) return;
   const path = new Path2D();
   path.arc(cx, cy, r, 0, Math.PI * 2);
-  applyFillAndStroke(ctx, props, path, inheritedFill);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color);
 }
-function drawSvgRect(ctx, props, inheritedFill) {
+function drawSvgRect(ctx, props, inheritedFill, color) {
   const rx = Number(props.x ?? 0);
   const ry = Number(props.y ?? 0);
   const w = Number(props.width ?? 0);
@@ -880,9 +892,9 @@ function drawSvgRect(ctx, props, inheritedFill) {
   if (w <= 0 || h <= 0) return;
   const path = new Path2D();
   path.rect(rx, ry, w, h);
-  applyFillAndStroke(ctx, props, path, inheritedFill);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color);
 }
-function drawLine(ctx, props) {
+function drawLine(ctx, props, color) {
   const x1 = Number(props.x1 ?? 0);
   const y1 = Number(props.y1 ?? 0);
   const x2 = Number(props.x2 ?? 0);
@@ -890,9 +902,9 @@ function drawLine(ctx, props) {
   const path = new Path2D();
   path.moveTo(x1, y1);
   path.lineTo(x2, y2);
-  applyStroke(ctx, props, path);
+  applyStroke(ctx, props, path, color);
 }
-function drawEllipse(ctx, props, inheritedFill) {
+function drawEllipse(ctx, props, inheritedFill, color) {
   const cx = Number(props.cx ?? 0);
   const cy = Number(props.cy ?? 0);
   const rx = Number(props.rx ?? 0);
@@ -900,9 +912,9 @@ function drawEllipse(ctx, props, inheritedFill) {
   if (rx <= 0 || ry <= 0) return;
   const path = new Path2D();
   path.ellipse(cx, cy, rx, ry, 0, 0, Math.PI * 2);
-  applyFillAndStroke(ctx, props, path, inheritedFill);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color);
 }
-function drawPolygon(ctx, props, inheritedFill) {
+function drawPolygon(ctx, props, inheritedFill, color) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
   const path = new Path2D();
@@ -911,9 +923,9 @@ function drawPolygon(ctx, props, inheritedFill) {
     path.lineTo(points[i][0], points[i][1]);
   }
   path.closePath();
-  applyFillAndStroke(ctx, props, path, inheritedFill);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color);
 }
-function drawPolyline(ctx, props, inheritedFill) {
+function drawPolyline(ctx, props, inheritedFill, color) {
   const points = parsePoints(props.points);
   if (points.length < 2) return;
   const path = new Path2D();
@@ -921,17 +933,17 @@ function drawPolyline(ctx, props, inheritedFill) {
   for (let i = 1; i < points.length; i++) {
     path.lineTo(points[i][0], points[i][1]);
   }
-  applyFillAndStroke(ctx, props, path, inheritedFill);
+  applyFillAndStroke(ctx, props, path, inheritedFill, color);
 }
-function drawGroup(ctx, node, inheritedFill) {
+function drawGroup(ctx, node, inheritedFill, color) {
   const children = node.children ?? node.props.children;
   if (children == null) return;
   const merged = mergeStyleIntoProps(node.props);
-  const groupFill = merged.fill ?? inheritedFill;
+  const groupFill = resolveCurrentColor(merged.fill, color) ?? inheritedFill;
   const childArray = Array.isArray(children) ? children : [children];
   for (const child of childArray) {
     if (child != null && typeof child === "object") {
-      drawSvgChild(ctx, child, groupFill);
+      drawSvgChild(ctx, child, groupFill, color);
     }
   }
 }
@@ -944,16 +956,21 @@ function parsePoints(value) {
   }
   return result;
 }
-function applyFillAndStroke(ctx, props, path, inheritedFill) {
-  const fill = props.fill ?? inheritedFill;
+function applyFillAndStroke(ctx, props, path, inheritedFill, color) {
+  const fill = resolveCurrentColor(props.fill, color) ?? inheritedFill;
+  const fillRule = props.fillRule ?? props["fill-rule"];
+  const clipRule = props.clipRule ?? props["clip-rule"];
+  if (clipRule) {
+    ctx.clip(path, clipRule);
+  }
   if (fill !== "none") {
     ctx.fillStyle = fill;
-    ctx.fill(path);
+    ctx.fill(path, fillRule ?? "nonzero");
   }
-  applyStroke(ctx, props, path);
+  applyStroke(ctx, props, path, color);
 }
-function applyStroke(ctx, props, path) {
-  const stroke = props.stroke;
+function applyStroke(ctx, props, path, color) {
+  const stroke = resolveCurrentColor(props.stroke, color);
   if (!stroke || stroke === "none") return;
   ctx.strokeStyle = stroke;
   ctx.lineWidth = Number(props.strokeWidth ?? props["stroke-width"] ?? 1);
@@ -1009,7 +1026,7 @@ async function loadEmoji(type, code) {
 }
 
 // src/jsx/text/emoji-split.ts
-function splitTextIntoRuns(text, measureText2, emojiSize) {
+function splitTextIntoRuns(text, measureText2, emojiSize, letterSpacing = 0) {
   const runs = [];
   const segmenter = new Intl.Segmenter(void 0, { granularity: "grapheme" });
   let currentText = "";
@@ -1019,13 +1036,18 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
     if (isEmojiGrapheme(segment)) {
       if (currentText) {
         const textWidth = measureText2(currentText);
+        const graphemeCount = [
+          ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
+            currentText
+          )
+        ].length;
         runs.push({
           kind: "text",
           text: currentText,
           x: textStartX,
-          width: textWidth
+          width: textWidth + letterSpacing * graphemeCount
         });
-        currentX = textStartX + textWidth;
+        currentX = textStartX + textWidth + letterSpacing * graphemeCount;
         currentText = "";
       }
       runs.push({
@@ -1034,7 +1056,7 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
         x: currentX,
         width: emojiSize
       });
-      currentX += emojiSize;
+      currentX += emojiSize + letterSpacing;
       textStartX = currentX;
     } else {
       if (!currentText) textStartX = currentX;
@@ -1043,11 +1065,16 @@ function splitTextIntoRuns(text, measureText2, emojiSize) {
   }
   if (currentText) {
     const textWidth = measureText2(currentText);
+    const graphemeCount = [
+      ...new Intl.Segmenter(void 0, { granularity: "grapheme" }).segment(
+        currentText
+      )
+    ].length;
     runs.push({
       kind: "text",
       text: currentText,
       x: textStartX,
-      width: textWidth
+      width: textWidth + letterSpacing * graphemeCount
     });
   }
   return runs;
@@ -1098,20 +1125,29 @@ async function drawText(ctx, segments, offsetX, offsetY, textShadow, emojiStyle)
   }
 }
 async function drawSegmentWithEmoji(ctx, seg, x, y, textShadow, emojiStyle) {
+  const letterSpacing = seg.letterSpacing ?? 0;
   const runs = splitTextIntoRuns(
     seg.text,
     (text) => {
       setFont(ctx, seg.fontSize, seg.fontFamily, seg.fontWeight, seg.fontStyle);
       return ctx.measureText(text).width;
     },
-    seg.fontSize
+    seg.fontSize,
+    letterSpacing
   );
   for (const run of runs) {
     if (run.kind === "text") {
-      if (textShadow) {
-        drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+      if (letterSpacing !== 0) {
+        if (textShadow) {
+          drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+        }
+        drawTextWithLetterSpacing(ctx, run.text, x + run.x, y, letterSpacing);
+      } else {
+        if (textShadow) {
+          drawTextShadow(ctx, run.text, x + run.x, y, textShadow);
+        }
+        ctx.fillText(run.text, x + run.x, y);
       }
-      ctx.fillText(run.text, x + run.x, y);
     } else {
       const img = await loadEmojiImage(emojiStyle, run.char);
       if (img) {
@@ -1286,84 +1322,91 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
   }
   const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
   if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style);
+    const borderRadius = getBorderRadiusFromStyle(style, width, height);
     applyClip(ctx, x, y, width, height, borderRadius);
   }
   if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
     drawRect(ctx, x, y, width, height, style);
   }
   if (style.backgroundImage) {
-    const gradient = createGradientFromCSS(
-      ctx,
-      style.backgroundImage,
-      x,
-      y,
-      width,
-      height
-    );
-    if (gradient) {
-      ctx.fillStyle = gradient;
-      const borderRadius = getBorderRadiusFromStyle(style);
-      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
-        ctx.beginPath();
-        roundedRect(
-          ctx,
-          x,
-          y,
-          width,
-          height,
-          borderRadius.topLeft,
-          borderRadius.topRight,
-          borderRadius.bottomRight,
-          borderRadius.bottomLeft
-        );
-        ctx.fill();
-      } else {
-        ctx.fillRect(x, y, width, height);
-      }
-    } else {
-      const urlMatch = style.backgroundImage.match(/url\(["']?(.*?)["']?\)/);
-      if (urlMatch) {
-        const borderRadius = getBorderRadiusFromStyle(style);
-        const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
-        if (hasRadius2) {
-          applyClip(ctx, x, y, width, height, borderRadius);
-        }
-        const image = await loadImage3(urlMatch[1]);
-        const bgSize = style.backgroundSize;
-        if (bgSize === "cover") {
-          const r = computeCover(
-            image.width,
-            image.height,
+    const layers = splitGradientArgs(style.backgroundImage);
+    for (let i = layers.length - 1; i >= 0; i--) {
+      const layer = layers[i].trim();
+      const gradient = createGradientFromCSS(ctx, layer, x, y, width, height);
+      if (gradient) {
+        ctx.fillStyle = gradient;
+        const borderRadius = getBorderRadiusFromStyle(style, width, height);
+        if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+          ctx.beginPath();
+          roundedRect(
+            ctx,
             x,
             y,
             width,
-            height
+            height,
+            borderRadius.topLeft,
+            borderRadius.topRight,
+            borderRadius.bottomRight,
+            borderRadius.bottomLeft
           );
-          ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+          ctx.fill();
         } else {
-          let tileW, tileH;
-          if (bgSize === "contain") {
-            const r = computeContain(
+          ctx.fillRect(x, y, width, height);
+        }
+      } else {
+        const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch) {
+          const borderRadius = getBorderRadiusFromStyle(style, width, height);
+          const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+          if (hasRadius2) {
+            applyClip(ctx, x, y, width, height, borderRadius);
+          }
+          const image = await loadImage3(urlMatch[1]);
+          const bgSize = style.backgroundSize;
+          if (bgSize === "cover") {
+            const r = computeCover(
               image.width,
               image.height,
-              0,
-              0,
+              x,
+              y,
               width,
               height
             );
-            tileW = r.dw;
-            tileH = r.dh;
-          } else if (bgSize === "100% 100%") {
-            tileW = width;
-            tileH = height;
+            ctx.drawImage(
+              image,
+              r.sx,
+              r.sy,
+              r.sw,
+              r.sh,
+              r.dx,
+              r.dy,
+              r.dw,
+              r.dh
+            );
           } else {
-            tileW = image.width;
-            tileH = image.height;
-          }
-          for (let ty = y; ty < y + height; ty += tileH) {
-            for (let tx = x; tx < x + width; tx += tileW) {
-              ctx.drawImage(image, tx, ty, tileW, tileH);
+            let tileW, tileH;
+            if (bgSize === "contain") {
+              const r = computeContain(
+                image.width,
+                image.height,
+                0,
+                0,
+                width,
+                height
+              );
+              tileW = r.dw;
+              tileH = r.dh;
+            } else if (bgSize === "100% 100%") {
+              tileW = width;
+              tileH = height;
+            } else {
+              tileW = image.width;
+              tileH = image.height;
+            }
+            for (let ty = y; ty < y + height; ty += tileH) {
+              for (let tx = x; tx < x + width; tx += tileW) {
+                ctx.drawImage(image, tx, ty, tileW, tileH);
+              }
             }
           }
         }
@@ -1411,7 +1454,7 @@ async function drawNode(ctx, node, parentX, parentY, debug, emojiStyle) {
     const imgW = width - paddingLeft - paddingRight;
     const imgH = height - paddingTop - paddingBottom;
     if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style);
+      const borderRadius = getBorderRadiusFromStyle(style, width, height);
       if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
         applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
       }
@@ -1474,84 +1517,91 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
   }
   const isClipped = style.overflow === "hidden" || style.overflowX === "hidden" || style.overflowY === "hidden";
   if (isClipped) {
-    const borderRadius = getBorderRadiusFromStyle(style);
+    const borderRadius = getBorderRadiusFromStyle(style, width, height);
     applyClip(ctx, x, y, width, height, borderRadius);
   }
   if (style.backgroundColor || style.borderTopWidth || style.borderRightWidth || style.borderBottomWidth || style.borderLeftWidth || style.boxShadow) {
     drawRect(ctx, x, y, width, height, style);
   }
   if (style.backgroundImage) {
-    const gradient = createGradientFromCSS(
-      ctx,
-      style.backgroundImage,
-      x,
-      y,
-      width,
-      height
-    );
-    if (gradient) {
-      ctx.fillStyle = gradient;
-      const borderRadius = getBorderRadiusFromStyle(style);
-      if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
-        ctx.beginPath();
-        roundedRect(
-          ctx,
-          x,
-          y,
-          width,
-          height,
-          borderRadius.topLeft,
-          borderRadius.topRight,
-          borderRadius.bottomRight,
-          borderRadius.bottomLeft
-        );
-        ctx.fill();
-      } else {
-        ctx.fillRect(x, y, width, height);
-      }
-    } else {
-      const urlMatch = style.backgroundImage.match(/url\(["']?(.*?)["']?\)/);
-      if (urlMatch) {
-        const borderRadius = getBorderRadiusFromStyle(style);
-        const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
-        if (hasRadius2) {
-          applyClip(ctx, x, y, width, height, borderRadius);
-        }
-        const image = await loadImage3(urlMatch[1]);
-        const bgSize = style.backgroundSize;
-        if (bgSize === "cover") {
-          const r = computeCover(
-            image.width,
-            image.height,
+    const layers = splitGradientArgs(style.backgroundImage);
+    for (let i = layers.length - 1; i >= 0; i--) {
+      const layer = layers[i].trim();
+      const gradient = createGradientFromCSS(ctx, layer, x, y, width, height);
+      if (gradient) {
+        ctx.fillStyle = gradient;
+        const borderRadius = getBorderRadiusFromStyle(style, width, height);
+        if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
+          ctx.beginPath();
+          roundedRect(
+            ctx,
             x,
             y,
             width,
-            height
+            height,
+            borderRadius.topLeft,
+            borderRadius.topRight,
+            borderRadius.bottomRight,
+            borderRadius.bottomLeft
           );
-          ctx.drawImage(image, r.sx, r.sy, r.sw, r.sh, r.dx, r.dy, r.dw, r.dh);
+          ctx.fill();
         } else {
-          let tileW, tileH;
-          if (bgSize === "contain") {
-            const r = computeContain(
+          ctx.fillRect(x, y, width, height);
+        }
+      } else {
+        const urlMatch = layer.match(/url\(["']?(.*?)["']?\)/);
+        if (urlMatch) {
+          const borderRadius = getBorderRadiusFromStyle(style, width, height);
+          const hasRadius2 = borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0;
+          if (hasRadius2) {
+            applyClip(ctx, x, y, width, height, borderRadius);
+          }
+          const image = await loadImage3(urlMatch[1]);
+          const bgSize = style.backgroundSize;
+          if (bgSize === "cover") {
+            const r = computeCover(
               image.width,
               image.height,
-              0,
-              0,
+              x,
+              y,
               width,
               height
             );
-            tileW = r.dw;
-            tileH = r.dh;
-          } else if (bgSize === "100% 100%") {
-            tileW = width;
-            tileH = height;
+            ctx.drawImage(
+              image,
+              r.sx,
+              r.sy,
+              r.sw,
+              r.sh,
+              r.dx,
+              r.dy,
+              r.dw,
+              r.dh
+            );
           } else {
-            tileW = image.width;
-            tileH = image.height;
-          }
-          for (let ty = y; ty < y + height; ty += tileH) {
-            for (let tx = x; tx < x + width; tx += tileW) {
-              ctx.drawImage(image, tx, ty, tileW, tileH);
+            let tileW, tileH;
+            if (bgSize === "contain") {
+              const r = computeContain(
+                image.width,
+                image.height,
+                0,
+                0,
+                width,
+                height
+              );
+              tileW = r.dw;
+              tileH = r.dh;
+            } else if (bgSize === "100% 100%") {
+              tileW = width;
+              tileH = height;
+            } else {
+              tileW = image.width;
+              tileH = image.height;
+            }
+            for (let ty = y; ty < y + height; ty += tileH) {
+              for (let tx = x; tx < x + width; tx += tileW) {
+                ctx.drawImage(image, tx, ty, tileW, tileH);
+              }
             }
           }
         }
@@ -1599,7 +1649,7 @@ async function drawNodeInner(ctx, node, parentX, parentY, offsetX, offsetY, debu
     const imgW = width - paddingLeft - paddingRight;
     const imgH = height - paddingTop - paddingBottom;
     if (!isClipped) {
-      const borderRadius = getBorderRadiusFromStyle(style);
+      const borderRadius = getBorderRadiusFromStyle(style, width, height);
       if (borderRadius.topLeft > 0 || borderRadius.topRight > 0 || borderRadius.bottomRight > 0 || borderRadius.bottomLeft > 0) {
         applyClip(ctx, imgX, imgY, imgW, imgH, borderRadius);
       }
@@ -1737,8 +1787,8 @@ function parseValue(v) {
   if (v === void 0 || v === null) return void 0;
   const s = String(v);
   if (s === "auto") return "auto";
-  const n = parseFloat(s);
-  if (!isNaN(n)) return n;
+  const n = Number(s);
+  if (s !== "" && !isNaN(n)) return n;
   return s;
 }
 function expandStyle(raw) {
@@ -1947,7 +1997,15 @@ var DIMENSION_PROPS = [
   "paddingLeft",
   "rowGap",
   "columnGap",
-  "flexBasis"
+  "flexBasis",
+  "borderTopWidth",
+  "borderRightWidth",
+  "borderBottomWidth",
+  "borderLeftWidth",
+  "borderTopLeftRadius",
+  "borderTopRightRadius",
+  "borderBottomRightRadius",
+  "borderBottomLeftRadius"
 ];
 function resolveUnit(value, viewportWidth, viewportHeight, fontSize, rootFontSize) {
   if (value.endsWith("%") || value === "auto") return value;
@@ -2301,10 +2359,14 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
   resolveUnits(style, viewportWidth, viewportHeight);
   const tagName = String(type);
   if (tagName === "svg") {
-    if (props.width != null && style.width === void 0)
-      style.width = Number(props.width);
-    if (props.height != null && style.height === void 0)
-      style.height = Number(props.height);
+    if (props.width != null && style.width === void 0) {
+      const v = props.width;
+      style.width = typeof v === "string" && v.endsWith("%") ? v : Number(v);
+    }
+    if (props.height != null && style.height === void 0) {
+      const v = props.height;
+      style.height = typeof v === "string" && v.endsWith("%") ? v : Number(v);
+    }
     const viewBox = props.viewBox;
     if (viewBox) {
       const parts = viewBox.split(/[\s,]+/).map(Number);
@@ -2326,10 +2388,14 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
     }
   }
   if (tagName === "img") {
-    if (props.width != null && style.width === void 0)
-      style.width = Number(props.width);
-    if (props.height != null && style.height === void 0)
-      style.height = Number(props.height);
+    if (props.width != null && style.width === void 0) {
+      const v = props.width;
+      style.width = typeof v === "string" && v.endsWith("%") ? v : Number(v);
+    }
+    if (props.height != null && style.height === void 0) {
+      const v = props.height;
+      style.height = typeof v === "string" && v.endsWith("%") ? v : Number(v);
+    }
     const src = props.src;
     if (src) {
       try {
@@ -2369,6 +2435,8 @@ async function buildNode(element, parentStyle, yogaNode, viewportWidth, viewport
       emojiEnabled
     );
     childYogaNode.setMeasureFunc(measureFunc);
+    childYogaNode.setFlexGrow(1);
+    childYogaNode.setFlexShrink(1);
     yogaNode.insertChild(childYogaNode, 0);
     return {
       type: tagName,