@shortfuse/materialdesignweb 0.8.0 → 0.9.0

package/types/utils/material-color/utils/math.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @license
+ * Copyright 2021 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * Utility methods for mathematical operations.
+ */
+/**
+ * The signum function.
+ * @param {number} num
+ * @return {1|-1|0} 1 if num > 0, -1 if num < 0, and 0 if num = 0
+ */
+export function signum(num: number): 1 | -1 | 0;
+/**
+ * The linear interpolation function.
+ * @param {number} start
+ * @param {number} stop
+ * @param {number} amount
+ * @return {number} start if amount = 0 and stop if amount = 1
+ */
+export function lerp(start: number, stop: number, amount: number): number;
+/**
+ * Clamps an integer between two integers.
+ * @param {number} min
+ * @param {number} max
+ * @param {number} input
+ * @return {number} input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampInt(min: number, max: number, input: number): number;
+/**
+ * Clamps an integer between two floating-point numbers.
+ * @param {number} min
+ * @param {number} max
+ * @param {number} input
+ * @return {number} input when min <= input <= max, and either min or max
+ * otherwise.
+ */
+export function clampDouble(min: number, max: number, input: number): number;
+/**
+ * Sanitizes a degree measure as an integer.
+ * @param {number} degrees
+ * @return {number} a degree measure between 0 (inclusive) and 360
+ * (exclusive).
+ */
+export function sanitizeDegreesInt(degrees: number): number;
+/**
+ * Sanitizes a degree measure as a floating-point number.
+ * @param {number} degrees
+ * @return {number} a degree measure between 0.0 (inclusive) and 360.0
+ * (exclusive).
+ */
+export function sanitizeDegreesDouble(degrees: number): number;
+/**
+ * Sign of direction change needed to travel from one angle to
+ * another.
+ *
+ * For angles that are 180 degrees apart from each other, both
+ * directions have the same travel distance, so either direction is
+ * shortest. The value 1.0 is returned in this case.
+ * @param {number} from The angle travel starts from, in degrees.
+ * @param {number} to The angle travel ends at, in degrees.
+ * @return {number} -1 if decreasing from leads to the shortest travel
+ * distance, 1 if increasing from leads to the shortest travel
+ * distance.
+ */
+export function rotationDirection(from: number, to: number): number;
+/**
+ * Distance of two points on a circle, represented using degrees.
+ * @param {number} a
+ * @param {number} b
+ * @return {number}
+ */
+export function differenceDegrees(a: number, b: number): number;
+/**
+ * Multiplies a 1x3 row vector with a 3x3 matrix.
+ * @param {number[]} row
+ * @param {number[][]} matrix
+ * @return {number[]}
+ */
+export function matrixMultiply(row: number[], matrix: number[][]): number[];
+//# sourceMappingURL=math.d.ts.map

