axs.utils.getBgColor returns null for unstyled elements in Firefox

[jdan]

Hey @alice,

The following code segment:

axs.utils.getBgColor = function(style, element) {
    var bgColorString = style.backgroundColor;
    var bgColor = axs.color.parseColor(bgColorString);
    if (!bgColor) 
        return null;
    ...
};

Will return null if bgColor is falsy. Looking at axs.color.parseColor:

axs.color.parseColor = function(colorString) {
    var rgbRegex = /^rgb\((\d+), (\d+), (\d+)\)$/;
    var match = colorString.match(rgbRegex);
    if (match) {
        var r = parseInt(match[1], 10);
        var g = parseInt(match[2], 10);
        var b = parseInt(match[3], 10);
        var a = 1;
        return new axs.color.Color(r, g, b, a);
    }
    var rgbaRegex = /^rgba\((\d+), (\d+), (\d+), (\d*(\.\d+)?)\)/;
    match = colorString.match(rgbaRegex);
    if (match) {
        var r = parseInt(match[1], 10);
        var g = parseInt(match[2], 10);
        var b = parseInt(match[3], 10);
        var a = parseFloat(match[4]);
        return new axs.color.Color(r, g, b, a);
    }
    return null;
};

We see that we expect colorString to be valued at either rgb(...) or rgba(...). However, in FF, elements will have a default backgroundColor of "transparent".

This causes parseColor (and consequently, getBgColor) to return null, eventually causing getContrastRatioForElement to return null.

You can see the discrepancy in this jsbin by running it in both Chrome and FF.

[ricksbrown]

Nicely debugged jdan.

This same problem affects IE11 and MS Edge.

I'm going to open a PR for this.