r783 - in trunk: tests ui
Author: klaus.hartl
Date: Mon Oct 6 04:41:48 2008
New Revision: 783
Modified:
trunk/tests/tabs.html
trunk/tests/tabs.js
trunk/ui/ui.tabs.js
Log:
UI Tabs: fixed removal of inline styles set for a tab panel
Modified: trunk/tests/tabs.html
==============================================================================
--- trunk/tests/tabs.html (original)
+++ trunk/tests/tabs.html Mon Oct 6 04:41:48 2008
@@ -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>
Modified: trunk/tests/tabs.js
==============================================================================
--- trunk/tests/tabs.js (original)
+++ trunk/tests/tabs.js Mon Oct 6 04:41:48 2008
@@ -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' );
-
-});
-
-test('destroy', function() {
- expect(0);
-
-});
-
-test("defaults", function() {
-
- var expected = {
- unselect: false,
- event: 'click',
- disabled: [],
- cookie: null,
- spinner: 'Loading…',
- 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();
-
- 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);
+ 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("defaults", function() {
+
+ var expected = {
+ unselect: false,
+ event: 'click',
+ disabled: [],
+ cookie: null,
+ spinner: 'Loading…',
+ 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();
+
+ for (var optionName in expected) {
+ var actual = el.data(optionName + '.tabs'), expects =
expected[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');
-
-test('select: null', function() {
- expect(3);
-
- 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
-
-});
+module('tabs: Options');
-test('unselect: true', function() {
- expect(7);
-
- var el = $('#tabs1 > ul');
+ test('select: null', function() {
+ expect(3);
- 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');
+ var el = $('#tabs1 > ul');
- 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);
-
-});
-
-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');
-
- 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');
+ // TODO select == null with cookie
+ // TODO select == null with select method
-});
-
+ });
-module('tickets');
-
-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' );
-
- 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' );
+ 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');
+
+ 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('tabs: Tickets');
+
+ 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' );
+
+ 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);
Modified: trunk/ui/ui.tabs.js
==============================================================================
--- trunk/ui/ui.tabs.js (original)
+++ trunk/ui/ui.tabs.js Mon Oct 6 04:41:48 2008
@@ -181,34 +181,32 @@
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]));
});
}