diff --git a/src/tiledimage.js b/src/tiledimage.js index 562f1f92..53c640c4 100644 --- a/src/tiledimage.js +++ b/src/tiledimage.js @@ -1329,13 +1329,11 @@ function compareTiles( previousBest, tile ) { } function drawTiles( tiledImage, lastDrawn ) { - var i, - tile = lastDrawn[0]; - - if ( tiledImage.opacity <= 0 ) { - drawDebugInfo( tiledImage, lastDrawn ); + if (lastDrawn.length === 0) { return; } + var tile = lastDrawn[0]; + var useSketch = tiledImage.opacity < 1 || (tiledImage.compositeOperation && tiledImage.compositeOperation !== 'source-over') || @@ -1346,7 +1344,7 @@ function drawTiles( tiledImage, lastDrawn ) { var zoom = tiledImage.viewport.getZoom(true); var imageZoom = tiledImage.viewportToImageZoom(zoom); - if (imageZoom > tiledImage.smoothTileEdgesMinZoom && tile) { + if (imageZoom > tiledImage.smoothTileEdgesMinZoom) { // When zoomed in a lot (>100%) the tile edges are visible. // So we have to composite them at ~100% and scale them up together. useSketch = true; @@ -1403,7 +1401,7 @@ function drawTiles( tiledImage, lastDrawn ) { tiledImage._drawer.drawRectangle(placeholderRect, fillStyle, useSketch); } - for ( i = lastDrawn.length - 1; i >= 0; i-- ) { + for (var i = lastDrawn.length - 1; i >= 0; i--) { tile = lastDrawn[ i ]; tiledImage._drawer.drawTile( tile, tiledImage._drawingHandler, useSketch, sketchScale, sketchTranslate ); tile.beingDrawn = true; diff --git a/test/modules/multi-image.js b/test/modules/multi-image.js index cee7867f..1cfd0515 100644 --- a/test/modules/multi-image.js +++ b/test/modules/multi-image.js @@ -214,7 +214,13 @@ // TODO: replace with fully-loaded event listener when available. setTimeout(function() { var imageData = viewer.drawer.context.getImageData(0, 0, 500, 500); - var expectedVal = getPixelValue(imageData, 333, 250); + // Pixel 250,250 will be in the hole of the A + var expectedVal = getPixelValue(imageData, 250, 250); + + notEqual(expectedVal.r, 0, 'Red channel should not be 0'); + notEqual(expectedVal.g, 0, 'Green channel should not be 0'); + notEqual(expectedVal.b, 0, 'Blue channel should not be 0'); + notEqual(expectedVal.a, 0, 'Alpha channel should not be 0'); viewer.addSimpleImage({ url: '/test/data/A.png' @@ -223,23 +229,29 @@ // TODO: replace with fully-loaded event listener when available. setTimeout(function() { var imageData = viewer.drawer.context.getImageData(0, 0, 500, 500); - var actualVal = getPixelValue(imageData, 333, 250); + var actualVal = getPixelValue(imageData, 250, 250); equal(actualVal.r, expectedVal.r, - 'Red channel should not change when stacking a transparent image'); + 'Red channel should not change in transparent part of the A'); equal(actualVal.g, expectedVal.g, - 'Green channel should not change when stacking a transparent image'); + 'Green channel should not change in transparent part of the A'); equal(actualVal.b, expectedVal.b, - 'Blue channel should not change when stacking a transparent image'); + 'Blue channel should not change in transparent part of the A'); equal(actualVal.a, expectedVal.a, - 'Alpha channel should not change when stacking a transparent image'); + 'Alpha channel should not change in transparent part of the A'); + + var onAVal = getPixelValue(imageData, 333, 250); + equal(onAVal.r, 0, 'Red channel should be null on the A'); + equal(onAVal.g, 0, 'Green channel should be null on the A'); + equal(onAVal.b, 0, 'Blue channel should be null on the A'); + equal(onAVal.a, 255, 'Alpha channel should be 255 on the A'); start(); - }, 1000); - }, 1000); + }, 500); + }, 500); function getPixelValue(imageData, x, y) { - var offset = x * imageData.width + y; + var offset = 4 * (y * imageData.width + x); return { r: imageData.data[offset], g: imageData.data[offset + 1],