popup-menu-position.html | Explore in Territory

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src="../resources/picker-common.js"></script>

<style>
select {
    position: absolute;
}
</style>

<select style="width: 200px; height: 10px;"></select>

<script>
window.onload = () => {
  var menu = document.querySelector('select');
  var screenWidth = 500;
  var screenHeight = 500;
  var menuWidth = 200;
  var menuHeight = 10;

  function getPopupWindowRect() {
      return new internals.pagePopupWindow.Rectangle(internals.pagePopupWindow.screenX - window.screen.availLeft, internals.pagePopupWindow.screenY - window.screen.availTop, internals.pagePopupWindow.innerWidth, internals.pagePopupWindow.innerHeight);
  }

  function setItemCount(count) {
      menu.innerHTML = '';
      for (var i = 0; i < count; i++) {
          var option = document.createElement('option');
          menu.appendChild(option);
      }
  }

  function injectFakeScreenSize() {
      Object.defineProperty(internals.pagePopupWindow, 'screen', {
          value: {
              width: screenWidth,
              height: screenHeight,
              availLeft: window.screen.availLeft,
              availTop: window.screen.availTop,
              availWidth: screenWidth,
              availHeight: screenHeight
          }
      });
  }

  function injectFakeItemSize(width, height, callback) {
      var style = internals.pagePopupWindow.document.createElement('style');
      style.innerHTML = 'select { width: ' + width + 'px !important; } option { height: ' + height + 'px; }';
      internals.pagePopupWindow.document.body.appendChild(style);
      internals.pagePopupWindow.global.picker._fixWindowSize();
      internals.pagePopupWindow.addEventListener('resize', callback, false);
  }

  promise_test(() => {
    // Position menu at top left.
    menu.style.top = 0;
    menu.style.left = 0;
    setItemCount(1);
    return openPicker(menu)
    .then(() => {
      injectFakeScreenSize()
      return new Promise(resolve => injectFakeItemSize(20, 100, resolve));
    })
    .then(() => {
      popupWindowRect = getPopupWindowRect();
      assert_equals(popupWindowRect.x, 0);
      assert_equals(popupWindowRect.y, -15);
      return attemptToClosePicker(menu);
    })
    .then(() => {
      // Position menu at bottom right.
      menu.style.top = (screenHeight - menuHeight) + 'px';
      menu.style.left = (screenWidth - menuWidth) + 'px';
      setItemCount(1);
      return openPicker(menu);
    })
    .then(() => {
      injectFakeScreenSize();
      return new Promise(resolve => injectFakeItemSize(20, 100, resolve));
    })
    .then(() => {
      popupWindowRect = getPopupWindowRect();
      assert_equals(popupWindowRect.x, screenWidth - popupWindowRect.width);
      assert_equals(popupWindowRect.y, screenHeight - popupWindowRect.height - menuHeight);
      return attemptToClosePicker(menu);
    })
    .then(() => {
      // Position menu at right edge, clipped.
      menu.style.top = '0';
      menu.style.left = (screenWidth - 100) + 'px';
      setItemCount(1);
      return openPicker(menu);
    })
    .then(() => {
      injectFakeScreenSize();
      return new Promise(resolve => injectFakeItemSize(200, 100, resolve));
    })
    .then(() => {
      popupWindowRect = getPopupWindowRect();
      assert_equals(popupWindowRect.x, screenWidth - 100);
      assert_equals(popupWindowRect.y, menuHeight);
      return attemptToClosePicker(menu);
    })
    .then(() => {
      // Position menu at left edge, clipped.
      menu.style.top = '0';
      menu.style.left = '-100px';
      setItemCount(1);
      return openPicker(menu);
    })
    .then(() => {
      injectFakeScreenSize();
      injectFakeItemSize(200, 100, test5);
      return new Promise(resolve => injectFakeItemSize(200, 100, resolve));
    })
    .then(() => {
      popupWindowRect = getPopupWindowRect();
      assert_equals(popupWindowRect.x, 0);
      assert_equals(popupWindowRect.y, menuHeight);
      return attemptToClosePicker(menu);
    })
    .then(() => {
      // Position close to right edge.
      menu.style.top = '0';
      menu.style.left = (screenWidth - menuWidth - 10) + 'px';
      setItemCount(1);
      return openPicker(menu);
    })
    .then(() => {
      injectFakeScreenSize();
      return new Promise(resolve => injectFakeItemSize(250, 100, resolve));
    })
    .then(() => {
      popupWindowRect = getPopupWindowRect();
      assert_equals(popupWindowRect.x, screenWidth - 250 - 10);
      assert_equals(popupWindowRect.y, menuHeight);
      return attemptToClosePicker(menu);
    })
    .then(() => {
      // Position close to bottom edge.
      menu.style.top = (screenHeight - 100) + 'px';
      menu.style.left = '0';
      setItemCount(2);
      return openPicker(menu);
    })
    .then(() => {
      injectFakeScreenSize();
      return new Promise(resolve => injectFakeItemSize(200, 100, resolve));
    })
    .then(() => {
      popupWindowRect = getPopupWindowRect();
      // Popup should appear right at the right edge of the screen.
      assert_equals(popupWindowRect.x, 0);
      assert_equals(popupWindowRect.y, screenHeight - 100 - popupWindowRect.height);
      return attemptToClosePicker(menu);
    })
    .then(() => {
      // Apply transform.
      menu.style.transform = 'scale(1.2)';
      menu.style.top = '100px';
      menu.style.left = '100px';
      setItemCount(1);
      return openPicker(menu);
    })
    .then(() => {
      injectFakeScreenSize();
      return new Promise(resolve => injectFakeItemSize(200, 100, resolve));
    })
    .then(() => {
      popupWindowRect = getPopupWindowRect();
      assert_equals(popupWindowRect.x, 100 - menuWidth * 0.1);
      assert_equals(popupWindowRect.y, 100 + menuHeight * 1.1);
      finishJSTest();
    });
  }, 'popup menu position');
};
</script>
chromium/third_party/blink/web_tests/fast/forms/select-popup/popup-menu-position.html
