OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <body> | |
4 | |
5 <script> | |
6 | |
7 function setUp() { | |
8 loadTimeData.data = { | |
9 'deletableItemDeleteButtonTitle': 'test_deletable_button_title' | |
10 }; | |
11 | |
12 cr.define('options', function() { | |
13 /** @const */ var InlineEditableItemList = options.InlineEditableItemList; | |
14 /** @const */ var InlineEditableItem = options.InlineEditableItem; | |
15 | |
16 /** | |
17 * Creates a test list item. | |
18 * @param {string} name This item's name. | |
19 * @constructor | |
20 * @extends {options.InlineEditableItem} | |
21 */ | |
22 function TestItem(name) { | |
23 var el = cr.doc.createElement('div'); | |
24 el.name_ = name; | |
25 TestItem.decorate(el); | |
26 return el; | |
27 } | |
28 | |
29 /** | |
30 * Decorates an element as a test list item. | |
31 * @param {!HTMLElement} el The element to decorate. | |
32 */ | |
33 TestItem.decorate = function(el) { | |
34 el.__proto__ = TestItem.prototype; | |
35 el.decorate(); | |
36 }; | |
37 | |
38 TestItem.prototype = { | |
39 __proto__: InlineEditableItem.prototype, | |
40 | |
41 /** | |
42 * Item name. Used to set the item's text fields. | |
43 * @type {string} | |
44 * @private | |
45 */ | |
46 name_: null, | |
47 | |
48 /** @override */ | |
49 decorate: function() { | |
50 InlineEditableItem.prototype.decorate.call(this); | |
51 | |
52 var fieldEl = this.createEditableTextCell(this.name_); | |
53 this.contentElement.appendChild(fieldEl); | |
54 | |
55 fieldEl = this.createEditableTextCell(this.name_ + '_two'); | |
56 this.contentElement.appendChild(fieldEl); | |
57 }, | |
58 }; | |
59 | |
60 /** | |
61 * @constructor | |
62 * @extends {options.InlineEditableItemList} | |
63 */ | |
64 var TestItemList = cr.ui.define('list'); | |
65 | |
66 TestItemList.prototype = { | |
67 __proto__: InlineEditableItemList.prototype, | |
68 | |
69 /** | |
70 * @override | |
71 * @param {string} name | |
72 */ | |
73 createItem: function(name) { | |
74 return new TestItem(name); | |
75 }, | |
76 | |
77 /** | |
78 * @param {!Element} el | |
79 * @return {boolean} True if |el| or any of its children are focusable. | |
80 * @private | |
81 */ | |
82 hasFocusableElement_: function(el) { | |
83 return el.querySelectorAll('[tabindex="0"]').length > 0; | |
84 }, | |
85 | |
86 /** | |
87 * @param {number} itemIndex | |
88 * @return {boolean} True if item at |itemIndex| has a focusable element | |
89 * and no other items have focusable elements. | |
90 */ | |
91 hasExactlyOneItemFocusable: function(itemIndex) { | |
92 var length = this.items.length; | |
93 for(var i = 0; i < length; ++i) { | |
94 if (this.hasFocusableElement_(this.items[i]) != (i == itemIndex)) | |
95 return false; | |
96 } | |
97 return true; | |
98 }, | |
99 }; | |
100 | |
101 // Export. | |
102 return { | |
103 TestItemList: TestItemList | |
104 }; | |
105 | |
106 }) | |
107 } | |
108 | |
109 /** | |
110 * @param {!EventTarget} target Where to send the event. | |
111 * @param {!string} key Which key to send. | |
112 */ | |
113 function sendKeyDownEvent(target, key) { | |
114 var event = new KeyboardEvent('keydown', | |
115 {bubbles: true, cancelable: true, key: key}); | |
116 target.dispatchEvent(event); | |
117 } | |
118 | |
119 /** | |
120 * Test that exactly one item in the list is focusable after navigating the | |
121 * list using up and down arrow keys. | |
122 */ | |
123 function testUpDownFocus() { | |
124 var list = document.createElement('ul'); | |
125 list.style.position = 'absolute'; | |
126 list.style.width = '800px'; | |
127 list.style.height = '800px'; | |
128 options.TestItemList.decorate(list); | |
129 document.body.appendChild(list); | |
130 | |
131 var model = new cr.ui.ArrayDataModel(['itemA', 'itemB', 'itemC']); | |
132 list.dataModel = model; | |
133 list.selectionModel.setIndexSelected(0, true); | |
134 list.selectionModel.leadIndex = 0; | |
135 | |
136 assertTrue(list.hasExactlyOneItemFocusable(0)); | |
137 sendKeyDownEvent(list, 'ArrowDown'); | |
138 assertTrue(list.hasExactlyOneItemFocusable(1)); | |
139 sendKeyDownEvent(list, 'ArrowDown'); | |
140 assertTrue(list.hasExactlyOneItemFocusable(2)); | |
141 sendKeyDownEvent(list, 'ArrowUp'); | |
142 assertTrue(list.hasExactlyOneItemFocusable(1)); | |
143 sendKeyDownEvent(list, 'ArrowUp'); | |
144 assertTrue(list.hasExactlyOneItemFocusable(0)); | |
145 sendKeyDownEvent(list, 'ArrowDown'); | |
146 assertTrue(list.hasExactlyOneItemFocusable(1)); | |
147 } | |
148 | |
149 </script> | |
150 | |
151 </body> | |
152 </html> | |
OLD | NEW |