third_party/WebKit/LayoutTests/fast/forms/select/popup-menu-position.html

   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 - menuHeight');
  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 - 100');
  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', '-100');
  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     shouldBe('popupWindowRect.x', 'screenWidth - 250 - 10');
 109     shouldBe('popupWindowRect.y', 'menuHeight');
 110
 111     popupWindow.pagePopupController.closePopup();
 112     // Position close to bottom edge.
 113     menu.style.top = (screenHeight - 100) + 'px';
 114     menu.style.left = '0';
 115     setItemCount(2);
 116     openPicker(menu, function () {
 117         injectFakeScreenSize();
 118         injectFakeItemSize(200, 100, test7);
 119     }, openPickerErrorCallback);
 120 }
 121
 122 function test7() {
 123     popupWindowRect = getPopupWindowRect();
 124     // Popup should appear right at the right edge of the screen.
 125     shouldBe('popupWindowRect.x', '0');
 126     shouldBe('popupWindowRect.y', 'screenHeight - 100 - popupWindowRect.height');
 127
 128
 129     popupWindow.pagePopupController.closePopup();
 130     // Apply transform.
 131     menu.style.transform = 'scale(1.2)';
 132     menu.style.top = '100px';
 133     menu.style.left = '100px';
 134     setItemCount(1);
 135     openPicker(menu, function () {
 136         injectFakeScreenSize();
 137         injectFakeItemSize(200, 100, test8);
 138     }, openPickerErrorCallback);
 139 }
 140
 141 function test8() {
 142     popupWindowRect = getPopupWindowRect();
 143     shouldBe('popupWindowRect.x', '100 - menuWidth * 0.1');
 144     shouldBe('popupWindowRect.y', '100 + menuHeight * 1.1');
 145
 146     finishJSTest();
 147 }
 148
 149 function getPopupWindowRect() {
 150     return new popupWindow.Rectangle(popupWindow.screenX - window.screen.availLeft, popupWindow.screenY - window.screen.availTop, popupWindow.innerWidth, popupWindow.innerHeight);
 151 }
 152
 153 function setItemCount(count) {
 154     menu.innerHTML = '';
 155     for (var i = 0; i < count; i++) {
 156         var option = document.createElement('option');
 157         menu.appendChild(option);
 158     }
 159 }
 160
 161 function injectFakeScreenSize() {
 162     Object.defineProperty(popupWindow, 'screen', {
 163         value: {
 164             width: screenWidth,
 165             height: screenHeight,
 166             availLeft: window.screen.availLeft,
 167             availTop: window.screen.availTop,
 168             availWidth: screenWidth,
 169             availHeight: screenHeight
 170         }
 171     });
 172 }
 173
 174 function injectFakeItemSize(width, height, callback) {
 175     var style = popupWindow.document.createElement('style');
 176     style.innerHTML = 'select { width: ' + width + 'px !important; } option { height: ' + height + 'px; }';
 177     popupWindow.document.body.appendChild(style);
 178     popupWindow.global.picker._fixWindowSize();
 179     popupWindow.addEventListener('resize', callback, false);
 180 }
 181 </script>
 182 </body>
 183 </html>