fix: ellipsis with maxWidth (#542)

### Description This may be a temporary fix, I didn't dig deep into yoga. But when the return value of width here doesn't change (assuming the value of width is 216.9), when we later get the width through `parent.getComputedWidth()`, sometimes it returns 216 and sometimes 217. I'm not sure if this is a yoga bug, but it seems related to the entire page width. Closes: #540 https://github.com/vercel/satori/assets/22126563/6929db4c-60e8-4a85-ae8b-497ad64c317e
vercel · Sep 17, 2023 · fcaae1d · fcaae1d · vercel · Sep 17, 2023
1 parent c47e1a9
commit fcaae1d
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 4 deletions.
diff --git a/src/text.ts b/src/text.ts
@@ -419,11 +419,15 @@ export default async function* buildTextNodes(
  }
  flow(r)
  measuredTextSize = { width: r, height }
- return { width: r, height }
+ return { width: Math.ceil(r), height }
  }
-
  measuredTextSize = { width, height }
- return { width, height }
+ // This may be a temporary fix, I didn't dig deep into yoga.
+ // But when the return value of width here doesn't change (assuming the value of width is 216.9),
+ // when we later get the width through `parent.getComputedWidth()`, sometimes it returns 216 and sometimes 217.
+ // I'm not sure if this is a yoga bug, but it seems related to the entire page width.
+ // So I use Math.ceil.
+ return { width: Math.ceil(width), height }
  })
 
  const [x, y] = yield

diff --git a/...st-tsx-test-basic-test-tsx-basic-should-combine-text-nodes-correctly-1-snap.png b/...st-tsx-test-basic-test-tsx-basic-should-combine-text-nodes-correctly-1-snap.png
diff --git a/...s-background-color-and-color-should-support-currentcolor-when-border-1-snap.png b/...s-background-color-and-color-should-support-currentcolor-when-border-1-snap.png
diff --git a/...odels-test-tsx-color-models-should-support-css-4-syntax-color-in-hsl-1-snap.png b/...odels-test-tsx-color-models-should-support-css-4-syntax-color-in-hsl-1-snap.png
diff --git a/test/basic.test.tsx b/test/basic.test.tsx
@@ -105,6 +105,7 @@ describe('Basic', () => {
  display: 'flex',
  height: '100%',
  width: '100%',
+ background: 'white',
  }}
  >
  Hi {0} <div>hi</div> {0} {false} {undefined} {0} {null} {0} {true} {'x'}{' '}

diff --git a/test/event.test.tsx b/test/event.test.tsx
@@ -59,7 +59,7 @@ describe('Event', () => {
  "textContent": "World",
  "top": 0,
  "type": "div",
- "width": 41,
+ "width": 42,
  },
  ]
  `)