| OLD | NEW |
| 1 TestRunner.addResult('Test ListControl rendering for variable height case.'); | 1 TestRunner.addResult('Test ListControl rendering and selection for grow mode.'); |
| 2 | 2 |
| 3 class Delegate { | 3 class Delegate { |
| 4 constructor() { | 4 constructor() { |
| 5 } | 5 } |
| 6 | 6 |
| 7 createElementForItem(item) { | 7 createElementForItem(item) { |
| 8 TestRunner.addResult('Creating element for ' + item); | 8 TestRunner.addResult('Creating element for ' + item); |
| 9 var element = document.createElement('div'); | 9 var element = document.createElement('div'); |
| 10 element.style.height = this.heightForItem(item) + 'px'; | 10 element.style.height = (10 + item % 5) + 'px'; |
| 11 element.textContent = item; | 11 element.textContent = item; |
| 12 return element; | 12 return element; |
| 13 } | 13 } |
| 14 | 14 |
| 15 heightForItem(item) { | 15 heightForItem(item) { |
| 16 return 7 + item % 10; | 16 TestRunner.addResult('heightForItem should not be called'); |
| 17 return 10 + item % 5; |
| 17 } | 18 } |
| 18 | 19 |
| 19 isItemSelectable(item) { | 20 isItemSelectable(item) { |
| 20 return (item % 5 === 0) || (item % 5 === 2); | 21 return (item % 5 === 0) || (item % 5 === 2); |
| 21 } | 22 } |
| 22 | 23 |
| 23 selectedItemChanged(from, to, fromElement, toElement) { | 24 selectedItemChanged(from, to, fromElement, toElement) { |
| 24 TestRunner.addResult('Selection changed from ' + from + ' to ' + to); | 25 TestRunner.addResult('Selection changed from ' + from + ' to ' + to); |
| 25 if (fromElement) | 26 if (fromElement) |
| 26 fromElement.classList.remove('selected'); | 27 fromElement.classList.remove('selected'); |
| 27 if (toElement) | 28 if (toElement) |
| 28 toElement.classList.add('selected'); | 29 toElement.classList.add('selected'); |
| 29 } | 30 } |
| 30 } | 31 } |
| 31 | 32 |
| 32 var delegate = new Delegate(); | 33 var delegate = new Delegate(); |
| 33 var list = new UI.ListControl(delegate); | 34 var list = new UI.ListControl(delegate); |
| 34 list.setHeightMode(UI.ListHeightMode.Variable); | 35 list.setMode(UI.ListMode.Grow); |
| 35 list.element.style.height = '73px'; | |
| 36 UI.inspectorView.element.appendChild(list.element); | 36 UI.inspectorView.element.appendChild(list.element); |
| 37 | 37 |
| 38 function dumpList() | 38 function dumpList() |
| 39 { | 39 { |
| 40 var height = list.element.offsetHeight; | 40 var height = list.element.offsetHeight; |
| 41 TestRunner.addResult(`----list[length=${list.length()}][height=${height}]----`
); | 41 TestRunner.addResult(`----list[length=${list.length()}][height=${height}]----`
); |
| 42 for (var child of list.element.children) { | 42 for (var child of list.element.children) { |
| 43 var offsetTop = child.getBoundingClientRect().top - list.element.getBounding
ClientRect().top; | 43 var offsetTop = child.getBoundingClientRect().top - list.element.getBounding
ClientRect().top; |
| 44 var offsetBottom = child.getBoundingClientRect().bottom - list.element.getBo
undingClientRect().top; | 44 var offsetBottom = child.getBoundingClientRect().bottom - list.element.getBo
undingClientRect().top; |
| 45 var visible = (offsetBottom <= 0 || offsetTop >= height) ? ' ' : | 45 var visible = (offsetBottom <= 0 || offsetTop >= height) ? ' ' : |
| 46 (offsetTop >= 0 && offsetBottom <= height ? '*' : '+'); | 46 (offsetTop >= 0 && offsetBottom <= height ? '*' : '+'); |
| 47 var selected = child.classList.contains('selected') ? ' (selected)' : ''; | 47 var selected = child.classList.contains('selected') ? ' (selected)' : ''; |
| 48 var text = child === list._topElement ? 'top' : (child === list._bottomEleme
nt ? 'bottom' : child.textContent); | 48 var text = child === list._topElement ? 'top' : (child === list._bottomEleme
nt ? 'bottom' : child.textContent); |
| 49 TestRunner.addResult(`${visible}[${offsetTop}] ${text}${selected}`); | 49 TestRunner.addResult(`${visible}[${offsetTop}] ${text}${selected}`); |
| 50 } | 50 } |
| 51 TestRunner.addResult('offsets: ' + list._variableOffsets.join(' ')); | |
| 52 TestRunner.addResult(''); | 51 TestRunner.addResult(''); |
| 53 } | 52 } |
| 54 | 53 |
| 55 TestRunner.addResult('Adding 0, 1, 2'); | 54 TestRunner.addResult('Adding 0, 1, 2'); |
| 56 list.replaceAllItems([0, 1, 2]); | 55 list.replaceAllItems([0, 1, 2]); |
| 57 dumpList(); | 56 dumpList(); |
| 58 | 57 |
| 59 TestRunner.addResult('Scrolling to 0'); | 58 TestRunner.addResult('Scrolling to 0'); |
| 60 list.scrollItemAtIndexIntoView(0); | 59 list.scrollItemAtIndexIntoView(0); |
| 61 dumpList(); | 60 dumpList(); |
| 62 | 61 |
| 63 TestRunner.addResult('Scrolling to 2'); | 62 TestRunner.addResult('Scrolling to 2'); |
| 64 list.scrollItemAtIndexIntoView(2); | 63 list.scrollItemAtIndexIntoView(2); |
| 65 dumpList(); | 64 dumpList(); |
| 66 | 65 |
| 67 TestRunner.addResult('Adding 3-20'); | 66 TestRunner.addResult('Adding 3-20'); |
| 68 list.replaceItemsInRange(3, 3, [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
17, 18, 19]); | 67 list.replaceItemsInRange(3, 3, [3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16,
17, 18, 19]); |
| 69 dumpList(); | 68 dumpList(); |
| 70 | 69 |
| 71 TestRunner.addResult('Scrolling to 11'); | |
| 72 list.scrollItemAtIndexIntoView(11); | |
| 73 dumpList(); | |
| 74 | |
| 75 TestRunner.addResult('Scrolling to 19'); | 70 TestRunner.addResult('Scrolling to 19'); |
| 76 list.scrollItemAtIndexIntoView(19); | 71 list.scrollItemAtIndexIntoView(19); |
| 77 dumpList(); | 72 dumpList(); |
| 78 | 73 |
| 79 TestRunner.addResult('Scrolling to 16'); | |
| 80 list.scrollItemAtIndexIntoView(16); | |
| 81 dumpList(); | |
| 82 | |
| 83 TestRunner.addResult('Scrolling to 3'); | |
| 84 list.scrollItemAtIndexIntoView(3); | |
| 85 dumpList(); | |
| 86 | |
| 87 TestRunner.addResult('Replacing 0, 1 with 25-36'); | 74 TestRunner.addResult('Replacing 0, 1 with 25-36'); |
| 88 list.replaceItemsInRange(0, 2, [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36])
; | 75 list.replaceItemsInRange(0, 2, [25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36])
; |
| 89 dumpList(); | 76 dumpList(); |
| 90 | 77 |
| 91 TestRunner.addResult('Scrolling to 18'); | 78 TestRunner.addResult('Scrolling to 18'); |
| 92 list.scrollItemAtIndexIntoView(28); | 79 list.scrollItemAtIndexIntoView(28); |
| 93 dumpList(); | 80 dumpList(); |
| 94 | 81 |
| 95 TestRunner.addResult('Replacing 25-36 with 0-1'); | 82 TestRunner.addResult('Replacing 25-36 with 0-1'); |
| 96 list.replaceItemsInRange(0, 12, [0, 1]); | 83 list.replaceItemsInRange(0, 12, [0, 1]); |
| 97 dumpList(); | 84 dumpList(); |
| 98 | 85 |
| 99 TestRunner.addResult('Replacing 16-18 with 45'); | 86 TestRunner.addResult('Replacing 16-18 with 45'); |
| 100 list.replaceItemsInRange(16, 19, [45]); | 87 list.replaceItemsInRange(16, 19, [45]); |
| 101 dumpList(); | 88 dumpList(); |
| 102 | 89 |
| 103 TestRunner.addResult('Scrolling to 4'); | 90 TestRunner.addResult('Scrolling to 4'); |
| 104 list.scrollItemAtIndexIntoView(4); | 91 list.scrollItemAtIndexIntoView(4); |
| 105 dumpList(); | 92 dumpList(); |
| 106 | 93 |
| 107 TestRunner.addResult('Replacing 45 with 16-18'); | 94 TestRunner.addResult('Replacing 45 with 16-18'); |
| 108 list.replaceItemsInRange(16, 17, [16, 17, 18]); | 95 list.replaceItemsInRange(16, 17, [16, 17, 18]); |
| 109 dumpList(); | 96 dumpList(); |
| 110 | 97 |
| 111 TestRunner.addResult('Resizing'); | |
| 112 list.element.style.height = '190px'; | |
| 113 list.viewportResized(); | |
| 114 dumpList(); | |
| 115 | |
| 116 TestRunner.completeTest(); | 98 TestRunner.completeTest(); |
| OLD | NEW |