@remotion/web-renderer 4.0.429 → 4.0.430

package/dist/drawing/parse-linear-gradient.js

@@ -0,0 +1,260 @@
+import { NoReactInternals } from 'remotion/no-react';
+const isValidColor = (color) => {
+    try {
+        const result = NoReactInternals.processColor(color);
+        return result !== null && result !== undefined;
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const parseDirection = (directionStr) => {
+    const trimmed = directionStr.trim().toLowerCase();
+    // Handle keywords like "to right", "to bottom", etc.
+    if (trimmed.startsWith('to ')) {
+        const direction = trimmed.substring(3).trim();
+        switch (direction) {
+            case 'top':
+                return 0;
+            case 'right':
+                return 90;
+            case 'bottom':
+                return 180;
+            case 'left':
+                return 270;
+            case 'top right':
+            case 'right top':
+                return 45;
+            case 'bottom right':
+            case 'right bottom':
+                return 135;
+            case 'bottom left':
+            case 'left bottom':
+                return 225;
+            case 'top left':
+            case 'left top':
+                return 315;
+            default:
+                return 180; // Default to bottom
+        }
+    }
+    // Handle angle values: deg, rad, grad, turn
+    const angleMatch = trimmed.match(/^(-?\d+\.?\d*)(deg|rad|grad|turn)$/);
+    if (angleMatch) {
+        const value = parseFloat(angleMatch[1]);
+        const unit = angleMatch[2];
+        switch (unit) {
+            case 'deg':
+                return value;
+            case 'rad':
+                return (value * 180) / Math.PI;
+            case 'grad':
+                return (value * 360) / 400;
+            case 'turn':
+                return value * 360;
+            default:
+                return value;
+        }
+    }
+    // Default: to bottom
+    return 180;
+};
+const parseColorStops = (colorStopsStr) => {
+    // Split by comma, but respect parentheses in rgba(), rgb(), hsl(), hsla()
+    const parts = colorStopsStr.split(/,(?![^(]*\))/);
+    const stops = [];
+    for (const part of parts) {
+        const trimmed = part.trim();
+        if (!trimmed)
+            continue;
+        // Extract color: can be rgb(), rgba(), hsl(), hsla(), hex, or named color
+        const colorMatch = trimmed.match(/(rgba?\([^)]+\)|hsla?\([^)]+\)|#[0-9a-f]{3,8}|[a-z]+)/i);
+        if (!colorMatch) {
+            continue;
+        }
+        const colorStr = colorMatch[0];
+        // Validate that this is actually a valid CSS color
+        if (!isValidColor(colorStr)) {
+            continue;
+        }
+        const remaining = trimmed
+            .substring(colorMatch.index + colorStr.length)
+            .trim();
+        // Canvas API supports CSS colors directly, so we can use the color string as-is
+        const normalizedColor = colorStr;
+        // Parse position if provided
+        let position = null;
+        if (remaining) {
+            const posMatch = remaining.match(/(-?\d+\.?\d*)(%|px)?/);
+            if (posMatch) {
+                const value = parseFloat(posMatch[1]);
+                const unit = posMatch[2];
+                if (unit === '%') {
+                    position = value / 100;
+                }
+                else if (unit === 'px') {
+                    // px values need element dimensions, which we don't have here
+                    // We'll handle this as a percentage for now (not fully CSS-compliant but good enough)
+                    position = null;
+                }
+                else {
+                    position = value / 100; // Assume percentage if no unit
+                }
+            }
+        }
+        stops.push({
+            color: normalizedColor,
+            position: position !== null ? position : -1, // -1 means needs to be calculated
+        });
+    }
+    if (stops.length === 0) {
+        return null;
+    }
+    // Distribute positions evenly for stops that don't have explicit positions
+    let lastExplicitIndex = -1;
+    let lastExplicitPosition = 0;
+    for (let i = 0; i < stops.length; i++) {
+        if (stops[i].position !== -1) {
+            // Found an explicit position
+            if (lastExplicitIndex >= 0) {
+                // Interpolate between last explicit and current explicit
+                const numImplicit = i - lastExplicitIndex - 1;
+                if (numImplicit > 0) {
+                    const step = (stops[i].position - lastExplicitPosition) / (numImplicit + 1);
+                    for (let j = lastExplicitIndex + 1; j < i; j++) {
+                        stops[j].position =
+                            lastExplicitPosition + step * (j - lastExplicitIndex);
+                    }
+                }
+            }
+            else {
+                // Backfill from start to first explicit
+                const numImplicit = i;
+                if (numImplicit > 0) {
+                    const step = stops[i].position / (numImplicit + 1);
+                    for (let j = 0; j < i; j++) {
+                        stops[j].position = step * (j + 1);
+                    }
+                }
+            }
+            lastExplicitIndex = i;
+            lastExplicitPosition = stops[i].position;
+        }
+    }
+    // If no explicit positions were provided at all, distribute evenly
+    // Check this BEFORE handling trailing stops
+    if (stops.every((s) => s.position === -1)) {
+        if (stops.length === 1) {
+            stops[0].position = 0.5;
+        }
+        else {
+            for (let i = 0; i < stops.length; i++) {
+                stops[i].position = i / (stops.length - 1);
+            }
+        }
+    }
+    else if (lastExplicitIndex < stops.length - 1) {
+        const numImplicit = stops.length - 1 - lastExplicitIndex;
+        const step = (1 - lastExplicitPosition) / (numImplicit + 1);
+        for (let i = lastExplicitIndex + 1; i < stops.length; i++) {
+            stops[i].position = lastExplicitPosition + step * (i - lastExplicitIndex);
+        }
+    }
+    // Clamp positions to 0-1
+    for (const stop of stops) {
+        stop.position = Math.max(0, Math.min(1, stop.position));
+    }
+    return stops;
+};
+const extractGradientContent = (backgroundImage) => {
+    const prefix = 'linear-gradient(';
+    const startIndex = backgroundImage.toLowerCase().indexOf(prefix);
+    if (startIndex === -1) {
+        return null;
+    }
+    // Find matching closing parenthesis, handling nested parens from rgb(), rgba(), etc.
+    let depth = 0;
+    const contentStart = startIndex + prefix.length;
+    for (let i = contentStart; i < backgroundImage.length; i++) {
+        const char = backgroundImage[i];
+        if (char === '(') {
+            depth++;
+        }
+        else if (char === ')') {
+            if (depth === 0) {
+                return backgroundImage.substring(contentStart, i).trim();
+            }
+            depth--;
+        }
+    }
+    return null;
+};
+export const parseLinearGradient = (backgroundImage) => {
+    if (!backgroundImage || backgroundImage === 'none') {
+        return null;
+    }
+    const content = extractGradientContent(backgroundImage);
+    if (!content) {
+        return null;
+    }
+    // Try to identify the direction/angle part vs color stops
+    // Direction/angle is optional and comes first
+    // It can be: "to right", "45deg", etc.
+    // Split into parts, respecting parentheses
+    const parts = content.split(/,(?![^(]*\))/);
+    let angle = 180; // Default: to bottom
+    let colorStopsStart = 0;
+    // Check if first part is a direction/angle
+    if (parts.length > 0) {
+        const firstPart = parts[0].trim();
+        // Check if it looks like a direction or angle (not a color)
+        const isDirection = firstPart.startsWith('to ') ||
+            /^-?\d+\.?\d*(deg|rad|grad|turn)$/.test(firstPart);
+        if (isDirection) {
+            angle = parseDirection(firstPart);
+            colorStopsStart = 1;
+        }
+    }
+    // Parse color stops
+    const colorStopsStr = parts.slice(colorStopsStart).join(',');
+    const colorStops = parseColorStops(colorStopsStr);
+    if (!colorStops || colorStops.length === 0) {
+        return null;
+    }
+    return {
+        angle,
+        colorStops,
+    };
+};
+export const createCanvasGradient = ({ ctx, rect, gradientInfo, offsetLeft, offsetTop, }) => {
+    // Convert angle to radians
+    // CSS angles: 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left
+    // We need to calculate the gradient line that spans the rectangle at the given angle
+    const angleRad = ((gradientInfo.angle - 90) * Math.PI) / 180;
+    const centerX = rect.left - offsetLeft + rect.width / 2;
+    const centerY = rect.top - offsetTop + rect.height / 2;
+    // Calculate gradient line endpoints
+    // The gradient line passes through the center and has the specified angle
+    const cos = Math.cos(angleRad);
+    const sin = Math.sin(angleRad);
+    // Find the intersection of the gradient line with the rectangle edges
+    const halfWidth = rect.width / 2;
+    const halfHeight = rect.height / 2;
+    // Calculate the length from center to edge along the gradient line.
+    // Primary formula should always be > 0 for valid angles and non-zero rects;
+    // fall back to diagonal length only for degenerate or invalid cases.
+    let length = Math.abs(cos) * halfWidth + Math.abs(sin) * halfHeight;
+    if (!Number.isFinite(length) || length === 0) {
+        length = Math.sqrt(halfWidth ** 2 + halfHeight ** 2);
+    }
+    const x0 = centerX - cos * length;
+    const y0 = centerY - sin * length;
+    const x1 = centerX + cos * length;
+    const y1 = centerY + sin * length;
+    const gradient = ctx.createLinearGradient(x0, y0, x1, y1);
+    // Add color stops
+    for (const stop of gradientInfo.colorStops) {
+        gradient.addColorStop(stop.position, stop.color);
+    }
+    return gradient;
+};

package/dist/drawing/parse-transform-origin.js

@@ -0,0 +1,7 @@
+export const parseTransformOrigin = (transformOrigin) => {
+    if (transformOrigin.trim() === '') {
+        return null;
+    }
+    const [x, y] = transformOrigin.split(' ');
+    return { x: parseFloat(x), y: parseFloat(y) };
+};

package/dist/drawing/precompose.d.ts

@@ -0,0 +1,11 @@
+import type { LogLevel } from 'remotion';
+import type { InternalState } from '../internal-state';
+export declare const precomposeDOMElement: ({ boundingRect, element, logLevel, internalState, }: {
+    boundingRect: DOMRect;
+    element: HTMLElement | SVGElement;
+    logLevel: LogLevel;
+    internalState: InternalState;
+}) => Promise<{
+    tempCanvas: OffscreenCanvas;
+    tempContext: OffscreenCanvasRenderingContext2D;
+}>;

package/dist/drawing/precompose.js

@@ -0,0 +1,14 @@
+import { compose } from '../compose';
+export const precomposeDOMElement = async ({ boundingRect, element, logLevel, internalState, }) => {
+    const tempCanvas = new OffscreenCanvas(boundingRect.width, boundingRect.height);
+    const tempContext = tempCanvas.getContext('2d');
+    await compose({
+        element,
+        context: tempContext,
+        logLevel,
+        parentRect: boundingRect,
+        internalState,
+        onlyBackgroundClip: false,
+    });
+    return { tempCanvas, tempContext };
+};

package/dist/drawing/process-node.js

@@ -0,0 +1,122 @@
+import { Internals } from 'remotion';
+import { calculateTransforms } from './calculate-transforms';
+import { getWiderRectAndExpand } from './clamp-rect-to-parent-bounds';
+import { doRectsIntersect } from './do-rects-intersect';
+import { drawElement } from './draw-element';
+import { getPrecomposeRectFor3DTransform, handle3dTransform, } from './handle-3d-transform';
+import { getPrecomposeRectForMask, handleMask } from './handle-mask';
+import { precomposeDOMElement } from './precompose';
+import { roundToExpandRect } from './round-to-expand-rect';
+import { transformDOMRect } from './transform-rect-with-matrix';
+export const processNode = async ({ element, context, draw, logLevel, parentRect, internalState, rootElement, }) => {
+    const { totalMatrix, reset, dimensions, opacity, computedStyle, precompositing, } = calculateTransforms({
+        element,
+        rootElement,
+    });
+    if (opacity === 0) {
+        reset();
+        return { type: 'skip-children' };
+    }
+    // When backfaceVisibility is 'hidden', don't render if the element is rotated
+    // to show its backface. The backface is visible when the z-component of the
+    // transformed normal vector (0, 0, 1) is negative, which corresponds to m33 < 0.
+    if (computedStyle.backfaceVisibility === 'hidden' && totalMatrix.m33 < 0) {
+        reset();
+        return { type: 'skip-children' };
+    }
+    if (dimensions.width <= 0 || dimensions.height <= 0) {
+        reset();
+        return { type: 'continue', cleanupAfterChildren: null };
+    }
+    const rect = new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height);
+    if (precompositing.needsPrecompositing) {
+        const start = Date.now();
+        let precomposeRect = null;
+        if (precompositing.needsMaskImage) {
+            precomposeRect = getWiderRectAndExpand({
+                firstRect: precomposeRect,
+                secondRect: getPrecomposeRectForMask(element),
+            });
+        }
+        if (precompositing.needs3DTransformViaWebGL) {
+            precomposeRect = getWiderRectAndExpand({
+                firstRect: precomposeRect,
+                secondRect: getPrecomposeRectFor3DTransform({
+                    element,
+                    parentRect,
+                    matrix: totalMatrix,
+                }),
+            });
+        }
+        if (!precomposeRect) {
+            throw new Error('Precompose rect not found');
+        }
+        if (precomposeRect.width <= 0 || precomposeRect.height <= 0) {
+            return { type: 'continue', cleanupAfterChildren: null };
+        }
+        if (!doRectsIntersect(precomposeRect, parentRect)) {
+            return { type: 'continue', cleanupAfterChildren: null };
+        }
+        const { tempCanvas, tempContext } = await precomposeDOMElement({
+            boundingRect: precomposeRect,
+            element,
+            logLevel,
+            internalState,
+        });
+        let drawable = tempCanvas;
+        const rectAfterTransforms = roundToExpandRect(transformDOMRect({
+            rect: precomposeRect,
+            matrix: totalMatrix,
+        }));
+        if (precompositing.needsMaskImage) {
+            handleMask({
+                gradientInfo: precompositing.needsMaskImage,
+                rect,
+                precomposeRect,
+                tempContext,
+            });
+        }
+        if (precompositing.needs3DTransformViaWebGL) {
+            const t = handle3dTransform({
+                matrix: totalMatrix,
+                precomposeRect,
+                tempCanvas: drawable,
+                rectAfterTransforms,
+                internalState,
+            });
+            if (t) {
+                drawable = t;
+            }
+        }
+        const previousTransform = context.getTransform();
+        if (drawable) {
+            context.setTransform(new DOMMatrix());
+            context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+            context.setTransform(previousTransform);
+            Internals.Log.trace({
+                logLevel,
+                tag: '@remotion/web-renderer',
+            }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms`);
+            internalState.addPrecompose({
+                canvasWidth: precomposeRect.width,
+                canvasHeight: precomposeRect.height,
+            });
+        }
+        reset();
+        return { type: 'skip-children' };
+    }
+    const { cleanupAfterChildren } = await drawElement({
+        rect,
+        computedStyle,
+        context,
+        draw,
+        opacity,
+        totalMatrix,
+        parentRect,
+        logLevel,
+        element,
+        internalState,
+    });
+    reset();
+    return { type: 'continue', cleanupAfterChildren };
+};

package/dist/drawing/round-to-expand-rect.js

@@ -0,0 +1,7 @@
+export const roundToExpandRect = (rect) => {
+    const left = Math.floor(rect.left);
+    const top = Math.floor(rect.top);
+    const right = Math.ceil(rect.right);
+    const bottom = Math.ceil(rect.bottom);
+    return new DOMRect(left, top, right - left, bottom - top);
+};

package/dist/drawing/text/apply-text-transform.js

@@ -0,0 +1,12 @@
+export const applyTextTransform = (text, transform) => {
+    if (transform === 'uppercase') {
+        return text.toUpperCase();
+    }
+    if (transform === 'lowercase') {
+        return text.toLowerCase();
+    }
+    if (transform === 'capitalize') {
+        return text.replace(/\b\w/g, (char) => char.toUpperCase());
+    }
+    return text;
+};

package/dist/drawing/text/draw-text.js

@@ -0,0 +1,53 @@
+import { Internals } from 'remotion';
+import { applyTextTransform } from './apply-text-transform';
+import { findLineBreaks } from './find-line-breaks.text';
+import { getCollapsedText } from './get-collapsed-text';
+export const drawText = ({ span, logLevel, onlyBackgroundClip, }) => {
+    const drawFn = ({ dimensions: rect, computedStyle, contextToDraw }) => {
+        const { fontFamily, fontSize, fontWeight, direction, writingMode, letterSpacing, textTransform, webkitTextFillColor, } = computedStyle;
+        const isVertical = writingMode !== 'horizontal-tb';
+        if (isVertical) {
+            // TODO: Only warn once per render.
+            Internals.Log.warn({
+                logLevel,
+                tag: '@remotion/web-renderer',
+            }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
+            return;
+        }
+        contextToDraw.save();
+        const fontSizePx = parseFloat(fontSize);
+        contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
+        contextToDraw.fillStyle =
+            // If text is being applied with backgroundClipText, we need to use a solid color otherwise it won't get
+            // applied in canvas
+            onlyBackgroundClip
+                ? 'black'
+                : // -webkit-text-fill-color overrides color, and defaults to the value of `color`
+                    webkitTextFillColor;
+        contextToDraw.letterSpacing = letterSpacing;
+        const isRTL = direction === 'rtl';
+        contextToDraw.textAlign = isRTL ? 'right' : 'left';
+        contextToDraw.textBaseline = 'alphabetic';
+        const originalText = span.textContent;
+        const collapsedText = getCollapsedText(span);
+        const transformedText = applyTextTransform(collapsedText, textTransform);
+        span.textContent = transformedText;
+        // For RTL text, fill from the right edge instead of left
+        const xPosition = isRTL ? rect.right : rect.left;
+        const lines = findLineBreaks(span, isRTL);
+        let offsetTop = 0;
+        const measurements = contextToDraw.measureText(lines[0].text);
+        const { fontBoundingBoxDescent, fontBoundingBoxAscent } = measurements;
+        const fontHeight = fontBoundingBoxAscent + fontBoundingBoxDescent;
+        for (const line of lines) {
+            // Calculate leading
+            const leading = line.height - fontHeight;
+            const halfLeading = leading / 2;
+            contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + halfLeading + fontBoundingBoxAscent + offsetTop);
+            offsetTop += line.height;
+        }
+        span.textContent = originalText;
+        contextToDraw.restore();
+    };
+    return drawFn;
+};

package/dist/drawing/text/find-line-breaks.text.js

@@ -0,0 +1,118 @@
+import { getCollapsedText } from './get-collapsed-text';
+// Punctuation that cannot start a line according to Unicode line breaking rules
+// When these would start a line, the browser moves the preceding word to the new line
+const cannotStartLine = (segment) => {
+    if (segment.length === 0)
+        return false;
+    const firstChar = segment[0];
+    const forbiddenLineStarts = [
+        '.',
+        ',',
+        ';',
+        ':',
+        '!',
+        '?',
+        ')',
+        ']',
+        '}',
+        '"',
+        "'",
+        '"',
+        `'`,
+        '»',
+        '…',
+        '‥',
+        '·',
+        '%',
+        '‰',
+    ];
+    return forbiddenLineStarts.includes(firstChar);
+};
+export function findLineBreaks(span, rtl) {
+    const textNode = span.childNodes[0];
+    const originalText = textNode.textContent;
+    const originalRect = span.getBoundingClientRect();
+    const computedStyle = getComputedStyle(span);
+    const segmenter = new Intl.Segmenter('en', { granularity: 'word' });
+    const segments = segmenter.segment(originalText);
+    const words = Array.from(segments).map((s) => s.segment);
+    // If the text would be centered in a flexbox container
+    const lines = [];
+    let currentLine = '';
+    let testText = '';
+    let previousRect = originalRect;
+    textNode.textContent = '';
+    for (let i = 0; i < words.length; i += 1) {
+        const word = words[i];
+        testText += word;
+        let wordsToAdd = word;
+        while (typeof words[i + 1] !== 'undefined' && words[i + 1].trim() === '') {
+            testText += words[i + 1];
+            wordsToAdd += words[i + 1];
+            i++;
+        }
+        previousRect = span.getBoundingClientRect();
+        textNode.textContent = testText;
+        const collapsedText = getCollapsedText(span);
+        textNode.textContent = collapsedText;
+        const rect = span.getBoundingClientRect();
+        const currentHeight = rect.height;
+        // If height changed significantly, we had a line break
+        if (previousRect &&
+            previousRect.height !== 0 &&
+            Math.abs(currentHeight - previousRect.height) > 2) {
+            const offsetHorizontal = rtl
+                ? previousRect.right - originalRect.right
+                : previousRect.left - originalRect.left;
+            const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes('preserve');
+            let textForPreviousLine = currentLine;
+            let textForNewLine = wordsToAdd;
+            // If the segment that triggered the break can't start a line (e.g., punctuation),
+            // the browser would have moved the preceding word to the new line as well
+            if (cannotStartLine(word)) {
+                const currentLineSegments = Array.from(segmenter.segment(currentLine)).map((s) => s.segment);
+                // Find the last non-whitespace segment (the word to move)
+                let lastWordIndex = currentLineSegments.length - 1;
+                while (lastWordIndex >= 0 &&
+                    currentLineSegments[lastWordIndex].trim() === '') {
+                    lastWordIndex--;
+                }
+                if (lastWordIndex >= 0) {
+                    // Move the last word (and any trailing whitespace) to the new line
+                    textForPreviousLine = currentLineSegments
+                        .slice(0, lastWordIndex)
+                        .join('');
+                    textForNewLine =
+                        currentLineSegments.slice(lastWordIndex).join('') + wordsToAdd;
+                }
+            }
+            lines.push({
+                text: shouldCollapse ? textForPreviousLine.trim() : textForPreviousLine,
+                height: currentHeight - previousRect.height,
+                offsetHorizontal,
+            });
+            currentLine = textForNewLine;
+        }
+        else {
+            currentLine += wordsToAdd;
+        }
+    }
+    // Add the last line
+    if (currentLine) {
+        textNode.textContent = testText;
+        const rects = span.getClientRects();
+        const rect = span.getBoundingClientRect();
+        const lastRect = rects[rects.length - 1];
+        const offsetHorizontal = rtl
+            ? lastRect.right - originalRect.right
+            : lastRect.left - originalRect.left;
+        lines.push({
+            text: currentLine,
+            height: rect.height - lines.reduce((acc, curr) => acc + curr.height, 0),
+            offsetHorizontal,
+        });
+    }
+    // Reset to original text
+    textNode.textContent = originalText;
+    return lines;
+}

package/dist/drawing/text/get-collapsed-text.d.ts

@@ -0,0 +1 @@
+export declare const getCollapsedText: (span: HTMLSpanElement) => string;

package/dist/drawing/text/get-collapsed-text.js

@@ -0,0 +1,46 @@
+export const getCollapsedText = (span) => {
+    const textNode = span.firstChild;
+    if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
+        throw new Error('Span must contain a single text node');
+    }
+    const originalText = textNode.textContent || '';
+    let collapsedText = originalText;
+    // Helper to measure width
+    const measureWidth = (text) => {
+        textNode.textContent = text;
+        return span.getBoundingClientRect().width;
+    };
+    const originalWidth = measureWidth(originalText);
+    // Test leading whitespace
+    if (/^\s/.test(collapsedText)) {
+        const trimmedLeading = collapsedText.replace(/^\s+/, '');
+        const newWidth = measureWidth(trimmedLeading);
+        if (newWidth === originalWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = trimmedLeading;
+        }
+    }
+    // Test trailing whitespace (on current collapsed text)
+    if (/\s$/.test(collapsedText)) {
+        const currentWidth = measureWidth(collapsedText);
+        const trimmedTrailing = collapsedText.replace(/\s+$/, '');
+        const newWidth = measureWidth(trimmedTrailing);
+        if (newWidth === currentWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = trimmedTrailing;
+        }
+    }
+    // Test internal duplicate whitespace (on current collapsed text)
+    if (/\s\s/.test(collapsedText)) {
+        const currentWidth = measureWidth(collapsedText);
+        const collapsedInternal = collapsedText.replace(/\s\s+/g, ' ');
+        const newWidth = measureWidth(collapsedInternal);
+        if (newWidth === currentWidth) {
+            // Whitespace was collapsed by the browser
+            collapsedText = collapsedInternal;
+        }
+    }
+    // Restore original text
+    textNode.textContent = originalText;
+    return collapsedText;
+};