From f02dda5ade3f1f40c2eab02bd429a557e21d6646 Mon Sep 17 00:00:00 2001
From: Klaus Hartl <klaus.hartl@googlemail.com>
Date: Mon, 6 Oct 2008 11:41:48 +0000
Subject: [PATCH] UI Tabs: fixed removal of inline styles set for a tab panel

---
 tests/tabs.html |  34 ++----
 tests/tabs.js   | 297 ++++++++++++++++++++++++++----------------------
 ui/ui.tabs.js   |  30 +++--
 3 files changed, 187 insertions(+), 174 deletions(-)

diff --git a/tests/tabs.html b/tests/tabs.html
index a659050fc..ad9b6847d 100644
--- a/tests/tabs.html
+++ b/tests/tabs.html
@@ -36,35 +36,21 @@
 		
 		<div id="tabs1">
 			<ul>
-				<li><a href="#fragment-1"><span>One</span></a></li>
-				<li><a href="#fragment-2"><span>Two</span></a></li>
-				<li><a href="#fragment-3"><span>Three</span></a></li>
+				<li><a href="#fragment-1">1</a></li>
+				<li><a href="#fragment-2">2</a></li>
+				<li><a href="#fragment-3">3</a></li>
 			</ul>
-			<div id="fragment-1">
-				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-			</div>
-			<div id="fragment-2">
-				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-			</div>
-			<div id="fragment-3">
-				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-			</div>
+			<div id="fragment-1"></div>
+			<div id="fragment-2"></div>
+			<div id="fragment-3"></div>
 		</div>
-		
 		<div id="tabs2">
 			<ul>
-				<li><a href="#colon:test"><span>One</span></a></li>
-				<li><a href="#inline-style"><span>Two</span></a></li>
+				<li><a href="#colon:test">1</a></li>
+				<li><a href="#inline-style">2</a></li>
 			</ul>
-			<div id="colon:test">
-				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-			</div>
-			<div style="height: 300px;" id="inline-style">
-				Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
-			</div>
+			<div id="colon:test"></div>
+			<div style="height: 300px;" id="inline-style"></div>
 		</div>
 		
 	</div>
