' ).appendTo( $innerWrapper ),
canvas = new mw.mmv.ui.Canvas( $innerWrapper, $imageWrapper, $mainWrapper ),
imageRawMetadata = new mw.mmv.LightboxImage( 'foo.png' ),
image = new Image(),
$imageElem = $( image ),
image2 = new Image(),
thumbnailWidth = 10,
screenWidth = 100,
$currentImage,
originalWidth;
// Need to call set() before using setImageAndMaxDimensions()
canvas.set( imageRawMetadata, $imageElem );
originalWidth = image.width;
// Call with the same image
canvas.setImageAndMaxDimensions(
{ width: thumbnailWidth },
image,
{ cssWidth: screenWidth }
);
assert.strictEqual( image.width, originalWidth, 'Image width was not modified.' );
assert.strictEqual( canvas.$image, $imageElem, 'Image element still set correctly.' );
assert.strictEqual( canvas.$image.css( 'maxWidth' ), canvas.$imageDiv.width() + 'px', 'MaxWidth set correctly.' );
assert.strictEqual( canvas.$image.css( 'maxHeight' ), canvas.$imageDiv.height() + 'px', 'MaxHeight set correctly.' );
$currentImage = canvas.$image;
// Call with a new image bigger than screen size
thumbnailWidth = 150;
canvas.setImageAndMaxDimensions(
{ width: thumbnailWidth },
image2,
{ cssWidth: screenWidth }
);
assert.strictEqual( image2.width, screenWidth, 'Image width was trimmed correctly.' );
assert.notStrictEqual( canvas.$image, $currentImage, 'Image element switched correctly.' );
assert.strictEqual( canvas.$image.css( 'maxWidth' ), canvas.$imageDiv.width() + 'px', 'MaxWidth set correctly.' );
assert.strictEqual( canvas.$image.css( 'maxHeight' ), canvas.$imageDiv.height() + 'px', 'MaxHeight set correctly.' );
} );
QUnit.test( 'attach and unattach', 3, function( assert ) {
var $qf = $( '#qunit-fixture' ),
canvas = new mw.mmv.ui.Canvas( $qf );
assert.ok( ! canvas.resizeListener, 'resize listener has not been set yet.' );
canvas.attach();
assert.ok( canvas.resizeListener, 'resize listener is set.' );
canvas.unattach();
assert.ok( ! canvas.resizeListener, 'resize listener has been removed.' );
} );
QUnit.test( 'maybeDisplayPlaceholder: Constrained area for SVG files', 4, function ( assert ) {
var $image,
blurredThumbnailShown,
$qf = $( '#qunit-fixture' ),
imageRawMetadata = new mw.mmv.LightboxImage( 'foo.svg' ),
canvas = new mw.mmv.ui.Canvas( $qf );
imageRawMetadata.filePageTitle = {
getExtension: function() { return 'svg'; }
};
canvas.imageRawMetadata = imageRawMetadata;
canvas.set = function () {
assert.ok ( false, 'Placeholder is not shown');
};
$image = $( '
![]()
' ).width( 10 ).height( 5 );
blurredThumbnailShown = canvas.maybeDisplayPlaceholder(
{ width : 200, height : 100 },
$image,
{ cssWidth : 300, cssHeight: 150 }
);
assert.strictEqual( $image.width(), 10, 'Placeholder width was not set to max' );
assert.strictEqual( $image.height(), 5, 'Placeholder height was not set to max' );
assert.ok( ! $image.hasClass( 'blurred' ), 'Placeholder is not blurred' );
assert.ok( ! blurredThumbnailShown, 'Placeholder state is correct' );
} );
QUnit.test( 'maybeDisplayPlaceholder: placeholder big enough that it doesn\'t need blurring, actual image bigger than the lightbox', 5, function ( assert ) {
var $image,
blurredThumbnailShown,
$qf = $( '#qunit-fixture' ),
imageRawMetadata = new mw.mmv.LightboxImage( 'foo.png' ),
canvas = new mw.mmv.ui.Canvas( $qf );
imageRawMetadata.filePageTitle = {
getExtension: function() { return 'png'; }
};
canvas.imageRawMetadata = imageRawMetadata;
canvas.set = function () {
assert.ok ( true, 'Placeholder shown');
};
$image = $( '
![]()
' ).width( 200 ).height( 100 );
blurredThumbnailShown = canvas.maybeDisplayPlaceholder(
{ width : 1000, height : 500 },
$image,
{ cssWidth : 300, cssHeight: 150 }
);
assert.strictEqual( $image.width(), 300, 'Placeholder has the right width' );
assert.strictEqual( $image.height(), 150, 'Placeholder has the right height' );
assert.ok( ! $image.hasClass( 'blurred' ), 'Placeholder is not blurred' );
assert.ok( ! blurredThumbnailShown, 'Placeholder state is correct' );
} );
QUnit.test( 'maybeDisplayPlaceholder: big-enough placeholder that needs blurring, actual image bigger than the lightbox', 5, function ( assert ) {
var $image,
blurredThumbnailShown,
$qf = $( '#qunit-fixture' ),
imageRawMetadata = new mw.mmv.LightboxImage( 'foo.png' ),
canvas = new mw.mmv.ui.Canvas( $qf );
imageRawMetadata.filePageTitle = {
getExtension: function() { return 'png'; }
};
canvas.imageRawMetadata = imageRawMetadata;
canvas.set = function () {
assert.ok ( true, 'Placeholder shown');
};
$image = $( '
![]()
' ).width( 100 ).height( 50 );
blurredThumbnailShown = canvas.maybeDisplayPlaceholder(
{ width : 1000, height : 500 },
$image,
{ cssWidth : 300, cssHeight : 150 }
);
assert.strictEqual( $image.width(), 300, 'Placeholder has the right width' );
assert.strictEqual( $image.height(), 150, 'Placeholder has the right height' );
assert.ok( $image.hasClass( 'blurred' ), 'Placeholder is blurred' );
assert.ok( blurredThumbnailShown, 'Placeholder state is correct' );
} );
QUnit.test( 'maybeDisplayPlaceholder: big-enough placeholder that needs blurring, actual image smaller than the lightbox', 5, function ( assert ) {
var $image,
blurredThumbnailShown,
$qf = $( '#qunit-fixture' ),
imageRawMetadata = new mw.mmv.LightboxImage( 'foo.png' ),
canvas = new mw.mmv.ui.Canvas( $qf );
imageRawMetadata.filePageTitle = {
getExtension: function() { return 'png'; }
};
canvas.imageRawMetadata = imageRawMetadata;
canvas.set = function () {
assert.ok ( true, 'Placeholder shown');
};
$image = $( '
![]()
' ).width( 100 ).height( 50 );
blurredThumbnailShown = canvas.maybeDisplayPlaceholder(
{ width : 1000, height : 500 },
$image,
{ cssWidth : 1200, cssHeight : 600 }
);
assert.strictEqual( $image.width(), 1000, 'Placeholder has the right width' );
assert.strictEqual( $image.height(), 500, 'Placeholder has the right height' );
assert.ok( $image.hasClass( 'blurred' ), 'Placeholder is blurred' );
assert.ok( blurredThumbnailShown, 'Placeholder state is correct' );
} );
QUnit.test( 'maybeDisplayPlaceholder: placeholder too small to be displayed, actual image bigger than the lightbox', 4, function ( assert ) {
var $image,
blurredThumbnailShown,
$qf = $( '#qunit-fixture' ),
imageRawMetadata = new mw.mmv.LightboxImage( 'foo.png' ),
canvas = new mw.mmv.ui.Canvas( $qf );
imageRawMetadata.filePageTitle = {
getExtension: function() { return 'png'; }
};
canvas.imageRawMetadata = imageRawMetadata;
canvas.set = function () {
assert.ok ( false, 'Placeholder shown when it should not');
};
$image = $( '
![]()
' ).width( 10 ).height( 5 );
blurredThumbnailShown = canvas.maybeDisplayPlaceholder(
{ width : 1000, height : 500 },
$image,
{ cssWidth : 300, cssHeight : 150 }
);
assert.strictEqual( $image.width(), 10, 'Placeholder has the right width' );
assert.strictEqual( $image.height(), 5, 'Placeholder has the right height' );
assert.ok( ! $image.hasClass( 'blurred' ), 'Placeholder is not blurred' );
assert.ok( ! blurredThumbnailShown, 'Placeholder state is correct' );
} );
QUnit.test( 'Unblur', 4, function ( assert ) {
var $qf = $( '#qunit-fixture' ),
canvas = new mw.mmv.ui.Canvas( $qf ),
oldAnimate = $.fn.animate;
$.fn.animate = function ( target, options ) {
var self = this,
lastValue;
$.each( target, function ( key, value ) {
lastValue = self.key = value;
} );
if ( options ) {
if ( options.step ) {
options.step.call( this, lastValue );
}
if ( options.complete ) {
options.complete.call( this );
}
}
};
canvas.$image = $( '
![]()
' );
canvas.unblurWithAnimation();
assert.ok( ! canvas.$image.css( '-webkit-filter' ) || !canvas.$image.css( '-webkit-filter' ).length,
'Image has no -webkit-filter left' );
assert.ok( ! canvas.$image.css( 'filter' ) || !canvas.$image.css( 'filter' ).length || canvas.$image.css( 'filter' ) === 'none',
'Image has no filter left' );
assert.strictEqual( parseInt( canvas.$image.css( 'opacity' ), 10 ), 1,
'Image is fully opaque' );
assert.ok( ! canvas.$image.hasClass( 'blurred' ), 'Image has no "blurred" class' );
$.fn.animate = oldAnimate;
} );
}( mediaWiki, jQuery ) );