| (async function() { |
| TestRunner.addResult('Test ListControl rendering and selection for equal height items case.'); |
| |
| class Delegate { |
| constructor() { |
| this.height = 10; |
| } |
| |
| createElementForItem(item) { |
| TestRunner.addResult('Creating element for ' + item); |
| var element = document.createElement('div'); |
| element.style.height = this.height + 'px'; |
| element.textContent = item; |
| return element; |
| } |
| |
| heightForItem(item) { |
| return this.height; |
| } |
| |
| isItemSelectable(item) { |
| return (item % 5 === 0) || (item % 5 === 2); |
| } |
| |
| selectedItemChanged(from, to, fromElement, toElement) { |
| TestRunner.addResult('Selection changed from ' + from + ' to ' + to); |
| if (fromElement) |
| fromElement.classList.remove('selected'); |
| if (toElement) |
| toElement.classList.add('selected'); |
| } |
| |
| updateSelectedItemARIA(fromElement, toElement) { |
| return false; |
| } |
| } |
| |
| var delegate = new Delegate(); |
| var model = new UI.ListModel(); |
| var list = new UI.ListControl(model, delegate, UI.ListMode.EqualHeightItems); |
| list.element.style.height = '73px'; |
| UI.inspectorView.element.appendChild(list.element); |
| |
| function dumpList() |
| { |
| var height = list.element.offsetHeight; |
| TestRunner.addResult(`----list[length=${model.length}][height=${height}]----`); |
| for (var child of list.element.children) { |
| var offsetTop = child.getBoundingClientRect().top - list.element.getBoundingClientRect().top; |
| var offsetBottom = child.getBoundingClientRect().bottom - list.element.getBoundingClientRect().top; |
| var visible = (offsetBottom <= 0 || offsetTop >= height) ? ' ' : |
| (offsetTop >= 0 && offsetBottom <= height ? '*' : '+'); |
| var selected = child.classList.contains('selected') ? ' (selected)' : ''; |
| var text = child === list._topElement ? 'top' : (child === list._bottomElement ? 'bottom' : child.textContent); |
| TestRunner.addResult(`${visible}[${offsetTop}] ${text}${selected}`); |
| } |
| TestRunner.addResult(''); |
| } |
| |
| TestRunner.addResult('Adding 0, 1, 2'); |
| model.replaceAll([0, 1, 2]); |
| dumpList(); |
| |
| TestRunner.addResult('Scrolling to 0'); |
| list.scrollItemIntoView(0); |
| dumpList(); |
| |
| TestRunner.addResult('Scrolling to 2'); |
| list.scrollItemIntoView(2); |
| dumpList(); |
| |
| TestRunner.addResult('ArrowDown'); |
| list._onKeyDown(TestRunner.createKeyEvent('ArrowDown')); |
| dumpList(); |
| |
| TestRunner.addResult('Selecting 2'); |
| list.selectItem(2); |
| dumpList(); |
| |
| TestRunner.addResult('PageUp'); |
| list._onKeyDown(TestRunner.createKeyEvent('PageUp')); |
| dumpList(); |
| |
| TestRunner.addResult('PageDown'); |
| list._onKeyDown(TestRunner.createKeyEvent('PageDown')); |
| dumpList(); |
| |
| TestRunner.addResult('ArrowDown'); |
| list._onKeyDown(TestRunner.createKeyEvent('ArrowDown')); |
| dumpList(); |
| |
| TestRunner.addResult('Replacing 0 with 5, 6, 7'); |
| model.replaceRange(0, 1, [5, 6, 7]); |
| dumpList(); |
| |
| TestRunner.addResult('ArrowUp'); |
| list._onKeyDown(TestRunner.createKeyEvent('ArrowUp')); |
| dumpList(); |
| |
| TestRunner.addResult('Pushing 10'); |
| model.insert(model.length, 10); |
| dumpList(); |
| |
| TestRunner.addResult('Selecting 10'); |
| list.selectItem(10); |
| dumpList(); |
| |
| TestRunner.addResult('Popping 10'); |
| model.remove(model.length - 1); |
| dumpList(); |
| |
| TestRunner.addResult('Removing 2'); |
| model.remove(4); |
| dumpList(); |
| |
| TestRunner.addResult('Inserting 8'); |
| model.insert(1, 8); |
| dumpList(); |
| |
| TestRunner.addResult('Replacing with 0...20'); |
| model.replaceAll([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]); |
| dumpList(); |
| |
| TestRunner.addResult('Resizing'); |
| list.element.style.height = '83px'; |
| list.viewportResized(); |
| dumpList(); |
| |
| TestRunner.addResult('Scrolling to 19'); |
| list.scrollItemIntoView(19); |
| dumpList(); |
| |
| TestRunner.addResult('Scrolling to 5'); |
| list.scrollItemIntoView(5); |
| dumpList(); |
| |
| TestRunner.addResult('Scrolling to 12'); |
| list.scrollItemIntoView(12); |
| dumpList(); |
| |
| TestRunner.addResult('Scrolling to 13'); |
| list.scrollItemIntoView(13); |
| dumpList(); |
| |
| TestRunner.addResult('Changing the item height'); |
| delegate.height = 15; |
| list.invalidateItemHeight(); |
| dumpList(); |
| |
| TestRunner.addResult('Selecting 7'); |
| list.selectItem(7); |
| dumpList(); |
| |
| TestRunner.addResult('Replacing 7 with 27'); |
| model.replaceRange(7, 8, [27]); |
| dumpList(); |
| |
| TestRunner.addResult('Replacing 18, 19 with 28, 29'); |
| model.replaceRange(18, 20, [28, 29]); |
| dumpList(); |
| |
| TestRunner.addResult('PageDown'); |
| list._onKeyDown(TestRunner.createKeyEvent('PageDown')); |
| dumpList(); |
| |
| TestRunner.addResult('Replacing 1, 2, 3 with [31-43]'); |
| model.replaceRange(1, 4, [31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43]); |
| dumpList(); |
| |
| TestRunner.addResult('Scrolling to 13 (center)'); |
| list.scrollItemIntoView(13, true); |
| dumpList(); |
| |
| TestRunner.addResult('ArrowUp'); |
| list._onKeyDown(TestRunner.createKeyEvent('ArrowUp')); |
| dumpList(); |
| |
| TestRunner.addResult('Selecting -1'); |
| list.selectItem(null); |
| dumpList(); |
| |
| TestRunner.addResult('ArrowUp'); |
| list._onKeyDown(TestRunner.createKeyEvent('ArrowUp')); |
| dumpList(); |
| |
| TestRunner.addResult('Selecting -1'); |
| list.selectItem(null); |
| dumpList(); |
| |
| TestRunner.addResult('ArrowDown'); |
| list._onKeyDown(TestRunner.createKeyEvent('ArrowDown')); |
| dumpList(); |
| |
| TestRunner.addResult('Selecting -1'); |
| list.selectItem(null); |
| dumpList(); |
| |
| TestRunner.addResult('PageUp'); |
| list._onKeyDown(TestRunner.createKeyEvent('PageUp')); |
| dumpList(); |
| |
| TestRunner.addResult('Replacing all but 29 with []'); |
| model.replaceRange(0, 29, []); |
| dumpList(); |
| |
| TestRunner.addResult('ArrowDown'); |
| list._onKeyDown(TestRunner.createKeyEvent('ArrowDown')); |
| dumpList(); |
| |
| var newModel = new UI.ListModel([5, 6, 7]); |
| TestRunner.addResult('Replacing model with [5-7]'); |
| list.setModel(newModel); |
| dumpList(); |
| |
| TestRunner.addResult('Pushing 8'); |
| newModel.insert(newModel.length, 8); |
| dumpList(); |
| |
| TestRunner.addResult('Pushing 9 to old model'); |
| model.insert(model.length, 9); |
| dumpList(); |
| |
| TestRunner.completeTest(); |
| })(); |