| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <script src="../../../resources/js-test.js"></script> |
| 5 <script src="../resources/picker-common.js"></script> |
| 6 </head> |
| 7 <body> |
| 8 <style> |
| 9 select { |
| 10 position: absolute; |
| 11 -webkit-appearance: none; |
| 12 } |
| 13 </style> |
| 14 <select id="menu" style="width: 200px; height: 10px;"> |
| 15 </select> |
| 16 <p id="description" style="opacity: 0"></p> |
| 17 <div id="console" style="opacity: 0"></div> |
| 18 <script> |
| 19 var menu = document.getElementById('menu'); |
| 20 var screenWidth = 500; |
| 21 var screenHeight = 500; |
| 22 var menuWidth = 200; |
| 23 var menuHeight = 10; |
| 24 test1(); |
| 25 |
| 26 function openPickerErrorCallback() { |
| 27 testFailed('picker didn\'t open') |
| 28 finishJSTest(); |
| 29 } |
| 30 |
| 31 function test1() { |
| 32 // Position menu at top left. |
| 33 menu.style.top = 0; |
| 34 menu.style.left = 0; |
| 35 setItemCount(1); |
| 36 openPicker(menu, function () { |
| 37 injectFakeScreenSize() |
| 38 injectFakeItemSize(20, 100, test2); |
| 39 }, openPickerErrorCallback); |
| 40 } |
| 41 |
| 42 function test2() { |
| 43 popupWindowRect = getPopupWindowRect(); |
| 44 shouldBe('popupWindowRect.x', '0'); |
| 45 shouldBe('popupWindowRect.y', 'menuHeight'); |
| 46 |
| 47 popupWindow.pagePopupController.closePopup(); |
| 48 // Position menu at bottom right. |
| 49 menu.style.top = (screenHeight - menuHeight) + 'px'; |
| 50 menu.style.left = (screenWidth - menuWidth) + 'px'; |
| 51 setItemCount(1); |
| 52 openPicker(menu, function () { |
| 53 injectFakeScreenSize(); |
| 54 injectFakeItemSize(20, 100, test3); |
| 55 }, openPickerErrorCallback); |
| 56 } |
| 57 |
| 58 function test3() { |
| 59 popupWindowRect = getPopupWindowRect(); |
| 60 shouldBe('popupWindowRect.x', 'screenWidth - popupWindowRect.width'); |
| 61 shouldBe('popupWindowRect.y', 'screenHeight - popupWindowRect.height - menuH
eight'); |
| 62 |
| 63 popupWindow.pagePopupController.closePopup(); |
| 64 // Position menu at right edge, clipped. |
| 65 menu.style.top = '0'; |
| 66 menu.style.left = (screenWidth - 100) + 'px'; |
| 67 setItemCount(1); |
| 68 openPicker(menu, function () { |
| 69 injectFakeScreenSize(); |
| 70 injectFakeItemSize(200, 100, test4); |
| 71 }, openPickerErrorCallback); |
| 72 } |
| 73 |
| 74 function test4() { |
| 75 popupWindowRect = getPopupWindowRect(); |
| 76 shouldBe('popupWindowRect.x', 'screenWidth - menuWidth'); |
| 77 shouldBe('popupWindowRect.y', 'menuHeight'); |
| 78 |
| 79 popupWindow.pagePopupController.closePopup(); |
| 80 // Position menu at left edge, clipped. |
| 81 menu.style.top = '0'; |
| 82 menu.style.left = '-100px'; |
| 83 setItemCount(1); |
| 84 openPicker(menu, function () { |
| 85 injectFakeScreenSize(); |
| 86 injectFakeItemSize(200, 100, test5); |
| 87 }, openPickerErrorCallback); |
| 88 } |
| 89 |
| 90 function test5() { |
| 91 popupWindowRect = getPopupWindowRect(); |
| 92 shouldBe('popupWindowRect.x', '0'); |
| 93 shouldBe('popupWindowRect.y', 'menuHeight'); |
| 94 |
| 95 popupWindow.pagePopupController.closePopup(); |
| 96 // Position close to right edge. |
| 97 menu.style.top = '0'; |
| 98 menu.style.left = (screenWidth - menuWidth - 10) + 'px'; |
| 99 setItemCount(1); |
| 100 openPicker(menu, function () { |
| 101 injectFakeScreenSize(); |
| 102 injectFakeItemSize(250, 100, test6); |
| 103 }, openPickerErrorCallback); |
| 104 } |
| 105 |
| 106 function test6() { |
| 107 popupWindowRect = getPopupWindowRect(); |
| 108 // Popup should appear right at the right edge of the screen. |
| 109 shouldBe('popupWindowRect.x', 'screenWidth - 250'); |
| 110 shouldBe('popupWindowRect.y', 'menuHeight'); |
| 111 |
| 112 popupWindow.pagePopupController.closePopup(); |
| 113 // Position close to bottom edge. |
| 114 menu.style.top = (screenHeight - 100) + 'px'; |
| 115 menu.style.left = '0'; |
| 116 setItemCount(2); |
| 117 openPicker(menu, function () { |
| 118 injectFakeScreenSize(); |
| 119 injectFakeItemSize(200, 100, test7); |
| 120 }, openPickerErrorCallback); |
| 121 } |
| 122 |
| 123 function test7() { |
| 124 popupWindowRect = getPopupWindowRect(); |
| 125 // Popup should appear right at the right edge of the screen. |
| 126 shouldBe('popupWindowRect.x', '0'); |
| 127 shouldBe('popupWindowRect.y', 'screenHeight - 100 - popupWindowRect.height')
; |
| 128 |
| 129 |
| 130 popupWindow.pagePopupController.closePopup(); |
| 131 // Apply transform. |
| 132 menu.style.transform = 'scale(1.2)'; |
| 133 menu.style.top = '100px'; |
| 134 menu.style.left = '100px'; |
| 135 setItemCount(1); |
| 136 openPicker(menu, function () { |
| 137 injectFakeScreenSize(); |
| 138 injectFakeItemSize(200, 100, test8); |
| 139 }, openPickerErrorCallback); |
| 140 } |
| 141 |
| 142 function test8() { |
| 143 popupWindowRect = getPopupWindowRect(); |
| 144 shouldBe('popupWindowRect.x', '100 - menuWidth * 0.1'); |
| 145 shouldBe('popupWindowRect.y', '100 + menuHeight * 1.1'); |
| 146 |
| 147 finishJSTest(); |
| 148 } |
| 149 |
| 150 function getPopupWindowRect() { |
| 151 return new popupWindow.Rectangle(popupWindow.screenX - window.screen.availLe
ft, popupWindow.screenY - window.screen.availTop, popupWindow.innerWidth, popupW
indow.innerHeight); |
| 152 } |
| 153 |
| 154 function setItemCount(count) { |
| 155 menu.innerHTML = ''; |
| 156 for (var i = 0; i < count; i++) { |
| 157 var option = document.createElement('option'); |
| 158 menu.appendChild(option); |
| 159 } |
| 160 } |
| 161 |
| 162 function injectFakeScreenSize() { |
| 163 Object.defineProperty(popupWindow, 'screen', { |
| 164 value: { |
| 165 width: screenWidth, |
| 166 height: screenHeight, |
| 167 availLeft: window.screen.availLeft, |
| 168 availTop: window.screen.availTop, |
| 169 availWidth: screenWidth, |
| 170 availHeight: screenHeight |
| 171 } |
| 172 }); |
| 173 } |
| 174 |
| 175 function injectFakeItemSize(width, height, callback) { |
| 176 var style = popupWindow.document.createElement('style'); |
| 177 style.innerHTML = 'select { width: ' + width + 'px !important; } option { he
ight: ' + height + 'px; }'; |
| 178 popupWindow.document.body.appendChild(style); |
| 179 popupWindow.global.picker._fixWindowSize(); |
| 180 popupWindow.addEventListener('resize', callback, false); |
| 181 } |
| 182 </script> |
| 183 </body> |
| 184 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 736883002:
Implement <select> Popup Menu using PagePopup (Closed)
Base URL: svn://svn.chromium.org/blink/trunk