package/types/utils/material-color/utils/math.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"math.d.ts","sourceRoot":"","sources":["../../../../utils/material-color/utils/math.js"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH;;GAEG;AAEH;;;;GAIG;AACH,4BAHW,MAAM,GACL,CAAC,GAAC,CAAC,CAAC,GAAC,CAAC,CAUjB;AAED;;;;;;GAMG;AACH,4BALW,MAAM,QACN,MAAM,UACN,MAAM,GACL,MAAM,CAIjB;AAED;;;;;;;GAOG;AACH,8BANW,MAAM,OACN,MAAM,SACN,MAAM,GACL,MAAM,CAWjB;AAED;;;;;;;GAOG;AACH,iCANW,MAAM,OACN,MAAM,SACN,MAAM,GACL,MAAM,CAWjB;AAED;;;;;GAKG;AACH,4CAJW,MAAM,GACL,MAAM,CASjB;AAED;;;;;GAKG;AACH,+CAJW,MAAM,GACL,MAAM,CASjB;AAED;;;;;;;;;;;;GAYG;AACH,wCANW,MAAM,MACN,MAAM,GACL,MAAM,CAOjB;AAED;;;;;GAKG;AACH,qCAJW,MAAM,KACN,MAAM,GACL,MAAM,CAIjB;AAED;;;;;GAKG;AACH,oCAJW,MAAM,EAAE,UACR,MAAM,EAAE,EAAE,GACT,MAAM,EAAE,CAOnB"}

package/types/utils/pixelmatch.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @param {Uint8Array|Uint8ClampedArray} img1
+ * @param {Uint8Array|Uint8ClampedArray} img2
+ * @param {Uint8Array|Uint8ClampedArray} output
+ * @param {number} width
+ * @param {number} height
+ * @param {typeof DEFAULT_OPTIONS} [options]
+ * @return {number}
+ */
+export function pixelmatch(img1: Uint8Array | Uint8ClampedArray, img2: Uint8Array | Uint8ClampedArray, output: Uint8Array | Uint8ClampedArray, width: number, height: number, options?: typeof DEFAULT_OPTIONS): number;
+type DEFAULT_OPTIONS = Object;
+declare namespace DEFAULT_OPTIONS {
+    let threshold: number;
+    let includeAA: boolean;
+    let alpha: number;
+    let aaColor: number[];
+    let diffColor: number[];
+    let diffColorAlt: Array<number>;
+    let diffMask: boolean;
+}
+export {};
+//# sourceMappingURL=pixelmatch.d.ts.map

package/types/utils/pixelmatch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pixelmatch.d.ts","sourceRoot":"","sources":["../../utils/pixelmatch.js"],"names":[],"mappings":"AA2RA;;;;;;;;GAQG;AACH,iCARW,UAAU,GAAC,iBAAiB,QAC5B,UAAU,GAAC,iBAAiB,UAC5B,UAAU,GAAC,iBAAiB,SAC5B,MAAM,UACN,MAAM,YACN,OAAO,eAAe,GACrB,MAAM,CAqEjB;uBAtVU,MAAM;;;;;;;sBAcL,KAAK,CAAC,MAAM,CAAC"}

package/types/utils/popup.d.ts

@@ -0,0 +1,106 @@
+/**
+ * @typedef {Object} DOMRectLike
+ * @prop {number} left
+ * @prop {number} right
+ * @prop {number} top
+ * @prop {number} bottom
+ * @prop {number} width
+ * @prop {number} height
+ */
+/**
+ * @typedef {Object} CanAnchorPopUpOptions
+ * @prop {Element|DOMRectLike} [anchor]
+ * @prop {number|'left'|'center'|'right'} [clientX]
+ * @prop {number|'top'|'center'|'bottom'} [clientY]
+ * @prop {number} [pageX]
+ * @prop {number} [pageY]
+ * @prop {Element|{width:number, height:number}} [popup]
+ * @prop {number} [width]
+ * @prop {number} [height]
+ * @prop {number} [offsetX] Offset from anchor
+ * @prop {number} [offsetY] Offset from anchor
+ * @prop {number} [margin] Margin from page
+ * @prop {'left'|'center'|'right'} [directionX='right']
+ * @prop {'up'|'center'|'down'} [directionY='down']
+ * @prop {boolean} [force=false]
+ */
+/** @param {CanAnchorPopUpOptions} options */
+export function canAnchorPopup(options: CanAnchorPopUpOptions): {
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+    visibility: number;
+    styles: {
+        top: string;
+        bottom: string;
+        left: string;
+        right: string;
+        maxWidth: string;
+        maxHeight: string;
+        transformOrigin: string;
+    };
+    anchor?: Element | DOMRectLike;
+    clientX?: number | "left" | "center" | "right";
+    clientY?: number | "top" | "center" | "bottom";
+    pageX?: number;
+    pageY?: number;
+    popup?: Element | {
+        width: number;
+        height: number;
+    };
+    width?: number;
+    height?: number;
+    /**
+     * Offset from anchor
+     */
+    offsetX?: number;
+    /**
+     * Offset from anchor
+     */
+    offsetY?: number;
+    /**
+     * Margin from page
+     */
+    margin?: number;
+    directionX?: "left" | "center" | "right";
+    directionY?: "up" | "center" | "down";
+    force?: boolean;
+};
+export type DOMRectLike = {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+    width: number;
+    height: number;
+};
+export type CanAnchorPopUpOptions = {
+    anchor?: Element | DOMRectLike;
+    clientX?: number | "left" | "center" | "right";
+    clientY?: number | "top" | "center" | "bottom";
+    pageX?: number;
+    pageY?: number;
+    popup?: Element | {
+        width: number;
+        height: number;
+    };
+    width?: number;
+    height?: number;
+    /**
+     * Offset from anchor
+     */
+    offsetX?: number;
+    /**
+     * Offset from anchor
+     */
+    offsetY?: number;
+    /**
+     * Margin from page
+     */
+    margin?: number;
+    directionX?: "left" | "center" | "right";
+    directionY?: "up" | "center" | "down";
+    force?: boolean;
+};
+//# sourceMappingURL=popup.d.ts.map

package/types/utils/popup.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"popup.d.ts","sourceRoot":"","sources":["../../utils/popup.js"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH;;;;;;;;;;;;;;;;GAgBG;AAEH,6CAA6C;AAC7C,wCADY,qBAAqB;;;;;;;;;;;;;;;aAhBvB,OAAO,GAAC,WAAW;cACnB,MAAM,GAAC,MAAM,GAAC,QAAQ,GAAC,OAAO;cAC9B,MAAM,GAAC,KAAK,GAAC,QAAQ,GAAC,QAAQ;YAC9B,MAAM;YACN,MAAM;YACN,OAAO,GAAC;QAAC,KAAK,EAAC,MAAM,CAAC;QAAC,MAAM,EAAC,MAAM,CAAA;KAAC;YACrC,MAAM;aACN,MAAM;;;;cACN,MAAM;;;;cACN,MAAM;;;;aACN,MAAM;iBACN,MAAM,GAAC,QAAQ,GAAC,OAAO;iBACvB,IAAI,GAAC,QAAQ,GAAC,MAAM;YACpB,OAAO;EA4LhB;;UAnNS,MAAM;WACN,MAAM;SACN,MAAM;YACN,MAAM;WACN,MAAM;YACN,MAAM;;;aAKN,OAAO,GAAC,WAAW;cACnB,MAAM,GAAC,MAAM,GAAC,QAAQ,GAAC,OAAO;cAC9B,MAAM,GAAC,KAAK,GAAC,QAAQ,GAAC,QAAQ;YAC9B,MAAM;YACN,MAAM;YACN,OAAO,GAAC;QAAC,KAAK,EAAC,MAAM,CAAC;QAAC,MAAM,EAAC,MAAM,CAAA;KAAC;YACrC,MAAM;aACN,MAAM;;;;cACN,MAAM;;;;cACN,MAAM;;;;aACN,MAAM;iBACN,MAAM,GAAC,QAAQ,GAAC,OAAO;iBACvB,IAAI,GAAC,QAAQ,GAAC,MAAM;YACpB,OAAO"}

package/types/utils/searchParams.d.ts

@@ -0,0 +1,3 @@
+/** @return {URLSearchParams} */
+export function getCurrentSearchParams(): URLSearchParams;
+//# sourceMappingURL=searchParams.d.ts.map

package/types/utils/searchParams.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"searchParams.d.ts","sourceRoot":"","sources":["../../utils/searchParams.js"],"names":[],"mappings":"AAGA,gCAAgC;AAChC,0CADa,eAAe,CAe3B"}

package/types/utils/svg.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Uses UTF-8 charset instead of base64 for better compression
+ * @param {string} svg
+ * @return {string}
+ */
+export function svgToCSSURL(svg: string): string;
+//# sourceMappingURL=svg.d.ts.map

package/types/utils/svg.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svg.d.ts","sourceRoot":"","sources":["../../utils/svg.js"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,iCAHW,MAAM,GACL,MAAM,CAQjB"}

