Add tests for Color functions

src/browser/Color.test.ts

@@ -4,7 +4,7 @@
  */
 
 import { assert } from 'chai';
-import { blend } from 'browser/Color';
+import { blend, fromCss, toPaddedHex, toCss } from 'browser/Color';
 
 describe('Color', () => {
   describe('blend', () => {
@@ -28,4 +28,70 @@ describe('Color', () => {
       assert.deepEqual(blend({ css: '#000000', rgba: 0x000000FF }, { css: '#FFFFFFFF', rgba: 0xFFFFFFFF }), { css: '#FFFFFFFF', rgba: 0xFFFFFFFF });
     });
   });
+
+  describe('fromCss', () => {
+    it('should covert a CSS string to an IColor', () => {
+      assert.deepEqual(fromCss('#000000'), { css: '#000000', rgba: 0x000000FF });
+      assert.deepEqual(fromCss('#101010'), { css: '#101010', rgba: 0x101010FF });
+      assert.deepEqual(fromCss('#202020'), { css: '#202020', rgba: 0x202020FF });
+      assert.deepEqual(fromCss('#303030'), { css: '#303030', rgba: 0x303030FF });
+      assert.deepEqual(fromCss('#404040'), { css: '#404040', rgba: 0x404040FF });
+      assert.deepEqual(fromCss('#505050'), { css: '#505050', rgba: 0x505050FF });
+      assert.deepEqual(fromCss('#606060'), { css: '#606060', rgba: 0x606060FF });
+      assert.deepEqual(fromCss('#707070'), { css: '#707070', rgba: 0x707070FF });
+      assert.deepEqual(fromCss('#808080'), { css: '#808080', rgba: 0x808080FF });
+      assert.deepEqual(fromCss('#909090'), { css: '#909090', rgba: 0x909090FF });
+      assert.deepEqual(fromCss('#a0a0a0'), { css: '#a0a0a0', rgba: 0xa0a0a0FF });
+      assert.deepEqual(fromCss('#b0b0b0'), { css: '#b0b0b0', rgba: 0xb0b0b0FF });
+      assert.deepEqual(fromCss('#c0c0c0'), { css: '#c0c0c0', rgba: 0xc0c0c0FF });
+      assert.deepEqual(fromCss('#d0d0d0'), { css: '#d0d0d0', rgba: 0xd0d0d0FF });
+      assert.deepEqual(fromCss('#e0e0e0'), { css: '#e0e0e0', rgba: 0xe0e0e0FF });
+      assert.deepEqual(fromCss('#f0f0f0'), { css: '#f0f0f0', rgba: 0xf0f0f0FF });
+      assert.deepEqual(fromCss('#ffffff'), { css: '#ffffff', rgba: 0xffffffFF });
+    });
+  });
+
+  describe('toPaddedHex', () => {
+    it('should convert numbers to 2-digit hex values', () => {
+      assert.equal(toPaddedHex(0x00), '00');
+      assert.equal(toPaddedHex(0x10), '10');
+      assert.equal(toPaddedHex(0x20), '20');
+      assert.equal(toPaddedHex(0x30), '30');
+      assert.equal(toPaddedHex(0x40), '40');
+      assert.equal(toPaddedHex(0x50), '50');
+      assert.equal(toPaddedHex(0x60), '60');
+      assert.equal(toPaddedHex(0x70), '70');
+      assert.equal(toPaddedHex(0x80), '80');
+      assert.equal(toPaddedHex(0x90), '90');
+      assert.equal(toPaddedHex(0xa0), 'a0');
+      assert.equal(toPaddedHex(0xb0), 'b0');
+      assert.equal(toPaddedHex(0xc0), 'c0');
+      assert.equal(toPaddedHex(0xd0), 'd0');
+      assert.equal(toPaddedHex(0xe0), 'e0');
+      assert.equal(toPaddedHex(0xf0), 'f0');
+      assert.equal(toPaddedHex(0xff), 'ff');
+    });
+  });
+
+  describe('toCss', () => {
+    it('should convert an rgb array to css hex string', () => {
+      assert.equal(toCss(0x00, 0x00, 0x00), '#000000');
+      assert.equal(toCss(0x10, 0x10, 0x10), '#101010');
+      assert.equal(toCss(0x20, 0x20, 0x20), '#202020');
+      assert.equal(toCss(0x30, 0x30, 0x30), '#303030');
+      assert.equal(toCss(0x40, 0x40, 0x40), '#404040');
+      assert.equal(toCss(0x50, 0x50, 0x50), '#505050');
+      assert.equal(toCss(0x60, 0x60, 0x60), '#606060');
+      assert.equal(toCss(0x70, 0x70, 0x70), '#707070');
+      assert.equal(toCss(0x80, 0x80, 0x80), '#808080');
+      assert.equal(toCss(0x90, 0x90, 0x90), '#909090');
+      assert.equal(toCss(0xa0, 0xa0, 0xa0), '#a0a0a0');
+      assert.equal(toCss(0xb0, 0xb0, 0xb0), '#b0b0b0');
+      assert.equal(toCss(0xc0, 0xc0, 0xc0), '#c0c0c0');
+      assert.equal(toCss(0xd0, 0xd0, 0xd0), '#d0d0d0');
+      assert.equal(toCss(0xe0, 0xe0, 0xe0), '#e0e0e0');
+      assert.equal(toCss(0xf0, 0xf0, 0xf0), '#f0f0f0');
+      assert.equal(toCss(0xff, 0xff, 0xff), '#ffffff');
+    });
+  });
 });

src/browser/Color.ts

@@ -25,7 +25,7 @@ export function blend(bg: IColor, fg: IColor): IColor {
 export function fromCss(css: string): IColor {
   return {
     css,
-    rgba: parseInt(css.slice(1), 16) << 8 | 0xFF
+    rgba: (parseInt(css.slice(1), 16) << 8 | 0xFF) >>> 0
   };
 }