diff --git a/tests/tabs.js b/tests/tabs.js
index 0be0be4f1..c08adcc42 100644
--- a/tests/tabs.js
+++ b/tests/tabs.js
@@ -3,187 +3,216 @@
  */
 (function($) {
 
+function defer(defered, ms) {
+	// wait a bit for the pseudo animation...
+	stop();
+	setTimeout(function() {
+		defered();
+		start();
+	}, ms || 100);	
+}
 
 module('tabs');
 
-test('init', function() {
-	expect(4);
+	test('init', function() {
+		expect(4);
 
-	var el = $('#tabs1 > ul').tabs();
-	ok(true, '.tabs() called on element');
+		var el = $('#tabs1 > ul').tabs();
+		ok(true, '.tabs() called on element');
 	
-	el.tabs('destroy').tabs({ selected: 1 });
-	equals( el.data('selected.tabs'), 1, 'selected.tabs set' );
-	equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 1, 'second tab active');
-	equals( $('div', '#tabs1').index( $('div.ui-tabs-hide', '#tabs1') ), 0, 'first panel should be hidden' );
+		el.tabs('destroy').tabs({ selected: 1 });
+		equals( el.data('selected.tabs'), 1, 'selected.tabs set' );
+		equals( $('li', el).index( $('li.ui-tabs-selected', el) ), 1, 'second tab active');
+		equals( $('div', '#tabs1').index( $('div.ui-tabs-hide', '#tabs1') ), 0, 'first panel should be hidden' );
 	
-});
+	});
 
-test('destroy', function() {
-	expect(0);
+	test('destroy', function() {
+		expect(0);
 	
-});
+	});
 
-test("defaults", function() {
+	test("defaults", function() {
 	
-	var expected = {
-		unselect: false,
-		event: 'click',
-		disabled: [],
-		cookie: null,
-		spinner: 'Loading&#8230;',
-		cache: false,
-		idPrefix: 'ui-tabs-',
-		ajaxOptions: null,
-		fx: null,
-		tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
-		panelTemplate: '<div></div>',
-		navClass: 'ui-tabs-nav',
-		selectedClass: 'ui-tabs-selected',
-		unselectClass: 'ui-tabs-unselect',
-		disabledClass: 'ui-tabs-disabled',
-		panelClass: 'ui-tabs-panel',
-		hideClass: 'ui-tabs-hide',
-		loadingClass: 'ui-tabs-loading'
-	};
+		var expected = {
+			unselect: false,
+			event: 'click',
+			disabled: [],
+			cookie: null,
+			spinner: 'Loading&#8230;',
+			cache: false,
+			idPrefix: 'ui-tabs-',
+			ajaxOptions: null,
+			fx: null,
+			tabTemplate: '<li><a href="#{href}"><span>#{label}</span></a></li>',
+			panelTemplate: '<div></div>',
+			navClass: 'ui-tabs-nav',
+			selectedClass: 'ui-tabs-selected',
+			unselectClass: 'ui-tabs-unselect',
+			disabledClass: 'ui-tabs-disabled',
+			panelClass: 'ui-tabs-panel',
+			hideClass: 'ui-tabs-hide',
+			loadingClass: 'ui-tabs-loading'
+		};
 
-	var el = $("#tabs1").tabs();
+		var el = $("#tabs1").tabs();
 
-	for (var optionName in expected) {
-		var actual = el.data(optionName + '.tabs'), expects = expected[optionName];
+		for (var optionName in expected) {
+			var actual = el.data(optionName + '.tabs'), expects = expected[optionName];
 
-		if (optionName == 'disabled')
-			ok(expects.constructor == Array && !expects.length, optionName);
-		else
-			equals(actual, expects, optionName);
+			if (optionName == 'disabled')
+				compare(actual, expects, optionName);
+			else
+				equals(actual, expects, optionName);
 			
-	}
+		}
 	
-});
+	});
 
-test('add', function() {
-	expect(0);
+	test('add', function() {
+		expect(0);
 	
-});
+	});
 
-test('remove', function() {
-	expect(0);
+	test('remove', function() {
+		expect(0);
 	
-});
+	});
 
-test('enable', function() {
-	expect(0);
+	test('enable', function() {
+		expect(0);
 	
-});
+	});
 
-test('disable', function() {
-	expect(0);
+	test('disable', function() {
+		expect(0);
 	
-});
+	});
 
-test('select', function() {
-	expect(0);
+	test('select', function() {
+		expect(0);
 	
-});
+	});
 
-test('load', function() {
-	expect(0);
+	test('load', function() {
+		expect(0);
 	
-});
+	});
 
-test('url', function() {
-	expect(0);
+	test('url', function() {
+		expect(0);
 	
-});
+	});
 
 
-module('options');
+module('tabs: Options');
 
-test('select: null', function() {
-	expect(3);
+	test('select: null', function() {
+		expect(3);
 	
-	var el = $('#tabs1 > ul');
+		var el = $('#tabs1 > ul');
 	
-	el.tabs({ selected: null });
-	equals( el.data('selected.tabs'), null, 'option set' );
-	equals( $('li.ui-tabs-selected', el).length, 0, 'all tabs should be unselected' );
-	equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
-	
-	// TODO select == null with cookie
-	// TODO select == null with select method
-	
-});
-
-test('unselect: true', function() {
-	expect(7);
-	
-	var el = $('#tabs1 > ul');
-	
-	el.tabs({ unselect: true });
-	equals( el.data('unselect.tabs'), true, 'option set' );
-	equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
-	equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 0, 'class "ui-tabs-unselect" attached to first tab');
-	
-	el.tabs('select', 1);
-	equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
-	equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 1, 'class "ui-tabs-unselect" attached to second tab');
-	
-	el.tabs('select', 1);
-	equals( $('li.ui-tabs-unselect', el).length, 0, 'class "ui-tabs-unselect" not attached');
-	// wait a bit for the fake animation...
-	stop();
-	setTimeout(function() {
+		el.tabs({ selected: null });
+		equals( el.data('selected.tabs'), null, 'option set' );
+		equals( $('li.ui-tabs-selected', el).length, 0, 'all tabs should be unselected' );
 		equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
-		start();
-	}, 100);
+	
+		// TODO select == null with cookie
+		// TODO select == null with select method
+	
+	});
 
-});
+	test('unselect: true', function() {
+		expect(7);
+	
+		var el = $('#tabs1 > ul');
+	
+		el.tabs({ unselect: true });
+		equals( el.data('unselect.tabs'), true, 'option set' );
+		equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
+		equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 0, 'class "ui-tabs-unselect" attached to first tab');
+	
+		el.tabs('select', 1);
+		equals( $('li.ui-tabs-unselect', el).length, 1, 'class "ui-tabs-unselect" attached once');
+		equals( $('li', el).index( $('li.ui-tabs-unselect', el) ), 1, 'class "ui-tabs-unselect" attached to second tab');
+	
+		el.tabs('select', 1);
+		equals( $('li.ui-tabs-unselect', el).length, 0, 'class "ui-tabs-unselect" not attached');
+		defer(function() {
+			equals( $('div.ui-tabs-hide', '#tabs1').length, 3, 'all panels should be hidden' );
+		});
 
-test('cookie', function() {
-	expect(5);
-	
-	var el = $('#tabs1 > ul');
-	var cookieName = 'ui-tabs-' + $.data(el[0]);
-	$.cookie(cookieName, null); // blank state
-	var cookie = function() {
-		return parseInt($.cookie(cookieName), 10);
-	};
-	
-	el.tabs({ cookie: {} });
-	equals(cookie(), 0, 'initial cookie value, no cookie given');
-	
-	el.tabs('destroy');
-	el.tabs({ selected: 1, cookie: {} });
-	equals(cookie(), 1, 'initial cookie value, given selected');
+	});
 
-	el.tabs('select', 2);
-	equals(cookie(), 2, 'cookie value after tabs select');
+	test('cookie', function() {
+		expect(5);
 	
-	el.tabs('destroy');
-	$.cookie(cookieName, 1);
-	el.tabs({ cookie: {} });
-	equals(cookie(), 1, 'initial cookie value, from existing cookie');
+		var el = $('#tabs1 > ul');
+		var cookieName = 'ui-tabs-' + $.data(el[0]);
+		$.cookie(cookieName, null); // blank state
+		var cookie = function() {
+			return parseInt($.cookie(cookieName), 10);
+		};
 	
-	el.tabs('destroy');
-	ok($.cookie(cookieName) === null, 'erase cookie after destroy');
+		el.tabs({ cookie: {} });
+		equals(cookie(), 0, 'initial cookie value, no cookie given');
 	
-});
+		el.tabs('destroy');
+		el.tabs({ selected: 1, cookie: {} });
+		equals(cookie(), 1, 'initial cookie value, given selected');
+
+		el.tabs('select', 2);
+		equals(cookie(), 2, 'cookie value after tabs select');
+	
+		el.tabs('destroy');
+		$.cookie(cookieName, 1);
+		el.tabs({ cookie: {} });
+		equals(cookie(), 1, 'initial cookie value, from existing cookie');
+	
+		el.tabs('destroy');
+		ok($.cookie(cookieName) === null, 'erase cookie after destroy');
+	
+	});
 
 
-module('tickets');
+module('tabs: Tickets');
 
