Throw a RangeError for NaN and infinite arguments

Colors, coordinates, sizes, angles, factors, encoder levels, the font
size and stroke, frame durations/offsets and loop counts go through
util/options.ts' finite(), which converts like before (numeric strings
work) and names the argument. NaN colors drew black, NaN coordinates
the first pixel, infinite factors saturated everything. TextLayout
keeps Infinity as "no limit", NaN throws instead of meaning no limit.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01YJgRK5qpwJEbHPuFv6kgAQ

Author: matmen

CHANGELOG.md

@@ -70,6 +70,14 @@
 
 ### Fixes
 
+- NaN and infinite arguments throw a RangeError naming the argument instead of silently drawing black, transparent
+  or nothing: colors (`fill`, `setPixelAt`, `drawBox`, `drawCircle`, `trim`, `colorToAlpha`, `Image.gradient`, the
+  text and stroke colors, `Image.rgbaToColor` and the other color conversions, so `Image.rgbToColor(NaN, 0, 0)` is no
+  longer black), coordinates and sizes (`getPixelAt`, `crop`, `composite`, `drawBox`, `drawCircle`, `contain`),
+  angles and amounts (`rotate`, `hueShift`, `roundCorners`, `fisheye`, `cropCircle`), infinite factors (`opacity`,
+  `red`, `lightness`, `brightness`, `contrast`, `gamma`, ...), the PNG compression and JPEG quality, the font size,
+  frame durations and offsets, and loop counts. Numeric strings keep working. `TextLayout`'s `maxWidth` and `maxHeight`
+  accept `Infinity` (no limit), NaN throws instead of meaning no limit.
 - The outline of `Image.renderText` (`strokeWidth`) showed through translucent text, it now only shows around the
   glyphs (opaque text renders as before).
 - The outline of `Image.renderText` follows the glyphs' antialiased edges instead of their pixels, so it is smooth

src/animation.ts

@@ -7,7 +7,7 @@ import { Frame } from './frame.ts';
 import { ImageType } from './image-type.ts';
 import { optimize, OptimizeOptions, OptimizedFrame } from './util/optimize.ts';
 import { Metadata, resolveMetadata, pngText, exifData, gifComments } from './metadata.ts';
-import { isOptions } from './util/options.ts';
+import { isOptions, finite } from './util/options.ts';
 import { MAX_PIXELS, decoding } from './util/limits.ts';
 
 // loop counts: ImageScript (like GIF) counts repetitions (-1 forever, 0 play once), APNG and WebP count plays (0 forever)
