@servicetitan/dte-pdf-editor 1.93.3 → 1.95.0

package/src/utils/field/__tests__/get-field-max-length.utils.test.ts

@@ -0,0 +1,751 @@
+import { FieldTypeEnum, type PdfField } from '../../../interface/types';
+import { pointsToPixels } from '../../pdf';
+import { estimateTextCapacity, getFieldMaxLength } from '../get-field-max-length.utils';
+import { countWrappedLines, type TextMeasurer } from '../text-wrap.utils';
+
+/*
+ * Glyph advance widths (1000 units per em) for printable ASCII, U+0020..U+007E, measured from
+ * Arial, Arial Bold and Times New Roman. They back a fake canvas below, so the tests run against
+ * real proportional metrics (an `i` is a fifth of a `W`) and stay identical on every machine.
+ */
+const ARIAL_WIDTHS = [
+    278, 278, 355, 556, 556, 889, 667, 191, 333, 333, 389, 584, 278, 333, 278, 278, 556, 556, 556,
+    556, 556, 556, 556, 556, 556, 556, 278, 278, 584, 584, 584, 556, 1015, 667, 667, 722, 722, 667,
+    611, 778, 722, 278, 500, 667, 556, 833, 722, 778, 667, 778, 722, 667, 611, 722, 667, 944, 667,
+    667, 611, 278, 278, 278, 469, 556, 333, 556, 556, 500, 556, 556, 278, 556, 556, 222, 222, 500,
+    222, 833, 556, 556, 556, 556, 333, 500, 278, 556, 500, 722, 500, 500, 500, 334, 260, 334, 584,
+];
+
+const ARIAL_BOLD_WIDTHS = [
+    278, 333, 474, 556, 556, 889, 722, 238, 333, 333, 389, 584, 278, 333, 278, 278, 556, 556, 556,
+    556, 556, 556, 556, 556, 556, 556, 333, 333, 584, 584, 584, 611, 975, 722, 722, 722, 722, 667,
+    611, 778, 722, 278, 556, 722, 611, 833, 722, 778, 667, 778, 722, 667, 611, 722, 667, 944, 667,
+    667, 611, 333, 278, 333, 584, 556, 333, 556, 611, 556, 611, 556, 333, 611, 611, 278, 278, 556,
+    278, 889, 611, 611, 611, 611, 389, 556, 333, 611, 556, 778, 556, 556, 500, 389, 280, 389, 584,
+];
+
+const TIMES_WIDTHS = [
+    250, 333, 408, 500, 500, 833, 778, 180, 333, 333, 500, 564, 250, 333, 250, 278, 500, 500, 500,
+    500, 500, 500, 500, 500, 500, 500, 278, 278, 564, 564, 564, 444, 921, 722, 667, 667, 722, 611,
+    556, 722, 722, 333, 389, 722, 611, 889, 722, 722, 556, 722, 667, 556, 611, 722, 722, 944, 722,
+    722, 611, 333, 278, 333, 469, 500, 333, 444, 500, 444, 500, 444, 333, 500, 500, 278, 278, 500,
+    278, 778, 500, 500, 500, 500, 333, 389, 278, 500, 500, 722, 500, 500, 444, 480, 200, 480, 541,
+];
+
+const COURIER_WIDTH = 600;
+const CJK_WIDTH = 1000;
+const OTHER_WIDTH = 556;
+
+type FontMetrics = (char: string) => number;
+
+const tableMetrics = (widths: number[]): FontMetrics => {
+    return char => {
+        const code = char.codePointAt(0)!;
+        if (code >= 0x20 && code <= 0x7e) {
+            return widths[code - 0x20];
+        }
+        return code >= 0x2e80 ? CJK_WIDTH : OTHER_WIDTH;
+    };
+};
+
+const METRICS = {
+    arial: tableMetrics(ARIAL_WIDTHS),
+    arialBold: tableMetrics(ARIAL_BOLD_WIDTHS),
+    times: tableMetrics(TIMES_WIDTHS),
+    courier: () => COURIER_WIDTH,
+} satisfies Record<string, FontMetrics>;
+
+type FontKey = keyof typeof METRICS;
+
+/** Resolves the font a canvas context was given, e.g. `bold 12.8px Times New Roman, serif`. */
+const parseCanvasFont = (font: string) => {
+    const [, weight, size, family] = /^(normal|bold)\s+([\d.]+)px\s+(.+)$/.exec(font)!;
+    const familyName = family.toLowerCase();
+    let key: FontKey = 'arial';
+    if (familyName.includes('courier')) {
+        key = 'courier';
+    } else if (familyName.includes('times')) {
+        key = 'times';
+    } else if (weight === 'bold') {
+        key = 'arialBold';
+    }
+    return { key, sizePx: Number(size) };
+};
+
+const createFakeCanvasContext = () => {
+    let font = '';
+    return {
+        get font() {
+            return font;
+        },
+        set font(value: string) {
+            font = value;
+        },
+        measureText: (text: string) => {
+            const { key, sizePx } = parseCanvasFont(font);
+            const em = Array.from(text).reduce((sum, char) => sum + METRICS[key](char) / 1000, 0);
+            return { width: em * sizePx };
+        },
+    };
+};
+
+const measurerFor = (key: FontKey, sizePx: number): TextMeasurer => {
+    return text => {
+        return Array.from(text).reduce(
+            (sum, char) => sum + (METRICS[key](char) / 1000) * sizePx,
+            0,
+        );
+    };
+};
+
+/** How many leading characters of `text` (repeated as needed) fit in `width` on one line. */
+const countCharsThatFit = (text: string, width: number, measure: TextMeasurer) => {
+    const source = text.repeat(40);
+    let count = 0;
+    while (count < source.length && measure(source.slice(0, count + 1)) <= width) {
+        count += 1;
+    }
+    return count;
+};
+
+const mean = (values: number[]) => values.reduce((sum, v) => sum + v, 0) / values.length;
+
+/** Things people really type into a single-line field: names, addresses, emails, notes. */
+const REALISTIC_ENTRIES = [
+    'Jonathan Alexander Smith',
+    '1234 Elm Street, Apartment 5B',
+    'jonathan.smith@example.com',
+    'Maria Garcia Lopez',
+    'Springfield, IL 62704',
+    'Customer approved estimate #48213 for $1,250.00',
+    'Replace the capacitor and clean the condenser coils',
+    'Call before arriving; dog in backyard',
+];
+
+const PARAGRAPHS = [
+    'The customer reported that the air conditioner stopped cooling on Tuesday morning. The technician inspected the outdoor unit, found a failed capacitor and a dirty condenser coil, replaced the capacitor, and cleaned the coil. ',
+    'The Contractor shall perform the work in a professional manner and in accordance with all applicable laws and regulations. Payment is due within thirty days of the invoice date. ',
+];
+
+const buildField = (overrides: Partial<PdfField> = {}): PdfField => ({
+    id: 'field-1',
+    type: FieldTypeEnum.fillable,
+    subType: 'text',
+    x: 0,
+    y: 0,
+    page: 1,
+    label: 'Label',
+    width: 200,
+    height: 25,
+    ...overrides,
+});
+
+const buildStyles = (
+    fontSize: number,
+    overrides: NonNullable<PdfField['styles']> = {},
+): NonNullable<PdfField['styles']> => ({ fontSize, ...overrides });
+
+const px = (points: number) => pointsToPixels(points);
+
+/** Chrome keeps this much of a number input free of text for its (hidden) spin button. */
+const SPIN_BUTTON_PX = 15;
+
+describe('getFieldMaxLength', () => {
+    let getContext: jest.SpyInstance;
+
+    const subject = (field: PdfField) => getFieldMaxLength(field);
+
+    beforeAll(() => {
+        getContext = jest
+            .spyOn(HTMLCanvasElement.prototype, 'getContext')
+            .mockImplementation(() => createFakeCanvasContext() as unknown as RenderingContext);
+    });
+
+    afterAll(() => {
+        getContext.mockRestore();
+    });
+
+    describe('single-line text', () => {
+        test('is the number of typical characters that fit the width', () => {
+            const field = buildField({ width: 200 });
+            const measure = measurerFor('arial', px(8));
+            const actual = REALISTIC_ENTRIES.map(entry => countCharsThatFit(entry, 200, measure));
+
+            expect(Math.abs(subject(field)! - mean(actual))).toBeLessThanOrEqual(1.5);
+        });
+
+        test('grows in proportion to the width', () => {
+            const small = subject(buildField({ width: 60 }))!;
+            const medium = subject(buildField({ width: 200 }))!;
+            const large = subject(buildField({ width: 800 }))!;
+
+            expect(small).toBeLessThan(medium);
+            expect(medium).toBeLessThan(large);
+            expect(Math.abs(large - 4 * medium)).toBeLessThanOrEqual(4);
+        });
+
+        test('never returns less than one character, even in a sliver of a field', () => {
+            expect(subject(buildField({ width: 2 }))).toBe(1);
+            expect(subject(buildField({ width: 0 }))).toBe(1);
+        });
+
+        test('is not affected by the field height', () => {
+            expect(subject(buildField({ height: 10 }))).toBe(subject(buildField({ height: 400 })));
+        });
+
+        test('shrinks as the font size grows, roughly inversely', () => {
+            const small = subject(buildField({ styles: buildStyles(6) }))!;
+            const normal = subject(buildField({ styles: buildStyles(8) }))!;
+            const large = subject(buildField({ styles: buildStyles(16) }))!;
+
+            expect(small).toBeGreaterThan(normal);
+            expect(normal).toBeGreaterThan(large);
+            expect(Math.abs(normal - 2 * large)).toBeLessThanOrEqual(2);
+        });
+
+        test('shrinks for bold text, which has wider glyphs', () => {
+            const regular = subject(buildField({ styles: buildStyles(8) }))!;
+            const bold = subject(buildField({ styles: buildStyles(8, { fontWeight: 'bold' }) }))!;
+
+            expect(bold).toBeLessThan(regular);
+        });
+
+        test('follows the font family: narrow serif > sans-serif > monospace', () => {
+            const forFamily = (fontFamily: string) => {
+                return subject(buildField({ styles: buildStyles(8, { fontFamily }) }))!;
+            };
+
+            const times = forFamily('Times New Roman, serif');
+            const arial = forFamily('Arial, Helvetica, sans-serif');
+            const courier = forFamily('Courier New, monospace');
+
+            expect(times).toBeGreaterThan(arial);
+            expect(arial).toBeGreaterThan(courier);
+        });
+
+        test('is exact for a monospace font, where every glyph has the same width', () => {
+            const field = buildField({
+                width: 200,
+                styles: buildStyles(8, { fontFamily: 'Courier New, monospace' }),
+            });
+
+            expect(subject(field)).toBe(Math.floor(200 / (0.6 * px(8))));
+        });
+
+        test('measures with the field font, size and weight', () => {
+            subject(
+                buildField({
+                    width: 321,
+                    styles: buildStyles(11, { fontWeight: 'bold', fontFamily: 'Times New Roman' }),
+                }),
+            );
+            const ctx = getContext.mock.results.at(-1)!.value as { font: string };
+
+            expect(ctx.font).toBe(`bold ${px(11)}px Times New Roman`);
+        });
+
+        test('follows the width when a field is resized', () => {
+            const widths = [40, 80, 120, 160, 200, 240, 400, 800];
+            const results = widths.map(width => subject(buildField({ width }))!);
+
+            expect(results).toEqual([...results].sort((a, b) => a - b));
+        });
+    });
+
+    describe('number', () => {
+        test('fits the widest typeable glyph, so any value of that length fits', () => {
+            const field = buildField({ subType: 'number', width: 200 });
+            const measure = measurerFor('arial', px(8));
+            const maxLength = subject(field)!;
+
+            const usableWidth = 200 - SPIN_BUTTON_PX;
+
+            // Arial digits are 0.556em, the widest of the digits, `.` and `-`
+            expect(maxLength).toBe(Math.floor(usableWidth / (0.556 * px(8))));
+
+            for (const pattern of ['0123456789', '-0.123456789', '8888888888', '99.99-99.99']) {
+                const atLimit = pattern.repeat(10).slice(0, maxLength);
+                expect(measure(atLimit)).toBeLessThanOrEqual(usableWidth);
+            }
+            expect(measure('0'.repeat(maxLength + 1))).toBeGreaterThan(usableWidth);
+        });
+
+        test('holds integers, decimals and negative numbers of that length', () => {
+            const field = buildField({ subType: 'number', width: 120 });
+            const measure = measurerFor('arial', px(8));
+            const maxLength = subject(field)!;
+
+            const integer = '7'.repeat(maxLength);
+            const decimal = `${'7'.repeat(maxLength - 3)}.77`;
+            const negative = `-${'7'.repeat(maxLength - 1)}`;
+
+            for (const value of [integer, decimal, negative]) {
+                expect(value).toHaveLength(maxLength);
+                expect(measure(value)).toBeLessThanOrEqual(120 - SPIN_BUTTON_PX);
+            }
+        });
+
+        test('scales to large numbers in wide fields', () => {
+            expect(subject(buildField({ subType: 'number', width: 900 }))).toBe(
+                Math.floor((900 - SPIN_BUTTON_PX) / (0.556 * px(8))),
+            );
+        });
+
+        test('uses digit widths, not the average text width', () => {
+            const number = subject(buildField({ subType: 'number', width: 200 }))!;
+            const text = subject(buildField({ subType: 'text', width: 200 }))!;
+
+            expect(number).toBeLessThan(text);
+        });
+
+        test('follows font size and family', () => {
+            const forStyles = (styles: PdfField['styles']) => {
+                return subject(buildField({ subType: 'number', styles }))!;
+            };
+
+            expect(forStyles(buildStyles(16))).toBeLessThan(forStyles(buildStyles(8)));
+            expect(forStyles(buildStyles(8, { fontFamily: 'Courier New' }))).toBe(
+                Math.floor((200 - SPIN_BUTTON_PX) / (0.6 * px(8))),
+            );
+        });
+
+        test('leaves room for the number input spin button, which text is clipped by', () => {
+            const withoutGutter = Math.floor(200 / (0.556 * px(8)));
+
+            expect(subject(buildField({ subType: 'number', width: 200 }))).toBeLessThan(
+                withoutGutter,
+            );
+        });
+
+        test('is not affected by the field height', () => {
+            expect(subject(buildField({ subType: 'number', height: 10 }))).toBe(
+                subject(buildField({ subType: 'number', height: 300 })),
+            );
+        });
+    });
+
+    describe('multiline text', () => {
+        const multiline = (overrides: Partial<PdfField> = {}) => {
+            return buildField({ multiline: true, ...overrides });
+        };
+
+        test('a field shorter than one line still holds one line of text', () => {
+            const tiny = subject(multiline({ height: 5 }))!;
+            const oneLine = subject(multiline({ height: 12 }))!;
+
+            expect(tiny).toBe(oneLine);
+            expect(tiny).toBeGreaterThan(0);
+        });
+
+        test('one line of a multiline field holds no more than a single-line field', () => {
+            const wrapped = subject(multiline({ height: 12 }))!;
+            const unwrapped = subject(buildField())!;
+
+            expect(wrapped).toBeLessThanOrEqual(unwrapped);
+            expect(wrapped).toBeGreaterThan(unwrapped * 0.7);
+        });
+
+        test('grows with the number of lines that fit the height', () => {
+            const lines = [1, 2, 4, 8].map(count => {
+                return subject(multiline({ height: Math.ceil(count * px(8)) + 1 }))!;
+            });
+
+            expect(lines).toEqual([...lines].sort((a, b) => a - b));
+            expect(Math.abs(lines[3] - 8 * lines[0])).toBeLessThan(0.15 * lines[3]);
+        });
+
+        test('does not count a partially visible line', () => {
+            const fourLines = Math.floor(4 * px(8));
+            const nearlyFive = Math.floor(5 * px(8)) - 1;
+
+            expect(subject(multiline({ height: nearlyFive }))).toBe(
+                subject(multiline({ height: fourLines + 1 })),
+            );
+        });
+
+        test('grows with the width', () => {
+            const narrow = subject(multiline({ width: 100, height: 100 }))!;
+            const wide = subject(multiline({ width: 400, height: 100 }))!;
+
+            expect(wide).toBeGreaterThan(3 * narrow);
+        });
+
+        test('is a large capacity for a large field', () => {
+            const small = subject(multiline({ width: 100, height: 30 }))!;
+            const large = subject(multiline({ width: 900, height: 600 }))!;
+
+            expect(large).toBeGreaterThan(100 * small);
+        });
+
+        test('loses less to wrapping the wider the field gets', () => {
+            const efficiency = (width: number) => {
+                const wrapped = subject(multiline({ width, height: 1000 }))!;
+                const rawPerLine = subject(buildField({ width }))!;
+                return wrapped / (rawPerLine * Math.floor(1000 / px(8)));
+            };
+
+            expect(efficiency(80)).toBeLessThan(efficiency(300));
+            expect(efficiency(300)).toBeLessThan(1);
+        });
+
+        test('accounts for the space word wrapping wastes, unlike chars-per-line x lines', () => {
+            const field = multiline({ width: 100, height: 100 });
+            const naive = subject(buildField({ width: 100 }))! * Math.floor(100 / px(8));
+
+            expect(subject(field)!).toBeLessThan(naive);
+        });
+
+        test('shrinks by about 4x when the font size doubles: fewer lines, shorter lines', () => {
+            const small = subject(multiline({ width: 300, height: 200, styles: buildStyles(6) }))!;
+            const large = subject(multiline({ width: 300, height: 200, styles: buildStyles(12) }))!;
+
+            expect(small / large).toBeGreaterThan(3.2);
+            expect(small / large).toBeLessThan(4.8);
+        });
+
+        test('shrinks for bold text and follows the font family', () => {
+            const forStyles = (styles: PdfField['styles']) => {
+                return subject(multiline({ width: 300, height: 120, styles }))!;
+            };
+
+            expect(forStyles(buildStyles(8, { fontWeight: 'bold' }))).toBeLessThan(
+                forStyles(buildStyles(8)),
+            );
+            expect(forStyles(buildStyles(8, { fontFamily: 'Courier New' }))).toBeLessThan(
+                forStyles(buildStyles(8)),
+            );
+        });
+
+        test.each([
+            { width: 120, height: 60 },
+            { width: 200, height: 100 },
+            { width: 350, height: 200 },
+            { width: 600, height: 400 },
+        ])('ordinary paragraphs of that length fit: $width x $height', ({ width, height }) => {
+            const maxLength = subject(multiline({ width, height }))!;
+            const maxLines = Math.floor(height / px(8));
+            const measure = measurerFor('arial', px(8));
+
+            for (const paragraph of PARAGRAPHS) {
+                const text = paragraph.repeat(20).slice(0, maxLength);
+                expect(countWrappedLines(text, width, measure)).toBeLessThanOrEqual(maxLines);
+            }
+        });
+
+        test('stays within a few percent of what ordinary prose really fits', () => {
+            const width = 350;
+            const height = 200;
+            const maxLength = subject(multiline({ width, height }))!;
+            const maxLines = Math.floor(height / px(8));
+            const measure = measurerFor('arial', px(8));
+
+            const fits = (text: string, length: number) => {
+                return countWrappedLines(text.slice(0, length), width, measure) <= maxLines;
+            };
+            const proseCapacity = PARAGRAPHS.map(paragraph => {
+                const text = paragraph.repeat(40);
+                let length = 0;
+                while (fits(text, length + 1)) {
+                    length += 1;
+                }
+                return length;
+            });
+
+            expect(maxLength).toBeGreaterThan(0.85 * mean(proseCapacity));
+            expect(maxLength).toBeLessThan(1.1 * mean(proseCapacity));
+        });
+    });
+
+    describe('regression: capacity was under-reported by ~20%', () => {
+        /** The previous sample: one of each letter, both cases, and digit. Capitals and digits are wide. */
+        const LEGACY_SAMPLE = 'abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
+
+        test('a field the old estimate capped at 16 characters really holds 19-21 of typical text', () => {
+            const measure = measurerFor('arial', px(8));
+            const legacyGlyphWidth = measure(LEGACY_SAMPLE) / LEGACY_SAMPLE.length;
+            const width = Math.round(16.5 * legacyGlyphWidth);
+            const legacyMaxLength = Math.floor(width / legacyGlyphWidth);
+            const actual = REALISTIC_ENTRIES.map(entry => countCharsThatFit(entry, width, measure));
+
+            // premise: the old algorithm capped this field at 16...
+            expect(legacyMaxLength).toBe(16);
+            // ...while 3-5 more characters of ordinary text visibly fit
+            expect(mean(actual)).toBeGreaterThanOrEqual(19);
+            expect(mean(actual)).toBeLessThanOrEqual(21);
+
+            const maxLength = subject(buildField({ width }))!;
+
+            expect(maxLength).toBeGreaterThanOrEqual(legacyMaxLength + 3);
+            expect(Math.abs(maxLength - mean(actual))).toBeLessThanOrEqual(1.5);
+        });
+
+        test('the estimate stays near the real fit across widths and sizes, not only at one point', () => {
+            for (const fontSize of [6, 8, 12, 16]) {
+                for (const width of [60, 150, 300, 700]) {
+                    const measure = measurerFor('arial', px(fontSize));
+                    const actual = mean(
+                        REALISTIC_ENTRIES.map(entry => countCharsThatFit(entry, width, measure)),
+                    );
+                    const maxLength = subject(
+                        buildField({ width, styles: buildStyles(fontSize) }),
+                    )!;
+
+                    expect(Math.abs(maxLength - actual)).toBeLessThanOrEqual(
+                        Math.max(1.5, actual * 0.08),
+                    );
+                }
+            }
+        });
+    });
+
+    describe('capacity given what is typed', () => {
+        const NARROW = 'jrfnrnfjrnfjrnfjrnfjrnfjrnfjrnfjr';
+
+        test('with nothing typed it is the capacity of the empty field', () => {
+            expect(subject(buildField())).toBe(getFieldMaxLength(buildField(), ''));
+        });
+
+        test('narrow text leaves room that a count of 33 would have refused', () => {
+            const measure = measurerFor('arial', px(8));
+            const field = buildField({ width: 200 });
+            const emptyCapacity = subject(field)!;
+
+            // the reported case: 33 narrow characters fill barely two thirds of the field
+            expect(NARROW).toHaveLength(emptyCapacity);
+            expect(measure(NARROW)).toBeLessThan(0.75 * 200);
+            expect(getFieldMaxLength(field, NARROW)!).toBeGreaterThanOrEqual(emptyCapacity + 8);
+        });
+
+        test('wide text leaves less room than narrow text of the same length', () => {
+            const field = buildField({ width: 200 });
+
+            expect(getFieldMaxLength(field, 'i'.repeat(12))!).toBeGreaterThan(
+                getFieldMaxLength(field, 'W'.repeat(12))!,
+            );
+        });
+
+        test('is the characters typed plus the typical characters that still fit', () => {
+            const field = buildField({ width: 200 });
+            const typed = 'Jonathan Smith';
+            const measure = measurerFor('arial', px(8));
+            const room = (200 - measure(typed)) / (0.46 * px(8));
+
+            expect(Math.abs(getFieldMaxLength(field, typed)! - (typed.length + room))).toBeLessThan(
+                3,
+            );
+        });
+
+        test('a value that already overflows has no room left, and is never cut short', () => {
+            const overflowing = 'W'.repeat(40);
+
+            expect(getFieldMaxLength(buildField({ width: 100 }), overflowing)).toBe(40);
+        });
+
+        test('shrinks as wider text is typed and grows again when it is deleted', () => {
+            const field = buildField({ width: 200 });
+            const capacities = ['', 'W', 'WW', 'WWW', 'WW', 'W', ''].map(value => {
+                return getFieldMaxLength(field, value)!;
+            });
+
+            expect(capacities[3]).toBeLessThan(capacities[0] + 3);
+            expect(capacities[0]).toBe(capacities[6]);
+            expect(capacities[1]).toBe(capacities[5]);
+        });
+
+        test('a number field counts the typed digits against the room left', () => {
+            const field = buildField({ subType: 'number', width: 200 });
+
+            expect(getFieldMaxLength(field, '12345')).toBe(subject(field));
+        });
+
+        test('multiline: explicit newlines use up lines, leaving less room than plain text', () => {
+            const field = buildField({ multiline: true, width: 300, height: 100 });
+            const withNewlines = '\n\n\n\n\n';
+            const withLetters = 'abcde';
+
+            expect(getFieldMaxLength(field, withLetters)!).toBeGreaterThan(
+                getFieldMaxLength(field, withNewlines)!,
+            );
+        });
+
+        test('multiline: a value that needs more lines than fit has no room left', () => {
+            const field = buildField({ multiline: true, width: 300, height: 40 });
+            const lines = Math.floor(40 / px(8));
+            const tooTall = Array.from({ length: lines + 1 }, () => 'x').join('\n');
+
+            expect(getFieldMaxLength(field, tooTall)).toBe(tooTall.length);
+        });
+
+        test('multiline: a value with every line full has almost no room left', () => {
+            const field = buildField({ multiline: true, width: 300, height: 40 });
+            const lines = Math.floor(40 / px(8));
+            // 300px holds 24 W (12.1px each) with under a typical glyph to spare
+            const full = Array.from({ length: lines }, () => 'W'.repeat(24)).join('\n');
+
+            expect(getFieldMaxLength(field, full)! - full.length).toBeLessThanOrEqual(1);
+        });
+
+        test('multiline: room left is what remains after the lines already used', () => {
+            const field = buildField({ multiline: true, width: 300, height: 100 });
+            const empty = getFieldMaxLength(field)!;
+            const oneLineUsed = getFieldMaxLength(field, 'Typed on the first line\n')!;
+            const lines = Math.floor(100 / px(8));
+
+            expect(oneLineUsed).toBeLessThan(empty);
+            expect(oneLineUsed).toBeGreaterThan(empty * ((lines - 2) / lines));
+        });
+    });
+
+    describe('fields without a free-form text capacity', () => {
+        test.each(['checkbox', 'radio', 'date', 'dropdown'] as const)(
+            'is undefined for %s',
+            subType => {
+                expect(subject(buildField({ subType }))).toBeUndefined();
+            },
+        );
+
+        test('is undefined for non-fillable field types', () => {
+            expect(
+                subject(buildField({ type: FieldTypeEnum.generic, subType: 'text' })),
+            ).toBeUndefined();
+        });
+    });
+});
+
+describe('getFieldMaxLength without canvas support', () => {
+    test('falls back to width ratios of the font size', () => {
+        const getContext = jest
+            .spyOn(HTMLCanvasElement.prototype, 'getContext')
+            .mockReturnValue(null);
+
+        jest.isolateModules(() => {
+            // eslint-disable-next-line @typescript-eslint/no-require-imports
+            const { getFieldMaxLength: isolated } = require('../get-field-max-length.utils');
+            const textLength = isolated(buildField({ width: 200 }));
+            const numberLength = isolated(buildField({ subType: 'number', width: 200 }));
+            const boldLength = isolated(
+                buildField({ width: 200, styles: buildStyles(8, { fontWeight: 'bold' }) }),
+            );
+
+            expect(textLength).toBeGreaterThan(25);
+            expect(textLength).toBeLessThan(40);
+            expect(numberLength).toBe(Math.floor((200 - SPIN_BUTTON_PX) / (0.556 * px(8))));
+            expect(boldLength).toBeLessThan(textLength);
+        });
+
+        getContext.mockRestore();
+    });
+});
+
+describe('estimateTextCapacity', () => {
+    const monospace: TextMeasurer = text => Array.from(text).length * 10;
+
+    const subject = (
+        layout: Parameters<typeof estimateTextCapacity>[0]['layout'],
+        overrides: Partial<Parameters<typeof estimateTextCapacity>[0]> = {},
+    ) => {
+        return estimateTextCapacity({
+            layout,
+            width: 200,
+            height: 100,
+            lineHeight: 10,
+            measure: monospace,
+            ...overrides,
+        });
+    };
+
+    test('single-line is the width divided by the glyph width', () => {
+        expect(subject('single-line')).toBe(20);
+    });
+
+    test('number is the width divided by the widest typeable glyph', () => {
+        const digitsWiderThanSymbols: TextMeasurer = text => {
+            return Array.from(text).reduce((sum, char) => sum + ('.-'.includes(char) ? 4 : 10), 0);
+        };
+
+        expect(subject('number', { measure: digitsWiderThanSymbols })).toBe(20);
+    });
+
+    test('number is bounded by an unusually wide digit', () => {
+        const wideEight: TextMeasurer = text => {
+            return Array.from(text).reduce((sum, char) => sum + (char === '8' ? 12.5 : 10), 0);
+        };
+
+        expect(subject('number', { measure: wideEight })).toBe(16);
+    });
+
+    test('an exact fit is not lost to floating point error', () => {
+        const awkward: TextMeasurer = text => Array.from(text).length * 0.1;
+
+        expect(subject('number', { width: 2.8, measure: awkward })).toBe(28);
+    });
+
+    test('multiline fits no more than lines x chars per line', () => {
+        const capacity = subject('multiline', { width: 100, height: 50, lineHeight: 10 });
+
+        expect(capacity).toBeLessThanOrEqual(5 * 10);
+        expect(capacity).toBeGreaterThan(25);
+    });
+
+    test('multiline reports a single line of room when the height is below one line', () => {
+        expect(subject('multiline', { height: 4 })).toBe(subject('multiline', { height: 10 }));
+    });
+
+    test('multiline grows as height adds lines', () => {
+        const two = subject('multiline', { height: 20 })!;
+        const four = subject('multiline', { height: 40 })!;
+
+        expect(four).toBeGreaterThan(1.7 * two);
+        expect(four).toBeLessThan(2.3 * two);
+    });
+
+    test('the characters already typed count towards the capacity', () => {
+        expect(subject('single-line', { value: 'abcde' })).toBe(20);
+        expect(subject('single-line', { value: 'a'.repeat(15) })).toBe(20);
+    });
+
+    test('each kind subtracts the width the typed text uses before counting the room left', () => {
+        const narrowI: TextMeasurer = text => {
+            return Array.from(text).reduce((sum, char) => sum + (char === 'i' ? 2 : 10), 0);
+        };
+
+        // 10 'i' use 20px of 200px: the other 180px hold 18 more 10px glyphs on top of the 10 typed
+        expect(subject('single-line', { measure: narrowI, value: 'i'.repeat(10) })).toBe(28);
+        expect(subject('number', { measure: narrowI, value: 'i'.repeat(10) })).toBe(28);
+    });
+
+    test('a value that already overflows has no room, and its capacity is its own length', () => {
+        const value = 'a'.repeat(30);
+
+        expect(subject('single-line', { value })).toBe(30);
+        expect(subject('number', { value })).toBe(30);
+        expect(subject('multiline', { width: 100, height: 20, value: 'a'.repeat(100) })).toBe(100);
+    });
+
+    test('multiline continues after the last typed word instead of gluing text onto it', () => {
+        const endsMidWord = subject('multiline', { width: 100, height: 20, value: 'aaaaaaa' })!;
+        const endsAfterSpace = subject('multiline', { width: 100, height: 20, value: 'aaaaaaa ' })!;
+
+        expect(endsMidWord).toBeGreaterThan(7);
+        expect(endsAfterSpace).toBeGreaterThan(8);
+    });
+
+    test('always returns at least 1', () => {
+        expect(subject('single-line', { width: 1 })).toBe(1);
+        expect(subject('number', { width: 1 })).toBe(1);
+        expect(subject('multiline', { width: 1, height: 1 })).toBe(1);
+    });
+
+    test('has no limit when the text cannot be measured', () => {
+        for (const layout of ['single-line', 'number', 'multiline'] as const) {
+            expect(subject(layout, { measure: () => NaN })).toBeUndefined();
+            expect(subject(layout, { measure: () => 0 })).toBeUndefined();
+        }
+    });
+
+    test('caps absurdly large fields at a sane limit', () => {
+        for (const layout of ['single-line', 'number', 'multiline'] as const) {
+            expect(subject(layout, { width: 1e6, height: 1e6 })).toBe(10_000);
+        }
+    });
+});