Fix a graphical bug in Firefox - Should fix #24

public/js/lib/models/arrow.js

@@ -36,6 +36,24 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
       else if ( pos === 'right' ) return 'left';
     },
 
+    /**
+    @method hexToRGB
+    @description 
+      returns an rgb color from an hex color
+    @returns {Array}
+    **/
+    hexToRGB: function (h) {
+      if ( typeof h !== 'string' || !h.match(/^#([0-9A-F]{3}$)|([0-9A-F]{6}$)/i) ) return [0, 0, 0];
+      else if ( h.match(/^(#[0-9a-f]{3})$/i) ) h = '#' + h[1] + h[1] + h[2] + h[2] + h[3] + h[3];
+      var rgb = [],
+          i = 1;
+
+      for(; i < 6; i+=2) {
+        rgb.push(parseInt(h.substring(i, i + 2), 16));
+      }
+      return rgb;
+    },
+
     /**
     @method _baseCSS
     @description generates the base css
@@ -87,12 +105,14 @@ if (!('CSSArrowPlease' in window)) window.CSSArrowPlease = {};
     _arrowCSS: function (color, size, layer) {
       var pos       = this.get('position'),
           iPos      = this.invertedPosition(),
+          rgbColor  = this.hexToRGB(color),
           css       = ".arrow_box:";
 
       layer = layer || 'after';
 
       css += layer + ' {\n';
 
+      css += '\tborder-color: rgba(' + rgbColor.join(', ') + ', 0);\n';
       css += '\tborder-' + iPos + '-color: ' + color + ';\n';
       css += '\tborder-width: ' + size + 'px;\n';
 

public/js/spec/models/arrow_spec.js

@@ -96,6 +96,30 @@ describe("CSSArrowPlease.Arrow", function () {
 
   });
 
+  describe('convert hex color to rgb color', function () {
+
+    it('converts "#888"', function () {
+      expect( arrow.hexToRGB('#888') ).toEqual([136 , 136 , 136]);
+    });
+
+    it('converts "#88B7D5"', function () {
+      expect( arrow.hexToRGB('#88B7D5') ).toEqual([136, 183, 213]);
+    });
+
+    it('converts "#C2E1F5"', function () {
+      expect( arrow.hexToRGB('#C2E1F5') ).toEqual([194, 225, 245]);
+    });
+
+    it('returns [0, 0, 0] if there is no input color', function () {
+      expect( arrow.hexToRGB() ).toEqual([0, 0, 0]);
+    });
+
+    it('returns [0, 0, 0] if the input color is invalid', function () {
+      expect( arrow.hexToRGB('invalid') ).toEqual([0, 0, 0]);
+    });
+
+  });
+
   describe('toCSS', function () {
 
     describe('baseCSS', function () {
@@ -177,8 +201,9 @@ describe("CSSArrowPlease.Arrow", function () {
       });
 
       it('it has the correct color', function () {
-        var expected = 'border-bottom-color: #888';
-        expect( arrow._arrowCSS('#888', 20) ).toMatch( expected );
+        var css = arrow._arrowCSS('#888', 20);
+        expect( css ).toMatch( 'border-bottom-color: #888' );
+        expect( css ).toMatch( 'border-color: rgba\\(136, 136, 136, 0\\)' );
       });
 
       describe('position top', function () {