1 |
/* |
2 |
* button_core.js |
3 |
*/ |
4 |
|
5 |
|
6 |
(function($) { |
7 |
|
8 |
module("button: core"); |
9 |
|
10 |
test("checkbox", function() { |
11 |
expect( 4 ); |
12 |
var input = $("#check"), |
13 |
label = $("label[for=check]"); |
14 |
ok( input.is(":visible") ); |
15 |
ok( label.is(":not(.ui-button)") ); |
16 |
input.button(); |
17 |
ok( input.is(".ui-helper-hidden-accessible") ); |
18 |
ok( label.is(".ui-button") ); |
19 |
}); |
20 |
|
21 |
test("radios", function() { |
22 |
expect( 4 ); |
23 |
var inputs = $("#radio0 input"), |
24 |
labels = $("#radio0 label"); |
25 |
ok( inputs.is(":visible") ); |
26 |
ok( labels.is(":not(.ui-button)") ); |
27 |
inputs.button(); |
28 |
ok( inputs.is(".ui-helper-hidden-accessible") ); |
29 |
ok( labels.is(".ui-button") ); |
30 |
}); |
31 |
|
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") ); |
36 |
} |
37 |
|
38 |
test("radio groups", function() { |
39 |
expect( 12 ); |
40 |
$("input[type=radio]").button(); |
41 |
assert(":eq(0)", ":eq(1)", ":eq(2)"); |
42 |
|
43 |
// click outside of forms |
44 |
$("#radio0 .ui-button:eq(1)").click(); |
45 |
assert(":eq(1)", ":eq(1)", ":eq(2)"); |
46 |
|
47 |
// click in first form |
48 |
$("#radio1 .ui-button:eq(0)").click(); |
49 |
assert(":eq(1)", ":eq(0)", ":eq(2)"); |
50 |
|
51 |
// click in second form |
52 |
$("#radio2 .ui-button:eq(0)").click(); |
53 |
assert(":eq(1)", ":eq(0)", ":eq(0)"); |
54 |
}); |
55 |
|
56 |
test("input type submit, don't create child elements", function() { |
57 |
expect( 2 ); |
58 |
var input = $("#submit"); |
59 |
deepEqual( input.children().length, 0 ); |
60 |
input.button(); |
61 |
deepEqual( input.children().length, 0 ); |
62 |
}); |
63 |
|
64 |
test("buttonset", function() { |
65 |
expect( 6 ); |
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)") ); |
73 |
}); |
74 |
|
75 |
test("buttonset (rtl)", function() { |
76 |
expect( 6 ); |
77 |
var set, |
78 |
parent = $("#radio1").parent(); |
79 |
// Set to rtl |
80 |
parent.attr("dir", "rtl"); |
81 |
|
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)") ); |
89 |
}); |
90 |
|
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() { |
96 |
expect( 3 ); |
97 |
|
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" ); |
103 |
}); |
104 |
|
105 |
// support: Opera |
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"); |
111 |
start(); |
112 |
}, 1 ); |
113 |
}); |
114 |
} |
115 |
|
116 |
test( "#7092 - button creation that requires a matching label does not find label in all cases", function() { |
117 |
expect( 5 ); |
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" ) ); |
121 |
|
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" ) ); |
125 |
|
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" ) ); |
129 |
|
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" ) ); |
133 |
|
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" ) ); |
137 |
}); |
138 |
|
139 |
test( "#5946 - buttonset should ignore buttons that are not :visible", function() { |
140 |
expect( 2 ); |
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" ) ); |
145 |
}); |
146 |
|
147 |
test( "#6262 - buttonset not applying ui-corner to invisible elements", function() { |
148 |
expect( 3 ); |
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" ) ); |
154 |
}); |
155 |
|
156 |
asyncTest( "Resetting a button's form should refresh the visual state of the button widget to match.", function() { |
157 |
expect( 2 ); |
158 |
var form = $( "<form>" + |
159 |
"<button></button>" + |
160 |
"<label for='c1'></label><input id='c1' type='checkbox' checked>" + |
161 |
"</form>" ), |
162 |
button = form.find( "button" ).button(), |
163 |
checkbox = form.find( "input[type=checkbox]" ).button(); |
164 |
|
165 |
checkbox.prop( "checked", false ).button( "refresh" ); |
166 |
ok( !checkbox.button( "widget" ).hasClass( "ui-state-active" ) ); |
167 |
|
168 |
form.get( 0 ).reset(); |
169 |
|
170 |
// #9213: If a button has been removed, refresh should not be called on it when |
171 |
// its corresponding form is reset. |
172 |
button.remove(); |
173 |
|
174 |
setTimeout(function() { |
175 |
ok( checkbox.button( "widget" ).hasClass( "ui-state-active" )); |
176 |
start(); |
177 |
}); |
178 |
}); |
179 |
|
180 |
asyncTest( "#6711 Checkbox/Radiobutton do not Show Focused State when using Keyboard Navigation", function() { |
181 |
expect( 2 ); |
182 |
var check = $( "#check" ).button(), |
183 |
label = $( "label[for='check']" ); |
184 |
ok( !label.is( ".ui-state-focus" ) ); |
185 |
check.focus(); |
186 |
setTimeout(function() { |
187 |
ok( label.is( ".ui-state-focus" ) ); |
188 |
start(); |
189 |
}); |
190 |
}); |
191 |
|
192 |
test( "#7534 - Button label selector works for ids with \":\"", function() { |
193 |
expect( 1 ); |
194 |
var group = $( "<span><input type='checkbox' id='check:7534'><label for='check:7534'>Label</label></span>" ); |
195 |
group.find( "input" ).button(); |
196 |
ok( group.find( "label" ).is( ".ui-button" ), "Found an id with a :" ); |
197 |
}); |
198 |
|
199 |
})(jQuery); |