jasmine + karma - Firefox does not calculate element.height and element.width properly

Question

I have a strange problem using jasmine and karma frameworks. Basically I just want to make a resize using plain javascript of some img's.

I have the following test :

    it('Should set both the height and width style for the one applicable as being the maximum allowed', function () {
    var images = '<img class="resizableImage" src="" alt="" style="height: 1200px; width: 1000px; visibility: hidden;">' +
        '<img class="resizableImage" src="" alt="" style="height: 1100px; width: 199px; visibility: visible;">' +
        '<img class="resizableImage" src="" alt="" style="height: 1990px; width: 200px; visibility: visible;">';
    setFixtures(images);

    var allResizableImages = $('img.resizableImage');
    resizeImagesWidthHeightIfBiggerThan(allResizableImages, 199, 199);

    $.each(allResizableImages, function () {
        expect($(this).css('width')).toBe('199px');
        expect($(this).css('height')).toBe('199px');
    });
});

and the function :

function resizeImagesWidthHeightIfBiggerThan(imagesToBeResized, maxWidth, maxHeight) {
var UNIT = "px";
var VISIBILITY_SETTINGS = "visible";

for (var i = 0, len = imagesToBeResized.length; i < len; i++) {
    var imgCandidate = imagesToBeResized[i];

    if (imgCandidate && imgCandidate.tagName.toLowerCase() == 'img') {
        if (imgCandidate.width > maxWidth) {
            imgCandidate.style.width = maxWidth + UNIT;
        }
        if (imgCandidate.height > maxHeight) {
            imgCandidate.style.height = maxHeight + UNIT;
        }
    }

    imgCandidate.style.visibility = VISIBILITY_SETTINGS;
}

}

With Chrome, everythings goes well. However, with Firefox, the test doesn't pass. Though, live (doing testing manually on Firefox), everything goes well.

What could be wrong ?

I am using Firefox 29.0

Thanks a lot.

Answer 1

We had the same problem. FF does not report correct image sizes if src is empty. Try and set src to a valid image to see if it works.

In our project we use ng-src; not src. We created a mock of ng-src that kicks-in in all our tests. The mock replaces the ng-src value (empty or not) with a single fake image stored in /tests/image. This is useful if you unit test directives that include images in their html template. See also How do you mock directives to enable unit testing of higher level directive?