chrome/test/data/webui/inline_editable_list_test.html

   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} keyIdentifier Which key to send.
 112  */
 113 function sendKeyDownEvent(target, keyIdentifier) {
 114   var event = document.createEvent('KeyboardEvent');
 115   event.initKeyboardEvent('keydown', true, true, window, keyIdentifier);
 116   assertEquals(keyIdentifier, event.keyIdentifier);
 117   target.dispatchEvent(event);
 118 }
 119
 120 /**
 121  * Test that exactly one item in the list is focusable after navigating the
 122  * list using up and down arrow keys.
 123  */
 124 function testUpDownFocus() {
 125   var list = document.createElement('ul');
 126   list.style.position = 'absolute';
 127   list.style.width = '800px';
 128   list.style.height = '800px';
 129   options.TestItemList.decorate(list);
 130   document.body.appendChild(list);
 131
 132   var model = new cr.ui.ArrayDataModel(['itemA', 'itemB', 'itemC']);
 133   list.dataModel = model;
 134   list.selectionModel.setIndexSelected(0, true);
 135   list.selectionModel.leadIndex = 0;
 136
 137   assertTrue(list.hasExactlyOneItemFocusable(0));
 138   sendKeyDownEvent(list, 'Down');
 139   assertTrue(list.hasExactlyOneItemFocusable(1));
 140   sendKeyDownEvent(list, 'Down');
 141   assertTrue(list.hasExactlyOneItemFocusable(2));
 142   sendKeyDownEvent(list, 'Up');
 143   assertTrue(list.hasExactlyOneItemFocusable(1));
 144   sendKeyDownEvent(list, 'Up');
 145   assertTrue(list.hasExactlyOneItemFocusable(0));
 146   sendKeyDownEvent(list, 'Down');
 147   assertTrue(list.hasExactlyOneItemFocusable(1));
 148 }
 149
 150 </script>
 151
 152 </body>
 153 </html>