disabled-001.html - mozsearch

mozilla-central/testing/web-platform/tests/html/semantics/forms/the-fieldset-element/disabled-001.html

Enable keyboard shortcuts

Source code

File a bug in Core :: DOM: Core & HTML

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-fieldset-element/disabled-001.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<meta charset="utf-8">

<title>Fieldset disabled</title>

<link rel="author" title="Denis Ah-Kang" href="mailto:denis@w3.org">

<link rel="help" href="https://html.spec.whatwg.org/multipage/#the-fieldset-element">

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

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

<div id="log"></div>

<form>

  <fieldset id=fs disabled>

    <legend>

      <input type=checkbox id=clubc_l1>

      <input type=radio id=clubr_l1>

      <input type=text id=clubt_l1>

    </legend>

    <legend><input type=checkbox id=club_l2></legend>

    <p><label>Name on card: <input id=clubname required></label></p>

    <p><label>Card number: <input id=clubnum required pattern="[-0-9]+"></label></p>

  </fieldset>

  <fieldset id=fs2 disabled>

    <p><legend><input type=checkbox id=club2></legend></p>

    <p><label>Name on card: <input id=clubname2 required></label></p>

    <p><label>Card number: <input id=clubnum2 required pattern="[-0-9]+"></label></p>

  </fieldset>

  <fieldset id=fs3 disabled>

    <fieldset>

      <legend><input type=checkbox id=club3></legend>

    </fieldset>

    <p><label>Name on card: <input id=clubname3 required></label></p>

    <p><label>Card number: <input id=clubnum3 required pattern="[-0-9]+"></label></p>

  </fieldset>

  <fieldset id=fs4 disabled>

    <legend>

      <fieldset id=fs4-1><input type=checkbox id=club4></fieldset>

    </legend>

    <p><label>Name on card: <input id=clubname4 required></label></p>

    <p><label>Card number: <input id=clubnum4 required pattern="[-0-9]+"></label></p>

  </fieldset>

</form>

<script>

  test(function () {

    assert_true(document.getElementById('fs').disabled, "The fieldset is disabled");

    assert_false(document.getElementById('clubname').willValidate, "fieldset is disabled so is input 'clubname'");

    assert_false(document.getElementById('clubnum').willValidate, "fieldset is disabled so is input 'clubnum'");

    assert_true(document.getElementById('clubc_l1').willValidate, "input 'clubc_l1' is descendant of the first legend child of the fieldset. It should not be disabled");

    assert_true(document.getElementById('clubr_l1').willValidate, "input 'clubr_l1' is descendant of the first legend child of the fieldset. It should not be disabled");

    assert_true(document.getElementById('clubt_l1').willValidate, "input 'clubt_l1' is descendant of the first legend child of the fieldset. It should not be disabled");

    assert_false(document.getElementById('club_l2').willValidate, "input 'club_l2' is a descendant of the second legend child of the fieldset. It should be disabled");

  }, "The disabled attribute, when specified, causes all the form control descendants of the fieldset element, excluding those that are descendants of the fieldset element's first legend element child, if any, to be disabled.");

  test(function () {

    assert_true(document.getElementById('fs2').disabled, "The fieldset is disabled");

    assert_false(document.getElementById('clubname2').willValidate, "fieldset is disabled so is input 'clubname2'");

    assert_false(document.getElementById('clubnum2').willValidate, "fieldset is disabled so is input 'clubnum2'");

    assert_false(document.getElementById('club2').willValidate, "the first legend is not a child of the disabled fieldset: input 'club2' is disabled");

  }, "The first 'legend' element is not a child of the disabled fieldset: Its descendants should be disabled.");

  test(function () {

    assert_true(document.getElementById('fs3').disabled, "The fieldset is disabled");

    assert_false(document.getElementById('clubname3').willValidate, "fieldset is disabled so is input 'clubname3'");

    assert_false(document.getElementById('clubnum3').willValidate, "fieldset is disabled so is input 'clubnum3'");

    assert_false(document.getElementById('club3').willValidate, "the first legend is not a child of the disabled fieldset: input 'club3' is disabled");

  }, "The <legend> element is not a child of the disabled fieldset: Its descendants should be disabled.");

  test(function () {

    assert_true(document.getElementById('fs4').disabled, "The fieldset is disabled");

    assert_false(document.getElementById('clubname4').willValidate, "fieldset is disabled so is input 'clubname4'");

    assert_false(document.getElementById('clubnum4').willValidate, "fieldset is disabled so is input 'clubnum4'");

    assert_true(document.getElementById('club4').willValidate, "the first legend a child of the disabled fieldset: input 'club4' is disabled");

  }, "The <legend> element is child of the disabled fieldset: Its descendants should be disabled.");

  test(function () {

    let fs41 = document.querySelector('#fs4-1');

    fs41.disabled = true;

    assert_true(fs41.disabled, "The fieldset in a legend is disabled");

    assert_false(document.getElementById('club4').willValidate, "In a disabled fieldset in the first legend child of another disabled fieldset: input 'club4' is disabled");

  }, "A <fieldset> element is in the <legend> element of another disabled <fieldset>: Its descendants should be disabled.");

</script>