CodeView

IE8 max-width fix

ie8-fix-maxwidth-test.js

/**
 * Requires
 *      /it/code/get/jquery-promises/prod/promises.js
 *      /it/code/get/qunit-cacheable-resources/testmanager.js
 */
 
if ( ! window.console ) var console = { log: function () {} };
 
$( document ).ready( function() {
 
    $.testManager
        .setSutSrc( '../prod/ie8_fix_maxwidth.js' )
        .setGlobalTestTemplate( '<img />' )
        .setGlobalResourceSelector( 'img' )
        .setGlobalResourceSrc( 'resources/circle.gif' )
        .showCanvas( false )
        .logToConsole( false );
 
 
    /*
     ------------------------------------------------------
    */
 
    runTestGroup(
        {
            module: 'max-width in px',
            test: 'Image has px width, max-width is binding'
        },
        {
            resourceCssProps: { 'width': '100px', 'max-width': '50px' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width in px',
            test: 'Image has px width, max-width is not binding'
        },
        {
            resourceCssProps: { 'width': '50px', 'max-width': '100px' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width in px',
            test: 'Image has % width, max-width is binding'
        },
        {
            resourceCssProps: { 'width': '50%', 'max-width': '50px' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width in px',
            test: 'Image has em width, max-width is binding'
        },
        {
            resourceCssProps: { 'width': '10em', 'max-width': '50px' },
            stageCssProps: { 'width': '200px', 'font-size': '10px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width in px',
            test: 'Image has em width, max-width is not binding'
        },
        {
            resourceCssProps: { 'width': '5em', 'max-width': '100px' },
            stageCssProps: { 'width': '200px', 'font-size': '10px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by width' );
        }
    );
 
 
    /*
     ------------------------------------------------------
    */
 
    runTestGroup(
        {
            module: 'images with width: auto',
            test: 'Image has explicit width: auto, container is smaller than image, max-width is binding'
        },
        {
            resourceCssProps: { 'width': 'auto', 'max-width': '50px' },
            stageCssProps: { 'width': '100px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'images with width: auto',
            test: 'Image has explicit width: auto, image is smaller than container, max-width is binding'
        },
        {
            resourceCssProps: { 'width': 'auto', 'max-width': '50px' },
            stageCssProps: { 'width': '400px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'images with width: auto',
            test: 'Image does not have a width (implying width: auto), container is smaller than image, max-width is binding'
        },
        {
            resourceCssProps: { 'max-width': '50px' },
            stageCssProps: { 'width': '100px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'images with width: auto',
            test: 'Image does not have a width (implying width: auto), container is smaller than image and max-width limit, max-width is still binding'
        },
        {
            resourceCssProps: { 'max-width': '50px' },
            stageCssProps: { 'width': '25px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image sticks out of its container, width is limited by max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'images with width: auto',
            test: 'Image does not have a width (implying width: auto), container is smaller than image, max-width is not binding'
        },
        {
            resourceCssProps: { 'max-width': '400px' },
            stageCssProps: { 'width': '50px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  200, 'image sticks out of its container, width is limited by intrinsic image width' );
            equals( fixture.resource.height(), 200, 'image height equals intrinsic image height' );
        }
    );
 
    runTestGroup(
        {
            module: 'images with width: auto',
            test: 'Image does not have a width (implying width: auto), image is smaller than container, max-width is binding'
        },
        {
            resourceCssProps: { 'max-width': '50px' },
            stageCssProps: { 'width': '400px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'images with width: auto',
            test: 'Image does not have a width (implying width: auto), image is smaller than container, max-width is not binding'
        },
        {
            resourceCssProps: { 'max-width': '300px' },
            stageCssProps: { 'width': '400px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  200, 'image width equals intrinsic image width (200px)' );
            equals( fixture.resource.height(), 200, 'image height equals intrinsic image height (200px)' );
        }
    );
 
 
    /*
     ------------------------------------------------------
    */
 
    runTestGroup(
        {
            module: 'max-width percentages',
            test: 'Image has px width, max-width is binding'
        },
        {
            resourceCssProps: { 'width': '100px', 'max-width': '25%' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width percentages',
            test: 'Image has px width, max-width is not binding'
        },
        {
            resourceCssProps: { 'width': '50px', 'max-width': '50%' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width percentages',
            test: 'Image has % width, max-width is binding'
        },
        {
            resourceCssProps: { 'width': '50%', 'max-width': '25%' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width percentages',
            test: 'Image has % width, max-width is not binding'
        },
        {
            resourceCssProps: { 'width': '25%', 'max-width': '50%' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width percentages',
            test: 'Container size changes, max-width (absolute value) adjusts accordingly'
        },
        {
            resourceCssProps: { 'width': '200px', 'max-width': '25%' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
 
            // Initial value
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
 
            // Value after resizing the container
            fixture.stage.css( 'width', '400px' );
            equals( fixture.resource.width(),  100, 'image width equals max-width, absolute value adjusted to new container size' );
            equals( fixture.resource.height(), 100, 'image height is scaled by max-width, absolute value adjusted to new container size' );
 
        }
    );
 
 
    /*
     ------------------------------------------------------
    */
 
    runTestGroup(
        {
            module: 'max-width in em',
            test: 'Image has px width, max-width is binding'
        },
        {
            resourceCssProps: { 'width': '100px', 'max-width': '5em' },
            stageCssProps: { 'width': '200px', 'font-size': '10px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'max-width in em',
            test: 'Image has px width, max-width is not binding'
        },
        {
            resourceCssProps: { 'width': '50px', 'max-width': '10em' },
            stageCssProps: { 'width': '200px', 'font-size': '10px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by width' );
        }
    );
 
 
    /*
     ------------------------------------------------------
    */
 
    runTestGroup(
        {
            module: 'images with width: inherit',
            test: 'max-width in px is binding'
        },
        {
            resourceCssProps: { 'width': 'inherit', 'max-width': '50px' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by max-width' );
        }
    );
 
    runTestGroup(
        {
            module: 'images with width: inherit',
            test: 'max-width in px is not binding'
        },
        {
            resourceCssProps: { 'width': 'inherit', 'max-width': '100px' },
            stageCssProps: { 'width': '50px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals width' );
            equals( fixture.resource.height(), 50, 'image height is scaled by width' );
        }
    );
 
 
    /*
     ------------------------------------------------------
    */
 
    runTestGroup(
        {
            module: 'images with explicit height',
            test: 'Image has px width, max-width is binding'
        },
        {
            resourceCssProps: { 'width': '100px', 'max-width': '25%', 'height': '80px' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 80, 'image height is set by explicit height' );
        }
    );
 
    runTestGroup(
        {
            module: 'images with explicit height',
            test: 'Image has px width, max-width is not binding'
        },
        {
            resourceCssProps: { 'width': '50px', 'max-width': '50%', 'height': '80px' },
            stageCssProps: { 'width': '200px' }
        },
        function ( fixture, setup ) {
            equals( fixture.resource.width(),  50, 'image width equals max-width' );
            equals( fixture.resource.height(), 80, 'image height is set by explicit height' );
        }
    );
 
 
    /*
      ### This must stay at the end and run after all tests are defined ###
    */
    $.testManager.setupComplete();
 
} );