жасмин + карма - Firefox неправильно вычисляет element.height и element.width

У меня странная проблема с использованием фреймворков jasmine и karma. В основном я просто хочу изменить размер, используя простой javascript для некоторых img.

У меня есть следующий тест:

    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');
    });
});

и функция:

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;
}

}

С Chrome все идет хорошо. Однако с Firefox тест не проходит. Хотя вживую (проводим тестирование вручную в Firefox) все идет хорошо.

Что может быть не так?

Я использую Firefox 29.0

Большое спасибо.


person Ioan    schedule 07.05.2014    source источник
comment
Что произойдет, если вы удалите константу UNIT и будете использовать jquery в тестах?   -  person JimmyRare    schedule 07.05.2014
comment
Если я использую jquery, работает. Но все дело не в том, чтобы использовать jquery, так как у меня есть некоторые проблемы с производительностью.   -  person Ioan    schedule 07.05.2014
comment
Дело в том, что живое тестирование работает, а тестирование через карму — нет.   -  person Ioan    schedule 07.05.2014
comment
Вы пробовали console.log значения в FF, чтобы увидеть, равны ли строки?   -  person JimmyRare    schedule 07.05.2014


Ответы (1)


У нас была такая же проблема. FF не сообщает правильные размеры изображения, если src пусто. Попробуйте установить src на допустимое изображение, чтобы увидеть, работает ли оно.

В нашем проекте мы используем ng-src; не src. Мы создали макет ng-src, который работает во всех наших тестах. Макет заменяет значение ng-src (пустое или нет) одним фальшивым изображением, хранящимся в /tests/image. Это полезно, если вы используете директивы модульного тестирования, которые включают изображения в свой HTML-шаблон. См. также Как вы имитируете директивы, чтобы включить модульное тестирование директивы более высокого уровня?

person Sylvain    schedule 07.05.2014
comment
Если это решит вашу проблему, вы можете изменить заголовок своего вопроса на что-то, связанное с размерами изображений в FF. Это поможет другим людям найти решение. - person Sylvain; 07.05.2014
comment
Кстати, еще одна проблема, с которой мы столкнулись, заключается в том, что IE8 неправильно вычисляет размеры изображений, если вы используете width и height свойства CSS. Нам пришлось установить min-width и min-height в качестве обходного пути. - person Sylvain; 07.05.2014