search

dperini / nwsapi

Fast CSS Selectors API Engine
MIT License
103 stars 35 forks source link

:enabled / :disabled do not correctly match inputs inside a disabled fieldset #97

Open aethr opened 11 months ago

aethr commented 11 months ago

Related to https://github.com/jsdom/jsdom/issues/3603

Expected behaviour

The :disabled pseudo-class should match all disabled inputs, including those that are disabled because a parent <fieldset> is disabled. :enabled should behave similarly, but in reverse. This works correctly in browsers.

JSBin with example :disabled behaviour: https://jsbin.com/woguyoguze/edit?html,console,output

Actual behavior

The :disabled selector only appears to select elements that are disabled directly.

Reproduction

jsdom: 22.1.0 nwsapi: 2.2.5

import { JSDOM } from 'jsdom';

const dom = new JSDOM(`
<body>
  <fieldset disabled>
    <input id="not-focusable-in-fieldset">
  </fieldset>
  <input id="not-focusable-outside" disabled>
  <input id="focusable">
</body>
`, {});

const docBody = dom.window.document.body;

if (docBody.querySelector('input:enabled').id !== 'focusable') {
  console.log(':enabled in fieldset: incorrect');
}
if (docBody.querySelector('input:not(:enabled)').id !== 'not-focusable-in-fieldset') {
  console.log(':not(:enabled) in fieldset: incorrect');
}

if (docBody.querySelector('input:disabled').id !== 'not-focusable-in-fieldset') {
  console.log(':disabled in fieldset: incorrect');
}
if (docBody.querySelector('input:not(:disabled)').id !== 'focusable') {
  console.log(':not(:disabled) in fieldset: incorrect');
}