option-disabled-optgroup.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 3 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/option-disabled-optgroup.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<link rel=author href="mailto:jarhar@chromium.org">

<link rel=help href="https://html.spec.whatwg.org/multipage/form-elements.html#concept-option-disabled">

<link rel=help href="https://github.com/whatwg/html/issues/11707">

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

  optgroup { color: black }

  option { color: black }

  option:disabled { color: gray }

</style>

<select>

  <optgroup>

    <div>

      <option>What color is this?</option>

    </div>

  <optgroup>

</select>

<script>

test(() => {

  const optgroup = document.querySelector('optgroup');

  const option = document.querySelector('option');

  const optionComputedStyle = getComputedStyle(option);

  assert_equals(optionComputedStyle.color, 'rgb(0, 0, 0)',

    'color before optgroup disabled');

  optgroup.disabled = true;

  assert_equals(optionComputedStyle.color, 'rgb(128, 128, 128)',

    'color after optgroup disabled');

}, 'options should check ancestor optgroup for disabled state.');

test(() => {

  const parentOptgroup = document.createElement('optgroup');

  const childOptgroup = document.createElement('optgroup');

  parentOptgroup.appendChild(childOptgroup);

  const option = document.createElement('option');

  childOptgroup.appendChild(option);

  parentOptgroup.disabled = true;

  assert_false(option.matches(':disabled'));

}, 'nested optgroup');

test(() => {

  const select = document.createElement('select');

  const option = document.createElement('option');

  const optgroup = document.createElement('optgroup');

  select.appendChild(option);

  select.appendChild(optgroup);

  select.disabled = true;

  assert_true(option.matches(':disabled'));

  assert_true(optgroup.matches(':disabled'));

}, 'disabled select');

test(() => {

  const optgroup = document.createElement('optgroup');

  const select = document.createElement('select');

  optgroup.appendChild(select);

  const option = document.createElement('option');

  select.appendChild(option);

  optgroup.disabled = true;

  assert_false(option.matches(':disabled'));

}, 'select in optgroup');

test(() => {

  const optgroup = document.createElement('optgroup');

  const parentOption = document.createElement('option');

  optgroup.appendChild(parentOption);

  const childOption = document.createElement('option');

  parentOption.appendChild(childOption);

  optgroup.disabled = true;

  assert_true(parentOption.matches(':disabled'), 'parent option');

  assert_false(childOption.matches(':disabled'), 'child option');

}, 'nested options');

test(() => {

  const select = document.createElement('select');

  select.disabled = true;

  const optgroup = document.createElement('optgroup');

  select.appendChild(optgroup);

  const optionInOptgroup = document.createElement('option');

  optgroup.appendChild(optionInOptgroup);

  const optgroupInOptgroup = document.createElement('optgroup');

  optgroup.appendChild(optgroupInOptgroup);

  const optionInNestedOptgroup = document.createElement('option');

  optgroupInOptgroup.appendChild(optionInNestedOptgroup);

  assert_true(optgroup.matches(':disabled'), 'optgroup');

  assert_false(optgroupInOptgroup.matches(':disabled'), 'nested optgroup');

  assert_true(optionInOptgroup.matches(':disabled'), 'option in optgroup');

  assert_false(optionInNestedOptgroup.matches(':disabled'), 'option in nested optgroup');

  const option = document.createElement('option');

  select.appendChild(option);

  const optgroupInOption = document.createElement('optgroup');

  option.appendChild(optgroupInOption);

  const optionInOption = document.createElement('option');

  option.appendChild(optionInOption);

  assert_true(option.matches(':disabled'), 'option');

  assert_false(optgroupInOption.matches(':disabled'), 'optgroup in option');

  assert_false(optionInOption.matches(':disabled'), 'nested option');

  const hr = document.createElement('hr');

  select.appendChild(hr);

  const optionInHr = document.createElement('option');

  hr.appendChild(optionInHr);

  const optgroupInHr = document.createElement('optgroup');

  hr.appendChild(optgroup);

  assert_false(optionInHr.matches(':disabled'), 'option in hr');

  assert_false(optgroupInHr.matches(':disabled'), 'optgroup in hr');

}, 'nesting options and optgroups in disabled select');

</script>