Element-matches-disabled-pseudo-class.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /dom/nodes/Element-matches-disabled-pseudo-class.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>:disabled pseudo-class with fieldset</title>

<meta charset="utf-8">

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

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

<!-- Regression test for https://github.com/jsdom/jsdom/issues/3603 -->

<fieldset id="disabled-fieldset" disabled>

  <input id="input-in-disabled-fieldset">

  <select id="select-in-disabled-fieldset"></select>

  <button id="button-in-disabled-fieldset">Button</button>

  <textarea id="textarea-in-disabled-fieldset"></textarea>

</fieldset>

<fieldset id="enabled-fieldset">

  <input id="input-in-enabled-fieldset">

  <select id="select-in-enabled-fieldset"></select>

  <button id="button-in-enabled-fieldset">Button</button>

  <textarea id="textarea-in-enabled-fieldset"></textarea>

</fieldset>

<input id="disabled-input" disabled>

<input id="enabled-input">

<fieldset id="fieldset-with-legend">

  <legend>A Legend</legend>

</fieldset>

<script>

"use strict";

test(() => {

  const input = document.getElementById("input-in-disabled-fieldset");

  assert_true(input.matches(":disabled"));

}, "Input in disabled fieldset should match :disabled pseudo-class");

test(() => {

  const select = document.getElementById("select-in-disabled-fieldset");

  assert_true(select.matches(":disabled"));

}, "Select in disabled fieldset should match :disabled pseudo-class");

test(() => {

  const button = document.getElementById("button-in-disabled-fieldset");

  assert_true(button.matches(":disabled"));

}, "Button in disabled fieldset should match :disabled pseudo-class");

test(() => {

  const textarea = document.getElementById("textarea-in-disabled-fieldset");

  assert_true(textarea.matches(":disabled"));

}, "Textarea in disabled fieldset should match :disabled pseudo-class");

test(() => {

  const fieldset = document.getElementById("disabled-fieldset");

  assert_true(fieldset.matches(":disabled"));

}, "Disabled fieldset itself should match :disabled pseudo-class");

test(() => {

  const input = document.getElementById("input-in-enabled-fieldset");

  assert_true(input.matches(":enabled"));

  assert_false(input.matches(":disabled"));

}, "Input in enabled fieldset should match :enabled pseudo-class");

test(() => {

  const disabledResults = document.querySelectorAll(":disabled");

  const disabledElementIds = Array.from(disabledResults).map(el => el.id);

  const expectedIds = [

    "disabled-fieldset",

    "input-in-disabled-fieldset",

    "select-in-disabled-fieldset",

    "button-in-disabled-fieldset",

    "textarea-in-disabled-fieldset",

    "disabled-input"

];

  assert_array_equals(disabledElementIds, expectedIds);

}, "querySelectorAll(':disabled') should select all disabled elements in DOM order");

test(() => {

  const enabledResults = document.querySelectorAll(":enabled");

  const enabledElementIds = Array.from(enabledResults).map(el => el.id);

  // Expected enabled elements in DOM order - exclude elements in disabled fieldset and disabled input

  const expectedEnabledIds = [

    "enabled-fieldset",

    "input-in-enabled-fieldset",

    "select-in-enabled-fieldset",

    "button-in-enabled-fieldset",

    "textarea-in-enabled-fieldset",

    "enabled-input"

];

  // Verify each expected ID is in the results

  for (const id of expectedEnabledIds) {

    assert_true(enabledElementIds.includes(id));

  // Verify no disabled elements are in the enabled results

  assert_false(enabledElementIds.includes("disabled-fieldset"));

  assert_false(enabledElementIds.includes("input-in-disabled-fieldset"));

  assert_false(enabledElementIds.includes("select-in-disabled-fieldset"));

  assert_false(enabledElementIds.includes("button-in-disabled-fieldset"));

  assert_false(enabledElementIds.includes("textarea-in-disabled-fieldset"));

  assert_false(enabledElementIds.includes("disabled-input"));

}, "querySelectorAll(':enabled') should not select elements in disabled fieldset");

test(() => {

  const enabledInput = document.querySelector("input:enabled");

  assert_equals(enabledInput.id, "input-in-enabled-fieldset");

}, "querySelector('input:enabled') should return the first enabled input");

test(() => {

  const disabledInputs = document.querySelectorAll("input:disabled");

  const disabledInputIds = Array.from(disabledInputs).map(input => input.id);

  const expectedIds = ["input-in-disabled-fieldset", "disabled-input"];

  assert_array_equals(disabledInputIds, expectedIds);

}, "querySelectorAll('input:disabled') should select inputs with disabled attribute and in disabled fieldset");

// Regression test for https://github.com/jsdom/jsdom/issues/3232

test(() => {

  const fieldset = document.getElementById("fieldset-with-legend");

  assert_false(fieldset.matches(":disabled"), "Fieldset with legend should not match :disabled");

  assert_true(fieldset.matches(":enabled"), "Fieldset with legend should match :enabled");

}, "Fieldset with legend should not be considered disabled by default");

</script>