input-mixed.html | Explore in Territory

<!DOCTYPE HTML>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<!-- Will set indeterminate state via JS -->
<input id="element1" type="checkbox" />
<script>
  // No way currently to do this via markup, must be via JS
  document.getElementById("element1").indeterminate = true;
</script>
<!-- Control-->
<input id="element2" type="checkbox" />

<div>
  <!-- Will be ::indeterminate in CSS because no radio item selected yet -->
  <input type="radio" name="radiogroup1" />
  <input id="element3" type="radio" name="radiogroup1" />
</div>

<div>
  <!-- NOT mixed/indeterminate because group has a selected radio button -->
  <input id="element4" type="radio" name="radiogroup2" />
  <input id="element5" type="radio" checked name="radiogroup2" />
</div>

<input id="input-button" type="button"/>
<input id="input-button-false" type="button" aria-pressed="false"/>
<input id="input-button-mixed" type="button" aria-pressed="mixed"/>
<input id="input-button-true" type="button" aria-pressed="true"/>
<div id="aria-button" role="button">button</div>
<div id="aria-button-false" role="button" aria-pressed="false">button</div>
<div id="aria-button-mixed" role="button" aria-pressed="mixed">button</div>
<div id="aria-button-true" role="button" aria-pressed="true">button</div>
<button id="button">button</button>
<button id="button-false" aria-pressed="false">button</button>
<button id="button-mixed" aria-pressed="mixed">button</button>
<button id="button-true" aria-pressed="true">button</button>

<input id="input-checkbox" type="checkbox"/>
<input id="input-checkbox-false" type="checkbox" aria-checked="false"/>
<input id="input-checkbox-mixed" type="checkbox" aria-checked="mixed"/>
<input id="input-checkbox-true" type="checkbox" aria-checked="true"/>
<div id="aria-checkbox" role="checkbox">checkbox</div>
<div id="aria-checkbox-false" role="checkbox" aria-checked="false">checkbox</div>
<div id="aria-checkbox-mixed" role="checkbox" aria-checked="mixed">checkbox</div>
<div id="aria-checkbox-true" role="checkbox" aria-checked="true">checkbox</div>