@@ -99,7 +99,7 @@ export class Animation extends Array<Frame> {
             if (!(this[i] instanceof Frame))
                 throw new TypeError(`Frame ${i} is not an instance of Frame`);
 
-        if (loopCount < -1 || isNaN(loopCount))
+        if (finite(loopCount, 'loop count') < -1)
             throw new RangeError('Invalid loop count');
 
         this.loopCount = loopCount;

src/frame.ts

@@ -1,5 +1,5 @@
 import { Image, ResizeMode, ResizeOptions, Color, TrimOptions } from './image.ts';
-import { isOptions } from './util/options.ts';
+import { isOptions, finite } from './util/options.ts';
 
 /** Names of the frame disposal modes, see {@link Frame.disposalMode} */
 export type FrameDisposalModeName = 'any' | 'keep' | 'previous' | 'background';
@@ -81,8 +81,10 @@ export class Frame extends Image {
     constructor(width: number, height: number, durationOrOptions?: number | FrameOptions, xOffset?: number, yOffset?: number, disposalMode?: FrameDisposalModeName | FrameDisposalModeId) {
         const { duration = 100, xOffset: x = 0, yOffset: y = 0, disposalMode: disposal = Frame.DISPOSAL_KEEP } =
             isOptions(durationOrOptions) ? durationOrOptions : { duration: durationOrOptions, xOffset, yOffset, disposalMode };
-        if (isNaN(duration) || duration < 0)
+        if (finite(duration, 'frame duration') < 0)
             throw new RangeError('Invalid frame duration');
+        finite(x, 'x offset');
+        finite(y, 'y offset');
 
         super(width, height);
         this.duration = duration;

src/image.ts

@@ -51,11 +51,12 @@ export class TextLayout {
     constructor(options: TextLayoutOptions = {}) {
         const { maxWidth, maxHeight, wrapStyle, verticalAlign, horizontalAlign, wrapHardBreaks } = options;
 
-        this.maxWidth = maxWidth || Infinity;
+        // (undefined and 0 mean no limit, NaN is invalid)
+        this.maxWidth = maxWidth === undefined || maxWidth === 0 ? Infinity : Number(maxWidth);
         if (isNaN(this.maxWidth) || this.maxWidth < 1)
             throw new RangeError('Invalid maxWidth');
 
-        this.maxHeight = maxHeight || Infinity;
+        this.maxHeight = maxHeight === undefined || maxHeight === 0 ? Infinity : Number(maxHeight);
         if (isNaN(this.maxHeight) || this.maxHeight < 1)
             throw new RangeError('Invalid maxHeight');
 

src/text-layout.ts

@@ -2,3 +2,16 @@
 export function isOptions<T>(value: T): value is Extract<T, object> {
     return typeof value === 'object' && value !== null && !ArrayBuffer.isView(value);
 }
+
+/**
+ * A number argument, converted like arithmetic does (numeric strings keep working); NaN and the infinities throw
+ * a RangeError naming the argument
+ */
+export function finite(value: number, name: string): number {
+    const number = Number(value);
+    if (!Number.isFinite(number)) throw new RangeError(`Invalid ${name}: ${value}`);
+    return number;
+}
+
+/** A color argument: a finite number (as RGBA, 0xrrggbbaa) */
+export const color = (value: number, name = 'color'): number => finite(value, name);

src/util/options.ts

@@ -358,7 +358,9 @@ const rgba = (image, x, y) => Image.colorToRGBA(image.getPixelAt(x, y));
     // color components are rounded and clamped instead of wrapping
     {
         assert(Image.rgbaToColor(256, -1, 127.6, 300) === 0xff0080ff, 'rgbaToColor should clamp and round, got ' + Image.rgbaToColor(256, -1, 127.6, 300).toString(16));
-        assert(Image.rgbToColor(NaN, 0, 0) === 0x000000ff, 'rgbToColor(NaN) should be 0');
+        let threw = false;
+        try { Image.rgbToColor(NaN, 0, 0); } catch (e) { threw = e instanceof RangeError; }
+        assert(threw, 'rgbToColor(NaN) should throw a RangeError');
     }
 
     // disposal modes read back as the names they are set with
@@ -655,4 +657,38 @@ const rgba = (image, x, y) => Image.colorToRGBA(image.getPixelAt(x, y));
         const nested = await Image.renderSVG(`<svg ${NS} width="100" height="100">${'<g>'.repeat(100000)}<rect width="10" height="10"/>${'</g>'.repeat(100000)}</svg>`, {size: 100, mode: Image.SVG_MODE_WIDTH});
         assert(nested.width === 100, 'deeply nested elements should render');
     }
+    {
+        // NaN and the infinities throw instead of drawing black, transparent or nothing; numeric strings still work
+        const {Frame, Animation, TextLayout} = require('..');
+        const image = () => new Image(8, 8).fill(0xff0000ff);
+        const calls = {
+            rgbaToColor: v => Image.rgbaToColor(v, 0, 0, 255), hslaToColor: v => Image.hslaToColor(v, 0.5, 0.5, 1), colorToRGBA: v => Image.colorToRGBA(v),
+            getPixelAt: v => image().getPixelAt(v, 1), setPixelAt: v => image().setPixelAt(1, 1, v), fill: v => image().fill(v), contain: v => image().contain(v, 4),
+            crop: v => image().crop(v, 0, 2, 2), trim: v => image().trim(v), drawBox: v => image().drawBox(0, 0, v, 2, 0), drawCircle: v => image().drawCircle(2, 2, v, 0),
+            cropCircle: v => image().cropCircle(false, v), opacity: v => image().opacity(v), red: v => image().red(v), lightness: v => image().lightness(v),
+            composite: v => image().composite(image(), v, 0), hueShift: v => image().hueShift(v), brightness: v => image().brightness(v), gamma: v => image().gamma(v),
+            colorToAlpha: v => image().colorToAlpha(v), rotate: v => image().rotate(v, false), gradient: v => Image.gradient({0: v, 1: 0}),
+            roundCorners: v => image().roundCorners(v), fisheye: v => image().fisheye(v), encode: v => image().encode(v), encodeJPEG: v => image().encodeJPEG(v),
+            frame: v => new Frame(4, 4, v), animation: v => new Animation([new Frame(4, 4)], v),
+        };
+        for (const [name, call] of Object.entries(calls))
+            for (const value of [NaN, Infinity, -Infinity]) {
+                let error = null;
+                try {
+                    await call(value);
+                } catch (e) {
+                    error = e;
+                }
+                if (!(error instanceof RangeError)) panic(`${name}(${value}) should throw a RangeError, got ${error}`);
+            }
+        const font = require('fs').readFileSync('./tests/fonts/opensans bold.ttf');
+        for (const [name, call] of Object.entries({size: v => Image.renderText(font, v, 'a'), color: v => Image.renderText(font, 12, 'a', v),
+            maxWidth: v => new TextLayout({maxWidth: v})}))
+            if (!await Promise.resolve().then(() => call(NaN)).then(() => false, e => e instanceof RangeError)) panic(`renderText: a NaN ${name} should throw a RangeError`);
+        // (no limit is a valid layout)
+        new TextLayout({maxWidth: Infinity, maxHeight: Infinity});
+
+        const strings = image().crop('1', '1', '4', '4').rotate('45').opacity('0.5').composite(image(), '1', '2');
+        if (strings.width !== 6) panic('numeric strings should keep working');
+    }
 })();