fixed problems with fiveui.color.findBGColor, added a test_color.html, updated colorBrightness rule

3 files changed, 68 insertions, 7 deletions

diff --git a/src/js/fiveui/injected/prelude.js b/src/js/fiveui/injected/prelude.js
index fbe5307..c073c9f 100644
--- a/src/js/fiveui/injected/prelude.js
+++ b/src/js/fiveui/injected/prelude.js
@@ -271,6 +271,14 @@ shortHexToHex = function (color) {
   return stdColor.substr(0, 7);
 };
 
+// Compare RGBA objects
+equalRGBA = function (c1, c2) {
+  return (c1.r == c2.r &&
+          c1.g == c2.g &&
+          c1.b == c2.b &&
+          c1.a == c2.a);
+};
+
 /**
  * Convert RGB values to Hex.
  */
@@ -329,13 +337,13 @@ fiveui.color.colorToRGB = function(color) {
       return fiveui.color.hexToRGB(fiveui.color.colorToHex(color));
     }
 
-    var digits = /rgba?\((\d+), (\d+), (\d+)(, (\d.\d+))?/.exec(color);
+    var digits = /rgba?\((\d+), (\d+), (\d+)(, ([-+]?[0-9]*\.?[0-9]+))?/.exec(color);
     if (!digits) {
       throw new ParseError('could not parse color string: ' + color);
     }
 
   var alpha = 1;
-  if (digits[5]) {
+  if (digits[5] != undefined) {
     alpha = parseFloat(digits[5]);
   }
 
@@ -363,11 +371,12 @@ fiveui.color.findBGColor = function(obj) {
   var none = fc.colorToRGB('rgba(0, 0, 0, 0)');
 
   if (real.a != 1) {
+
     // find parents with a non-default bg color:
     var parents = obj.parents().filter(
       function() {
         var color = fc.colorToRGB($(this).css('background-color'));
-        return color != none;
+        return !equalRGBA(color, none);
       }).map(
         function(i) {
           return fc.colorToRGB($(this).css('background-color'));
@@ -376,6 +385,7 @@ fiveui.color.findBGColor = function(obj) {
     // push a white element onto the end of parents
     parents.push({ r: 255, g: 255, b: 255, a: 1});
 
+    // takeWhile alpha != 1
     var colors = [];
     for (var i=0; i < parents.length; i++) {
       colors.push(parents[i]);
@@ -384,9 +394,16 @@ fiveui.color.findBGColor = function(obj) {
       }
     }
 
-    // compose the colors and return:
-    return _.reduce(colors, fc.alphaCombine, none);
-  } else {
+    // Compose the colors and return. Note that fc.alphaCombine is
+    // neither commutative, nor associative, so we need to be carefull
+    // of the order in which parent colors are combined.
+    var res = real;
+    for (var i=0; i < colors.length; i++) {
+      res = fc.alphaCombine(res, colors[i]);
+    }
+    return res;
+  }
+  else {
     return real;
   }
 };
diff --git a/src/js/fiveui/js/background.js b/src/js/fiveui/js/background.js
index 268526b..3d2a2f1 100644
--- a/src/js/fiveui/js/background.js
+++ b/src/js/fiveui/js/background.js
@@ -145,7 +145,8 @@ fiveui.Background.prototype.pageLoad = function(tabId, url, data) {
     }
 
     var computeScripts = _.flatten(
-      [ [ this.dataLoader('jquery/jquery-1.8.3.js')
+      [ [ this.dataLoader('underscore.js')
+        , this.dataLoader('jquery/jquery-1.8.3.js')
         , this.dataLoader('md5.js')
         , this.dataLoader('injected/prelude.js')
         , this.dataLoader('injected/jquery-plugins.js')
diff --git a/src/js/tests/specs/prelude.js b/src/js/tests/specs/prelude.js
index 93a12cb..84f6859 100644
--- a/src/js/tests/specs/prelude.js
+++ b/src/js/tests/specs/prelude.js
@@ -133,6 +133,49 @@ describe('prelude', function() {
 
   ]);
 
+  // to test fiveui.color.findBGColor, we need a jQuery obj for input
+  describe("fiveui.color.findBGColor", function () {
+
+    beforeEach(function () {
+      // insert new div id=test to add test html content to
+      $("body").append($("<div id=test></div>"));
+    });
+
+    afterEach(function () {
+      // remove the test div
+      $("#test").remove();
+    });
+
+    it("should report a white background", function () {
+      $("#test").append($('<div id=fbgc1 style="background-color: #FFFFFF">fbgc1</div>'));
+      obj = $("#fbgc1");
+      oracle = { r: 255, g: 255, b: 255, a: 1 };
+      expect(fiveui.color.findBGColor(obj)).toEqual(oracle);
+    });
+
+    it("should report a red background", function () {
+      $("#test").append($('<div id=fbgc2 style="background-color: #FF0000">fbgc2</div>'));
+      obj = $("#fbgc2");
+      oracle = { r: 255, g: 0, b: 0, a: 1 };
+      expect(fiveui.color.findBGColor(obj)).toEqual(oracle);
+    });
+
+    it("should report a transparent red over white background", function () {
+      $("#test").append($('<div id=fbgc3 style="background-color: #FFFFFF">' + 
+                          'this bg is white ' +
+                          '<span id=pinkspan ' +
+                          'style="background-color: rgba(255, 0, 0, 0.5)">' +
+                          'this bg is pink' +
+                          '</span>' +
+                          '</div>'));
+      obj = $("#pinkspan");
+      oracle = { r: 255, g: 128, b: 128, a: 1 };
+      expect(fiveui.color.findBGColor(obj)).toEqual(oracle);
+    });
+
+  });
+
+
   var getFontTests = [
     // CSS ID,        Family,  Weight,   Size
     ['#getFontTest1', 'Arial', 'normal', '12'],