popup-menu-touch-operations.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
<script src="../../../resources/testdriver.js"></script>
<script src="../../../resources/testdriver-vendor.js"></script>
<script src="../resources/common.js"></script>
<script src="../resources/picker-common.js"></script>
</head>
<body>
<select id="menu">
  <option>foo</option>
  <option selected>bar</option>
  <option>baz</option>
</select>
<select id="menu2">
  <option>1</option>
  <option selected>2</option>
  <option>3</option>
  <option>4</option>
  <option>5</option>
  <option>6</option>
  <option>7</option>
  <option>8</option>
  <option>9</option>
  <option>10</option>
  <option>11</option>
  <option>12</option>
  <option>13</option>
  <option>14</option>
  <option>15</option>
  <option>16</option>
  <option>17</option>
  <option>18</option>
  <option>19</option>
  <option>20</option>
  <option>21</option>
  <option>22</option>
  <option>23</option>
  <option>24</option>
  <option>25</option>
  <option>26</option>
  <option>27</option>
  <option>28</option>
  <option>29</option>
</select>
<script>
var menuElement = document.getElementById('menu');
var menuElement2 = document.getElementById('menu2');
var picker = null;
eventSender.clearTouchPoints();
openPickerDeprecatedJsTest(menuElement, function () {
    picker = internals.pagePopupWindow.global.picker;
    shouldBeEqualToString('picker.selectElement_.value', '1');
    shouldBeEqualToString('menuElement.value', 'bar');

    var position = elementCenterPosition(picker.selectElement_.children[0]);
    eventSender.addTouchPoint(position[0], position[1]);
    eventSender.touchStart();
    shouldBeEqualToString('picker.selectElement_.value', '0');

    position = elementCenterPosition(picker.selectElement_.children[2]);
    eventSender.updateTouchPoint(0, position[0], position[1]);
    eventSender.touchMove();
    shouldBeEqualToString('picker.selectElement_.value', '2');

    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();

    shouldBeNull('internals.pagePopupWindow');
    shouldBeEqualToString('menuElement.value', 'baz');

    testDisabled();
}, function () {
    testFailed('picker didn\'t open')
    finishJSTest();
});

function testDisabled() {
    debug("==> Test disabled option");
    menuElement.options[0].disabled = true;
    openPickerDeprecatedJsTest(menuElement, () => {
        picker = internals.pagePopupWindow.global.picker;
        shouldBeEqualToString('picker.selectElement_.value', '2');
        shouldBeEqualToString('menuElement.value', 'baz');

        var position = elementCenterPosition(picker.selectElement_.children[2]);
        eventSender.addTouchPoint(position[0], position[1]);
        eventSender.touchStart();
        shouldBeEqualToString('picker.selectElement_.value', '2');

        position = elementCenterPosition(picker.selectElement_.children[0]);
        eventSender.updateTouchPoint(0, position[0], position[1]);
        eventSender.touchMove();
        // The value is still 2 because children[0] is disabled.
        shouldBeEqualToString('picker.selectElement_.value', '2');

        eventSender.releaseTouchPoint(0);
        eventSender.touchEnd();

        shouldNotBe('internals.pagePopupWindow', 'null');
        shouldBeEqualToString('menuElement.value', 'baz');

        test2();
    }, function () {
        testFailed('picker didn\'t open')
        finishJSTest();
    });
}

function test2() {
    debug("==> Test scrollable popup");
    openPickerDeprecatedJsTest(menuElement2, function () {
        picker = internals.pagePopupWindow.global.picker;
        shouldBeEqualToString('picker.selectElement_.value', '1');
        shouldBeEqualToString('menuElement2.value', '2');

        var position = elementCenterPosition(picker.selectElement_.children[2]);
        eventSender.addTouchPoint(position[0], position[1]);
        eventSender.touchStart();
        shouldBeEqualToString('picker.selectElement_.value', '2');

        position = elementCenterPosition(picker.selectElement_.children[3]);
        eventSender.updateTouchPoint(0, position[0], position[1]);
        eventSender.touchMove();
        shouldBeEqualToString('picker.selectElement_.value', '3');

        // Moving touch up should scroll and end touch select mode.
        position = elementCenterPosition(picker.selectElement_.children[0]);
        eventSender.updateTouchPoint(0, position[0], position[1]);
        eventSender.touchMove();
        eventSender.gestureScrollPopup(position[0], position[1], 0, -130);
        setTimeout(test2AfterScrollEvent, 1000);
    }, function () {
        testFailed('picker didn\'t open')
        finishJSTest();
    });
}

function test2AfterScrollEvent() {
    // touchmove event fires before the scroll event so the selection will change.
    shouldBeEqualToString('picker.selectElement_.value', '0');
    eventSender.releaseTouchPoint(0);
    eventSender.touchEnd();

    shouldNotBe('internals.pagePopupWindow', 'null');
    shouldBeEqualToString('menuElement2.value', '2');

    test3();
}

function test3() {
    debug("==> Test popup closes on outside GestureTapDawn");
    eventSender.clearTouchPoints();
    openPickerDeprecatedJsTest(menuElement, function () {
        eventSender.gestureTapDown(300, 300);
        shouldBeNull('internals.pagePopupWindow');
        test4();
    }, function () {
        testFailed('picker didn\'t open')
        finishJSTest();
    });
}

function test4() {
  debug("==> Test popup doesn't reopen immediately after closing");
  eventSender.clearTouchPoints();
  shouldBeNull('internals.pagePopupWindow');

  // Open the popup with a GestureTap.
  var position =  elementCenterPosition(menuElement);
  eventSender.gestureTapDown(position[0], position[1]);
  shouldBeNull('internals.pagePopupWindow');
  eventSender.gestureTap(position[0], position[1]);
  shouldNotBe('internals.pagePopupWindow', 'null');

  // GestureTapDown on an open popup closes it.
  eventSender.gestureTapDown(position[0], position[1]);
  shouldBeNull('internals.pagePopupWindow');

  // The next GestureTap on the recently closed popup shouldn't open it.
  eventSender.gestureTap(position[0], position[1]);
  shouldBeNull('internals.pagePopupWindow');

  finishJSTest();
}

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/select-popup/popup-menu-touch-operations.html
