tor-browser

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

select-pseudo-open.html (2185B)

      1 <!DOCTYPE html>
      2 <link rel=author href="mailto:jarhar@chromium.org">
      3 <link rel=help href="https://github.com/openui/open-ui/issues/547">
      4 <link rel=help href="https://drafts.csswg.org/selectors/#open-state">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/resources/testdriver.js"></script>
      8 <script src="/resources/testdriver-actions.js"></script>
      9 <script src="/resources/testdriver-vendor.js"></script>
     10 
     11 <select id=myselect>
     12  <option>one</option>
     13  <option>two</option>
     14 </select>
     15 
     16 <style>
     17  select, ::picker(select) {
     18    appearance: base-select;
     19  }
     20 </style>
     21 
     22 <script>
     23 promise_test(async () => {
     24  assert_true(CSS.supports('appearance', 'base-select'),
     25    'This test requires appearance:base-select in order to run.');
     26 
     27  assert_false(myselect.matches(':open'),
     28    'select should not match :open while it is closed.');
     29  await test_driver.click(myselect);
     30 
     31  assert_true(myselect.matches(':open'),
     32    'select should match :open while it is open.');
     33 }, 'select should support :open pseudo selector.');
     34 </script>
     35 
     36 <select id=selectinvalidation>
     37  <option>one</option>
     38  <option>two</option>
     39 </select>
     40 <style>
     41 select:not(:open) {
     42  background-color: red;
     43 }
     44 select:open {
     45  background-color: green;
     46 }
     47 </style>
     48 
     49 <script>
     50 promise_test(async () => {
     51  assert_true(CSS.supports('appearance', 'base-select'),
     52    'This test requires appearance:base-select in order to run.');
     53 
     54  const select = document.getElementById('selectinvalidation');
     55  const option = select.querySelector('option');
     56 
     57  assert_equals(getComputedStyle(select).backgroundColor, 'rgb(255, 0, 0)',
     58    'The style rules from :not(:open) should apply when the select is closed.');
     59 
     60  await test_driver.click(select);
     61  assert_equals(getComputedStyle(select).backgroundColor, 'rgb(0, 128, 0)',
     62    'The style rules from :open should apply when the select is open.');
     63 
     64  await test_driver.click(select);
     65  assert_equals(getComputedStyle(select).backgroundColor, 'rgb(255, 0, 0)',
     66    'The style rules from :not(:open) should apply when the select is opened and closed again.');
     67 }, 'select :open and :not(:open) should invalidate correctly.');
     68 </script>