| 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 |