Testcase for jQuery Ticket 7395

css() and dimensions functions broken

by jitter

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<!-- also try including content in the div which exposes other errors -->
<div id="div">
<!--
    <p>a</p>
-->
</div>

CSS

/*include either the width or height or both css rules
and see how the odd behavior in part/completly disappears*/
/*
#div { width: 20px; }
*/
/*
#div { height: 20px; }
*/

JavaScript

//first remove some css jsfiddle inclues by default
$( "link" ).remove();

var $d = $( "#div" ),
    log = function( display, method, val ) {
        console.log( "display:" + display + " " + method + ": " + val );
    };


function test( display ) {
    $d.css( "display", display );

    //test the jQuery dimensions related functions
    $.each( [ "width", "height", "innerWidth", "innerHeight", "outerWidth", "outerHeight" ], function( i, val ) {

        log( display, val, $d[val]() );

        //check if css("width") and width() return the same
        if( val == "width" || val == "height" ) {
            log( display, "css('"+val+"')", $d.css(val));
        }

    });

    //call these outer* also with true
    log( display, "outerWidth(true)", $d.outerWidth( true ) );
    log( display, "outerHeight(true)", $d.outerHeight( true ) );
}

test( "block" );
//hide element and rerun tests
test( "none " );