@js-draw/math 1.0.0 → 1.2.0

package/src/Color4.ts

@@ -0,0 +1,430 @@
+import Vec3 from './Vec3';
+
+/**
+ * Represents a color.
+ *
+ * @example
+ * ```ts,runnable,console
+ * import { Color4 } from '@js-draw/math';
+ *
+ * console.log('Red:', Color4.fromString('#f00'));
+ * console.log('Also red:', Color4.ofRGB(1, 0, 0), Color4.red);
+ * console.log('Mixing red and blue:', Color4.red.mix(Color4.blue, 0.5));
+ * console.log('To string:', Color4.orange.toHexString());
+ * ```
+ */
+export default class Color4 {
+	private constructor(
+		/** Red component. Should be in the range [0, 1]. */
+		public readonly r: number,
+
+		/** Green component. ${\tt g} \in [0, 1]$ */
+		public readonly g: number,
+
+		/** Blue component. ${\tt b} \in [0, 1]$ */
+		public readonly b: number,
+
+		/** Alpha/transparent component. ${\tt a} \in [0, 1]$. 0 = transparent */
+		public readonly a: number
+	) {
+	}
+
+	/**
+	 * Create a color from red, green, blue components. The color is fully opaque (`a = 1.0`).
+	 *
+	 * Each component should be in the range [0, 1].
+	 */
+	public static ofRGB(red: number, green: number, blue: number): Color4 {
+		return Color4.ofRGBA(red, green, blue, 1.0);
+	}
+
+	public static ofRGBA(red: number, green: number, blue: number, alpha: number): Color4 {
+		red = Math.max(0, Math.min(red, 1));
+		green = Math.max(0, Math.min(green, 1));
+		blue = Math.max(0, Math.min(blue, 1));
+		alpha = Math.max(0, Math.min(alpha, 1));
+
+		return new Color4(red, green, blue, alpha);
+	}
+
+	public static fromHex(hexString: string): Color4 {
+		// Remove starting '#' (if present)
+		hexString = (hexString.match(/^[#]?(.*)$/) ?? [])[1];
+		hexString = hexString.toUpperCase();
+
+		if (!hexString.match(/^[0-9A-F]+$/)) {
+			throw new Error(`${hexString} is not in a valid format.`);
+		}
+
+		// RGBA or RGB
+		if (hexString.length === 3 || hexString.length === 4) {
+			// Each character is a component
+			const components = hexString.split('');
+
+			// Convert to RRGGBBAA or RRGGBB format
+			hexString = components.map(component => `${component}0`).join('');
+		}
+
+		if (hexString.length === 6) {
+			// Alpha component
+			hexString += 'FF';
+		}
+
+		const components: number[] = [];
+		for (let i = 2; i <= hexString.length; i += 2) {
+			const chunk = hexString.substring(i - 2, i);
+			components.push(parseInt(chunk, 16) / 255);
+		}
+
+		if (components.length !== 4) {
+			throw new Error(`Unable to parse ${hexString}: Wrong number of components.`);
+		}
+
+		return Color4.ofRGBA(components[0], components[1], components[2], components[3]);
+	}
+
+	/** Like fromHex, but can handle additional colors if an `HTMLCanvasElement` is available. */
+	public static fromString(text: string): Color4 {
+		if (text.startsWith('#')) {
+			return Color4.fromHex(text);
+		}
+
+		if (text === 'none' || text === 'transparent') {
+			return Color4.transparent;
+		}
+
+		// rgba?: Match both rgb and rgba strings.
+		// ([,0-9.]+): Match any string of only numeric, '.' and ',' characters.
+		const rgbRegex = /^rgba?\(([,0-9.]+)\)$/i;
+		const rgbMatch = text.replace(/\s*/g, '').match(rgbRegex);
+
+		if (rgbMatch) {
+			const componentsListStr = rgbMatch[1];
+			const componentsList = JSON.parse(`[ ${componentsListStr} ]`);
+
+			if (componentsList.length === 3) {
+				return Color4.ofRGB(
+					componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255
+				);
+			} else if (componentsList.length === 4) {
+				return Color4.ofRGBA(
+					componentsList[0] / 255, componentsList[1] / 255, componentsList[2] / 255, componentsList[3]
+				);
+			} else {
+				throw new Error(`RGB string, ${text}, has wrong number of components: ${componentsList.length}`);
+			}
+		}
+
+		// Otherwise, try to use an HTMLCanvasElement to determine the color.
+		// Note: We may be unable to create an HTMLCanvasElement if running as a unit test.
+		const canvas = document.createElement('canvas');
+		canvas.width = 1;
+		canvas.height = 1;
+
+		const ctx = canvas.getContext('2d')!;
+		ctx.fillStyle = text;
+		ctx.fillRect(0, 0, 1, 1);
+
+		const data = ctx.getImageData(0, 0, 1, 1);
+		const red = data.data[0] / 255;
+		const green = data.data[1] / 255;
+		const blue = data.data[2] / 255;
+		const alpha = data.data[3] / 255;
+
+		return Color4.ofRGBA(red, green, blue, alpha);
+	}
+
+	/** @returns true if `this` and `other` are approximately equal. */
+	public eq(other: Color4|null|undefined): boolean {
+		if (other == null) {
+			return false;
+		}
+
+		// If both completely transparent,
+		if (this.a === 0 && other.a === 0) {
+			return true;
+		}
+
+		return this.toHexString() === other.toHexString();
+	}
+
+	/**
+	 * If `fractionTo` is not in the range $[0, 1]$, it will be clamped to the nearest number
+	 * in that range. For example, `a.mix(b, -1)` is equivalent to `a.mix(b, 0)`.
+	 *
+	 * @returns a color `fractionTo` of the way from this color to `other`.
+	 *
+	 * @example
+	 * ```ts
+	 * Color4.ofRGB(1, 0, 0).mix(Color4.ofRGB(0, 1, 0), 0.1) // -> Color4(0.9, 0.1, 0)
+	 * ```
+	 */
+	public mix(other: Color4, fractionTo: number): Color4 {
+		fractionTo = Math.min(Math.max(fractionTo, 0), 1);
+		const fractionOfThis = 1 - fractionTo;
+		return new Color4(
+			this.r * fractionOfThis + other.r * fractionTo,
+			this.g * fractionOfThis + other.g * fractionTo,
+			this.b * fractionOfThis + other.b * fractionTo,
+			this.a * fractionOfThis + other.a * fractionTo,
+		);
+	}
+
+	/**
+	 * Ignoring this color's alpha component, returns a vector with components,
+	 * $$
+	 * \begin{pmatrix} \colorbox{#F44}{\tt r} \\ \colorbox{#4F4}{\tt g} \\ \colorbox{#44F}{\tt b} \end{pmatrix}
+	 * $$
+	 */
+	public get rgb() {
+		return Vec3.of(this.r, this.g, this.b);
+	}
+
+	/**
+	 * Returns the [relative luminance](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef)
+	 * of this color in the sRGB color space.
+	 *
+	 * Ignores the alpha component.
+	 */
+	public relativeLuminance(): number {
+		// References:
+		// - https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+		// - https://stackoverflow.com/a/9733420
+
+		// Normalize the components, as per above
+		const components = [ this.r, this.g, this.b ].map(component => {
+			if (component < 0.03928) {
+				return component / 12.92;
+			} else {
+				return Math.pow((component + 0.055) / 1.055, 2.4);
+			}
+		});
+
+		// From w3.org,
+		// > For the sRGB colorspace, the relative luminance of a color is
+		// > defined as L = 0.2126 * R + 0.7152 * G + 0.0722 * B
+		// where R, G, B are defined in components above.
+		return 0.2126 * components[0] + 0.7152 * components[1] + 0.0722 * components[2];
+	}
+
+	/**
+	 * Returns the [contrast ratio](https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef)
+	 * between `colorA` and `colorB`.
+	 */
+	public static contrastRatio(colorA: Color4, colorB: Color4): number {
+		const L1 = colorA.relativeLuminance();
+		const L2 = colorB.relativeLuminance();
+
+		return (Math.max(L1, L2) + 0.05) / (Math.min(L1, L2) + 0.05);
+	}
+
+	/**
+	 * @returns the component-wise average of `colors`, or `Color4.transparent` if `colors` is empty.
+	 */
+	public static average(colors: Color4[]) {
+		let averageA = 0;
+		let averageR = 0;
+		let averageG = 0;
+		let averageB = 0;
+
+		for (const color of colors) {
+			averageA += color.a;
+			averageR += color.r;
+			averageG += color.g;
+			averageB += color.b;
+		}
+
+		if (colors.length > 0) {
+			averageA /= colors.length;
+			averageR /= colors.length;
+			averageG /= colors.length;
+			averageB /= colors.length;
+		}
+
+		return new Color4(averageR, averageG, averageB, averageA);
+	}
+
+	/**
+	 * Converts to (hue, saturation, value).
+	 * See also https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+	 *
+	 * The resultant hue is represented in radians and is thus in $[0, 2\pi]$.
+	 */
+	public asHSV(): Vec3 {
+		// Ref: https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+		//
+		// HUE:
+		// First, consider the unit cube. Rotate it such that one vertex is at the origin
+		// of a plane and its three neighboring vertices are equidistant from that plane:
+		//
+		//         /\
+		//       /  | \
+		//   2 /    3   \ 1
+		//     \    |   /
+		//       \  | /
+		//   .     \/      .
+		//
+		//        .
+		//
+		// Let z be up and (x, y, 0) be in the plane.
+		//
+		// Label vectors 1,2,3 with R, G, and B, respectively. Let R's projection into the plane
+		// lie along the x axis.
+		//
+		// Because R is a unit vector and R, G, B are equidistant from the plane, they must
+		// form 30-60-90 triangles, which have side lengths proportional to (1, √3, 2)
+		//
+		//       /|
+		//    1/  | (√3)/2
+		//    /   |
+		//      1/2
+		//
+		const minComponent = Math.min(this.r, this.g, this.b);
+		const maxComponent = Math.max(this.r, this.g, this.b);
+		const chroma = maxComponent - minComponent;
+
+		let hue;
+
+		// See https://en.wikipedia.org/wiki/HSL_and_HSV#General_approach
+		if (chroma === 0) {
+			hue = 0;
+		} else if (this.r >= this.g && this.r >= this.b) {
+			hue = ((this.g - this.b) / chroma) % 6;
+		} else if (this.g >= this.r && this.g >= this.b) {
+			hue = (this.b - this.r) / chroma + 2;
+		} else {
+			hue = (this.r - this.g) / chroma + 4;
+		}
+
+		// Convert to degree representation, then to radians.
+		hue *= 60;
+		hue *= Math.PI / 180;
+
+		// Ensure positivity.
+		if (hue < 0) {
+			hue += Math.PI * 2;
+		}
+
+		const value = maxComponent;
+		const saturation = value > 0 ? chroma / value : 0;
+
+		return Vec3.of(hue, saturation, value);
+	}
+
+	/**
+	 * Creates a new `Color4` from a representation [in $HSV$](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+	 *
+	 * [Algorithm](https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB).
+	 *
+	 * Note that hue must be given **in radians**. While non-standard, this is consistent with
+	 * {@link asHSV}.
+	 *
+	 * `hue` and `value` should range from 0 to 1.
+	 *
+	 * @param hue $H \in [0, 2\pi]$
+	 * @param saturation $S_V \in [0, 1]$
+	 * @param value $V \in [0, 1]$
+	 */
+	public static fromHSV(hue: number, saturation: number, value: number) {
+		if (hue < 0) {
+			hue += Math.PI * 2;
+		}
+		hue %= Math.PI * 2;
+
+		// Clamp value and saturation to [0, 1]
+		value = Math.max(0, Math.min(1, value));
+		saturation = Math.max(0, Math.min(1, saturation));
+
+		// Formula from https://en.wikipedia.org/wiki/HSL_and_HSV#HSV_to_RGB
+
+		// Saturation can be thought of as scaled chroma. Unapply the scaling.
+		// See https://en.wikipedia.org/wiki/HSL_and_HSV#Saturation
+		const chroma = value * saturation;
+
+		// Determines which edge of the projected color cube
+		const huePrime = hue / (Math.PI / 3);
+
+		const secondLargestComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
+
+		let rgb;
+		if (huePrime < 1) {
+			rgb = [ chroma, secondLargestComponent, 0 ];
+		} else if (huePrime < 2) {
+			rgb = [ secondLargestComponent, chroma, 0 ];
+		} else if (huePrime < 3) {
+			rgb = [ 0, chroma, secondLargestComponent ];
+		} else if (huePrime < 4) {
+			rgb = [ 0, secondLargestComponent, chroma ];
+		} else if (huePrime < 5) {
+			rgb = [ secondLargestComponent, 0, chroma ];
+		} else {
+			rgb = [ chroma, 0, secondLargestComponent ];
+		}
+
+		const adjustment = value - chroma;
+		return Color4.ofRGB(rgb[0] + adjustment, rgb[1] + adjustment, rgb[2] + adjustment);
+	}
+
+
+	/**
+	 * Equivalent to `ofRGB(rgb.x, rgb.y, rgb.z)`.
+	 *
+	 * All components should be in the range `[0, 1]` (0 to 1 inclusive).
+	 */
+	public static fromRGBVector(rgb: Vec3, alpha?: number) {
+		return Color4.ofRGBA(rgb.x, rgb.y, rgb.z, alpha ?? 1);
+	}
+
+	private hexString: string|null = null;
+
+	/**
+	 * @returns a hexadecimal color string representation of `this`, in the form `#rrggbbaa`.
+	 *
+	 * @example
+	 * ```
+	 * Color4.red.toHexString(); // -> #ff0000ff
+	 * ```
+	 */
+	public toHexString(): string {
+		if (this.hexString) {
+			return this.hexString;
+		}
+
+		const componentToHex = (component: number): string => {
+			const res = Math.round(255 * component).toString(16);
+
+			if (res.length === 1) {
+				return `0${res}`;
+			}
+			return res;
+		};
+
+		const alpha = componentToHex(this.a);
+		const red = componentToHex(this.r);
+		const green = componentToHex(this.g);
+		const blue = componentToHex(this.b);
+		if (alpha === 'ff') {
+			return `#${red}${green}${blue}`;
+		}
+		this.hexString = `#${red}${green}${blue}${alpha}`;
+		return this.hexString;
+	}
+
+	public toString() {
+		return this.toHexString();
+	}
+
+	public static transparent = Color4.ofRGBA(0, 0, 0, 0);
+	public static red = Color4.ofRGB(1.0, 0.0, 0.0);
+	public static orange = Color4.ofRGB(1.0, 0.65, 0.0);
+	public static green = Color4.ofRGB(0.0, 1.0, 0.0);
+	public static blue = Color4.ofRGB(0.0, 0.0, 1.0);
+	public static purple = Color4.ofRGB(0.5, 0.2, 0.5);
+	public static yellow = Color4.ofRGB(1, 1, 0.1);
+	public static clay = Color4.ofRGB(0.8, 0.4, 0.2);
+	public static black = Color4.ofRGB(0, 0, 0);
+	public static gray = Color4.ofRGB(0.5, 0.5, 0.5);
+	public static white = Color4.ofRGB(1, 1, 1);
+}
+
+export { Color4 };

package/src/Mat33.test.ts

@@ -0,0 +1,244 @@
+import Mat33 from './Mat33';
+import { Point2, Vec2 } from './Vec2';
+import Vec3 from './Vec3';
+
+
+describe('Mat33 tests', () => {
+	it('equality', () => {
+		expect(Mat33.identity).objEq(Mat33.identity);
+		expect(new Mat33(
+			0.1, 0.2, 0.3,
+			0.4, 0.5, 0.6,
+			0.7, 0.8, -0.9
+		)).objEq(new Mat33(
+			0.2, 0.1, 0.4,
+			0.5, 0.5, 0.7,
+			0.7, 0.8, -0.9
+		), 0.2);
+	});
+
+	it('transposition', () => {
+		expect(Mat33.identity.transposed()).objEq(Mat33.identity);
+		expect(new Mat33(
+			1, 2, 0,
+			0, 0, 0,
+			0, 1, 0
+		).transposed()).objEq(new Mat33(
+			1, 0, 0,
+			2, 0, 1,
+			0, 0, 0
+		));
+	});
+
+	it('multiplication', () => {
+		const M = new Mat33(
+			1, 2, 3,
+			4, 5, 6,
+			7, 8, 9
+		);
+
+		expect(Mat33.identity.rightMul(Mat33.identity)).objEq(Mat33.identity);
+		expect(M.rightMul(Mat33.identity)).objEq(M);
+		expect(M.rightMul(new Mat33(
+			1, 0, 0,
+			0, 2, 0,
+			0, 0, 1
+		))).objEq(new Mat33(
+			1, 4, 3,
+			4, 10, 6,
+			7, 16, 9
+		));
+		expect(M.rightMul(new Mat33(
+			2, 0, 1,
+			0, 1, 0,
+			0, 0, 3
+		))).objEq(new Mat33(
+			2, 2, 10,
+			8, 5, 22,
+			14, 8, 34
+		));
+	});
+
+	it('the inverse of the identity matrix should be the identity matrix', () => {
+		const fuzz = 0.01;
+		expect(Mat33.identity.inverse()).objEq(Mat33.identity, fuzz);
+
+		const M = new Mat33(
+			1, 2, 3,
+			4, 1, 0,
+			2, 3, 0
+		);
+		expect(M.inverse().rightMul(M)).objEq(Mat33.identity, fuzz);
+	});
+
+	it('90 degree z-rotation matricies should rotate 90 degrees counter clockwise', () => {
+		const fuzz = 0.001;
+
+		const M = Mat33.zRotation(Math.PI / 2);
+		const rotated = M.transformVec2(Vec2.unitX);
+		expect(rotated).objEq(Vec2.unitY, fuzz);
+		expect(M.transformVec2(rotated)).objEq(Vec2.unitX.times(-1), fuzz);
+	});
+
+	it('z-rotation matricies should preserve the given origin', () => {
+		const testPairs: Array<[number, Vec2]> = [
+			[ Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.zero ],
+			[ -Math.PI / 2, Vec2.of(10, 10) ],
+		];
+
+		for (const [ angle, center ] of testPairs) {
+			expect(Mat33.zRotation(angle, center).transformVec2(center)).objEq(center);
+		}
+	});
+
+	it('translation matricies should translate Vec2s', () => {
+		const fuzz = 0.01;
+
+		const M = Mat33.translation(Vec2.of(1, -4));
+		expect(M.transformVec2(Vec2.of(0, 0))).objEq(Vec2.of(1, -4), fuzz);
+		expect(M.transformVec2(Vec2.of(-1, 3))).objEq(Vec2.of(0, -1), fuzz);
+	});
+
+	it('scaling matricies should scale about the provided center', () => {
+		const fuzz = 0.01;
+
+		const center = Vec2.of(1, -4);
+		const M = Mat33.scaling2D(2, center);
+		expect(M.transformVec2(center)).objEq(center, fuzz);
+		expect(M.transformVec2(Vec2.of(0, 0))).objEq(Vec2.of(-1, 4), fuzz);
+	});
+
+	it('calling inverse on singular matricies should result in the identity matrix', () => {
+		const fuzz = 0.001;
+		const singularMat = Mat33.ofRows(
+			Vec3.of(0, 0, 1),
+			Vec3.of(0, 1, 0),
+			Vec3.of(0, 1, 1)
+		);
+		expect(singularMat.invertable()).toBe(false);
+		expect(singularMat.inverse()).objEq(Mat33.identity, fuzz);
+	});
+
+	it('z-rotation matricies should be invertable', () => {
+		const fuzz = 0.01;
+		const M = Mat33.zRotation(-0.2617993877991494, Vec2.of(481, 329.5));
+		expect(
+			M.inverse().transformVec2(M.transformVec2(Vec2.unitX))
+		).objEq(Vec2.unitX, fuzz);
+		expect(M.invertable());
+
+		const starterTransform = new Mat33(
+			-0.2588190451025205, -0.9659258262890688, 923.7645204565603,
+			0.9659258262890688,  -0.2588190451025205, -49.829447083761465,
+			0, 0, 1
+		);
+		expect(starterTransform.invertable()).toBe(true);
+
+		const fullTransform = starterTransform.rightMul(M);
+		const fullTransformInverse = fullTransform.inverse();
+		expect(fullTransform.invertable()).toBe(true);
+
+		expect(
+			fullTransformInverse.rightMul(fullTransform)
+		).objEq(Mat33.identity, fuzz);
+
+		expect(
+			fullTransform.transformVec2(fullTransformInverse.transformVec2(Vec2.unitX))
+		).objEq(Vec2.unitX, fuzz);
+
+		expect(
+			fullTransformInverse.transformVec2(fullTransform.transformVec2(Vec2.unitX))
+		).objEq(Vec2.unitX, fuzz);
+	});
+
+	it('z-rotation matrix inverses should undo the z-rotation', () => {
+		const testCases: Array<[ number, Point2 ]> = [
+			[ Math.PI / 2, Vec2.zero ],
+			[ Math.PI, Vec2.of(1, 1) ],
+			[ -Math.PI, Vec2.of(1, 1) ],
+			[ -Math.PI * 2, Vec2.of(1, 1) ],
+			[ -Math.PI * 2, Vec2.of(123, 456) ],
+			[ -Math.PI / 4, Vec2.of(123, 456) ],
+			[ 0.1, Vec2.of(1, 2) ],
+		];
+
+		const fuzz = 0.00001;
+		for (const [ angle, center ] of testCases) {
+			const mat = Mat33.zRotation(angle, center);
+			expect(mat.inverse().rightMul(mat)).objEq(Mat33.identity, fuzz);
+			expect(mat.rightMul(mat.inverse())).objEq(Mat33.identity, fuzz);
+		}
+	});
+
+	it('z-rotation should preserve given origin', () => {
+		const testCases: Array<[ number, Point2 ]> = [
+			[ 6.205048847547065, Vec2.of(75.16363373235318, 104.29870408043762) ],
+			[ 1.234, Vec2.of(-56, 789) ],
+			[ -Math.PI, Vec2.of(-56, 789) ],
+			[ -Math.PI / 2, Vec2.of(-0.001, 1.0002) ],
+		];
+
+		for (const [angle, rotationOrigin] of testCases) {
+			expect(Mat33.zRotation(angle, rotationOrigin).transformVec2(rotationOrigin)).objEq(rotationOrigin);
+		}
+	});
+
+	it('should correctly apply a mapping to all components', () => {
+		expect(
+			new Mat33(
+				1, 2, 3,
+				4, 5, 6,
+				7, 8, 9,
+			).mapEntries(component => component - 1)
+		).toMatchObject(new Mat33(
+			0, 1, 2,
+			3, 4, 5,
+			6, 7, 8,
+		));
+	});
+
+	it('should convert CSS matrix(...) strings to matricies', () => {
+		// From MDN:
+		// 		⎡ a c e ⎤
+		// 		⎢ b d f ⎥  =  matrix(a,b,c,d,e,f)
+		// 		⎣ 0 0 1 ⎦
+		const identity = Mat33.fromCSSMatrix('matrix(1, 0, 0, 1, 0, 0)');
+		expect(identity).objEq(Mat33.identity);
+		expect(Mat33.fromCSSMatrix('matrix(1, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1e2, 2, 3, 4, 5, 6)')).objEq(new Mat33(
+			1e2, 3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6, 2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2, 3.E-2, 4, -5.123, -6.5)')).objEq(new Mat33(
+			-1, 0.03, -5.123,
+			2, 4, -6.5,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,\n\t2, .3, 4, 5, 6)')).objEq(new Mat33(
+			1.6, .3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(1.6,2, .3E-2, 4, 5, 6)')).objEq(new Mat33(
+			1.6, 3e-3, 5,
+			2, 4, 6,
+			0, 0, 1,
+		));
+		expect(Mat33.fromCSSMatrix('matrix(-1, 2e6,	3E-2,-5.123, -6.5e-1, 0.01)')).objEq(new Mat33(
+			-1, 	3E-2,  	-6.5e-1,
+			2e6,	-5.123,	0.01,
+			0,  	0,     	1,
+		));
+	});
+});