Fixing two broken tests in jquery.autoEllipsis.js for IE6 and Opera:

* Mysterious test failure in IE6 in jquery.autoEllipsis.js finally figured. Way simpler than we thought. In IE6 width behaves like min-width, so adding one or two characters to a <span> with white-space:nowrap inside a <div> with a  fixed width will NOT (as other browsers do) make the span-width wider than the div-width, instead the div-width will happily increase as well.
* 2nd breakage fixed: In some cases adding 1 character did not widen the span, probably because of some edge case with narrow fonts and characters like "i" which are so small that they're just on the edge. Changed the test to add 2 characters instead of 1 to overcome this problem.

This new version of the test suite was already pushed to TestSwarm from my own account (instead of the MediaWiki-SVN account) and confirmed to work in IE6. Yay!

Not-pretty: Browser-sniffing for IE6 in a unit test..

diff --git a/tests/qunit/suites/resources/jquery/jquery.autoEllipsis.js b/tests/qunit/suites/resources/jquery/jquery.autoEllipsis.js
index e7bf032..62c94f0 100644 (file)
--- a/tests/qunit/suites/resources/jquery/jquery.autoEllipsis.js
+++ b/tests/qunit/suites/resources/jquery/jquery.autoEllipsis.js
@@ -5,8 +5,8 @@ test( '-- Initial check', function() {
        ok( $.fn.autoEllipsis, 'jQuery.fn.autoEllipsis defined' );
 });
 
-function createWrappedDiv( text ) {
-       var $wrapper = $( '<div />' ).css( 'width', '100px' );
+function createWrappedDiv( text, width ) {
+       var $wrapper = $( '<div />' ).css( 'width', width );
        var $div = $( '<div />' ).text( text );
        $wrapper.append( $div );
        return $wrapper;
@@ -21,7 +21,7 @@ function findDivergenceIndex( a, b ) {
 }
 
 test( 'Position right', function() {
-       expect(3);
+       expect(4);
 
        /**
         * Extra QUnit assertions
@@ -39,10 +39,14 @@ test( 'Position right', function() {
        var gt = function( actual, expected, message ) {
                QUnit.push( actual > expected, actual, 'greater than ' + expected, message );
        };
+       // Expect numerical value greater than or equal to X
+       var gtOrEq = function( actual, expected, message ) {
+               QUnit.push( actual >= expected, actual, 'greater than or equal to ' + expected, message );
+       };
 
        // We need this thing to be visible, so append it to the DOM
        var origText = 'This is a really long random string and there is no way it fits in 100 pixels.';
-       var $wrapper = createWrappedDiv( origText );
+       var $wrapper = createWrappedDiv( origText, '100px' );
        $( 'body' ).append( $wrapper );
        $wrapper.autoEllipsis( { position: 'right' } );
 
@@ -52,16 +56,23 @@ test( 'Position right', function() {
 
        // Check that the text fits by turning on word wrapping
        $span.css( 'whiteSpace', 'nowrap' );
-       ltOrEq( $span.width(), $span.parent().width(), "Text fits (span's width is no larger than its parent's width)" );
+       ltOrEq( $span.width(), $span.parent().width(), "Text fits (making the span 'white-space:nowrap' does not make it wider than its parent)" );
 
-       // Add one character using scary black magic
+       // Add two characters using scary black magic
        var spanText = $span.text();
        var d = findDivergenceIndex( origText, spanText );
-       spanText = spanText.substr( 0, d ) + origText[d] + '...';
+       var spanTextNew = spanText.substr( 0, d ) + origText[d] + origText[d] + '...';
+
+       gt( spanTextNew.length, spanText.length, 'Verify that the new span-length is indeed greater' );
 
        // Put this text in the span and verify it doesn't fit
-       $span.text( spanText );
-       gt( $span.width(), $span.parent().width(), 'Fit is maximal (adding one character makes it not fit any more)' );
+       $span.text( spanTextNew );
+       // In IE6 width works like min-width, allow IE6's width to be "equal to"
+       if ( $.browser.msie && Number( $.browser.version ) == 6 ) {
+               gtOrEq( $span.width(), $span.parent().width(), 'Fit is maximal (adding two characters makes it not fit any more) - IE6: Maybe equal to as well due to width behaving like min-width in IE6' );
+       } else {
+               gt( $span.width(), $span.parent().width(), 'Fit is maximal (adding two characters makes it not fit any more)' );
+       }
 
        // Clean up
        $wrapper.remove();