From 6701d12173a8cbe4042fc794e45014d0645752c0 Mon Sep 17 00:00:00 2001 From: Chris Date: Tue, 6 Aug 2024 22:08:59 +0800 Subject: [PATCH 1/2] fix: not `round` for `hsl2rgb` --- src/io/css/css2rgb.js | 6 +++++ src/io/hsl/hsl2rgb.js | 3 +-- test/css2rgb.test.js | 4 ++-- test/hsl2rgb.test.js | 56 +++---------------------------------------- 4 files changed, 12 insertions(+), 57 deletions(-) diff --git a/src/io/css/css2rgb.js b/src/io/css/css2rgb.js index e01ecd62..bc8f098d 100644 --- a/src/io/css/css2rgb.js +++ b/src/io/css/css2rgb.js @@ -71,6 +71,9 @@ const css2rgb = (css) => { hsl[1] *= 0.01; hsl[2] *= 0.01; const rgb = hsl2rgb(hsl); + for (let i = 0; i < 3; i++) { + rgb[i] = round(rgb[i]); + } rgb[3] = 1; return rgb; } @@ -81,6 +84,9 @@ const css2rgb = (css) => { hsl[1] *= 0.01; hsl[2] *= 0.01; const rgb = hsl2rgb(hsl); + for (let i = 0; i < 3; i++) { + rgb[i] = round(rgb[i]); + } rgb[3] = +m[4]; // default alpha = 1 return rgb; } diff --git a/src/io/hsl/hsl2rgb.js b/src/io/hsl/hsl2rgb.js index ea5ee93c..4300027a 100644 --- a/src/io/hsl/hsl2rgb.js +++ b/src/io/hsl/hsl2rgb.js @@ -1,5 +1,4 @@ import { unpack } from '../../utils/index.js'; -const { round } = Math; const hsl2rgb = (...args) => { args = unpack(args, 'hsl'); @@ -24,7 +23,7 @@ const hsl2rgb = (...args) => { else if (3 * t3[i] < 2) c[i] = t1 + (t2 - t1) * (2 / 3 - t3[i]) * 6; else c[i] = t1; } - [r, g, b] = [round(c[0] * 255), round(c[1] * 255), round(c[2] * 255)]; + [r, g, b] = [c[0] * 255, c[1] * 255, c[2] * 255]; } if (args.length > 3) { // keep alpha channel diff --git a/test/css2rgb.test.js b/test/css2rgb.test.js index 1c4c73af..39d7a3c3 100644 --- a/test/css2rgb.test.js +++ b/test/css2rgb.test.js @@ -1,5 +1,5 @@ import { describe, it, expect } from 'vitest'; -import chroma from '../index.js'; +import chroma from 'chroma-js'; const css2rgb = chroma.input.format.css; @@ -12,7 +12,7 @@ describe('Testing CSS2RGB color conversions', () => { 'RGBA(255, 0, 0 , 0.5)': [255, 0, 0, 0.5], 'RGBA (255, 0, 0 , 0.5)': undefined, 'rgba(0%,100%,0%,.5)': [0, 255, 0, 0.5], - ' hsl(240,100%,50%) ': [0, 0, 255, 1], + 'hsl(240,100%,50%) ': [0, 0, 255, 1], 'hsl(60,100%,50%)': [255, 255, 0, 1], 'hsla(180,100%,50%,1)': [0, 255, 255, 1], 'hsla(300,100%,50%,.25)': [255, 0, 255, 0.25], diff --git a/test/hsl2rgb.test.js b/test/hsl2rgb.test.js index cd41e1fc..c4b7d5f9 100644 --- a/test/hsl2rgb.test.js +++ b/test/hsl2rgb.test.js @@ -1,53 +1,3 @@ -// const vows = require('vows'); -// const assert = require('assert'); -// require('es6-shim'); - -// import hsl2rgb from '../src/io/hsl/hsl2rgb.js'; - -// vows.describe('Testing CMYK color conversions') -// .addBatch({ -// 'parse simple HSL colors': { -// topic: { -// black: { in: [0, 0, 0], out: [0, 0, 0, 1] }, -// white: { in: [0, 0, 1], out: [255, 255, 255, 1] }, -// gray: { in: [0, 0, 0.5], out: [127.5, 127.5, 127.5, 1] }, -// red: { in: [0, 1, 0.5], out: [255, 0, 0, 1] }, -// yellow: { in: [60, 1, 0.5], out: [255, 255, 0, 1] }, -// green: { in: [120, 1, 0.5], out: [0, 255, 0, 1] }, -// cyan: { in: [180, 1, 0.5], out: [0, 255, 255, 1] }, -// blue: { in: [240, 1, 0.5], out: [0, 0, 255, 1] }, -// magenta: { in: [300, 1, 0.5], out: [255, 0, 255, 1] }, -// red_again: { in: [360, 1, 0.5], out: [255, 0, 0, 1] } -// }, -// hsl_arr(topic) { -// Object.keys(topic).forEach((key) => { -// assert.deepEqual( -// hsl2rgb(topic[key].in), -// topic[key].out, -// key -// ); -// }); -// }, -// hsl_args(topic) { -// Object.keys(topic).forEach((key) => { -// assert.deepEqual( -// hsl2rgb.apply(null, topic[key].in), -// topic[key].out, -// key -// ); -// }); -// }, -// hsl_obj(topic) { -// Object.keys(topic).forEach((key) => { -// const [h, s, l] = topic[key].in; -// assert.deepEqual(hsl2rgb({ h, s, l }), topic[key].out, key); -// }); -// } -// }, -// 'make sure that alpha is 1': {} -// }) -// .export(module); - import { describe, it, expect } from 'vitest'; import hsl2rgb from '../src/io/hsl/hsl2rgb.js'; @@ -57,11 +7,11 @@ describe('Testing HSL to RGB color conversions', () => { { name: 'white', hsl: [0, 0, 1], rgb: [255, 255, 255, 1] }, { name: 'gray', hsl: [0, 0, 0.5], rgb: [127.5, 127.5, 127.5, 1] }, { name: 'red', hsl: [0, 1, 0.5], rgb: [255, 0, 0, 1] }, - { name: 'yellow', hsl: [60, 1, 0.5], rgb: [255, 255, 0, 1] }, + { name: 'yellow', hsl: [60, 1, 0.5], rgb: [254.99999999999994, 255, 0, 1] }, { name: 'green', hsl: [120, 1, 0.5], rgb: [0, 255, 0, 1] }, - { name: 'cyan', hsl: [180, 1, 0.5], rgb: [0, 255, 255, 1] }, + { name: 'cyan', hsl: [180, 1, 0.5], rgb: [0, 254.99999999999994, 255, 1] }, { name: 'blue', hsl: [240, 1, 0.5], rgb: [0, 0, 255, 1] }, - { name: 'magenta', hsl: [300, 1, 0.5], rgb: [255, 0, 255, 1] }, + { name: 'magenta', hsl: [300, 1, 0.5], rgb: [255, 0, 254.99999999999994, 1] }, { name: 'red again', hsl: [360, 1, 0.5], rgb: [255, 0, 0, 1] } ]; From 7be797ebc9984e5378d16d67946604b8d19d9fce Mon Sep 17 00:00:00 2001 From: Chris Date: Tue, 6 Aug 2024 22:10:41 +0800 Subject: [PATCH 2/2] chore: update --- test/css2rgb.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/css2rgb.test.js b/test/css2rgb.test.js index 39d7a3c3..3196cc59 100644 --- a/test/css2rgb.test.js +++ b/test/css2rgb.test.js @@ -1,5 +1,5 @@ import { describe, it, expect } from 'vitest'; -import chroma from 'chroma-js'; +import chroma from '../index.js'; const css2rgb = chroma.input.format.css;