package/utils/material-color/scheme/Scheme.js

@@ -137,7 +137,7 @@ export default class Scheme {
       onSurfaceVariant: core.n2.tone(80),
       outline: core.n2.tone(60),
       outlineVariant: core.n2.tone(30),
-      shadow: core.n1.tone(0),
+      shadow: core.n1.tone(40), // (Underlight)
       scrim: core.n1.tone(0),
       inverseSurface: core.n1.tone(90),
       inverseOnSurface: core.n1.tone(20),

package/utils/pixelmatch.js

@@ -0,0 +1,360 @@
+/**
+ * @license ISC License
+ * Copyright (c) 2019, Mapbox
+ *
+ * Permission to use, copy, modify, and/or distribute this software for any purpose
+ * with or without fee is hereby granted, provided that the above copyright notice
+ * and this permission notice appear in all copies.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+ * REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+ * FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+ * INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+ * OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+ * TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+ * THIS SOFTWARE.
+ */
+
+/** @enum {Object} */
+const DEFAULT_OPTIONS = {
+  /* matching threshold (0 to 1); smaller is more sensitive */
+  threshold: 0.1,
+  /* whether to skip anti-aliasing detection */
+  includeAA: false,
+  /** opacity of original image in diff output */
+  alpha: 0.1,
+  /* color of anti-aliased pixels in diff output */
+  aaColor: [255, 255, 0],
+  diffColor: [255, 0, 0], // color of different pixels in diff output
+  /**
+   * whether to detect dark on light differences between img1 and img2 and set
+   * an alternative color to differentiate between the two
+   * @type {Array<number>}
+   */
+  diffColorAlt: null,
+  /** draw the diff over a transparent background (a mask) */
+  diffMask: false,
+};
+
+/**
+ * @param {ArrayBufferView} arr
+ */
+function isPixelData(arr) {
+  // work around instanceof Uint8Array not working properly in some Jest environments
+  return ArrayBuffer.isView(arr) && arr.constructor.BYTES_PER_ELEMENT === 1;
+}
+
+/**
+ * Check if a pixel has 3+ adjacent pixels of the same color.
+ * @param {Array<number>} img
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} width
+ * @param {number} height
+ */
+function hasManySiblings(img, x1, y1, width, height) {
+  const x0 = Math.max(x1 - 1, 0);
+  const y0 = Math.max(y1 - 1, 0);
+  const x2 = Math.min(x1 + 1, width - 1);
+  const y2 = Math.min(y1 + 1, height - 1);
+  const pos = (y1 * width + x1) * 4;
+  let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+
+  // go through 8 adjacent pixels
+  for (let x = x0; x <= x2; x++) {
+    for (let y = y0; y <= y2; y++) {
+      if (x === x1 && y === y1) continue;
+
+      const pos2 = 4 * (y * width + x);
+      if (img[pos] === img[pos2]
+                && img[pos + 1] === img[pos2 + 1]
+                && img[pos + 2] === img[pos2 + 2]
+                && img[pos + 3] === img[pos2 + 3]) zeroes++;
+
+      if (zeroes > 2) return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * blend semi-transparent color with white
+ * @param {number} color
+ * @param {number} alpha
+ */
+function blend(color, alpha) {
+  return 255 + (color - 255) * alpha;
+}
+
+/**
+ * Returns Y from RGB=>YIQ
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ */
+function yFromRGBToYIQ(red, green, blue) {
+  return (0.298_895_31 * red) + (0.586_622_47 * green) + (0.114_482_23 * blue);
+}
+
+/**
+ * Returns I from RGB=>YIQ
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ */
+function iFromRGBToYIQ(red, green, blue) {
+  return (0.595_977_99 * red) + (-0.274_176_1 * green) + (-0.321_801_89 * blue);
+}
+
+/**
+ * Returns Q from RGB=>YIQ
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ * @return {number}
+ */
+function qFromRGBToYIQ(red, green, blue) {
+  return (0.211_470_17 * red) + (-0.522_617_11 * green) + (0.311_146_94 * blue);
+}
+
+/**
+ * Returns YIQ from RGB
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ * @return {{y:number, i:number, q:number}}
+ */
+function yiqFromRGB(red, green, blue) {
+  return {
+    y: yFromRGBToYIQ(red, green, blue),
+    i: iFromRGBToYIQ(red, green, blue),
+    q: qFromRGBToYIQ(red, green, blue),
+  };
+}
+
+/**
+ * calculate color difference according to the paper "Measuring perceived color
+ * difference using YIQ NTSC transmission color space in mobile applications"
+ * by Y. Kotsarenko and F. Ramos
+ * @param {Array<number>} img1
+ * @param {Array<number>} img2
+ * @param {number} k
+ * @param {number} m
+ * @param {boolean} [yOnly]
+ * @return {number}
+ */
+function colorDelta(img1, img2, k, m, yOnly) {
+  let r1 = img1[k + 0];
+  let g1 = img1[k + 1];
+  let b1 = img1[k + 2];
+  let a1 = img1[k + 3];
+
+  let r2 = img2[m + 0];
+  let g2 = img2[m + 1];
+  let b2 = img2[m + 2];
+  let a2 = img2[m + 3];
+
+  if (a1 === a2 && r1 === r2 && g1 === g2 && b1 === b2) return 0;
+
+  if (a1 < 255) {
+    a1 /= 255;
+    r1 = blend(r1, a1);
+    g1 = blend(g1, a1);
+    b1 = blend(b1, a1);
+  }
+
+  if (a2 < 255) {
+    a2 /= 255;
+    r2 = blend(r2, a2);
+    g2 = blend(g2, a2);
+    b2 = blend(b2, a2);
+  }
+
+  if (yOnly) {
+    return yFromRGBToYIQ(r1, g1, b1) - yFromRGBToYIQ(r2, g2, b2);
+  }
+
+  const { y: y1, i: i1, q: q1 } = yiqFromRGB(r1, g1, b1);
+  const { y: y2, i: i2, q: q2 } = yiqFromRGB(r2, g2, b2);
+
+  const y = y1 - y2;
+  const i = i1 - i2;
+  const q = q1 - q2;
+
+  const delta = (0.5053 * y * y) + (0.299 * i * i) + (0.1957 * q * q);
+
+  // encode whether the pixel lightens or darkens in the sign
+  return y1 > y2 ? -delta : delta;
+}
+
+/**
+ * @param {Uint8Array|Uint8ClampedArray} destination
+ * @param {number} index
+ * @param {number} red
+ * @param {number} green
+ * @param {number} blue
+ * @return {void}
+ */
+function drawPixel(destination, index, red, green, blue) {
+  destination[index + 0] = red;
+  destination[index + 1] = green;
+  destination[index + 2] = blue;
+  destination[index + 3] = 255;
+}
+
+/**
+ * @param {Uint8Array|Uint8ClampedArray} source
+ * @param {number} index
+ * @param {number} alpha
+ * @param {Uint8Array|Uint8ClampedArray} destination
+ */
+function drawGrayPixel(source, index, alpha, destination) {
+  const red = source[index + 0];
+  const green = source[index + 1];
+  const blue = source[index + 2];
+  const val = blend(yFromRGBToYIQ(red, green, blue), (alpha * source[index + 3]) / 255);
+  drawPixel(destination, index, val, val, val);
+}
+
+/**
+ * Check if a pixel is likely a part of anti-aliasing;
+ *
+ * Based on "Anti-aliased Pixel and Intensity Slope Detector" paper by V.
+ * Vysniauskas, 2009
+ * @param {Array<number>} img
+ * @param {number} x1
+ * @param {number} y1
+ * @param {number} width
+ * @param {number} height
+ * @param {Array<number>} img2
+ */
+function antialiased(img, x1, y1, width, height, img2) {
+  const x0 = Math.max(x1 - 1, 0);
+  const y0 = Math.max(y1 - 1, 0);
+  const x2 = Math.min(x1 + 1, width - 1);
+  const y2 = Math.min(y1 + 1, height - 1);
+  const pos = (y1 * width + x1) * 4;
+  let zeroes = x1 === x0 || x1 === x2 || y1 === y0 || y1 === y2 ? 1 : 0;
+  let min = 0;
+  let max = 0;
+  let minX; let minY; let maxX; let
+    maxY;
+
+  // go through 8 adjacent pixels
+  for (let x = x0; x <= x2; x++) {
+    for (let y = y0; y <= y2; y++) {
+      if (x === x1 && y === y1) continue;
+
+      // brightness delta between the center pixel and adjacent one
+      const delta = colorDelta(img, img, pos, (y * width + x) * 4, true);
+
+      // count the number of equal, darker and brighter adjacent pixels
+      if (delta === 0) {
+        zeroes++;
+        // if found more than 2 equal siblings, it's definitely not anti-aliasing
+        if (zeroes > 2) return false;
+
+        // remember the darkest pixel
+      } else if (delta < min) {
+        min = delta;
+        minX = x;
+        minY = y;
+
+        // remember the brightest pixel
+      } else if (delta > max) {
+        max = delta;
+        maxX = x;
+        maxY = y;
+      }
+    }
+  }
+
+  // if there are no both darker and brighter pixels among siblings, it's not anti-aliasing
+  if (min === 0 || max === 0) return false;
+
+  // if either the darkest or the brightest pixel has 3+ equal siblings in both images
+  // (definitely not anti-aliased), this pixel is anti-aliased
+  return (hasManySiblings(img, minX, minY, width, height)
+            && hasManySiblings(img2, minX, minY, width, height))
+      || (hasManySiblings(img, maxX, maxY, width, height)
+        && hasManySiblings(img2, maxX, maxY, width, height));
+}
+
+/**
+ * @param {Uint8Array|Uint8ClampedArray} img1
+ * @param {Uint8Array|Uint8ClampedArray} img2
+ * @param {Uint8Array|Uint8ClampedArray} output
+ * @param {number} width
+ * @param {number} height
+ * @param {typeof DEFAULT_OPTIONS} [options]
+ * @return {number}
+ */
+export function pixelmatch(img1, img2, output, width, height, options) {
+  if (!isPixelData(img1) || !isPixelData(img2) || (output && !isPixelData(output))) {
+    throw new Error('Image data: Uint8Array, Uint8ClampedArray or Buffer expected.');
+  }
+
+  if (img1.length !== img2.length || (output && output.length !== img1.length)) {
+    // throw new Error('Image sizes do not match.');
+    return Number.POSITIVE_INFINITY;
+  }
+
+  if (img1.length !== width * height * 4) {
+    // throw new Error('Image data size does not match width/height.');
+    return Number.POSITIVE_INFINITY;
+  }
+  options = { ...DEFAULT_OPTIONS, ...options };
+
+  // check if images are identical
+  const len = width * height;
+  const a32 = new Uint32Array(img1.buffer, img1.byteOffset, len);
+  const b32 = new Uint32Array(img2.buffer, img2.byteOffset, len);
+  let identical = true;
+
+  for (let i = 0; i < len; i++) {
+    if (a32[i] !== b32[i]) { identical = false; break; }
+  }
+  if (identical) { // fast path if identical
+    if (output && !options.diffMask) {
+      for (let i = 0; i < len; i++) drawGrayPixel(img1, 4 * i, options.alpha, output);
+    }
+    return 0;
+  }
+
+  // maximum acceptable square distance between two colors;
+  // 35215 is the maximum possible value for the YIQ difference metric
+  const maxDelta = 35_215 * options.threshold * options.threshold;
+  let diff = 0;
+
+  // compare each pixel of one image against the other one
+  for (let y = 0; y < height; y++) {
+    for (let x = 0; x < width; x++) {
+      const pos = (y * width + x) * 4;
+
+      // squared YUV distance between colors at this pixel position, negative if the img2 pixel is darker
+      const delta = colorDelta(img1, img2, pos, pos);
+
+      // the color difference is above the threshold
+      if (Math.abs(delta) > maxDelta) {
+        // check it's a real rendering difference or just anti-aliasing
+        if (!options.includeAA && (antialiased(img1, x, y, width, height, img2)
+                                           || antialiased(img2, x, y, width, height, img1))) {
+          // one of the pixels is anti-aliasing; draw as yellow and do not count as difference
+          // note that we do not include such pixels in a mask
+          if (output && !options.diffMask) drawPixel(output, pos, ...options.aaColor);
+        } else {
+          // found substantial difference not caused by anti-aliasing; draw it as such
+          if (output) {
+            drawPixel(output, pos, ...(delta < 0 && (options.diffColorAlt || options.diffColor)));
+          }
+          diff++;
+        }
+      } else if (output // pixels are similar; draw background as grayscale image blended with white
+                && !options.diffMask) drawGrayPixel(img1, pos, options.alpha, output);
+    }
+  }
+
+  // return the number of different pixels
+  return diff;
+}