| 1 | /*
|
|---|
| 2 | * selector unit tests
|
|---|
| 3 | */
|
|---|
| 4 | (function($) {
|
|---|
| 5 |
|
|---|
| 6 | module("core - selectors");
|
|---|
| 7 |
|
|---|
| 8 | function isFocusable(selector, msg) {
|
|---|
| 9 | ok($(selector).is(':focusable'), msg + " - selector " + selector + " is focusable");
|
|---|
| 10 | }
|
|---|
| 11 |
|
|---|
| 12 | function isNotFocusable(selector, msg) {
|
|---|
| 13 | ok($(selector).length && !$(selector).is(':focusable'), msg + " - selector " + selector + " is not focusable");
|
|---|
| 14 | }
|
|---|
| 15 |
|
|---|
| 16 | function isTabbable(selector, msg) {
|
|---|
| 17 | ok($(selector).is(':tabbable'), msg + " - selector " + selector + " is tabbable");
|
|---|
| 18 | }
|
|---|
| 19 |
|
|---|
| 20 | function isNotTabbable(selector, msg) {
|
|---|
| 21 | ok($(selector).length && !$(selector).is(':tabbable'), 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 | isFocusable('#visibleAncestor-inputTypeNone', 'input, no type');
|
|---|
| 85 | isFocusable('#visibleAncestor-inputTypeText', 'input, type text');
|
|---|
| 86 | isFocusable('#visibleAncestor-inputTypeCheckbox', 'input, type checkbox');
|
|---|
| 87 | isFocusable('#visibleAncestor-inputTypeRadio', 'input, type radio');
|
|---|
| 88 | isFocusable('#visibleAncestor-inputTypeButton', 'input, type button');
|
|---|
| 89 | isNotFocusable('#visibleAncestor-inputTypeHidden', 'input, type hidden');
|
|---|
| 90 | isFocusable('#visibleAncestor-button', 'button');
|
|---|
| 91 | isFocusable('#visibleAncestor-select', 'select');
|
|---|
| 92 | isFocusable('#visibleAncestor-textarea', 'textarea');
|
|---|
| 93 | isFocusable('#visibleAncestor-object', 'object');
|
|---|
| 94 | isFocusable('#visibleAncestor-anchorWithHref', 'anchor with href');
|
|---|
| 95 | isNotFocusable('#visibleAncestor-anchorWithoutHref', 'anchor without href');
|
|---|
| 96 | // fails: $("map").is(":visible") and $("map").is(":hidden") both return true
|
|---|
| 97 | isFocusable('#visibleAncestor-areaWithHref', 'area with href');
|
|---|
| 98 | isNotFocusable('#visibleAncestor-areaWithoutHref', 'area without href');
|
|---|
| 99 | isNotFocusable('#visibleAncestor-span', 'span');
|
|---|
| 100 | isNotFocusable('#visibleAncestor-div', 'div');
|
|---|
| 101 | isFocusable("#visibleAncestor-spanWithTabindex", 'span with tabindex');
|
|---|
| 102 | isFocusable("#visibleAncestor-divWithNegativeTabindex", 'div with tabindex');
|
|---|
| 103 | });
|
|---|
| 104 |
|
|---|
| 105 | test("focusable - disabled elements", function() {
|
|---|
| 106 | expect(9);
|
|---|
| 107 |
|
|---|
| 108 | isNotFocusable('#disabledElement-inputTypeNone', 'input, no type');
|
|---|
| 109 | isNotFocusable('#disabledElement-inputTypeText', 'input, type text');
|
|---|
| 110 | isNotFocusable('#disabledElement-inputTypeCheckbox', 'input, type checkbox');
|
|---|
| 111 | isNotFocusable('#disabledElement-inputTypeRadio', 'input, type radio');
|
|---|
| 112 | isNotFocusable('#disabledElement-inputTypeButton', 'input, type button');
|
|---|
| 113 | isNotFocusable('#disabledElement-inputTypeHidden', 'input, type hidden');
|
|---|
| 114 | isNotFocusable('#disabledElement-button', 'button');
|
|---|
| 115 | isNotFocusable('#disabledElement-select', 'select');
|
|---|
| 116 | isNotFocusable('#disabledElement-textarea', 'textarea');
|
|---|
| 117 | });
|
|---|
| 118 |
|
|---|
| 119 | test("focusable - hidden styles", function() {
|
|---|
| 120 | expect(8);
|
|---|
| 121 |
|
|---|
| 122 | isNotFocusable('#displayNoneAncestor-input', 'input, display: none parent');
|
|---|
| 123 | isNotFocusable('#displayNoneAncestor-span', 'span with tabindex, display: none parent');
|
|---|
| 124 |
|
|---|
| 125 | isNotFocusable('#visibilityHiddenAncestor-input', 'input, visibility: hidden parent');
|
|---|
| 126 | isNotFocusable('#visibilityHiddenAncestor-span', 'span with tabindex, visibility: hidden parent');
|
|---|
| 127 |
|
|---|
| 128 | isNotFocusable('#displayNone-input', 'input, display: none');
|
|---|
| 129 | isNotFocusable('#visibilityHidden-input', 'input, visibility: hidden');
|
|---|
| 130 |
|
|---|
| 131 | isNotFocusable('#displayNone-span', 'span with tabindex, display: none');
|
|---|
| 132 | isNotFocusable('#visibilityHidden-span', 'span with tabindex, visibility: hidden');
|
|---|
| 133 | });
|
|---|
| 134 |
|
|---|
| 135 | test("focusable - natively focusable with various tabindex", function() {
|
|---|
| 136 | expect(4);
|
|---|
| 137 |
|
|---|
| 138 | isFocusable('#inputTabindex0', 'input, tabindex 0');
|
|---|
| 139 | isFocusable('#inputTabindex10', 'input, tabindex 10');
|
|---|
| 140 | isFocusable('#inputTabindex-1', 'input, tabindex -1');
|
|---|
| 141 | isFocusable('#inputTabindex-50', 'input, tabindex -50');
|
|---|
| 142 | });
|
|---|
| 143 |
|
|---|
| 144 | test("focusable - not natively focusable with various tabindex", function() {
|
|---|
| 145 | expect(4);
|
|---|
| 146 |
|
|---|
| 147 | isFocusable('#spanTabindex0', 'span, tabindex 0');
|
|---|
| 148 | isFocusable('#spanTabindex10', 'span, tabindex 10');
|
|---|
| 149 | isFocusable('#spanTabindex-1', 'span, tabindex -1');
|
|---|
| 150 | isFocusable('#spanTabindex-50', 'span, tabindex -50');
|
|---|
| 151 | });
|
|---|
| 152 |
|
|---|
| 153 | test("focusable - invalid tabindex", function() {
|
|---|
| 154 | expect(4);
|
|---|
| 155 |
|
|---|
| 156 | isFocusable('#inputTabindexfoo', 'input, tabindex foo');
|
|---|
| 157 | isFocusable('#inputTabindex3foo', 'input, tabindex 3foo');
|
|---|
| 158 | isNotFocusable('#spanTabindexfoo', 'span tabindex foo');
|
|---|
| 159 | isNotFocusable('#spanTabindex3foo', 'span, tabindex 3foo');
|
|---|
| 160 | });
|
|---|
| 161 |
|
|---|
| 162 | test("tabbable - visible, enabled elements", function() {
|
|---|
| 163 | expect(18);
|
|---|
| 164 |
|
|---|
| 165 | isTabbable('#visibleAncestor-inputTypeNone', 'input, no type');
|
|---|
| 166 | isTabbable('#visibleAncestor-inputTypeText', 'input, type text');
|
|---|
| 167 | isTabbable('#visibleAncestor-inputTypeCheckbox', 'input, type checkbox');
|
|---|
| 168 | isTabbable('#visibleAncestor-inputTypeRadio', 'input, type radio');
|
|---|
| 169 | isTabbable('#visibleAncestor-inputTypeButton', 'input, type button');
|
|---|
| 170 | isNotTabbable('#visibleAncestor-inputTypeHidden', 'input, type hidden');
|
|---|
| 171 | isTabbable('#visibleAncestor-button', 'button');
|
|---|
| 172 | isTabbable('#visibleAncestor-select', 'select');
|
|---|
| 173 | isTabbable('#visibleAncestor-textarea', 'textarea');
|
|---|
| 174 | isTabbable('#visibleAncestor-object', 'object');
|
|---|
| 175 | isTabbable('#visibleAncestor-anchorWithHref', 'anchor with href');
|
|---|
| 176 | isNotTabbable('#visibleAncestor-anchorWithoutHref', 'anchor without href');
|
|---|
| 177 | // fails: $("map").is(":visible") and $("map").is(":hidden") both return true
|
|---|
| 178 | isTabbable('#visibleAncestor-areaWithHref', 'area with href');
|
|---|
| 179 | isNotTabbable('#visibleAncestor-areaWithoutHref', 'area without href');
|
|---|
| 180 | isNotTabbable('#visibleAncestor-span', 'span');
|
|---|
| 181 | isNotTabbable('#visibleAncestor-div', 'div');
|
|---|
| 182 | isTabbable("#visibleAncestor-spanWithTabindex", 'span with tabindex');
|
|---|
| 183 | isNotTabbable("#visibleAncestor-divWithNegativeTabindex", 'div with tabindex');
|
|---|
| 184 | });
|
|---|
| 185 |
|
|---|
| 186 | test("Tabbable - disabled elements", function() {
|
|---|
| 187 | expect(9);
|
|---|
| 188 |
|
|---|
| 189 | isNotTabbable('#disabledElement-inputTypeNone', 'input, no type');
|
|---|
| 190 | isNotTabbable('#disabledElement-inputTypeText', 'input, type text');
|
|---|
| 191 | isNotTabbable('#disabledElement-inputTypeCheckbox', 'input, type checkbox');
|
|---|
| 192 | isNotTabbable('#disabledElement-inputTypeRadio', 'input, type radio');
|
|---|
| 193 | isNotTabbable('#disabledElement-inputTypeButton', 'input, type button');
|
|---|
| 194 | isNotTabbable('#disabledElement-inputTypeHidden', 'input, type hidden');
|
|---|
| 195 | isNotTabbable('#disabledElement-button', 'button');
|
|---|
| 196 | isNotTabbable('#disabledElement-select', 'select');
|
|---|
| 197 | isNotTabbable('#disabledElement-textarea', 'textarea');
|
|---|
| 198 | });
|
|---|
| 199 |
|
|---|
| 200 | test("Tabbable - hidden styles", function() {
|
|---|
| 201 | expect(8);
|
|---|
| 202 |
|
|---|
| 203 | isNotTabbable('#displayNoneAncestor-input', 'input, display: none parent');
|
|---|
| 204 | isNotTabbable('#displayNoneAncestor-span', 'span with tabindex, display: none parent');
|
|---|
| 205 |
|
|---|
| 206 | // fails: element hidden by parent-visibility-hidden is still visible according to :visible
|
|---|
| 207 | isNotTabbable('#visibilityHiddenAncestor-input', 'input, visibility: hidden parent');
|
|---|
| 208 | isNotTabbable('#visibilityHiddenAncestor-span', 'span with tabindex, visibility: hidden parent');
|
|---|
| 209 |
|
|---|
| 210 | isNotTabbable('#displayNone-input', 'input, display: none');
|
|---|
| 211 | // fails: element hidden by parent-visibility-hidden is still visible according to :visible
|
|---|
| 212 | isNotTabbable('#visibilityHidden-input', 'input, visibility: hidden');
|
|---|
| 213 |
|
|---|
| 214 | isNotTabbable('#displayNone-span', 'span with tabindex, display: none');
|
|---|
| 215 | isNotTabbable('#visibilityHidden-span', 'span with tabindex, visibility: hidden');
|
|---|
| 216 | });
|
|---|
| 217 |
|
|---|
| 218 | test("Tabbable - natively tabbable with various tabindex", function() {
|
|---|
| 219 | expect(4);
|
|---|
| 220 |
|
|---|
| 221 | isTabbable('#inputTabindex0', 'input, tabindex 0');
|
|---|
| 222 | isTabbable('#inputTabindex10', 'input, tabindex 10');
|
|---|
| 223 | isNotTabbable('#inputTabindex-1', 'input, tabindex -1');
|
|---|
| 224 | isNotTabbable('#inputTabindex-50', 'input, tabindex -50');
|
|---|
| 225 | });
|
|---|
| 226 |
|
|---|
| 227 | test("Tabbable - not natively tabbable with various tabindex", function() {
|
|---|
| 228 | expect(4);
|
|---|
| 229 |
|
|---|
| 230 | isTabbable('#spanTabindex0', 'span, tabindex 0');
|
|---|
| 231 | isTabbable('#spanTabindex10', 'span, tabindex 10');
|
|---|
| 232 | isNotTabbable('#spanTabindex-1', 'span, tabindex -1');
|
|---|
| 233 | isNotTabbable('#spanTabindex-50', 'span, tabindex -50');
|
|---|
| 234 | });
|
|---|
| 235 |
|
|---|
| 236 | test("Tabbable - invalid tabindex", function() {
|
|---|
| 237 | expect(4);
|
|---|
| 238 |
|
|---|
| 239 | isTabbable('#inputTabindexfoo', 'input, tabindex foo');
|
|---|
| 240 | isTabbable('#inputTabindex3foo', 'input, tabindex 3foo');
|
|---|
| 241 | isNotTabbable('#spanTabindexfoo', 'span tabindex foo');
|
|---|
| 242 | isNotTabbable('#spanTabindex3foo', 'span, tabindex 3foo');
|
|---|
| 243 | });
|
|---|
| 244 |
|
|---|
| 245 | })(jQuery);
|
|---|