<script>

  function axElementById(id) {
    return accessibilityController.accessibleElementById(id);
  }

  test(function(t) {
    var ax = axElementById("element1");
    assert_equals(ax.checked, "mixed");
  }, "A native indeterminate checkbox must have the mixed state");

  test(function(t) {
    var ax = axElementById("element2");
    assert_equals(ax.checked, "false");
  }, "A native checkbox that is not indeterminate" +
      " must NOT have the mixed state");

  test(function(t) {
    var ax = axElementById("element3");
    assert_equals(ax.checked, "false");
  }, "A native radio that in a group with nothing checked" +
      " must appear unchecked, not mixed");

  test(function(t) {
    var ax = axElementById("element4");
    assert_equals(ax.checked, "false");
  }, "A native radio that in a group with something checked" +
      " must NOT have the mixed state");

  test(function(t) {
    var ax = axElementById("input-button");
    assert_equals(ax.checked, "");
  }, "<input type=button> does not set checked property");

  test(function(t) {
    var ax = axElementById("input-button-false");
    assert_equals(ax.checked, "false");
  }, "<input type=button aria-pressed=false> is not checked");

  test(function(t) {
    var ax = axElementById("input-button-false");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<input type=button aria-pressed=false> is a toggle button");

  test(function(t) {
    var ax = axElementById("input-button-mixed");
    assert_equals(ax.checked, "mixed");
  }, "<input type=button aria-pressed=mixed> has checked state of mixed");

  test(function(t) {
    var ax = axElementById("input-button-mixed");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<input type=button aria-pressed=mixed> is a toggle button");

  test(function(t) {
    var ax = axElementById("input-button-true");
    assert_equals(ax.checked, "true");
  }, "<input type=button aria-pressed=true> has checked state of true");

  test(function(t) {
    var ax = axElementById("input-button-true");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<input type=button aria-pressed=true> is a toggle button");

  test(function(t) {
    var ax = axElementById("aria-button");
    assert_equals(ax.checked, "");
  }, "<div role=button> does not set checked property");

  test(function(t) {
    var ax = axElementById("aria-button-false");
    assert_equals(ax.checked, "false");
  }, "<div role=button aria-pressed=false> is not checked");

  test(function(t) {
    var ax = axElementById("aria-button-false");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<div role=button aria-pressed=false> is a toggle button");

  test(function(t) {
    var ax = axElementById("aria-button-mixed");
    assert_equals(ax.checked, "mixed");
  }, "<div role=button aria-pressed=mixed> has checked state of mixed");

  test(function(t) {
    var ax = axElementById("aria-button-mixed");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<div role=button aria-pressed=mixed> is a toggle button");

  test(function(t) {
    var ax = axElementById("aria-button-true");
    assert_equals(ax.checked, "true");
  }, "<div role=button aria-pressed=true> has checked state of true");

  test(function(t) {
    var ax = axElementById("aria-button-true");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<div role=button aria-pressed=true> is a toggle button");

  test(function(t) {
    var ax = axElementById("button");
    assert_equals(ax.checked, "");
  }, "<button> does not set checked property");

  test(function(t) {
    var ax = axElementById("button-false");
    assert_equals(ax.checked, "false");
  }, "<button aria-pressed=false> is not checked");

  test(function(t) {
    var ax = axElementById("button-false");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<button aria-pressed=false> is a toggle button");

  test(function(t) {
    var ax = axElementById("button-mixed");
    assert_equals(ax.checked, "mixed");
  }, "<button aria-pressed=mixed> has pressed state of checked");

  test(function(t) {
    var ax = axElementById("button-mixed");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<button aria-pressed=mixed> is a toggle button");

  test(function(t) {
    var ax = axElementById("button-true");
    assert_equals(ax.checked, "true");
  }, "<button aria-pressed=true> has checked state of true");

  test(function(t) {
    var ax = axElementById("button-true");
    assert_equals(ax.role, "AXRole: AXToggleButton");
  }, "<button aria-pressed=true> is a toggle button");

  test(function(t) {
    var ax = axElementById("input-checkbox");
    assert_equals(ax.checked, "false");
  }, "<input type=checkbox> is not checked");

  test(function(t) {
    var ax = axElementById("input-checkbox-false");
    assert_equals(ax.checked, "false");
  }, "<input type=checkbox aria-checked=false> is not checked");

  test(function(t) {
    var ax = axElementById("input-checkbox-false");
    assert_equals(ax.role, "AXRole: AXCheckBox");
  }, "<input type=checkbox aria-checked=false> is a check box");

  test(function(t) {
    var ax = axElementById("input-checkbox-mixed");
    assert_equals(ax.checked, "false");
  }, "<input type=checkbox aria-checked=mixed> has checked state of false");

  test(function(t) {
    var ax = axElementById("input-checkbox-mixed");
    assert_equals(ax.role, "AXRole: AXCheckBox");
  }, "<input type=checkbox aria-checked=mixed> is a check box");

  test(function(t) {
    var ax = axElementById("input-checkbox-true");
    assert_equals(ax.checked, "false");
  }, "<input type=checkbox aria-checked=true> has checked state of true");

  test(function(t) {
    var ax = axElementById("input-checkbox-true");
    assert_equals(ax.role, "AXRole: AXCheckBox");
  }, "<input type=checkbox aria-checked=true> is a check box");

  test(function(t) {
    var ax = axElementById("aria-checkbox");
    assert_equals(ax.checked, "false");
  }, "<div role=checkbox> is not checked");

  test(function(t) {
    var ax = axElementById("aria-checkbox-false");
    assert_equals(ax.checked, "false");
  }, "<div role=checkbox aria-checked=false> is not checked");

  test(function(t) {
    var ax = axElementById("aria-checkbox-false");
    assert_equals(ax.role, "AXRole: AXCheckBox");
  }, "<input role=checkbox aria-checked=false> is a check box");

  test(function(t) {
    var ax = axElementById("aria-checkbox-mixed");
    assert_equals(ax.checked, "mixed");
  }, "<input role=checkbox aria-checked=mixed> has checked state of mixed");

  test(function(t) {
    var ax = axElementById("aria-checkbox-mixed");
    assert_equals(ax.role, "AXRole: AXCheckBox");
  }, "<input role=checkbox aria-checked=mixed> is a check box");

  test(function(t) {
    var ax = axElementById("aria-checkbox-true");
    assert_equals(ax.checked, "true");
  }, "<input role=checkbox aria-checked=true> has checked state of true");

  test(function(t) {
    var ax = axElementById("aria-checkbox-true");
    assert_equals(ax.role, "AXRole: AXCheckBox");
  }, "<input role=checkbox aria-checked=true> is a check box");
</script>
chromium/third_party/blink/web_tests/accessibility/input-mixed.html
