diff --git a/src/parse.js b/src/parse.js index c214f7669..a0a74821d 100644 --- a/src/parse.js +++ b/src/parse.js @@ -56,7 +56,7 @@ export default function parse (str) { if (format && format.type === "function") { let alpha = 1; - if (format.lastAlpha || util.last(env.parsed.args).alpha) { + if (format.withAlpha || util.last(env.parsed.args).alpha) { alpha = env.parsed.args.pop(); } diff --git a/src/serialize.js b/src/serialize.js index 8a73db7a9..126281130 100644 --- a/src/serialize.js +++ b/src/serialize.js @@ -2,7 +2,6 @@ import * as util from "./util.js"; import ColorSpace from "./space.js"; import defaults from "./defaults.js"; import getColor from "./getColor.js"; -import to from "./to.js"; import checkInGamut from "./inGamut.js"; import toGamut from "./toGamut.js"; import clone from "./clone.js"; @@ -77,7 +76,9 @@ export default function serialize (color, { alpha = util.toPrecision(alpha, precision); } - let strAlpha = color.alpha < 1 && !format.noAlpha? `${format.commas? "," : " /"} ${alpha}` : ""; + let strAlpha = (format.withAlpha || (format.withAlpha === undefined && alpha < 1)) + ? `${format.commas? "," : " /"} ${alpha}` + : ""; ret = `${name}(${args.join(format.commas? ", " : " ")}${strAlpha})`; } diff --git a/src/spaces/hsl.js b/src/spaces/hsl.js index 7e842a9fd..92aae0939 100644 --- a/src/spaces/hsl.js +++ b/src/spaces/hsl.js @@ -74,7 +74,7 @@ export default new ColorSpace({ "hsla": { coords: [" | ", "", ""], commas: true, - lastAlpha: true, + withAlpha: true, } }, }); diff --git a/src/spaces/srgb.js b/src/spaces/srgb.js index a18c4420e..fb0ef0357 100644 --- a/src/spaces/srgb.js +++ b/src/spaces/srgb.js @@ -47,18 +47,19 @@ export default new RGBColorSpace({ name: "rgb", commas: true, coords: coordGrammarNumber, - noAlpha: true, + withAlpha: false, }, "color": { /* use defaults */ }, "rgba": { coords: coordGrammar, commas: true, - lastAlpha: true, + withAlpha: true, }, "rgba_number": { name: "rgba", commas: true, - coords: coordGrammarNumber + coords: coordGrammarNumber, + withAlpha: true, }, "hex": { type: "custom", diff --git a/tests/index.html b/tests/index.html index bbe694f7d..1786fbe6d 100644 --- a/tests/index.html +++ b/tests/index.html @@ -17,6 +17,7 @@

Color.js Tests

  • Parsing
  • Object construction
    • +
  • Serialization
  • Conversions
  • DeltaE
  • Gamut mapping
    • diff --git a/tests/serialize.html b/tests/serialize.html new file mode 100644 index 000000000..b39518f8a --- /dev/null +++ b/tests/serialize.html @@ -0,0 +1,135 @@ + + + + + +Color parse tests + + + + + + + + + + + +

    Color serialize Tests

    +

    These tests serialize different color formats and compare the result as strings.

    + +
    +

    sRGB colors

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    rgb(255 0 120 / 1)rgb(100% 0% 47.059%)
    rgb(255 0 120 / .5)rgb(100% 0% 47.059% / 0.5)
    rgb(255 0 120 / 0)rgb(100% 0% 47.059% / 0)
    rgb(255 0 120 / 1)rgb(255, 0, 120)
    rgb(255 0 120 / .5)rgb(255, 0, 120)
    rgb(255 0 120 / 0)rgb(255, 0, 120)
    rgb(255 0 120 / 1)rgba(100%, 0%, 47.059%, 1)
    rgb(255 0 120 / .5)rgba(100%, 0%, 47.059%, 0.5)
    rgb(255 0 120 / 0)rgba(100%, 0%, 47.059%, 0)
    rgb(255 0 120 / 1)rgba(255, 0, 120, 1)
    rgb(255 0 120 / .5)rgba(255, 0, 120, 0.5)
    rgb(255 0 120 / 0)rgba(255, 0, 120, 0)
    hsl(180 50% 50% / 1)hsl(180 50% 50%)
    hsl(180 50% 50% / .5)hsl(180 50% 50% / 0.5)
    hsl(180 50% 50% / 0)hsl(180 50% 50% / 0)
    hsl(180 50% 50% / 1)hsla(180, 50%, 50%, 1)
    hsl(180 50% 50% / .5)hsla(180, 50%, 50%, 0.5)
    hsl(180 50% 50% / 0)hsla(180, 50%, 50%, 0)
    +
    + + + + diff --git a/types/src/space.d.ts b/types/src/space.d.ts index 295d340a1..a5c5fcb60 100644 --- a/types/src/space.d.ts +++ b/types/src/space.d.ts @@ -12,8 +12,7 @@ export interface Format { | undefined; toGamut?: boolean | undefined; commas?: boolean | undefined; - lastAlpha?: boolean | undefined; - noAlpha?: boolean | undefined; + withAlpha?: boolean | undefined; test?: ((str: string) => boolean) | undefined; parse?: ((str: string) => ColorConstructor) | undefined; serialize?: ((coords: Coords, alpha: number, opts?: Record) => string) | undefined;