diff options
| author | Felix Nagel <info@felixnagel.com> | 2013-12-05 22:12:05 +0100 |
|---|---|---|
| committer | Felix Nagel <info@felixnagel.com> | 2013-12-07 19:10:50 +0100 |
| commit | 1656cd2f340ac94b3b0c337f81eb3b31a4bb4d71 (patch) | |
| tree | 16b69e56bba28e093542404a980016882666e7d3 | |
| parent | 06bcd8eb62a9c5662efb7fc1b77f2e82c8061b60 (diff) | |
| download | jquery-ui-1656cd2f340ac94b3b0c337f81eb3b31a4bb4d71.tar.gz jquery-ui-1656cd2f340ac94b3b0c337f81eb3b31a4bb4d71.zip | |
Selectmenu Tests: add unit and visual tests for width option
| -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;"> |