Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: 89a7b39d4c0b8c2b2339fd26fa39ab802b6980f1 authored by Rune Lillesveen on 23 March 2018, 14:59:20 UTC
Don't skip display:none options finding selectable options.
Tip revision: 89a7b39
select-validity.html 
<!doctype html>
<meta charset=utf-8>
<title>HTMLSelectElement.checkValidity</title>
<link rel="help" href="https://html.spec.whatwg.org/multipage/forms.html#the-select-element:attr-select-required-4">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<div id=log></div>
<script>

test(function() {
  var select = document.createElement('select');
  assert_true(select.willValidate, "A select element is a submittable element that is a candidate for constraint validation.");
  var placeholder = document.createElement('option');
  select.appendChild(placeholder);
  assert_true(select.checkValidity(), "Always valid when the select isn't a required value.");
  select.required = true;
  assert_true(placeholder.selected, "If display size is 1, multiple is absent and no options have selectedness true, the first option is selected.");
  assert_equals(select.value, "", "The placeholder's value should be the select's value right now");
  assert_false(select.checkValidity(), "A selected placeholder option should invalidate the select.");
  var emptyOption = document.createElement('option');
  select.appendChild(emptyOption);
  emptyOption.selected = true;
  assert_equals(select.value, "", "The empty value should be set.");
  assert_true(select.checkValidity(), "An empty non-placeholder option should be a valid choice.");
  var filledOption = document.createElement('option');
  filledOption.value = "test";
  select.appendChild(filledOption);
  filledOption.selected = true;
  assert_equals(select.value, "test", "The non-empty value should be set.");
  assert_true(select.checkValidity(), "A non-empty non-placeholder option should be a valid choice.");
  select.removeChild(placeholder);
  select.appendChild(emptyOption); // move emptyOption to second place
  emptyOption.selected = true;
  assert_equals(select.value, "", "The empty value should be set.");
  assert_true(select.checkValidity(), "Only the first option can be seen as a placeholder.");
  placeholder.disabled = true;
  select.insertBefore(placeholder, filledOption);
  placeholder.selected = true;
  assert_equals(select.value, "", "A disabled first placeholder option should result in an empty value.");
  assert_false(select.checkValidity(), "A disabled first placeholder option should invalidate the select.");
}, "Placeholder label options within a select");

test(function() {
  var select = document.createElement('select');
  select.required = true;
  var optgroup = document.createElement('optgroup');
  var emptyOption = document.createElement('option');
  optgroup.appendChild(emptyOption);
  select.appendChild(optgroup);
  emptyOption.selected = true;
  assert_equals(select.value, "", "The empty value should be set.");
  assert_true(select.checkValidity(), "The first option is not considered a placeholder if it is located within an optgroup.");
  var otherEmptyOption = document.createElement('option');
  otherEmptyOption.value = "";
  select.appendChild(otherEmptyOption);
  otherEmptyOption.selected = true;
  assert_equals(select.value, "", "The empty value should be set.");
  assert_true(select.checkValidity(), "The empty option should be accepted as it is not the first option in the tree ordered list.");
}, "Placeholder label-like options within optgroup");

test(function() {
  var select = document.createElement('select');
  select.required = true;
  select.size = 2;
  var emptyOption = document.createElement('option');
  select.appendChild(emptyOption);
  assert_false(emptyOption.selected, "Display size is not 1, so the first option should not be selected.");
  assert_false(select.checkValidity(), "If no options are selected the select must be seen as invalid.");
  emptyOption.selected = true;
  assert_true(select.checkValidity(), "If one option is selected, the select should be considered valid.");
  var otherEmptyOption = document.createElement('option');
  otherEmptyOption.value = "";
  select.appendChild(otherEmptyOption);
  otherEmptyOption.selected = true;
  assert_false(emptyOption.selected, "Whenever an option has its selectiveness set to true, the other options must be set to false.");
  otherEmptyOption.selected = false;
  assert_false(otherEmptyOption.selected, "It should be possible to set the selectiveness to false with a display size more than one.");
  assert_false(select.checkValidity(), "If no options are selected the select must be seen as invalid.");
}, "Validation on selects with display size set as more than one");

test(function() {
  var select = document.createElement('select');
  select.required = true;
  select.multiple = true;
  var emptyOption = document.createElement('option');
  select.appendChild(emptyOption);
  assert_false(select.checkValidity(), "If no options are selected the select must be seen as invalid.");
  emptyOption.selected = true;
  assert_true(select.checkValidity(), "If one option is selected, the select should be considered valid.");
  var optgroup = document.createElement('optgroup');
  optgroup.appendChild(emptyOption); // Move option to optgroup
  select.appendChild(optgroup);
  assert_true(select.checkValidity(), "If one option within an optgroup or not is selected, the select should be considered valid.");
}, "Validation on selects with multiple set");
</script>
back to top