-test('id containing colon #???', function() {
-	expect(4);
+	test('id containing colon, #????', function() {
+		expect(4);
 
-	var el = $('#tabs2 > ul').tabs();
-	ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
-	ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
+		var el = $('#tabs2 > ul').tabs();
+		ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
+		ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
 	
-	el.tabs('select', 1).tabs('select', 0);
-	ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
-	ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );
+		el.tabs('select', 1).tabs('select', 0);
+		defer(function() {
+			ok( $('div.ui-tabs-panel:eq(0)', '#tabs2').is(':visible'), 'first panel should be visible' );
+			ok( $('div.ui-tabs-panel:eq(1)', '#tabs2').is(':hidden'), 'second panel should be hidden' );	
+		});
 	
-});
+	});
+	
+	test('panel containing inline style, #????', function() {
+		expect(2);
+		
+		var inlineStyle = function(property) {
+			return document.getElementById('inline-style').style[property];
+		};
+		var expected = inlineStyle('height');
+		
+		var el = $('#tabs2 > ul').tabs();
+		equals(inlineStyle('height'), expected, 'should not remove inline style after init');
+		
+		el.tabs('select', 1);
+		defer(function() {
+			equals(inlineStyle('height'), expected, 'should not remove inline style after tabs select');
+			el.tabs('select', 0);
+			defer(function() {
+				equals(inlineStyle('height'), expected, 'should not remove inline style after tabs select');
+			});
+		});
+		
+	});
 
 // test('', function() {
 // 	expect(0);
diff --git a/ui/ui.tabs.js b/ui/ui.tabs.js
index fedd16908..1052b51d5 100644
--- a/ui/ui.tabs.js
+++ b/ui/ui.tabs.js
@@ -181,34 +181,32 @@ $.widget("ui.tabs", {
 		else
 			hideFx = showFx = o.fx || baseFx;
 		
-		// reset some styles to maintain print style sheets etc.
-		var resetCSS = { display: '', overflow: '', height: '' };
-		if (!$.browser.msie) // not in IE to prevent ClearType font issue
-			resetCSS.opacity = '';
+		// Reset certain styles left over from animation to
+		// maintain print style sheets and prevent IE's
+		// ClearType bug...
+		function resetStyle($el, fx) {
+			$el.css({ display: '' });
+			if ($.browser.msie && fx.opacity)
+				$el[0].style.filter = '';
+		}
 		
 		// Hide a tab, animation prevents browser scrolling to fragment,
 		// $show is optional.
 		function hideTab(clicked, $hide, $show) {
 			$hide.animate(hideFx, hideFx.duration || baseDuration, function() { //
-				$hide.addClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.
-				if ($.browser.msie && hideFx.opacity)
-					$hide[0].style.filter = '';
-				if ($show)
-					showTab(clicked, $show, $hide);
+				$hide.addClass(o.hideClass);
+				resetStyle($hide, hideFx);
+				if ($show) showTab(clicked, $show, $hide);
 			});
 		}
 		
 		// Show a tab, animation prevents browser scrolling to fragment,
 		// $hide is optional.
 		function showTab(clicked, $show, $hide) {
-			if (showFx === baseFx)
-				$show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox cause by gap between showing and hiding the tab panels
+			if (showFx === baseFx) $show.css('display', 'block'); // prevent occasionally occuring flicker in Firefox caused by gap between showing and hiding the tab panels
 			$show.animate(showFx, showFx.duration || baseDuration, function() {
-				$show.removeClass(o.hideClass).css(resetCSS); // maintain flexible height and accessibility in print etc.
-				if ($.browser.msie && showFx.opacity)
-					$show[0].style.filter = '';
-				
-				// callback
+				$show.removeClass(o.hideClass);
+				resetStyle($show, showFx);
 				self._trigger('show', null, self.ui(clicked, $show[0]));
 			});
 		}