library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Selectmenu Tests: add unit and visual tests for width option

Browse Source
This commit is contained in:
Felix Nagel 2013-12-05 22:12:05 +01:00
parent 06bcd8eb62
commit 1656cd2f34
2 changed files with 92 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
tests/unit/selectmenu/selectmenu_options.js
View File

@ -57,4 +57,43 @@ test( "CSS styles", function () {
ok( menu.hasClass( "ui-corner-bottom" ) && !menu.hasClass( "ui-corner-all" ), "menu styles dropdown" ); 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 ); })( jQuery );

54
tests/visual/selectmenu/selectmenu.html
View File

@ -107,7 +107,18 @@
}); });
/* empty */ /* 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> </script>
<style> <style>
@ -117,6 +128,9 @@
select { width: 200px; } select { width: 200px; }
.ui-selectmenu-button { display: block; margin-bottom: 1em;} .ui-selectmenu-button { display: block; margin-bottom: 1em;}
/* width */
.width-menu { width: 196px; }
</style> </style>
</head> </head>
<body> <body>
@ -237,6 +251,44 @@
</optgroup> </optgroup>
</select> </select>
</fieldset> </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> </form>
<div style="position: absolute; top: 1em; right: 1em;"> <div style="position: absolute; top: 1em; right: 1em;">