8 module("button: core");
10 test("checkbox", function() {
12 var input = $("#check"),
13 label = $("label[for=check]");
14 ok( input.is(":visible") );
15 ok( label.is(":not(.ui-button)") );
17 ok( input.is(".ui-helper-hidden-accessible") );
18 ok( label.is(".ui-button") );
21 test("radios", function() {
23 var inputs = $("#radio0 input"),
24 labels = $("#radio0 label");
25 ok( inputs.is(":visible") );
26 ok( labels.is(":not(.ui-button)") );
28 ok( inputs.is(".ui-helper-hidden-accessible") );
29 ok( labels.is(".ui-button") );
32 function assert(noForm, form1, form2) {
33 ok( $("#radio0 .ui-button" + noForm).is(".ui-state-active") );
34 ok( $("#radio1 .ui-button" + form1).is(".ui-state-active") );
35 ok( $("#radio2 .ui-button" + form2).is(".ui-state-active") );
38 test("radio groups", function() {
40 $("input[type=radio]").button();
41 assert(":eq(0)", ":eq(1)", ":eq(2)");
43 // click outside of forms
44 $("#radio0 .ui-button:eq(1)").click();
45 assert(":eq(1)", ":eq(1)", ":eq(2)");
47 // click in first form
48 $("#radio1 .ui-button:eq(0)").click();
49 assert(":eq(1)", ":eq(0)", ":eq(2)");
51 // click in second form
52 $("#radio2 .ui-button:eq(0)").click();
53 assert(":eq(1)", ":eq(0)", ":eq(0)");
56 test("input type submit, don't create child elements", function() {
58 var input = $("#submit");
59 deepEqual( input.children().length, 0 );
61 deepEqual( input.children().length, 0 );
64 test("buttonset", function() {
66 var set = $("#radio1").buttonset();
67 ok( set.is(".ui-buttonset") );
68 deepEqual( set.children(".ui-button").length, 3 );
69 deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
70 ok( set.children("label:eq(0)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
71 ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
72 ok( set.children("label:eq(2)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
75 test("buttonset (rtl)", function() {
78 parent = $("#radio1").parent();
80 parent.attr("dir", "rtl");
82 set = $("#radio1").buttonset();
83 ok( set.is(".ui-buttonset") );
84 deepEqual( set.children(".ui-button").length, 3 );
85 deepEqual( set.children("input[type=radio].ui-helper-hidden-accessible").length, 3 );
86 ok( set.children("label:eq(0)").is(".ui-button.ui-corner-right:not(.ui-corner-all)") );
87 ok( set.children("label:eq(1)").is(".ui-button:not(.ui-corner-all)") );
88 ok( set.children("label:eq(2)").is(".ui-button.ui-corner-left:not(.ui-corner-all)") );
91 // TODO: simulated click events don't behave like real click events in IE
92 // remove this when simulate properly simulates this
93 // see http://yuilibrary.com/projects/yui2/ticket/2528826 fore more info
94 if ( !$.ui.ie || ( document.documentMode && document.documentMode > 8 ) ) {
95 asyncTest( "ensure checked and aria after single click on checkbox label button, see #5518", function() {
98 $("#check2").button().change( function() {
99 var lbl = $( this ).button("widget");
100 ok( this.checked, "checked ok" );
101 ok( lbl.attr("aria-pressed") === "true", "aria ok" );
102 ok( lbl.hasClass("ui-state-active"), "ui-state-active ok" );
106 // Opera doesn't trigger a change event when this is done synchronously.
107 // This seems to be a side effect of another test, but until that can be
108 // tracked down, this delay will have to do.
109 setTimeout(function() {
110 $("#check2").button("widget").simulate("click");
116 test( "#7092 - button creation that requires a matching label does not find label in all cases", function() {
118 var group = $( "<span><label for='t7092a'></label><input type='checkbox' id='t7092a'></span>" );
119 group.find( "input[type=checkbox]" ).button();
120 ok( group.find( "label" ).is( ".ui-button" ) );
122 group = $( "<input type='checkbox' id='t7092b'><label for='t7092b'></label>" );
123 group.filter( "input[type=checkbox]" ).button();
124 ok( group.filter( "label" ).is( ".ui-button" ) );
126 group = $( "<span><input type='checkbox' id='t7092c'></span><label for='t7092c'></label>" );
127 group.find( "input[type=checkbox]" ).button();
128 ok( group.filter( "label" ).is( ".ui-button" ) );
130 group = $( "<span><input type='checkbox' id='t7092d'></span><span><label for='t7092d'></label></span>" );
131 group.find( "input[type=checkbox]" ).button();
132 ok( group.find( "label" ).is( ".ui-button" ) );
134 group = $( "<input type='checkbox' id='t7092e'><span><label for='t7092e'></label></span>" );
135 group.filter( "input[type=checkbox]" ).button();
136 ok( group.find( "label" ).is( ".ui-button" ) );
139 test( "#5946 - buttonset should ignore buttons that are not :visible", function() {
141 $( "#radio01" ).next().addBack().hide();
142 var set = $( "#radio0" ).buttonset({ items: "input[type=radio]:visible" });
143 ok( set.find( "label:eq(0)" ).is( ":not(.ui-button):not(.ui-corner-left)" ) );
144 ok( set.find( "label:eq(1)" ).is( ".ui-button.ui-corner-left" ) );
147 test( "#6262 - buttonset not applying ui-corner to invisible elements", function() {
149 $( "#radio0" ).hide();
150 var set = $( "#radio0" ).buttonset();
151 ok( set.find( "label:eq(0)" ).is( ".ui-button.ui-corner-left" ) );
152 ok( set.find( "label:eq(1)" ).is( ".ui-button" ) );
153 ok( set.find( "label:eq(2)" ).is( ".ui-button.ui-corner-right" ) );
156 asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() {
158 var check = $( "#check" ).button(),
159 label = $( "label[for='check']" );
160 ok( !label.is( ".ui-state-focus" ) );
162 setTimeout(function() {
163 ok( label.is( ".ui-state-focus" ) );
168 test( "#7534 - Button label selector works for ids with \":\"", function() {
170 var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" );
171 group.find( "input" ).button();
172 ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" );