@js-draw/math 1.21.3 → 1.23.1

package/dist/mjs/shapes/Path.mjs

@@ -7,6 +7,7 @@ import  PointShape2D  from './PointShape2D.mjs';
 import  toRoundedString  from '../rounding/toRoundedString.mjs';
 import  toStringOfSamePrecision  from '../rounding/toStringOfSamePrecision.mjs';
 import  convexHull2Of  from '../utils/convexHull2Of.mjs';
+/** Identifiers for different path commands. These commands can make up a {@link Path}. */
 export var PathCommandType;
 (function (PathCommandType) {
     PathCommandType[PathCommandType["LineTo"] = 0] = "LineTo";
@@ -319,9 +320,7 @@ export class Path {
         const maxRaymarchSteps = 8;
         // Start raymarching from each of these points. This allows detection of multiple
         // intersections.
-        const startPoints = [
-            line.p1, ...additionalRaymarchStartPoints, line.p2
-        ];
+        const startPoints = [line.p1, ...additionalRaymarchStartPoints, line.p2];
         // Converts a point ON THE LINE to a parameter
         const pointToParameter = (point) => {
             // Because line.direction is a unit vector, this computes the length
@@ -427,7 +426,9 @@ export class Path {
             return [];
         }
         if (this.parts.length === 0) {
-            return new Path(this.startPoint, [{ kind: PathCommandType.MoveTo, point: this.startPoint }]).intersection(line, strokeRadius);
+            return new Path(this.startPoint, [
+                { kind: PathCommandType.MoveTo, point: this.startPoint },
+            ]).intersection(line, strokeRadius);
         }
         let index = 0;
         for (const part of this.geometry) {
@@ -448,7 +449,7 @@ export class Path {
         const doRaymarching = strokeRadius && strokeRadius > 1e-8;
         if (doRaymarching) {
             // Starting points for raymarching (in addition to the end points of the line).
-            const startPoints = result.map(intersection => intersection.point);
+            const startPoints = result.map((intersection) => intersection.point);
             result = this.raymarchIntersectionWith(line, strokeRadius, startPoints);
         }
         return result;
@@ -501,7 +502,8 @@ export class Path {
      */
     spliced(deleteFrom, deleteTo, insert, options) {
         const isBeforeOrEqual = (a, b) => {
-            return a.curveIndex < b.curveIndex || (a.curveIndex === b.curveIndex && a.parameterValue <= b.parameterValue);
+            return (a.curveIndex < b.curveIndex ||
+                (a.curveIndex === b.curveIndex && a.parameterValue <= b.parameterValue));
         };
         if (isBeforeOrEqual(deleteFrom, deleteTo)) {
             //          deleteFrom        deleteTo
@@ -539,15 +541,15 @@ export class Path {
         //
         // Bounds checking & reversal.
         //
-        while (splitAt.length > 0
-            && splitAt[splitAt.length - 1].curveIndex >= this.parts.length - 1
-            && splitAt[splitAt.length - 1].parameterValue >= 1) {
+        while (splitAt.length > 0 &&
+            splitAt[splitAt.length - 1].curveIndex >= this.parts.length - 1 &&
+            splitAt[splitAt.length - 1].parameterValue >= 1) {
             splitAt.pop();
         }
         splitAt.reverse(); // .reverse() <-- We're `.pop`ing from the end
-        while (splitAt.length > 0
-            && splitAt[splitAt.length - 1].curveIndex <= 0
-            && splitAt[splitAt.length - 1].parameterValue <= 0) {
+        while (splitAt.length > 0 &&
+            splitAt[splitAt.length - 1].curveIndex <= 0 &&
+            splitAt[splitAt.length - 1].parameterValue <= 0) {
             splitAt.pop();
         }
         if (splitAt.length === 0 || this.parts.length === 0) {
@@ -738,7 +740,7 @@ export class Path {
         if (affineTransfm.isIdentity()) {
             return this;
         }
-        return this.mapPoints(point => affineTransfm.transformVec2(point));
+        return this.mapPoints((point) => affineTransfm.transformVec2(point));
     }
     /**
      * @internal
@@ -827,11 +829,10 @@ export class Path {
                     });
                     lastPoint = part.endPoint;
                     break;
-                default:
-                    {
-                        const exhaustivenessCheck = part;
-                        return exhaustivenessCheck;
-                    }
+                default: {
+                    const exhaustivenessCheck = part;
+                    return exhaustivenessCheck;
+                }
             }
         }
         newParts.reverse();
@@ -843,7 +844,8 @@ export class Path {
             return this.startPoint;
         }
         const lastPart = this.parts[this.parts.length - 1];
-        if (lastPart.kind === PathCommandType.QuadraticBezierTo || lastPart.kind === PathCommandType.CubicBezierTo) {
+        if (lastPart.kind === PathCommandType.QuadraticBezierTo ||
+            lastPart.kind === PathCommandType.CubicBezierTo) {
             return lastPart.endPoint;
         }
         else {
@@ -952,9 +954,9 @@ export class Path {
                     if (part1.kind !== part2.kind) {
                         return false;
                     }
-                    else if (!part1.controlPoint1.eq(part2.controlPoint1, tolerance)
-                        || !part1.controlPoint2.eq(part2.controlPoint2, tolerance)
-                        || !part1.endPoint.eq(part2.endPoint, tolerance)) {
+                    else if (!part1.controlPoint1.eq(part2.controlPoint1, tolerance) ||
+                        !part1.controlPoint2.eq(part2.controlPoint2, tolerance) ||
+                        !part1.endPoint.eq(part2.endPoint, tolerance)) {
                         return false;
                     }
                     break;
@@ -962,16 +964,15 @@ export class Path {
                     if (part1.kind !== part2.kind) {
                         return false;
                     }
-                    else if (!part1.controlPoint.eq(part2.controlPoint, tolerance)
-                        || !part1.endPoint.eq(part2.endPoint, tolerance)) {
+                    else if (!part1.controlPoint.eq(part2.controlPoint, tolerance) ||
+                        !part1.endPoint.eq(part2.endPoint, tolerance)) {
                         return false;
                     }
                     break;
-                default:
-                    {
-                        const exhaustivenessCheck = part1;
-                        return exhaustivenessCheck;
-                    }
+                default: {
+                    const exhaustivenessCheck = part1;
+                    return exhaustivenessCheck;
+                }
             }
         }
         return true;
@@ -993,11 +994,7 @@ export class Path {
             const cornerToEdge = Vec2.of(lineWidth, lineWidth).times(0.5);
             const innerRect = Rect2.fromCorners(rect.topLeft.plus(cornerToEdge), rect.bottomRight.minus(cornerToEdge));
             const outerRect = Rect2.fromCorners(rect.topLeft.minus(cornerToEdge), rect.bottomRight.plus(cornerToEdge));
-            corners = [
-                innerRect.corners[3],
-                ...innerRect.corners,
-                ...outerRect.corners.reverse(),
-            ];
+            corners = [innerRect.corners[3], ...innerRect.corners, ...outerRect.corners.reverse()];
             startPoint = outerRect.corners[3];
         }
         else {
@@ -1180,19 +1177,23 @@ export class Path {
             });
         };
         const commandArgCounts = {
-            'm': 1,
-            'l': 1,
-            'c': 3,
-            'q': 2,
-            'z': 0,
-            'h': 1,
-            'v': 1,
+            m: 1,
+            l: 1,
+            c: 3,
+            q: 2,
+            z: 0,
+            h: 1,
+            v: 1,
         };
         // Each command: Command character followed by anything that isn't a command character
-        const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/ig;
+        const commandExp = /([MZLHVCSQTA])\s*([^MZLHVCSQTA]*)/gi;
         let current;
         while ((current = commandExp.exec(pathString)) !== null) {
-            const argParts = current[2].trim().split(/[^0-9Ee.-]/).filter(part => part.length > 0).reduce((accumualtor, current) => {
+            const argParts = current[2]
+                .trim()
+                .split(/[^0-9Ee.-]/)
+                .filter((part) => part.length > 0)
+                .reduce((accumualtor, current) => {
                 // As of 09/2022, iOS Safari doesn't support support lookbehind in regular
                 // expressions. As such, we need an alternative.
                 // Because '-' can be used as a path separator, unless preceeded by an 'e' (as in 1e-5),
@@ -1202,10 +1203,10 @@ export class Path {
                 if (parts[0] !== '') {
                     accumualtor.push(parts[0]);
                 }
-                accumualtor.push(...parts.slice(1).map(part => `-${part}`));
+                accumualtor.push(...parts.slice(1).map((part) => `-${part}`));
                 return accumualtor;
             }, []);
-            let numericArgs = argParts.map(arg => parseFloat(arg));
+            let numericArgs = argParts.map((arg) => parseFloat(arg));
             let commandChar = current[1].toLowerCase();
             let uppercaseCommand = current[1] !== commandChar;
             // Convert commands that don't take points into commands that do.
@@ -1233,7 +1234,8 @@ export class Path {
                 commandChar = 'l';
             }
             const commandArgCount = commandArgCounts[commandChar] ?? 0;
-            const allArgs = numericArgs.reduce((accumulator, current, index, parts) => {
+            const allArgs = numericArgs
+                .reduce((accumulator, current, index, parts) => {
                 if (index % 2 !== 0) {
                     const currentAsFloat = current;
                     const prevAsFloat = parts[index - 1];
@@ -1242,7 +1244,8 @@ export class Path {
                 else {
                     return accumulator;
                 }
-            }, []).map((coordinate, index) => {
+            }, [])
+                .map((coordinate, index) => {
                 // Lowercase commands are relative, uppercase commands use absolute
                 // positioning
                 let newPos;

package/dist/mjs/shapes/QuadraticBezier.d.ts

@@ -2,9 +2,26 @@ import { Point2, Vec2 } from '../Vec2';
 import BezierJSWrapper from './BezierJSWrapper';
 import Rect2 from './Rect2';
 /**
- * Represents a 2D Bézier curve.
+ * Represents a 2D [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).
  *
- * **Note**: Many Bézier operations use `bezier-js`'s.
+ * Example:
+ * ```ts,runnable,console
+ * import { QuadraticBezier, Vec2 } from '@js-draw/math';
+ *
+ * const startPoint = Vec2.of(4, 3);
+ * const controlPoint = Vec2.of(1, 1);
+ * const endPoint = Vec2.of(1, 3);
+ *
+ * const curve = new QuadraticBezier(
+ *   startPoint,
+ *   controlPoint,
+ *   endPoint,
+ * );
+ *
+ * console.log('Curve:', curve);
+ * ```
+ *
+ * **Note**: Some Bézier operations internally use the `bezier-js` library.
  */
 export declare class QuadraticBezier extends BezierJSWrapper {
     readonly p0: Point2;

package/dist/mjs/shapes/QuadraticBezier.mjs

@@ -3,12 +3,35 @@ import  solveQuadratic  from '../polynomial/solveQuadratic.mjs';
 import  BezierJSWrapper  from './BezierJSWrapper.mjs';
 import  Rect2  from './Rect2.mjs';
 /**
- * Represents a 2D Bézier curve.
+ * Represents a 2D [Bézier curve](https://en.wikipedia.org/wiki/B%C3%A9zier_curve).
  *
- * **Note**: Many Bézier operations use `bezier-js`'s.
+ * Example:
+ * ```ts,runnable,console
+ * import { QuadraticBezier, Vec2 } from '@js-draw/math';
+ *
+ * const startPoint = Vec2.of(4, 3);
+ * const controlPoint = Vec2.of(1, 1);
+ * const endPoint = Vec2.of(1, 3);
+ *
+ * const curve = new QuadraticBezier(
+ *   startPoint,
+ *   controlPoint,
+ *   endPoint,
+ * );
+ *
+ * console.log('Curve:', curve);
+ * ```
+ *
+ * **Note**: Some Bézier operations internally use the `bezier-js` library.
  */
 export class QuadraticBezier extends BezierJSWrapper {
-    constructor(p0, p1, p2) {
+    constructor(
+    // Start point
+    p0, 
+    // Control point
+    p1, 
+    // End point
+    p2) {
         super();
         this.p0 = p0;
         this.p1 = p1;

package/dist/mjs/shapes/Rect2.d.ts

@@ -15,6 +15,18 @@ export interface RectTemplate {
 /**
  * Represents a rectangle in 2D space, parallel to the XY axes.
  *
+ * **Example**:
+ * ```ts,runnable,console
+ * import { Rect2, Vec2 } from '@js-draw/math';
+ *
+ * const rect = Rect2.fromCorners(
+ *   Vec2.of(0, 0),
+ *   Vec2.of(10, 10),
+ * );
+ * console.log('area', rect.area);
+ * console.log('topLeft', rect.topLeft);
+ * ```
+ *
  * `invariant: w ≥ 0, h ≥ 0, immutable`
  */
 export declare class Rect2 extends Abstract2DShape {
@@ -29,6 +41,7 @@ export declare class Rect2 extends Abstract2DShape {
     translatedBy(vec: Vec2): Rect2;
     resizedTo(size: Vec2): Rect2;
     containsPoint(other: Point2): boolean;
+    /** @returns true iff `other` is completely within this `Rect2`. */
     containsRect(other: Rect2): boolean;
     /**
      * @returns true iff this and `other` overlap

package/dist/mjs/shapes/Rect2.mjs

@@ -4,10 +4,30 @@ import  Abstract2DShape  from './Abstract2DShape.mjs';
 /**
  * Represents a rectangle in 2D space, parallel to the XY axes.
  *
+ * **Example**:
+ * ```ts,runnable,console
+ * import { Rect2, Vec2 } from '@js-draw/math';
+ *
+ * const rect = Rect2.fromCorners(
+ *   Vec2.of(0, 0),
+ *   Vec2.of(10, 10),
+ * );
+ * console.log('area', rect.area);
+ * console.log('topLeft', rect.topLeft);
+ * ```
+ *
  * `invariant: w ≥ 0, h ≥ 0, immutable`
  */
 export class Rect2 extends Abstract2DShape {
-    constructor(x, y, w, h) {
+    constructor(
+    // Top left x coordinate
+    x, 
+    // Top left y coordinate
+    y, 
+    // Width
+    w, 
+    // Height
+    h) {
         super();
         this.x = x;
         this.y = y;
@@ -34,13 +54,17 @@ export class Rect2 extends Abstract2DShape {
         return new Rect2(this.x, this.y, size.x, size.y);
     }
     containsPoint(other) {
-        return this.x <= other.x && this.y <= other.y
-            && this.x + this.w >= other.x && this.y + this.h >= other.y;
+        return (this.x <= other.x &&
+            this.y <= other.y &&
+            this.x + this.w >= other.x &&
+            this.y + this.h >= other.y);
     }
+    /** @returns true iff `other` is completely within this `Rect2`. */
     containsRect(other) {
-        return this.x <= other.x && this.y <= other.y
-            && this.x + this.w >= other.x + other.w
-            && this.y + this.h >= other.y + other.h;
+        return (this.x <= other.x &&
+            this.y <= other.y &&
+            this.x + this.w >= other.x + other.w &&
+            this.y + this.h >= other.y + other.h);
     }
     /**
      * @returns true iff this and `other` overlap
@@ -125,7 +149,7 @@ export class Rect2 extends Abstract2DShape {
         return new Rect2(this.x - margin, this.y - margin, this.w + margin * 2, this.h + margin * 2);
     }
     getClosestPointOnBoundaryTo(target) {
-        const closestEdgePoints = this.getEdges().map(edge => {
+        const closestEdgePoints = this.getEdges().map((edge) => {
             return edge.closestPointTo(target);
         });
         let closest = null;
@@ -152,15 +176,10 @@ export class Rect2 extends Abstract2DShape {
             return false;
         }
         const squareRadius = radius * radius;
-        return this.corners.every(corner => corner.minus(point).magnitudeSquared() < squareRadius);
+        return this.corners.every((corner) => corner.minus(point).magnitudeSquared() < squareRadius);
     }
     get corners() {
-        return [
-            this.bottomRight,
-            this.topRight,
-            this.topLeft,
-            this.bottomLeft,
-        ];
+        return [this.bottomRight, this.topRight, this.topLeft, this.bottomLeft];
     }
     get maxDimension() {
         return Math.max(this.w, this.h);
@@ -201,7 +220,7 @@ export class Rect2 extends Abstract2DShape {
         const result = [];
         for (const edge of this.getEdges()) {
             const intersection = edge.intersectsLineSegment(lineSegment);
-            intersection.forEach(point => result.push(point));
+            intersection.forEach((point) => result.push(point));
         }
         return result;
     }
@@ -219,7 +238,7 @@ export class Rect2 extends Abstract2DShape {
     // [affineTransform] is a transformation matrix that both scales and **translates**.
     // the bounding box of this' four corners after transformed by the given affine transformation.
     transformedBoundingBox(affineTransform) {
-        return Rect2.bboxOf(this.corners.map(corner => affineTransform.transformVec2(corner)));
+        return Rect2.bboxOf(this.corners.map((corner) => affineTransform.transformVec2(corner)));
     }
     /** @return true iff this is equal to `other ± tolerance` */
     eq(other, tolerance = 0) {

package/dist/mjs/shapes/Triangle.mjs

@@ -39,12 +39,12 @@ class Triangle extends Abstract2DShape {
     }
     // Transform, treating this as composed of 2D points.
     transformed2DBy(affineTransform) {
-        return this.map(vertex => affineTransform.transformVec2(vertex));
+        return this.map((vertex) => affineTransform.transformVec2(vertex));
     }
     // Transforms this by a linear transform --- verticies are treated as
     // 3D points.
     transformedBy(linearTransform) {
-        return this.map(vertex => linearTransform.transformVec3(vertex));
+        return this.map((vertex) => linearTransform.transformVec3(vertex));
     }
     /**
      * Returns the sides of this triangle, as an array of `LineSegment2`s.
@@ -66,8 +66,7 @@ class Triangle extends Abstract2DShape {
     intersectsLineSegment(lineSegment) {
         const result = [];
         for (const edge of this.getEdges()) {
-            edge.intersectsLineSegment(lineSegment)
-                .forEach(point => result.push(point));
+            edge.intersectsLineSegment(lineSegment).forEach((point) => result.push(point));
         }
         return result;
     }
@@ -101,7 +100,7 @@ class Triangle extends Abstract2DShape {
      */
     signedDistance(point) {
         const sides = this.getEdges();
-        const distances = sides.map(side => side.distance(point));
+        const distances = sides.map((side) => side.distance(point));
         const distance = Math.min(...distances);
         // If the point is in this' interior, signedDistance must return a negative
         // number.

package/dist/mjs/utils/convexHull2Of.mjs

@@ -10,9 +10,9 @@ const convexHull2Of = (points) => {
         return [];
     }
     // 1. Start with a vertex on the hull
-    const lowestPoint = points.reduce((lowest, current) => current.y < lowest.y ? current : lowest, points[0]);
+    const lowestPoint = points.reduce((lowest, current) => (current.y < lowest.y ? current : lowest), points[0]);
     const vertices = [lowestPoint];
-    let toProcess = [...points.filter(p => !p.eq(lowestPoint))];
+    let toProcess = [...points.filter((p) => !p.eq(lowestPoint))];
     let lastBaseDirection = Vec2.of(-1, 0);
     // 2. Find the point with greatest angle from the vertex:
     //
@@ -38,7 +38,7 @@ const convexHull2Of = (points) => {
                 smallestDotProductSoFar = currentDotProduct;
             }
         }
-        toProcess = toProcess.filter(p => !p.eq(furthestPointSoFar));
+        toProcess = toProcess.filter((p) => !p.eq(furthestPointSoFar));
         const newBaseDirection = furthestPointSoFar.minus(lastVertex).normalized();
         // If the last vertex is on the same edge as the current, there's no need to include
         // the previous one.

package/dist-test/test_imports/test-require.cjs

@@ -12,4 +12,4 @@ if (!Mat33.identity) {
 
 if (!Color4.red) {
 	throw new Error('Failed to import Color4 from js-draw');
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@js-draw/math",
-	"version": "1.21.3",
+	"version": "1.23.1",
 	"description": "A math library for js-draw. ",
 	"types": "./dist/mjs/lib.d.ts",
 	"main": "./dist/cjs/lib.js",
@@ -27,7 +27,7 @@
 		"bezier-js": "6.1.3"
 	},
 	"devDependencies": {
-		"@js-draw/build-tool": "^1.21.3",
+		"@js-draw/build-tool": "^1.23.1",
 		"@types/bezier-js": "4.1.0",
 		"@types/jest": "29.5.5",
 		"@types/jsdom": "21.1.3"
@@ -44,5 +44,5 @@
 		"svg",
 		"math"
 	],
-	"gitHead": "2b11a1efafeeb3b84effb7d849343d273df371f8"
+	"gitHead": "e0bb3336d5f3a94533c823906778d39a4880f4cf"
 }

package/src/Color4.test.ts

@@ -15,7 +15,7 @@ describe('Color4', () => {
 		expect(Color4.fromString('rgb(0, 0, 0)')).objEq(Color4.black);
 		expect(Color4.fromString('rgb ( 255, 0,\t 0)')).objEq(Color4.ofRGBA(1, 0, 0, 1));
 		expect(Color4.fromString('rgba ( 255, 0,\t 0, 0.5)')).objEq(Color4.ofRGBA(1, 0, 0, 0.5));
-		expect(Color4.fromString('rgba( 0, 0, 128, 0)')).objEq(Color4.ofRGBA(0, 0, 128/255, 0));
+		expect(Color4.fromString('rgba( 0, 0, 128, 0)')).objEq(Color4.ofRGBA(0, 0, 128 / 255, 0));
 	});
 
 	it('should parse transparent/none as completely transparent', () => {
@@ -29,13 +29,11 @@ describe('Color4', () => {
 	});
 
 	it('should mix red and green to get yellow', () => {
-		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.3)).objEq(
-			Color4.ofRGB(0.7, 0.3, 0)
-		);
+		expect(Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.3)).objEq(Color4.ofRGB(0.7, 0.3, 0));
 	});
 
 	it('should mix red with nothing and get red', () => {
-		expect(Color4.average([ Color4.red ])).objEq(Color4.red);
+		expect(Color4.average([Color4.red])).objEq(Color4.red);
 	});
 
 	it('different colors should be different', () => {
@@ -47,14 +45,11 @@ describe('Color4', () => {
 	it('should correctly convert to hsv', () => {
 		expect(Color4.red.asHSV()).objEq(Vec3.of(0, 1, 1));
 		expect(Color4.ofRGB(0.5, 0.5, 0.5).asHSV()).objEq(Vec3.of(0, 0, 0.5));
-		expect(Color4.ofRGB(0.5, 0.25, 0.5).asHSV()).objEq(Vec3.of(Math.PI * 5 / 3, 0.5, 0.5), 0.1);
+		expect(Color4.ofRGB(0.5, 0.25, 0.5).asHSV()).objEq(Vec3.of((Math.PI * 5) / 3, 0.5, 0.5), 0.1);
 	});
 
 	it('fromHSV(color.asHSV) should return the original color', () => {
-		const testColors = [
-			Color4.red, Color4.green, Color4.blue,
-			Color4.white, Color4.black,
-		];
+		const testColors = [Color4.red, Color4.green, Color4.blue, Color4.white, Color4.black];
 
 		const testWithColor = (color: Color4) => {
 			expect(Color4.fromHSV(...color.asHSV().asArray())).objEq(color);
@@ -65,8 +60,8 @@ describe('Color4', () => {
 		}
 
 		for (let i = 0; i <= 6; i++) {
-			testWithColor(Color4.fromHSV(i * Math.PI / 7, 0.5, 0.5));
-			testWithColor(Color4.fromHSV(i * Math.PI / 6, 0.5, 0.5));
+			testWithColor(Color4.fromHSV((i * Math.PI) / 7, 0.5, 0.5));
+			testWithColor(Color4.fromHSV((i * Math.PI) / 6, 0.5, 0.5));
 		}
 	});
 
@@ -78,17 +73,22 @@ describe('Color4', () => {
 
 	it('should return correct contrast ratios', () => {
 		// Expected values from https://webaim.org/resources/contrastchecker/
-		const testCases: [ Color4, Color4, number ][] = [
-			[ Color4.white, Color4.black, 21 ],
-			[ Color4.fromHex('#FF0000'), Color4.black, 5.25 ],
-			[ Color4.fromHex('#FF0000'), Color4.fromHex('#0000FF'), 2.14 ],
-			[ Color4.fromHex('#300000'), Color4.fromHex('#003000'), 1.26 ],
-			[ Color4.fromHex('#300000'), Color4.fromHex('#003000'), 1.26 ],
-			[ Color4.fromHex('#D60000'), Color4.fromHex('#003000'), 2.71 ],
+		const testCases: [Color4, Color4, number][] = [
+			[Color4.white, Color4.black, 21],
+			[Color4.fromHex('#FF0000'), Color4.black, 5.25],
+			[Color4.fromHex('#FF0000'), Color4.fromHex('#0000FF'), 2.14],
+			[Color4.fromHex('#300000'), Color4.fromHex('#003000'), 1.26],
+			[Color4.fromHex('#300000'), Color4.fromHex('#003000'), 1.26],
+			[Color4.fromHex('#D60000'), Color4.fromHex('#003000'), 2.71],
 		];
 
-		for (const [ colorA, colorB, expectedContrast ] of testCases) {
+		for (const [colorA, colorB, expectedContrast] of testCases) {
 			expect(Color4.contrastRatio(colorA, colorB)).toBeCloseTo(expectedContrast, 1);
 		}
 	});
-});
+
+	it('should support creating colors from an RGBA array', () => {
+		expect(Color4.fromRGBArray([255, 0, 0])).objEq(Color4.ofRGB(1, 0, 0));
+		expect(Color4.fromRGBArray([255, 0, 0, 128])).objEq(Color4.ofRGBA(1, 0, 0, 0.5));
+	});
+});