| 1 |
/* |
| 2 |
* selector unit tests |
| 3 |
*/ |
| 4 |
(function($) { |
| 5 |
|
| 6 |
module("core - selectors"); |
| 7 |
|
| 8 |
function isFocusable(selector, msg) { |
| 9 |
QUnit.push($(selector).is(":focusable"), null, null, msg + " - selector " + selector + " is focusable"); |
| 10 |
} |
| 11 |
|
| 12 |
function isNotFocusable(selector, msg) { |
| 13 |
QUnit.push($(selector).length && !$(selector).is(":focusable"), null, null, msg + " - selector " + selector + " is not focusable"); |
| 14 |
} |
| 15 |
|
| 16 |
function isTabbable(selector, msg) { |
| 17 |
QUnit.push($(selector).is(":tabbable"), null, null, msg + " - selector " + selector + " is tabbable"); |
| 18 |
} |
| 19 |
|
| 20 |
function isNotTabbable(selector, msg) { |
| 21 |
QUnit.push($(selector).length && !$(selector).is(":tabbable"), null, null, msg + " - selector " + selector + " is not tabbable"); |
| 22 |
} |
| 23 |
|
| 24 |
test("data", function() { |
| 25 |
expect(15); |
| 26 |
|
| 27 |
var el; |
| 28 |
function shouldHaveData(msg) { |
| 29 |
ok(el.is(":data(test)"), msg); |
| 30 |
} |
| 31 |
function shouldNotHaveData(msg) { |
| 32 |
ok(!el.is(":data(test)"), msg); |
| 33 |
} |
| 34 |
|
| 35 |
el = $("<div>"); |
| 36 |
shouldNotHaveData("data never set"); |
| 37 |
|
| 38 |
el = $("<div>").data("test", null); |
| 39 |
shouldNotHaveData("data is null"); |
| 40 |
|
| 41 |
el = $("<div>").data("test", true); |
| 42 |
shouldHaveData("data set to true"); |
| 43 |
|
| 44 |
el = $("<div>").data("test", false); |
| 45 |
shouldNotHaveData("data set to false"); |
| 46 |
|
| 47 |
el = $("<div>").data("test", 0); |
| 48 |
shouldNotHaveData("data set to 0"); |
| 49 |
|
| 50 |
el = $("<div>").data("test", 1); |
| 51 |
shouldHaveData("data set to 1"); |
| 52 |
|
| 53 |
el = $("<div>").data("test", ""); |
| 54 |
shouldNotHaveData("data set to empty string"); |
| 55 |
|
| 56 |
el = $("<div>").data("test", "foo"); |
| 57 |
shouldHaveData("data set to string"); |
| 58 |
|
| 59 |
el = $("<div>").data("test", []); |
| 60 |
shouldHaveData("data set to empty array"); |
| 61 |
|
| 62 |
el = $("<div>").data("test", [1]); |
| 63 |
shouldHaveData("data set to array"); |
| 64 |
|
| 65 |
el = $("<div>").data("test", {}); |
| 66 |
shouldHaveData("data set to empty object"); |
| 67 |
|
| 68 |
el = $("<div>").data("test", {foo: "bar"}); |
| 69 |
shouldHaveData("data set to object"); |
| 70 |
|
| 71 |
el = $("<div>").data("test", new Date()); |
| 72 |
shouldHaveData("data set to date"); |
| 73 |
|
| 74 |
el = $("<div>").data("test", /test/); |
| 75 |
shouldHaveData("data set to regexp"); |
| 76 |
|
| 77 |
el = $("<div>").data("test", function() {}); |
| 78 |
shouldHaveData("data set to function"); |
| 79 |
}); |
| 80 |
|
| 81 |
test("focusable - visible, enabled elements", function() { |
| 82 |
expect(18); |
| 83 |
|
| 84 |
isNotFocusable("#formNoTabindex", "form"); |
| 85 |
isFocusable("#formTabindex", "form with tabindex"); |
| 86 |
isFocusable("#visibleAncestor-inputTypeNone", "input, no type"); |
| 87 |
isFocusable("#visibleAncestor-inputTypeText", "input, type text"); |
| 88 |
isFocusable("#visibleAncestor-inputTypeCheckbox", "input, type checkbox"); |
| 89 |
isFocusable("#visibleAncestor-inputTypeRadio", "input, type radio"); |
| 90 |
isFocusable("#visibleAncestor-inputTypeButton", "input, type button"); |
| 91 |
isNotFocusable("#visibleAncestor-inputTypeHidden", "input, type hidden"); |
| 92 |
isFocusable("#visibleAncestor-button", "button"); |
| 93 |
isFocusable("#visibleAncestor-select", "select"); |
| 94 |
isFocusable("#visibleAncestor-textarea", "textarea"); |
| 95 |
isFocusable("#visibleAncestor-object", "object"); |
| 96 |
isFocusable("#visibleAncestor-anchorWithHref", "anchor with href"); |
| 97 |
isNotFocusable("#visibleAncestor-anchorWithoutHref", "anchor without href"); |
| 98 |
isNotFocusable("#visibleAncestor-span", "span"); |
| 99 |
isNotFocusable("#visibleAncestor-div", "div"); |
| 100 |
isFocusable("#visibleAncestor-spanWithTabindex", "span with tabindex"); |
| 101 |
isFocusable("#visibleAncestor-divWithNegativeTabindex", "div with tabindex"); |
| 102 |
}); |
| 103 |
|
| 104 |
test("focusable - disabled elements", function() { |
| 105 |
expect(9); |
| 106 |
|
| 107 |
isNotFocusable("#disabledElement-inputTypeNone", "input, no type"); |
| 108 |
isNotFocusable("#disabledElement-inputTypeText", "input, type text"); |
| 109 |
isNotFocusable("#disabledElement-inputTypeCheckbox", "input, type checkbox"); |
| 110 |
isNotFocusable("#disabledElement-inputTypeRadio", "input, type radio"); |
| 111 |
isNotFocusable("#disabledElement-inputTypeButton", "input, type button"); |
| 112 |
isNotFocusable("#disabledElement-inputTypeHidden", "input, type hidden"); |
| 113 |
isNotFocusable("#disabledElement-button", "button"); |
| 114 |
isNotFocusable("#disabledElement-select", "select"); |
| 115 |
isNotFocusable("#disabledElement-textarea", "textarea"); |
| 116 |
}); |
| 117 |
|
| 118 |
test("focusable - hidden styles", function() { |
| 119 |
expect(8); |
| 120 |
|
| 121 |
isNotFocusable("#displayNoneAncestor-input", "input, display: none parent"); |
| 122 |
isNotFocusable("#displayNoneAncestor-span", "span with tabindex, display: none parent"); |
| 123 |
|
| 124 |
isNotFocusable("#visibilityHiddenAncestor-input", "input, visibility: hidden parent"); |
| 125 |
isNotFocusable("#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent"); |
| 126 |
|
| 127 |
isNotFocusable("#displayNone-input", "input, display: none"); |
| 128 |
isNotFocusable("#visibilityHidden-input", "input, visibility: hidden"); |
| 129 |
|
| 130 |
isNotFocusable("#displayNone-span", "span with tabindex, display: none"); |
| 131 |
isNotFocusable("#visibilityHidden-span", "span with tabindex, visibility: hidden"); |
| 132 |
}); |
| 133 |
|
| 134 |
test("focusable - natively focusable with various tabindex", function() { |
| 135 |
expect(4); |
| 136 |
|
| 137 |
isFocusable("#inputTabindex0", "input, tabindex 0"); |
| 138 |
isFocusable("#inputTabindex10", "input, tabindex 10"); |
| 139 |
isFocusable("#inputTabindex-1", "input, tabindex -1"); |
| 140 |
isFocusable("#inputTabindex-50", "input, tabindex -50"); |
| 141 |
}); |
| 142 |
|
| 143 |
test("focusable - not natively focusable with various tabindex", function() { |
| 144 |
expect(4); |
| 145 |
|
| 146 |
isFocusable("#spanTabindex0", "span, tabindex 0"); |
| 147 |
isFocusable("#spanTabindex10", "span, tabindex 10"); |
| 148 |
isFocusable("#spanTabindex-1", "span, tabindex -1"); |
| 149 |
isFocusable("#spanTabindex-50", "span, tabindex -50"); |
| 150 |
}); |
| 151 |
|
| 152 |
test("focusable - area elements", function() { |
| 153 |
expect( 3 ); |
| 154 |
|
| 155 |
isFocusable("#areaCoordsHref", "coords and href"); |
| 156 |
isFocusable("#areaNoCoordsHref", "href but no coords"); |
| 157 |
isNotFocusable("#areaNoImg", "not associated with an image"); |
| 158 |
}); |
| 159 |
|
| 160 |
test( "focusable - dimensionless parent with overflow", function() { |
| 161 |
expect( 1 ); |
| 162 |
|
| 163 |
isFocusable( "#dimensionlessParent", "input" ); |
| 164 |
}); |
| 165 |
|
| 166 |
test("tabbable - visible, enabled elements", function() { |
| 167 |
expect(18); |
| 168 |
|
| 169 |
isNotTabbable("#formNoTabindex", "form"); |
| 170 |
isTabbable("#formTabindex", "form with tabindex"); |
| 171 |
isTabbable("#visibleAncestor-inputTypeNone", "input, no type"); |
| 172 |
isTabbable("#visibleAncestor-inputTypeText", "input, type text"); |
| 173 |
isTabbable("#visibleAncestor-inputTypeCheckbox", "input, type checkbox"); |
| 174 |
isTabbable("#visibleAncestor-inputTypeRadio", "input, type radio"); |
| 175 |
isTabbable("#visibleAncestor-inputTypeButton", "input, type button"); |
| 176 |
isNotTabbable("#visibleAncestor-inputTypeHidden", "input, type hidden"); |
| 177 |
isTabbable("#visibleAncestor-button", "button"); |
| 178 |
isTabbable("#visibleAncestor-select", "select"); |
| 179 |
isTabbable("#visibleAncestor-textarea", "textarea"); |
| 180 |
isTabbable("#visibleAncestor-object", "object"); |
| 181 |
isTabbable("#visibleAncestor-anchorWithHref", "anchor with href"); |
| 182 |
isNotTabbable("#visibleAncestor-anchorWithoutHref", "anchor without href"); |
| 183 |
isNotTabbable("#visibleAncestor-span", "span"); |
| 184 |
isNotTabbable("#visibleAncestor-div", "div"); |
| 185 |
isTabbable("#visibleAncestor-spanWithTabindex", "span with tabindex"); |
| 186 |
isNotTabbable("#visibleAncestor-divWithNegativeTabindex", "div with tabindex"); |
| 187 |
}); |
| 188 |
|
| 189 |
test("tabbable - disabled elements", function() { |
| 190 |
expect(9); |
| 191 |
|
| 192 |
isNotTabbable("#disabledElement-inputTypeNone", "input, no type"); |
| 193 |
isNotTabbable("#disabledElement-inputTypeText", "input, type text"); |
| 194 |
isNotTabbable("#disabledElement-inputTypeCheckbox", "input, type checkbox"); |
| 195 |
isNotTabbable("#disabledElement-inputTypeRadio", "input, type radio"); |
| 196 |
isNotTabbable("#disabledElement-inputTypeButton", "input, type button"); |
| 197 |
isNotTabbable("#disabledElement-inputTypeHidden", "input, type hidden"); |
| 198 |
isNotTabbable("#disabledElement-button", "button"); |
| 199 |
isNotTabbable("#disabledElement-select", "select"); |
| 200 |
isNotTabbable("#disabledElement-textarea", "textarea"); |
| 201 |
}); |
| 202 |
|
| 203 |
test("tabbable - hidden styles", function() { |
| 204 |
expect(8); |
| 205 |
|
| 206 |
isNotTabbable("#displayNoneAncestor-input", "input, display: none parent"); |
| 207 |
isNotTabbable("#displayNoneAncestor-span", "span with tabindex, display: none parent"); |
| 208 |
|
| 209 |
isNotTabbable("#visibilityHiddenAncestor-input", "input, visibility: hidden parent"); |
| 210 |
isNotTabbable("#visibilityHiddenAncestor-span", "span with tabindex, visibility: hidden parent"); |
| 211 |
|
| 212 |
isNotTabbable("#displayNone-input", "input, display: none"); |
| 213 |
isNotTabbable("#visibilityHidden-input", "input, visibility: hidden"); |
| 214 |
|
| 215 |
isNotTabbable("#displayNone-span", "span with tabindex, display: none"); |
| 216 |
isNotTabbable("#visibilityHidden-span", "span with tabindex, visibility: hidden"); |
| 217 |
}); |
| 218 |
|
| 219 |
test("tabbable - natively tabbable with various tabindex", function() { |
| 220 |
expect(4); |
| 221 |
|
| 222 |
isTabbable("#inputTabindex0", "input, tabindex 0"); |
| 223 |
isTabbable("#inputTabindex10", "input, tabindex 10"); |
| 224 |
isNotTabbable("#inputTabindex-1", "input, tabindex -1"); |
| 225 |
isNotTabbable("#inputTabindex-50", "input, tabindex -50"); |
| 226 |
}); |
| 227 |
|
| 228 |
test("tabbable - not natively tabbable with various tabindex", function() { |
| 229 |
expect(4); |
| 230 |
|
| 231 |
isTabbable("#spanTabindex0", "span, tabindex 0"); |
| 232 |
isTabbable("#spanTabindex10", "span, tabindex 10"); |
| 233 |
isNotTabbable("#spanTabindex-1", "span, tabindex -1"); |
| 234 |
isNotTabbable("#spanTabindex-50", "span, tabindex -50"); |
| 235 |
}); |
| 236 |
|
| 237 |
test("tabbable - area elements", function() { |
| 238 |
expect( 3 ); |
| 239 |
|
| 240 |
isTabbable("#areaCoordsHref", "coords and href"); |
| 241 |
isTabbable("#areaNoCoordsHref", "href but no coords"); |
| 242 |
isNotTabbable("#areaNoImg", "not associated with an image"); |
| 243 |
}); |
| 244 |
|
| 245 |
test( "tabbable - dimensionless parent with overflow", function() { |
| 246 |
expect( 1 ); |
| 247 |
|
| 248 |
isTabbable( "#dimensionlessParent", "input" ); |
| 249 |
}); |
| 250 |
|
| 251 |
})(jQuery); |
Parent Directory
| 
Revision Log