tor-browser

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

option-disabled-optgroup.html (2444B)

      1 <!DOCTYPE html>
      2 <link rel=author href="mailto:jarhar@chromium.org">
      3 <link rel=help href="https://html.spec.whatwg.org/multipage/form-elements.html#concept-option-disabled">
      4 <link rel=help href="https://github.com/whatwg/html/issues/11707">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 
      8 <style>
      9  optgroup { color: black }
     10  option { color: black }
     11  option:disabled { color: gray }
     12 </style>
     13 
     14 <select>
     15  <optgroup>
     16    <div>
     17      <option>What color is this?</option>
     18    </div>
     19  <optgroup>
     20 </select>
     21 
     22 <script>
     23 test(() => {
     24  const optgroup = document.querySelector('optgroup');
     25  const option = document.querySelector('option');
     26  const optionComputedStyle = getComputedStyle(option);
     27 
     28  assert_equals(optionComputedStyle.color, 'rgb(0, 0, 0)',
     29    'color before optgroup disabled');
     30 
     31  optgroup.disabled = true;
     32  assert_equals(optionComputedStyle.color, 'rgb(128, 128, 128)',
     33    'color after optgroup disabled');
     34 }, 'options should check ancestor optgroup for disabled state.');
     35 
     36 test(() => {
     37  const parentOptgroup = document.createElement('optgroup');
     38  const childOptgroup = document.createElement('optgroup');
     39  parentOptgroup.appendChild(childOptgroup);
     40  const option = document.createElement('option');
     41  childOptgroup.appendChild(option);
     42 
     43  parentOptgroup.disabled = true;
     44  assert_false(option.matches(':disabled'));
     45 }, 'nested optgroup');
     46 
     47 test(() => {
     48  const select = document.createElement('select');
     49  const option = document.createElement('option');
     50  select.appendChild(option);
     51  select.disabled = true;
     52 
     53  assert_false(option.matches(':disabled'));
     54 }, 'disabled select');
     55 
     56 test(() => {
     57  const optgroup = document.createElement('optgroup');
     58  const select = document.createElement('select');
     59  optgroup.appendChild(select);
     60  const option = document.createElement('option');
     61  select.appendChild(option);
     62 
     63  optgroup.disabled = true;
     64  assert_false(option.matches(':disabled'));
     65 }, 'select in optgroup');
     66 
     67 test(() => {
     68  const optgroup = document.createElement('optgroup');
     69  const parentOption = document.createElement('option');
     70  optgroup.appendChild(parentOption);
     71  const childOption = document.createElement('option');
     72  parentOption.appendChild(childOption);
     73 
     74  optgroup.disabled = true;
     75  assert_true(parentOption.matches(':disabled'), 'parent option');
     76  assert_false(childOption.matches(':disabled'), 'child option');
     77 }, 'nested options');
     78 </script>