diff options
Diffstat (limited to 'tests')
| -rw-r--r-- | tests/unit/selectmenu/selectmenu_options.js | 39 | ||||
| -rw-r--r-- | tests/visual/selectmenu/selectmenu.html | 54 |
2 files changed, 92 insertions, 1 deletions
diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js index 82ea6a8b4..1ab098a75 100644 --- a/tests/unit/selectmenu/selectmenu_options.js +++ b/tests/unit/selectmenu/selectmenu_options.js @@ -57,4 +57,43 @@ test( "CSS styles", function () { ok( menu.hasClass( "ui-corner-bottom" ) && !menu.hasClass( "ui-corner-all" ), "menu styles dropdown" ); }); + +test( "Width", function () { + expect( 8 ); + + var element = $( "#speed" ), + button, menu; + + element.selectmenu(); + button = element.selectmenu( "widget" ); + menu = element.selectmenu( "menuWidget" ); + + equal( button.outerWidth(), element.outerWidth(), "button width auto" ); + element.selectmenu( "open" ); + equal( menu.outerWidth(), element.outerWidth(), "menu width auto" ); + + element.outerWidth( 100 ); + element.selectmenu( "refresh" ); + + equal( button.outerWidth(), 100, "button width set by CSS" ); + element.selectmenu( "open" ); + equal( menu.outerWidth(), 100, "menu width set by CSS" ); + + element.width( "" ); + element.selectmenu( "option", "width", 100 ); + element.selectmenu( "refresh" ); + + equal( button.outerWidth(), 100, "button width set by JS option" ); + element.selectmenu( "open" ); + equal( menu.outerWidth(), 100, "menu width set by JS option" ); + + element.append( $( "<option>", { text: "Option with a little longer text" } ) ); + element.selectmenu( "option", "width", "" ); + element.selectmenu( "refresh" ); + + equal( button.outerWidth(), element.outerWidth(), "button width with long option" ); + element.selectmenu( "open" ); + ok( menu.outerWidth() >= element.outerWidth(), "menu width with long option" ); +}); + })( jQuery ); diff --git a/tests/visual/selectmenu/selectmenu.html b/tests/visual/selectmenu/selectmenu.html index 1b343a8d4..119a707f5 100644 --- a/tests/visual/selectmenu/selectmenu.html +++ b/tests/visual/selectmenu/selectmenu.html @@ -107,7 +107,18 @@ }); /* empty */ - $('.empty select').selectmenu(); + $(".empty select").selectmenu(); + + /* width */ + $("#width_auto1, #width_auto2").selectmenu(); + + $("#width_js1, #width_js2").selectmenu({ + width: 200 + }); + + var widthMenu = $("#width_menu").selectmenu(); + widthMenu.selectmenu("menuWidget").addClass("width-menu"); + }); </script> <style> @@ -117,6 +128,9 @@ select { width: 200px; } .ui-selectmenu-button { display: block; margin-bottom: 1em;} + + /* width */ + .width-menu { width: 196px; } </style> </head> <body> @@ -237,6 +251,44 @@ </optgroup> </select> </fieldset> + + <h2>Width tests</h2> + <fieldset> + <label for="width_auto1">Width auto</label> + <select name="width_auto1" id="width_auto1" style="width: auto;"> + <option>Width test 1</option> + <option>Width test 2</option> + <option>Width test 3</option> + </select> + + <label for="width_auto2">Width auto with long option</label> + <select name="width_auto2" id="width_auto2" style="width: auto;"> + <option>Width test 1</option> + <option>Width test 2</option> + <option>Width test 3 Width test 3 Width test 3</option> + </select> + + <label for="width_js1">Width set by JS</label> + <select name="width_js1" id="width_js1"> + <option>Width test 1</option> + <option>Width test 2</option> + <option>Width test 3</option> + </select> + + <label for="width_js2">Width set by JS with long option</label> + <select name="width_js2" id="width_js2"> + <option>Width test 1</option> + <option>Width test 2</option> + <option>Width test 3 Width test 3 Width test 3</option> + </select> + + <label for="width_menu">Width set by JS with long option</label> + <select name="width_menu" id="width_menu"> + <option>Width test 1</option> + <option>Width test 2</option> + <option>Width test 3 Width test 3 Width test 3</option> + </select> + </fieldset> </form> <div style="position: absolute; top: 1em; right: 1em;"> |