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