testing/web-platform/tests/html/semantics/forms/the-selectmenu-element/selectmenu-popup.tentative.html

   1 <!DOCTYPE html>
   2 <title>HTMLSelectMenuElement Test: popup</title>
   3 <script src="/resources/testharness.js"></script>
   4 <script src="/resources/testharnessreport.js"></script>
   5 <script src="/resources/testdriver.js"></script>
   6 <script src="/resources/testdriver-actions.js"></script>
   7 <script src="/resources/testdriver-vendor.js"></script>
   8
   9 <selectmenu id="selectMenu0">
  10   <option>one</option>
  11   <option id="selectMenu0-child2">two</option>
  12   <div id="selectMenu0-child3">I'm a div with no part attr</div>
  13   <option>three</option>
  14   <option>four</option>
  15 </selectmenu>
  16
  17 <selectmenu id="selectMenu1">
  18   <div slot="button" part="button" id="selectMenu1-button">
  19     Custom button
  20   </div>
  21   <popup slot="listbox" part="listbox">
  22     <option>one</option>
  23     <option id="selectMenu1-child2">two</option>
  24     <div part="option" id="selectMenu1-child3">three</div>
  25   </popup>
  26 </selectmenu>
  27
  28 <selectmenu id="selectMenu2">
  29   <!-- Swap out the listbox part without providing a replacement -->
  30   <div slot="listbox"></div>
  31 </selectmenu>
  32 <script>
  33
  34   function clickOn(element) {
  35     const actions = new test_driver.Actions();
  36     return actions.pointerMove(0, 0, {origin: element})
  37       .pointerDown({button: actions.ButtonType.LEFT})
  38       .pointerUp({button: actions.ButtonType.LEFT})
  39       .send();
  40   }
  41
  42   promise_test(async () => {
  43     const selectMenu0 = document.getElementById("selectMenu0");
  44     const selectMenu0Child2 = document.getElementById("selectMenu0-child2");
  45     const selectMenu0Child3 = document.getElementById("selectMenu0-child3");
  46     assert_equals(selectMenu0.value, "one");
  47     assert_equals(selectMenu0.open, false);
  48     await clickOn(selectMenu0);
  49     assert_equals(selectMenu0.open, true);
  50     await clickOn(selectMenu0Child2);
  51     assert_equals(selectMenu0.value, "two");
  52     assert_equals(selectMenu0.open, false);
  53
  54     await clickOn(selectMenu0);
  55     assert_equals(selectMenu0.open, true);
  56     await clickOn(selectMenu0Child3);
  57     assert_equals(selectMenu0.value, "two", "Clicking a non-option should not change the value");
  58     assert_equals(selectMenu0.open, true);
  59   }, "Opening the popup and clicking an option should change the selectmenu's value");
  60
  61   promise_test(async () => {
  62     const selectMenu1 = document.getElementById("selectMenu1");
  63     const selectMenu1Button = document.getElementById("selectMenu1-button");
  64     const selectMenu1Child2 = document.getElementById("selectMenu1-child2");
  65     const selectMenu1Child3 = document.getElementById("selectMenu1-child3");
  66     assert_equals(selectMenu1.value, "one");
  67     assert_equals(selectMenu1.open, false);
  68     await clickOn(selectMenu1Button);
  69     assert_equals(selectMenu1.open, true);
  70     await clickOn(selectMenu1Child2);
  71     assert_equals(selectMenu1.value, "two", "Clicking an <option> should change the value");
  72     assert_equals(selectMenu1.open, false);
  73
  74     await clickOn(selectMenu1Button);
  75     assert_equals(selectMenu1.open, true);
  76     await clickOn(selectMenu1Child3);
  77     assert_equals(selectMenu1.value, "three", "Clicking a <div part='option'> should change the value");
  78       assert_equals(selectMenu1.open, false);
  79   }, "With custom button and popup: opening the popup and clicking an option should change the selectmenu's value");
  80
  81   promise_test(async () => {
  82     const selectMenu2 = document.getElementById("selectMenu2");
  83     await clickOn(selectMenu2);
  84     assert_equals(selectMenu2.value, "");
  85     assert_equals(selectMenu2.open, false);
  86
  87   }, "Clicking a popup with no listbox part does nothing");
  88 </script>