tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

select-optgroup-arrow-keys.optional.html (2299B)

      1 <!DOCTYPE html>
      2 <link rel=author href="mailto:jarhar@chromium.org">
      3 <link rel=help href="https://issues.chromium.org/issues/417119055">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <script src="/resources/testdriver.js"></script>
      7 <script src="/resources/testdriver-vendor.js"></script>
      8 <script src="/resources/testdriver-actions.js"></script>
      9 
     10 <!-- This test is optional because the HTML spec does not require that specific
     11  behaviors are mapped to specific keyboard buttons. -->
     12 
     13 <style>
     14 select, ::picker(select) {
     15  appearance: base-select;
     16 }
     17 </style>
     18 
     19 <select>
     20  <optgroup label=group1>
     21    <option class=one>one</option>
     22    <option class=two>two</option>
     23  </optgroup>
     24  <optgroup label=group2>
     25    <option class=three>three</option>
     26    <option class=four>four</option>
     27  </optgroup>
     28  <optgroup label=group3>
     29    <option class=five>five</option>
     30    <option class=six>six</option>
     31  </optgroup>
     32 </select>
     33 
     34 <script>
     35 const ArrowUp = '\uE013';
     36 const ArrowDown = '\uE015';
     37 const Space = ' ';
     38 
     39 function sendKey(key) {
     40  return (new test_driver.Actions()
     41    .keyDown(key)
     42    .keyUp(key))
     43    .send();
     44 }
     45 
     46 promise_test(async () => {
     47  const select = document.querySelector('select');
     48  const options = [
     49    document.querySelector('.one'),
     50    document.querySelector('.two'),
     51    document.querySelector('.three'),
     52    document.querySelector('.four'),
     53    document.querySelector('.five'),
     54    document.querySelector('.six')
     55  ];
     56 
     57  assert_equals(getComputedStyle(select).appearance, 'base-select',
     58    'appearance:base-select must be supported to run this test.');
     59 
     60  select.focus();
     61  await sendKey(Space);
     62  assert_true(select.matches(':open'),
     63    'Space should open picker.');
     64  assert_equals(document.activeElement, options[0],
     65    'First option should be initially focused.');
     66 
     67  for (let i = 1; i < 6; i++) {
     68    await sendKey(ArrowDown);
     69    assert_equals(document.activeElement, options[i],
     70      `Option ${i} should be focused after ArrowDown.`);
     71  }
     72 
     73  for (let i = 4; i > -1; i--) {
     74    await sendKey(ArrowUp);
     75    assert_equals(document.activeElement, options[i],
     76      `Option ${i} should be focused after ArrowUp.`);
     77  }
     78 }, 'Keyboard navigation forwards and backwards should visit each option with optgroups.');
     79 </script>