tor-browser

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

select-picker-starting-style.html (1518B)

      1 <!DOCTYPE html>
      2 <link rel=author href="mailto:jarhar@chromium.org">
      3 <link rel=help href="https://issues.chromium.org/issues/394133544">
      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 
      9 <select>
     10  <option>option</option>
     11 </select>
     12 
     13 <style>
     14 select, ::picker(select) {
     15  appearance: base-select;
     16 }
     17 
     18 ::picker(select) {
     19  color: white;
     20 }
     21 option {
     22  background-color: black;
     23 }
     24 
     25 .animate::picker(select) {
     26  transition: color 100s steps(2, start);
     27 }
     28 .animate option {
     29  transition: background-color 100s steps(2, start);
     30 }
     31 
     32 @starting-style {
     33  .animate::picker(select) {
     34    color: black;
     35  }
     36  .animate option {
     37    background-color: white;
     38  }
     39 }
     40 </style>
     41 
     42 <script>
     43 const select = document.querySelector('select');
     44 const option = document.querySelector('option');
     45 promise_test(async () => {
     46  await new Promise(requestAnimationFrame);
     47  select.classList.add('animate');
     48  await test_driver.click(select);
     49  await new Promise(requestAnimationFrame);
     50  await new Promise(requestAnimationFrame);
     51 
     52  const style = getComputedStyle(option);
     53  assert_equals(style.color, 'rgb(128, 128, 128)',
     54    'color should transition based on @starting-style.');
     55  assert_equals(style.backgroundColor, 'rgb(128, 128, 128)',
     56    'background-color should transition based on @starting-style.');
     57 }, '@starting-style should work on ::picker(select) just like a popover.');
     58 </script>