diff options
Diffstat (limited to 'tests')
-rw-r--r-- | tests/unit/autocomplete/autocomplete_core.js | 2 | ||||
-rw-r--r-- | tests/unit/autocomplete/autocomplete_options.js | 3 | ||||
-rw-r--r-- | tests/unit/dialog/dialog_methods.js | 21 | ||||
-rw-r--r-- | tests/unit/menu/menu.html | 364 | ||||
-rw-r--r-- | tests/unit/menu/menu_common.js | 1 | ||||
-rw-r--r-- | tests/unit/menu/menu_core.js | 18 | ||||
-rw-r--r-- | tests/unit/menu/menu_events.js | 47 | ||||
-rw-r--r-- | tests/unit/menu/menu_methods.js | 4 | ||||
-rw-r--r-- | tests/unit/menu/menu_options.js | 27 | ||||
-rw-r--r-- | tests/unit/menu/menu_test_helpers.js | 2 | ||||
-rw-r--r-- | tests/unit/testsuite.js | 4 | ||||
-rw-r--r-- | tests/visual/dialog/stacking.html | 62 | ||||
-rw-r--r-- | tests/visual/index.html | 4 | ||||
-rw-r--r-- | tests/visual/menu/menu.html | 321 |
14 files changed, 512 insertions, 368 deletions
diff --git a/tests/unit/autocomplete/autocomplete_core.js b/tests/unit/autocomplete/autocomplete_core.js index 03ebdfec9..a8b0a7330 100644 --- a/tests/unit/autocomplete/autocomplete_core.js +++ b/tests/unit/autocomplete/autocomplete_core.js @@ -16,7 +16,7 @@ test( "prevent form submit on enter when menu is active", function() { event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.DOWN; element.trigger( event ); - deepEqual( menu.find( ".ui-menu-item:has(.ui-state-focus)" ).length, 1, "menu item is active" ); + equal( menu.find( ".ui-menu-item.ui-state-focus" ).length, 1, "menu item is active" ); event = $.Event( "keydown" ); event.keyCode = $.ui.keyCode.ENTER; diff --git a/tests/unit/autocomplete/autocomplete_options.js b/tests/unit/autocomplete/autocomplete_options.js index d60faf47e..e6f08785b 100644 --- a/tests/unit/autocomplete/autocomplete_options.js +++ b/tests/unit/autocomplete/autocomplete_options.js @@ -62,8 +62,7 @@ function autoFocusTest( afValue, focusedLength ) { open: function() { equal( element.autocomplete( "widget" ) - .children( ".ui-menu-item:first" ) - .find( ".ui-state-focus" ) + .children( ".ui-menu-item.ui-state-focus" ) .length, focusedLength, "first item is " + (afValue ? "" : "not") + " auto focused" ); diff --git a/tests/unit/dialog/dialog_methods.js b/tests/unit/dialog/dialog_methods.js index 60a7aa4d8..8918e8d36 100644 --- a/tests/unit/dialog/dialog_methods.js +++ b/tests/unit/dialog/dialog_methods.js @@ -144,8 +144,8 @@ test("moveToTop", function() { expect( 5 ); function order() { var actual = $( ".ui-dialog" ).map(function() { - return +$( this ).find( ".ui-dialog-content" ).attr( "id" ).replace( /\D+/, "" ); - }).get().reverse(); + return +$( this ).css( "z-index" ); + }).get(); deepEqual( actual, $.makeArray( arguments ) ); } var dialog1, dialog2, @@ -161,10 +161,23 @@ test("moveToTop", function() { equal( focusOn, "dialog2" ); } }); - order( 2, 1 ); + order( 100, 101 ); focusOn = "dialog1"; dialog1.dialog( "moveToTop" ); - order( 1, 2 ); + order( 102, 101 ); +}); + +test( "moveToTop: content scroll stays intact", function() { + expect( 2 ); + var otherDialog = $( "#dialog1" ).dialog(), + scrollDialog = $( "#form-dialog" ).dialog({ + height: 200 + }); + scrollDialog.scrollTop( 50 ); + equal( scrollDialog.scrollTop(), 50 ); + + otherDialog.dialog( "moveToTop" ); + equal( scrollDialog.scrollTop(), 50 ); }); test("open", function() { diff --git a/tests/unit/menu/menu.html b/tests/unit/menu/menu.html index ed376232e..a49c72a04 100644 --- a/tests/unit/menu/menu.html +++ b/tests/unit/menu/menu.html @@ -48,220 +48,254 @@ <div id="qunit-fixture"> <ul class="foo" id="menu1"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a id="testID1" class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li id="testID1" class="foo">Addyston</li> + <li class="foo">Adelphi</li> </ul> <ul id="menu2"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#"><span class="ui-icon ui-icon-print"></span>Addyston</a></li> - <li> - <a href="#">Delphi</a> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo"><span class="ui-icon ui-icon-print"></span>Addyston</li> + <li>Delphi <ul> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> - <li class="foo"><a class="foo" href="#">Salzburg</a></li> + <li class="foo">Ada</li> + <li class="foo">Saarland</li> + <li class="foo">Salzburg</li> </ul> </li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> - <li> - <a href="#">Salzburg</a> + <li class="foo">Saarland</li> + <li>Salzburg <ul> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> - <li class="foo"><a class="foo" href="#">Salzburg</a></li> + <li class="foo">Ada</li> + <li class="foo">Saarland</li> + <li class="foo">Salzburg</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li class="foo"><a class="foo" href="#">Ada</a></li> + <li class="foo">Ada</li> <li> - </li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> + <li class="foo">Saarland</li> <li></li> - <li class="foo"><a class="foo" href="#">Salzburg</a></li> + <li class="foo">Salzburg</li> <li>–</li> </ul> </li> - <li class="foo"><a class="foo" href="#">Perch</a></li> + <li class="foo">Perch</li> </ul> </li> </ul> <ul class="foo" id="menu3"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> </ul> <ul class="foo" id="menu4"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> + <li class="foo">Aberdeen</li> <li class="foo"> - <a class="foo" href="#">Ada</a> + Ada <ul class="foo"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> </ul> </li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="foo"><a class="foo" href="#">Adelphi</a></li> - <li class="foo"><a class="foo" href="#">Adena</a></li> - <li class="foo"><a class="foo" href="#">Adrian</a></li> - <li class="foo"><a class="foo" href="#">Akron</a></li> - <li class="foo"><a class="foo" href="#">Albany</a></li> - <li class="foo"><a class="foo" href="#">Alexandria</a></li> - <li class="foo"><a class="foo" href="#">Alger</a></li> - <li class="foo"><a class="foo" href="#">Alledonia</a></li> - <li class="foo"><a class="foo" href="#">Alliance</a></li> - <li class="foo"><a class="foo" href="#">Alpha</a></li> - <li class="foo"><a class="foo" href="#">Alvada</a></li> - <li class="foo"><a class="foo" href="#">Alvordton</a></li> - <li class="foo"><a class="foo" href="#">Amanda</a></li> - <li class="foo"><a class="foo" href="#">Amelia</a></li> - <li class="foo"><a class="foo" href="#">Amesville</a></li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> + <li class="foo">Aberdeen</li> + <li class="foo">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li class="foo">Adelphi</li> + <li class="foo">Adena</li> + <li class="foo">Adrian</li> + <li class="foo">Akron</li> + <li class="foo">Albany</li> + <li class="foo">Alexandria</li> + <li class="foo">Alger</li> + <li class="foo">Alledonia</li> + <li class="foo">Alliance</li> + <li class="foo">Alpha</li> + <li class="foo">Alvada</li> + <li class="foo">Alvordton</li> + <li class="foo">Amanda</li> + <li class="foo">Amelia</li> + <li class="foo">Amesville</li> </ul> <div id="menu5"> - <blockquote><a href="#">Aberdeen</a></blockquote> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Adamsville</a></blockquote> - <blockquote><a href="#">Addyston</a></blockquote> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Aberdeen</blockquote> + <blockquote>Ada</blockquote> + <blockquote>Adamsville</blockquote> + <blockquote>Addyston</blockquote> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote> - <a href="#">Salzburg</a> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg <div> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a id="testID2" href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote id="testID2">Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote><a href="#">Perch</a></blockquote> + <blockquote>Perch</blockquote> </div> </blockquote> </div> <ul id="menu6"> - <li class="foo"><a class="foo" href="#">Aberdeen</a></li> - <li class="foo ui-state-disabled"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Adamsville</a></li> - <li class="foo"><a class="foo" href="#">Addyston</a></li> - <li class="ui-state-disabled"> - <a id="testID3" href="#">Delphi</a> + <li class="foo">Aberdeen</li> + <li class="foo ui-state-disabled">Ada</li> + <li class="foo">Adamsville</li> + <li class="foo">Addyston</li> + <li id="testID3" class="ui-state-disabled">Delphi <ul> - <li class="foo"><a class="foo" href="#">Ada</a></li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> - <li class="foo"><a class="foo" href="#">Salzburg</a></li> + <li class="foo">Ada</li> + <li class="foo">Saarland</li> + <li class="foo">Salzburg</li> </ul> </li> - <li class="foo"><a class="foo" href="#">Saarland</a></li> + <li class="foo">Saarland</li> +</ul> + +<ul id="menu7"> + <li class="ui-menu-group"><strong>Group 1</strong></li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li></li> + <li class="ui-menu-group"><strong>Group 2</strong></li> + <li>Delphi + <ul> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> + </ul> + </li> + <li>Saarland</li> + <li>---</li> + <li class="ui-menu-group"><strong>Group 3</strong></li> + <li>Salzburg + <ul> + <li>Delphi + <ul> + <li>Ada</li> + <li> - </li> + <li>Saarland</li> + <li>—</li> + <li>Salzburg</li> + <li>–</li> + </ul> + </li> + <li>Delphi + <ul> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> + </ul> + </li> + <li>Perch</li> + </ul> + </li> + <li>Amesville</li> </ul> </div> diff --git a/tests/unit/menu/menu_common.js b/tests/unit/menu/menu_common.js index 4a89a947a..2404ebe02 100644 --- a/tests/unit/menu/menu_common.js +++ b/tests/unit/menu/menu_common.js @@ -4,6 +4,7 @@ TestHelpers.commonWidgetTests( "menu", { icons: { submenu: "ui-icon-carat-1-e" }, + items: "> *", menus: "ul", position: { my: "left top", diff --git a/tests/unit/menu/menu_core.js b/tests/unit/menu/menu_core.js index 5ee28c14a..923d2961e 100644 --- a/tests/unit/menu/menu_core.js +++ b/tests/unit/menu/menu_core.js @@ -27,4 +27,22 @@ test( "accessibility", function () { // Item roles are tested in the role option tests }); +asyncTest( "#9044: Autofocus issue with dialog opened from menu widget", function() { + expect( 1 ); + var element = $( "#menu1" ).menu(); + + $( "<input>", { id: "test9044" } ).appendTo( "body" ); + + $( "#testID1" ).bind( "click", function() { + $( "#test9044" ).focus(); + }); + + TestHelpers.menu.click( element, "3" ); + setTimeout( function() { + equal( document.activeElement.id, "test9044", "Focus was swallowed by menu" ); + $( "#test9044" ).remove(); + start(); + }); +}); + })( jQuery ); diff --git a/tests/unit/menu/menu_events.js b/tests/unit/menu/menu_events.js index 405300c46..0b89b86ac 100644 --- a/tests/unit/menu/menu_events.js +++ b/tests/unit/menu/menu_events.js @@ -91,7 +91,7 @@ asyncTest( "handle focus of menu with active item", function() { expect( 1 ); var element = $( "#menu1" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + log( $( event.target ).find( ".ui-state-focus" ).index() ); } }); @@ -177,7 +177,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and without submen log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + log( $( event.target ).find( ".ui-state-focus" ).index() ); } }); @@ -243,7 +243,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" log( $( ui.item[0] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + log( $( event.target ).find( ".ui-state-focus" ).index() ); } }); @@ -341,7 +341,7 @@ asyncTest( "handle keyboard navigation on menu without scroll and with submenus" element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); - equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers and items without anchors" ); + equal( logOutput(), "keydown,5,6,0,1,0,2,4,0", "Keydown skip dividers" ); log( "keydown", true ); element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); @@ -363,7 +363,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and without submenus" log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index()); + log( $( event.target ).find( ".ui-state-focus" ).index()); } }); @@ -438,7 +438,7 @@ asyncTest( "handle keyboard navigation on menu with scroll and with submenus", f log( $( ui.item[ 0 ] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index()); + log( $( event.target ).find( ".ui-state-focus" ).index()); } }); @@ -533,7 +533,7 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite log( $( ui.item[0] ).text() ); }, focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index()); + log( $( event.target ).find( ".ui-state-focus" ).index()); } }); @@ -577,11 +577,42 @@ asyncTest( "handle keyboard navigation and mouse click on menu with disabled ite } }); +asyncTest( "handle keyboard navigation and mouse click on menu with dividers and group labels", function() { + expect( 2 ); + var element = $( "#menu7" ).menu({ + items: "> :not('.ui-menu-group')", + select: function( event, ui ) { + log( $( ui.item[0] ).text() ); + }, + focus: function( event ) { + log( $( event.target ).find( ".ui-state-focus" ).index()); + } + }); + + log( "keydown", true ); + element.one( "menufocus", function() { + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } ); + equal( logOutput(), "keydown,2,Ada", "Keydown skips initial group label" ); + setTimeout( menukeyboard1, 50 ); + }); + element.focus(); + + function menukeyboard1() { + log( "keydown", true ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + element.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } ); + equal( logOutput(), "keydown,3,4,7", "Keydown focus skips divider and group label" ); + start(); + } +}); + asyncTest( "handle keyboard navigation with spelling of menu items", function() { expect( 2 ); var element = $( "#menu2" ).menu({ focus: function( event ) { - log( $( event.target ).find( ".ui-state-focus" ).parent().index() ); + log( $( event.target ).find( ".ui-state-focus" ).index() ); } }); diff --git a/tests/unit/menu/menu_methods.js b/tests/unit/menu/menu_methods.js index 51d772972..5a633998d 100644 --- a/tests/unit/menu/menu_methods.js +++ b/tests/unit/menu/menu_methods.js @@ -73,11 +73,11 @@ test( "refresh icons (see #9377)", function() { expect( 3 ); var element = $( "#menu1" ).menu(); ok( !element.hasClass( "ui-menu-icons") ); - element.find( "li:first a" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" ); + element.find( "li:first" ).html( "<span class='ui-icon ui-icon-disk'></span>Save</a>" ); element.menu( "refresh" ); ok( element.hasClass( "ui-menu-icons" ) ); - element.find( "li:first a" ).html( "Save" ); + element.find( "li:first" ).html( "Save" ); element.menu( "refresh" ); ok( !element.hasClass( "ui-menu-icons" ) ); }); diff --git a/tests/unit/menu/menu_options.js b/tests/unit/menu/menu_options.js index 27cea67a4..527cc4784 100644 --- a/tests/unit/menu/menu_options.js +++ b/tests/unit/menu/menu_options.js @@ -66,15 +66,14 @@ test( "{ icons: { submenu: 'custom' } }", function() { test( "{ role: 'menu' } ", function() { var element = $( "#menu1" ).menu(), items = element.find( "li" ); - expect( 2 + 5 * items.length ); + expect( 2 + 4 * items.length ); equal( element.attr( "role" ), "menu" ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), "presentation", "menu item ("+ item + ") role" ); - equal( $( "a", this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" ); - ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" ); - equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" ); + equal( $( this ).attr( "role" ), "menuitem", "menu item ("+ item + ") role" ); + ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); + equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); @@ -83,15 +82,14 @@ test( "{ role: 'listbox' } ", function() { role: "listbox" }), items = element.find( "li" ); - expect( 2 + 5 * items.length ); + expect( 2 + 4 * items.length ); equal( element.attr( "role" ), "listbox" ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), "presentation", "menu item ("+ item + ") role" ); - equal( $( "a", this ).attr( "role" ), "option", "menu item ("+ item + ") role" ); - ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" ); - equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" ); + equal( $( this ).attr( "role" ), "option", "menu item ("+ item + ") role" ); + ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); + equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); @@ -100,15 +98,14 @@ test( "{ role: null }", function() { role: null }), items = element.find( "li" ); - expect( 2 + 5 * items.length ); + expect( 2 + 4 * items.length ); strictEqual( element.attr( "role" ), undefined ); ok( items.length > 0, "number of menu items" ); items.each(function( item ) { ok( $( this ).hasClass( "ui-menu-item" ), "menu item ("+ item + ") class for item" ); - equal( $( this ).attr( "role" ), "presentation", "menu item ("+ item + ") role" ); - equal( $( "a", this ).attr( "role" ), undefined, "menu item ("+ item + ") role" ); - ok( $( "a", this ).hasClass( "ui-corner-all" ), "a element class for menu item ("+ item + ")" ); - equal( $( "a", this ).attr( "tabindex" ), "-1", "a element tabindex for menu item ("+ item + ")" ); + equal( $( this ).attr( "role" ), undefined, "menu item ("+ item + ") role" ); + ok( $( this ).hasClass( "ui-corner-all" ), "class for menu item ("+ item + ")" ); + equal( $( this ).attr( "tabindex" ), "-1", "tabindex for menu item ("+ item + ")" ); }); }); diff --git a/tests/unit/menu/menu_test_helpers.js b/tests/unit/menu/menu_test_helpers.js index b6c09ad7a..77737c390 100644 --- a/tests/unit/menu/menu_test_helpers.js +++ b/tests/unit/menu/menu_test_helpers.js @@ -24,7 +24,7 @@ TestHelpers.menu = { click: function( menu, item ) { lastItem = item; - menu.children( ":eq(" + item + ")" ).find( "a:first" ).trigger( "click" ); + menu.children( ":eq(" + item + ")" ).trigger( "click" ); } }; diff --git a/tests/unit/testsuite.js b/tests/unit/testsuite.js index cef24e93b..83d69d2d9 100644 --- a/tests/unit/testsuite.js +++ b/tests/unit/testsuite.js @@ -27,11 +27,15 @@ QUnit.reset = function() { QUnit.config.requireExpects = true; +/* +// TODO: Add back the ability to test against minified files +// see QUnit.urlParams.min usage below QUnit.config.urlConfig.push({ id: "min", label: "Minified source", tooltip: "Load minified source files instead of the regular unminified ones." }); +*/ TestHelpers.loadResources = QUnit.urlParams.min ? function() { diff --git a/tests/visual/dialog/stacking.html b/tests/visual/dialog/stacking.html new file mode 100644 index 000000000..dcb7de280 --- /dev/null +++ b/tests/visual/dialog/stacking.html @@ -0,0 +1,62 @@ +<!doctype html> +<html lang="en"> +<head> + <meta charset="utf-8"> + <title>Dialog Visual Test</title> + <link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css"> + <script src="../../../jquery-1.10.2.js"></script> + <script src="../../../ui/jquery.ui.core.js"></script> + <script src="../../../ui/jquery.ui.widget.js"></script> + <script src="../../../ui/jquery.ui.mouse.js"></script> + <script src="../../../ui/jquery.ui.draggable.js"></script> + <script src="../../../ui/jquery.ui.position.js"></script> + <script src="../../../ui/jquery.ui.resizable.js"></script> + <script src="../../../ui/jquery.ui.button.js"></script> + <script src="../../../ui/jquery.ui.dialog.js"></script> + + <style> + body { + font-size: 62.5%; + } + </style> + <script> + $(function() { + var iframeDialog = $( "#dialog-iframe" ).dialog({ + position: { + my: "right-90 center" + }, + height: 400 + }), + + scrollingDialog = $( "#dialog-scrolling" ).dialog({ + maxHeight: 200, + position: { + my: "left+90 center" + } + }), + + otherDialog = $( "#dialog-other" ).dialog({ + width: 200, + height: 150 + }); + }); + </script> +</head> +<body> + +<p>WHAT: Two dialogs, one embedding an iframe, one having just scrollable content.</p> +<p>EXPECTED: When focusing on one or the other dialog, it shouldn't affect how the content is displayed on the other dialog. It shouldn't reload the iframe or reset the scroll.</p> + + +<div id="dialog-iframe" title="Dialog that embeds an iframe"> + <iframe src="animated.html" height="400"></iframe> +</div> + +<div id="dialog-scrolling" title="Dialog with scroll"> + <p style="height:600px;background:#eee">a bunch of content</p> +</div> + +<div id="dialog-other" title="placeholder">Just another dialog to test stacking</div> + +</body> +</html> diff --git a/tests/visual/index.html b/tests/visual/index.html index 730eb4553..bb46137f4 100644 --- a/tests/visual/index.html +++ b/tests/visual/index.html @@ -33,7 +33,11 @@ <h2>Dialog</h2> <ul> + <li><a href="dialog/animated.html">Animations</a></li> + <li><a href="dialog/complex-dialogs.html">Nested dialogs</a></li> + <li><a href="dialog/form.html">Forms in dialogs</a></li> <li><a href="dialog/performance.html">Performance</a></li> + <li><a href="dialog/stacking.html">Overlapping dialogs</a></li> </ul> <h2>Effects</h2> diff --git a/tests/visual/menu/menu.html b/tests/visual/menu/menu.html index 3d4e81e92..1c203ef12 100644 --- a/tests/visual/menu/menu.html +++ b/tests/visual/menu/menu.html @@ -15,7 +15,7 @@ $( "<p>" ).text( "Selected: " + ui.item.text() ).appendTo( "#log" ); } - $( "#menu1, #menu2, #menu3, .menu4, #menu7" ).menu({ + $( "#menu1, #menu2, #menu3, .menu4" ).menu({ select: logger }); @@ -29,6 +29,11 @@ select: logger, icon: "ui-icon-carat-1-s" }); + + $( "#menu7" ).menu({ + items: "> :not('.ui-menu-group')", + select: logger + }); }); </script> <style> @@ -44,171 +49,161 @@ <h2>Default inline menu</h2> <ul id="menu1"> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Delphi</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Delphi</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> <h2>Inline with disabled items and submenus</h2> <ul id="menu2"> - <li class="ui-state-disabled"><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li> - <a href="#">Delphi</a> + <li class="ui-state-disabled">Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Delphi <ul> - <li class="ui-state-disabled"><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li class="ui-state-disabled">Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Saarland</a></li> - <li> - <a href="#">Salzburg</a> + <li>Saarland</li> + <li>Salzburg <ul> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Perch</a></li> + <li>Perch</li> </ul> </li> - <li class="ui-state-disabled"><a href="#">Amesville</a></li> + <li class="ui-state-disabled">Amesville</li> </ul> <h2>Menu with icons</h2> <ul id="menu3"> - <li><a href="#"><span class="ui-icon ui-icon-print"></span>Aberdeen</a></li> - <li class="ui-state-disabled"><a href="#"><span class="ui-icon ui-icon-scissors"></span>Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Addyston</a></li> - <li class="ui-state-disabled"> - <a href="#">Delphi</a> + <li><span class="ui-icon ui-icon-print"></span>Aberdeen</li> + <li class="ui-state-disabled"><span class="ui-icon ui-icon-scissors"></span>Ada</li> + <li>Adamsville</li> + <li><span class="ui-icon ui-icon-wrench"></span>Addyston</li> + <li class="ui-state-disabled">Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Saarland</a></li> + <li>Saarland</li> <li> - <a href="#"><span class="ui-icon ui-icon-print"></span>Salzburg</a> + <span class="ui-icon ui-icon-print"></span>Salzburg <ul> <li> - <a href="#"><span class="ui-icon ui-icon-wrench"></span>Delphi</a> + <span class="ui-icon ui-icon-wrench"></span>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Ada</a></li> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Saarland</a></li> - <li><a href="#"><span class="ui-icon ui-icon-wrench"></span>Salzburg</a></li> + <li><span class="ui-icon ui-icon-wrench"></span>Ada</li> + <li><span class="ui-icon ui-icon-wrench"></span>Saarland</li> + <li><span class="ui-icon ui-icon-wrench"></span>Salzburg</li> </ul> </li> - <li><a href="#">Perch</a></li> + <li>Perch</li> </ul> </li> </ul> <h2>Long menu with scroll overflow, to test menu's scroll-on-keypress behaviour</h2> <ul class="menu4"> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Adelphi</a></li> - <li><a href="#">Adena</a></li> - <li><a href="#">Adrian</a></li> - <li><a href="#">Akron</a></li> - <li><a href="#">Albany</a></li> - <li><a href="#">Alexandria</a></li> - <li><a href="#">Alger</a></li> - <li><a href="#">Alledonia</a></li> - <li><a href="#">Alliance</a></li> - <li><a href="#">Alpha</a></li> - <li><a href="#">Alvada</a></li> - <li><a href="#">Alvordton</a></li> - <li><a href="#">Amanda</a></li> - <li><a href="#">Amelia</a></li> - <li><a href="#">Amesville</a></li> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> - <li><a href="#">Adelphi</a></li> - <li><a href="#">Adena</a></li> - <li><a href="#">Adrian</a></li> - <li><a href="#">Akron</a></li> - <li><a href="#">Albany</a></li> - <li><a href="#">Alexandria</a></li> - <li><a href="#">Alger</a></li> - <li><a href="#">Alledonia</a></li> - <li><a href="#">Alliance</a></li> - <li><a href="#">Alpha</a></li> - <li><a href="#">Alvada</a></li> - <li><a href="#">Alvordton</a></li> - <li><a href="#">Amanda</a></li> - <li><a href="#">Amelia</a></li> - <li><a href="#">Amesville</a></li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Adelphi</li> + <li>Adena</li> + <li>Adrian</li> + <li>Akron</li> + <li>Albany</li> + <li>Alexandria</li> + <li>Alger</li> + <li>Alledonia</li> + <li>Alliance</li> + <li>Alpha</li> + <li>Alvada</li> + <li>Alvordton</li> + <li>Amanda</li> + <li>Amelia</li> + <li>Amesville</li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> + <li>Adelphi</li> + <li>Adena</li> + <li>Adrian</li> + <li>Akron</li> + <li>Albany</li> + <li>Alexandria</li> + <li>Alger</li> + <li>Alledonia</li> + <li>Alliance</li> + <li>Alpha</li> + <li>Alvada</li> + <li>Alvordton</li> + <li>Amanda</li> + <li>Amelia</li> + <li>Amesville</li> </ul> <h2>Menu with custom markup</h2> <div id="menu5"> - <blockquote><a href="#">Aberdeen</a></blockquote> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote class="ui-state-disabled"><a href="#">Adamsville</a></blockquote> - <blockquote><a href="#">Addyston</a></blockquote> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Aberdeen</blockquote> + <blockquote>Ada</blockquote> + <blockquote class="ui-state-disabled">Adamsville</blockquote> + <blockquote>Addyston</blockquote> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote> - <a href="#">Salzburg</a> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg <div> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote> - <a href="#">Delphi</a> + <blockquote>Delphi <div> - <blockquote><a href="#">Ada</a></blockquote> - <blockquote><a href="#">Saarland</a></blockquote> - <blockquote><a href="#">Salzburg</a></blockquote> + <blockquote>Ada</blockquote> + <blockquote>Saarland</blockquote> + <blockquote>Salzburg</blockquote> </div> </blockquote> - <blockquote><a href="#">Perch</a></blockquote> + <blockquote>Perch</blockquote> </div> </blockquote> </div> @@ -216,93 +211,79 @@ <h2>Menu with custom markup, multi-line items and a custom submenu icon</h2> <div class="menuElement" id="menu6"> <div class="address-item"> - <a href="#"> - <span class="address-header">John Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">John Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> </div> <div class="address-item"> - <a href="#"> - <span class="address-header">Jane Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">Jane Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> </div> <div class="address-item ui-state-disabled"> - <a href="#"> - <span class="address-header">James Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">James Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> </div> <div class="address-item"> - <a href="#"> - <span class="address-header">Jenny Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">Jenny Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> </div> <div class="address-item"> - <a href="#"> - <span class="address-header">John Doe</span> - <span class="address-content">78 West Main St Apt 3A</span> - <span class="address-content">Bloomsburg, PA 12345</span> - </a> + <span class="address-header">John Doe</span> + <span class="address-content">78 West Main St Apt 3A</span> + <span class="address-content">Bloomsburg, PA 12345</span> <div class="menuElement"> - <div><a href="#">Ada</a></div> - <div><a href="#">Saarland</a></div> - <div><a href="#">Salzburg</a></div> + <div>Ada</div> + <div>Saarland</div> + <div>Salzburg</div> </div> </div> </div> -<h2>Inline with dividers and elements without anchors</h2> +<h2>Inline with dividers and group labels</h2> <ul id="menu7"> - <li><strong>Group 1</strong></li> - <li><a href="#">Aberdeen</a></li> - <li><a href="#">Ada</a></li> - <li><a href="#">Adamsville</a></li> - <li><a href="#">Addyston</a></li> + <li class="ui-menu-group"><strong>Group 1</strong></li> + <li>Aberdeen</li> + <li>Ada</li> + <li>Adamsville</li> + <li>Addyston</li> <li></li> - <li><strong>Group 2</strong></li> - <li> - <a href="#">Delphi</a> + <li class="ui-menu-group"><strong>Group 2</strong></li> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Saarland</a></li> + <li>Saarland</li> <li>---</li> - <li><strong>Group 3</strong></li> - <li> - <a href="#">Salzburg</a> + <li class="ui-menu-group"><strong>Group 3</strong></li> + <li>Salzburg <ul> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> + <li>Ada</li> <li> - </li> - <li><a href="#">Saarland</a></li> + <li>Saarland</li> <li>—</li> - <li><a href="#">Salzburg</a></li> + <li>Salzburg</li> <li>–</li> </ul> </li> - <li> - <a href="#">Delphi</a> + <li>Delphi <ul> - <li><a href="#">Ada</a></li> - <li><a href="#">Saarland</a></li> - <li><a href="#">Salzburg</a></li> + <li>Ada</li> + <li>Saarland</li> + <li>Salzburg</li> </ul> </li> - <li><a href="#">Perch</a></li> + <li>Perch</li> </ul> </li> - <li><a href="#">Amesville</a></li> + <li>Amesville</li> </ul> <div style="position: absolute; top: 1em; right: 1em;"> |