mirror of
https://github.com/wavetermdev/xterm.js.git
synced 2026-08-05 13:43:48 -07:00
Standardize css.toColor output to #rrggbb[aa]
This will help reduce the chance of runtime exceptions that would break the render loop.
This commit is contained in:
Daniel Imms
+45
-45
@@ -151,45 +151,45 @@ describe('Color', () => {
|
||||
});
|
||||
});
|
||||
|
||||
describe('css', () => {
|
||||
describe.only('css', () => {
|
||||
describe('toColor', () => {
|
||||
it('should convert the #rgb format to an IColor', () => {
|
||||
assert.deepEqual(css.toColor('#000'), { css: '#000', rgba: 0x000000FF });
|
||||
assert.deepEqual(css.toColor('#111'), { css: '#111', rgba: 0x111111FF });
|
||||
assert.deepEqual(css.toColor('#222'), { css: '#222', rgba: 0x222222FF });
|
||||
assert.deepEqual(css.toColor('#333'), { css: '#333', rgba: 0x333333FF });
|
||||
assert.deepEqual(css.toColor('#444'), { css: '#444', rgba: 0x444444FF });
|
||||
assert.deepEqual(css.toColor('#555'), { css: '#555', rgba: 0x555555FF });
|
||||
assert.deepEqual(css.toColor('#666'), { css: '#666', rgba: 0x666666FF });
|
||||
assert.deepEqual(css.toColor('#777'), { css: '#777', rgba: 0x777777FF });
|
||||
assert.deepEqual(css.toColor('#888'), { css: '#888', rgba: 0x888888FF });
|
||||
assert.deepEqual(css.toColor('#999'), { css: '#999', rgba: 0x999999FF });
|
||||
assert.deepEqual(css.toColor('#aaa'), { css: '#aaa', rgba: 0xaaaaaaFF });
|
||||
assert.deepEqual(css.toColor('#bbb'), { css: '#bbb', rgba: 0xbbbbbbFF });
|
||||
assert.deepEqual(css.toColor('#ccc'), { css: '#ccc', rgba: 0xccccccFF });
|
||||
assert.deepEqual(css.toColor('#ddd'), { css: '#ddd', rgba: 0xddddddFF });
|
||||
assert.deepEqual(css.toColor('#eee'), { css: '#eee', rgba: 0xeeeeeeFF });
|
||||
assert.deepEqual(css.toColor('#fff'), { css: '#fff', rgba: 0xffffffFF });
|
||||
assert.deepEqual(css.toColor('#fff'), { css: '#fff', rgba: 0xffffffFF });
|
||||
assert.deepEqual(css.toColor('#000'), { css: '#000000', rgba: 0x000000FF });
|
||||
assert.deepEqual(css.toColor('#111'), { css: '#111111', rgba: 0x111111FF });
|
||||
assert.deepEqual(css.toColor('#222'), { css: '#222222', rgba: 0x222222FF });
|
||||
assert.deepEqual(css.toColor('#333'), { css: '#333333', rgba: 0x333333FF });
|
||||
assert.deepEqual(css.toColor('#444'), { css: '#444444', rgba: 0x444444FF });
|
||||
assert.deepEqual(css.toColor('#555'), { css: '#555555', rgba: 0x555555FF });
|
||||
assert.deepEqual(css.toColor('#666'), { css: '#666666', rgba: 0x666666FF });
|
||||
assert.deepEqual(css.toColor('#777'), { css: '#777777', rgba: 0x777777FF });
|
||||
assert.deepEqual(css.toColor('#888'), { css: '#888888', rgba: 0x888888FF });
|
||||
assert.deepEqual(css.toColor('#999'), { css: '#999999', rgba: 0x999999FF });
|
||||
assert.deepEqual(css.toColor('#aaa'), { css: '#aaaaaa', rgba: 0xaaaaaaFF });
|
||||
assert.deepEqual(css.toColor('#bbb'), { css: '#bbbbbb', rgba: 0xbbbbbbFF });
|
||||
assert.deepEqual(css.toColor('#ccc'), { css: '#cccccc', rgba: 0xccccccFF });
|
||||
assert.deepEqual(css.toColor('#ddd'), { css: '#dddddd', rgba: 0xddddddFF });
|
||||
assert.deepEqual(css.toColor('#eee'), { css: '#eeeeee', rgba: 0xeeeeeeFF });
|
||||
assert.deepEqual(css.toColor('#fff'), { css: '#ffffff', rgba: 0xffffffFF });
|
||||
assert.deepEqual(css.toColor('#fff'), { css: '#ffffff', rgba: 0xffffffFF });
|
||||
});
|
||||
it('should convert the #rgb format to an IColor', () => {
|
||||
assert.deepEqual(css.toColor('#0000'), { css: '#0000', rgba: 0x00000000 });
|
||||
assert.deepEqual(css.toColor('#1111'), { css: '#1111', rgba: 0x11111111 });
|
||||
assert.deepEqual(css.toColor('#2222'), { css: '#2222', rgba: 0x22222222 });
|
||||
assert.deepEqual(css.toColor('#3333'), { css: '#3333', rgba: 0x33333333 });
|
||||
assert.deepEqual(css.toColor('#4444'), { css: '#4444', rgba: 0x44444444 });
|
||||
assert.deepEqual(css.toColor('#5555'), { css: '#5555', rgba: 0x55555555 });
|
||||
assert.deepEqual(css.toColor('#6666'), { css: '#6666', rgba: 0x66666666 });
|
||||
assert.deepEqual(css.toColor('#7777'), { css: '#7777', rgba: 0x77777777 });
|
||||
assert.deepEqual(css.toColor('#8888'), { css: '#8888', rgba: 0x88888888 });
|
||||
assert.deepEqual(css.toColor('#9999'), { css: '#9999', rgba: 0x99999999 });
|
||||
assert.deepEqual(css.toColor('#aaaa'), { css: '#aaaa', rgba: 0xaaaaaaaa });
|
||||
assert.deepEqual(css.toColor('#bbbb'), { css: '#bbbb', rgba: 0xbbbbbbbb });
|
||||
assert.deepEqual(css.toColor('#cccc'), { css: '#cccc', rgba: 0xcccccccc });
|
||||
assert.deepEqual(css.toColor('#dddd'), { css: '#dddd', rgba: 0xdddddddd });
|
||||
assert.deepEqual(css.toColor('#eeee'), { css: '#eeee', rgba: 0xeeeeeeee });
|
||||
assert.deepEqual(css.toColor('#ffff'), { css: '#ffff', rgba: 0xffffffff });
|
||||
assert.deepEqual(css.toColor('#ffff'), { css: '#ffff', rgba: 0xffffffff });
|
||||
assert.deepEqual(css.toColor('#0000'), { css: '#00000000', rgba: 0x00000000 });
|
||||
assert.deepEqual(css.toColor('#1111'), { css: '#11111111', rgba: 0x11111111 });
|
||||
assert.deepEqual(css.toColor('#2222'), { css: '#22222222', rgba: 0x22222222 });
|
||||
assert.deepEqual(css.toColor('#3333'), { css: '#33333333', rgba: 0x33333333 });
|
||||
assert.deepEqual(css.toColor('#4444'), { css: '#44444444', rgba: 0x44444444 });
|
||||
assert.deepEqual(css.toColor('#5555'), { css: '#55555555', rgba: 0x55555555 });
|
||||
assert.deepEqual(css.toColor('#6666'), { css: '#66666666', rgba: 0x66666666 });
|
||||
assert.deepEqual(css.toColor('#7777'), { css: '#77777777', rgba: 0x77777777 });
|
||||
assert.deepEqual(css.toColor('#8888'), { css: '#88888888', rgba: 0x88888888 });
|
||||
assert.deepEqual(css.toColor('#9999'), { css: '#99999999', rgba: 0x99999999 });
|
||||
assert.deepEqual(css.toColor('#aaaa'), { css: '#aaaaaaaa', rgba: 0xaaaaaaaa });
|
||||
assert.deepEqual(css.toColor('#bbbb'), { css: '#bbbbbbbb', rgba: 0xbbbbbbbb });
|
||||
assert.deepEqual(css.toColor('#cccc'), { css: '#cccccccc', rgba: 0xcccccccc });
|
||||
assert.deepEqual(css.toColor('#dddd'), { css: '#dddddddd', rgba: 0xdddddddd });
|
||||
assert.deepEqual(css.toColor('#eeee'), { css: '#eeeeeeee', rgba: 0xeeeeeeee });
|
||||
assert.deepEqual(css.toColor('#ffff'), { css: '#ffffffff', rgba: 0xffffffff });
|
||||
assert.deepEqual(css.toColor('#ffff'), { css: '#ffffffff', rgba: 0xffffffff });
|
||||
});
|
||||
it('should convert the #rrggbb format to an IColor', () => {
|
||||
assert.deepEqual(css.toColor('#000000'), { css: '#000000', rgba: 0x000000FF });
|
||||
@@ -230,18 +230,18 @@ describe('Color', () => {
|
||||
assert.deepEqual(css.toColor('#ffffffff'), { css: '#ffffffff', rgba: 0xffffffff });
|
||||
});
|
||||
it('should convert the rgb() format to an IColor', () => {
|
||||
assert.deepEqual(css.toColor('rgb(0, 0, 0)'), { css: 'rgb(0, 0, 0)', rgba: 0x000000ff });
|
||||
assert.deepEqual(css.toColor('rgb(80, 0, 0)'), { css: 'rgb(80, 0, 0)', rgba: 0x500000ff });
|
||||
assert.deepEqual(css.toColor('rgb(0, 80, 0)'), { css: 'rgb(0, 80, 0)', rgba: 0x005000ff });
|
||||
assert.deepEqual(css.toColor('rgb(0, 0, 80)'), { css: 'rgb(0, 0, 80)', rgba: 0x000050ff });
|
||||
assert.deepEqual(css.toColor('rgb(255, 255, 255)'), { css: 'rgb(255, 255, 255)', rgba: 0xffffffff });
|
||||
assert.deepEqual(css.toColor('rgb(0, 0, 0)'), { css: '#000000ff', rgba: 0x000000ff });
|
||||
assert.deepEqual(css.toColor('rgb(80, 0, 0)'), { css: '#500000ff', rgba: 0x500000ff });
|
||||
assert.deepEqual(css.toColor('rgb(0, 80, 0)'), { css: '#005000ff', rgba: 0x005000ff });
|
||||
assert.deepEqual(css.toColor('rgb(0, 0, 80)'), { css: '#000050ff', rgba: 0x000050ff });
|
||||
assert.deepEqual(css.toColor('rgb(255, 255, 255)'), { css: '#ffffffff', rgba: 0xffffffff });
|
||||
});
|
||||
it('should convert the rgba() format to an IColor', () => {
|
||||
assert.deepEqual(css.toColor('rgba(0, 0, 0, 0)'), { css: 'rgba(0, 0, 0, 0)', rgba: 0x00000000 });
|
||||
assert.deepEqual(css.toColor('rgba(80, 0, 0, 0.5)'), { css: 'rgba(80, 0, 0, 0.5)', rgba: 0x50000080 });
|
||||
assert.deepEqual(css.toColor('rgba(0, 80, 0, 0.5)'), { css: 'rgba(0, 80, 0, 0.5)', rgba: 0x00500080 });
|
||||
assert.deepEqual(css.toColor('rgba(0, 0, 80, 0.5)'), { css: 'rgba(0, 0, 80, 0.5)', rgba: 0x00005080 });
|
||||
assert.deepEqual(css.toColor('rgba(255, 255, 255, 1)'), { css: 'rgba(255, 255, 255, 1)', rgba: 0xffffffff });
|
||||
assert.deepEqual(css.toColor('rgba(0, 0, 0, 0)'), { css: '#00000000', rgba: 0x00000000 });
|
||||
assert.deepEqual(css.toColor('rgba(80, 0, 0, 0.5)'), { css: '#50000080', rgba: 0x50000080 });
|
||||
assert.deepEqual(css.toColor('rgba(0, 80, 0, 0.5)'), { css: '#00500080', rgba: 0x00500080 });
|
||||
assert.deepEqual(css.toColor('rgba(0, 0, 80, 0.5)'), { css: '#00005080', rgba: 0x00005080 });
|
||||
assert.deepEqual(css.toColor('rgba(255, 255, 255, 1)'), { css: '#ffffffff', rgba: 0xffffffff });
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
+21
-31
@@ -96,25 +96,19 @@ export namespace css {
|
||||
export function toColor(css: string): IColor {
|
||||
if (css.match(/#[0-9a-f]{3,8}/i)) {
|
||||
switch (css.length) {
|
||||
case 4: // #rgb
|
||||
return {
|
||||
css,
|
||||
rgba: channels.toRgba(
|
||||
parseInt(css.slice(1, 2).repeat(2), 16),
|
||||
parseInt(css.slice(2, 3).repeat(2), 16),
|
||||
parseInt(css.slice(3, 4).repeat(2), 16)
|
||||
)
|
||||
};
|
||||
case 5: // #rgba
|
||||
return {
|
||||
css,
|
||||
rgba: channels.toRgba(
|
||||
parseInt(css.slice(1, 2).repeat(2), 16),
|
||||
parseInt(css.slice(2, 3).repeat(2), 16),
|
||||
parseInt(css.slice(3, 4).repeat(2), 16),
|
||||
parseInt(css.slice(4, 5).repeat(2), 16)
|
||||
)
|
||||
};
|
||||
case 4: { // #rgb
|
||||
const r = parseInt(css.slice(1, 2).repeat(2), 16);
|
||||
const g = parseInt(css.slice(2, 3).repeat(2), 16);
|
||||
const b = parseInt(css.slice(3, 4).repeat(2), 16);
|
||||
return rgba.toColor(r, g, b);
|
||||
}
|
||||
case 5: { // #rgba
|
||||
const r = parseInt(css.slice(1, 2).repeat(2), 16);
|
||||
const g = parseInt(css.slice(2, 3).repeat(2), 16);
|
||||
const b = parseInt(css.slice(3, 4).repeat(2), 16);
|
||||
const a = parseInt(css.slice(4, 5).repeat(2), 16);
|
||||
return rgba.toColor(r, g, b, a);
|
||||
}
|
||||
case 7: // #rrggbb
|
||||
return {
|
||||
css,
|
||||
@@ -129,15 +123,11 @@ export namespace css {
|
||||
}
|
||||
const rgbaMatch = css.match(/rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(,\s*(0|1|\d?\.(\d+))\s*)?\)/);
|
||||
if (rgbaMatch) { // rgb() or rgba()
|
||||
return {
|
||||
css,
|
||||
rgba: channels.toRgba(
|
||||
parseInt(rgbaMatch[1]), // r
|
||||
parseInt(rgbaMatch[2]), // g
|
||||
parseInt(rgbaMatch[3]), // b
|
||||
Math.round((rgbaMatch[5] === undefined ? 1 : parseFloat(rgbaMatch[5])) * 0xFF) // a?
|
||||
)
|
||||
};
|
||||
const r = parseInt(rgbaMatch[1]);
|
||||
const g = parseInt(rgbaMatch[2]);
|
||||
const b = parseInt(rgbaMatch[3]);
|
||||
const a = Math.round((rgbaMatch[5] === undefined ? 1 : parseFloat(rgbaMatch[5])) * 0xFF);
|
||||
return rgba.toColor(r, g, b, a);
|
||||
}
|
||||
throw new Error('css.toColor: Unsupported css format');
|
||||
}
|
||||
@@ -268,10 +258,10 @@ export namespace rgba {
|
||||
return [(value >> 24) & 0xFF, (value >> 16) & 0xFF, (value >> 8) & 0xFF, value & 0xFF];
|
||||
}
|
||||
|
||||
export function toColor(r: number, g: number, b: number): IColor {
|
||||
export function toColor(r: number, g: number, b: number, a?: number): IColor {
|
||||
return {
|
||||
css: channels.toCss(r, g, b),
|
||||
rgba: channels.toRgba(r, g, b)
|
||||
css: channels.toCss(r, g, b, a),
|
||||
rgba: channels.toRgba(r, g, b, a)
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user