]> source.dussan.org Git - jquery-ui.git/commitdiff
projects / jquery-ui.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 06bcd8e)
Selectmenu Tests: add unit and visual tests for width option
authorFelix Nagel <info@felixnagel.com>
Thu, 5 Dec 2013 21:12:05 +0000 (22:12 +0100)
committerFelix Nagel <info@felixnagel.com>
Sat, 7 Dec 2013 18:10:50 +0000 (19:10 +0100)
tests/unit/selectmenu/selectmenu_options.js patch | blob | history
tests/visual/selectmenu/selectmenu.html patch | blob | history

diff --git a/tests/unit/selectmenu/selectmenu_options.js b/tests/unit/selectmenu/selectmenu_options.js
index 82ea6a8b4e489af038c734399eda62b006ec8b08..1ab098a758317bff3de226374e51449e12712670 100644 (file)
--- 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 1b343a8d47de543f9ac62f48afd323b8e0fe611a..119a707f5addd4f990fb750bca7490e9fddaf5eb 100644 (file)
--- 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;">
The official jQuery user interface library: https://github.com/jquery/jquery-ui