third_party/WebKit/LayoutTests/fast/forms/select/listbox-tap.html

   1 <!DOCTYPE html>
   2 <html>
   3 <body>
   4 <script src="../../../resources/js-test.js"></script>
   5 <select id="select1" multiple size="4">
   6 <option>1</option>
   7 <option>2</option>
   8 <option>3</option>
   9 </select>
  10
  11 <script>
  12 description('Tapping on listbox items should toggle selection.');
  13
  14 function tapOption(select, index) {
  15     var itemHeight = Math.floor(select.offsetHeight / select.size);
  16     var border = 1;
  17     var y = border + index * itemHeight;
  18
  19     select.focus();
  20     if (window.eventSender) {
  21         eventSender.gestureTap(select.offsetLeft + border, select.offsetTop + y - window.pageYOffset + itemHeight / 2);
  22     }
  23 }
  24
  25 function getSelectedValues(select) {
  26     var selectedValues = [];
  27     for (var i = 0; i < select.options.length; i++) {
  28         var option = select.options[i];
  29         if (option.selected)
  30             selectedValues.push(option.value);
  31     }
  32     return selectedValues.join(',');
  33 }
  34
  35 var select = document.getElementById('select1');
  36
  37 if (!window.eventSender) {
  38     debug('Tap on the options and see if it toggles the selection.');
  39 } else {
  40     shouldBeEqualToString('getSelectedValues(select)', '');
  41
  42     tapOption(select, 0);
  43     shouldBeEqualToString('getSelectedValues(select)', '1');
  44     tapOption(select, 1);
  45     shouldBeEqualToString('getSelectedValues(select)', '1,2');
  46     tapOption(select, 2);
  47     shouldBeEqualToString('getSelectedValues(select)', '1,2,3');
  48     tapOption(select, 3);
  49     shouldBeEqualToString('getSelectedValues(select)', '1,2,3');
  50     tapOption(select, 1);
  51     shouldBeEqualToString('getSelectedValues(select)', '1,3');
  52     tapOption(select, 0);
  53     shouldBeEqualToString('getSelectedValues(select)', '3');
  54     tapOption(select, 2);
  55     shouldBeEqualToString('getSelectedValues(select)', '');
  56 }
  57 </script>
  58
  59 </html>