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: b1a56ade254960c4eebbbb0a0c3d2cecaf3df578 authored by Ian Kilpatrick on 28 March 2018, 04:35:58 UTC
[css-layout-api] Implementation of LayoutConstraints#fixedInlineSize.
Tip revision: b1a56ad
labelable-elements.html 
<!DOCTYPE html>
<meta charset="utf-8">
<title>HTML Test: labelable elements</title>
<link rel="author" title="Intel" href="http://www.intel.com/">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="log"></div>
<form style="display:none">
  <output id="testoutput"></output>
  <label id="lbl0" for="testoutput"></label>
  <progress id="testprogress"></progress>
  <label id="lbl1" for="testprogress"></label>
  <select id="testselect"></select>
  <label id="lbl2" for="testselect"></label>
  <textarea id="testarea"></textarea>
  <label id="lbl3" for="testarea"></label>
  <button id="testButton"></button>
  <label id="lbl4" for="testButton"></label>
  <input type="hidden" id="testHidden">
  <label id="lbl5" for="testHidden"></label>
  <input type="radio" id="testRadio">
  <label id="lbl6" for="testRadio"></label>
  <keygen id="testkeygen">
  <label id="lbl7" for="testkeygen"></label>
  <meter id="testmeter"></meter>
  <label id="lbl8" for="testmeter"></label>

  <fieldset id="testfieldset"></fieldset>
  <label id="lbl9" for="testfieldset"></label>
  <label id="testlabel"></label>
  <label id="lbl10" for="testlabel"></label>
  <object id="testobject"></object>
  <label id="lbl11" for="testobject"></label>
  <img id="testimg">
  <label id="lbl12" for="testimg"></label>
</form>

<script>
function testLabelsAttr(formElementId, labelElementId) {
  var elem = document.getElementById(formElementId);
  if (labelElementId) {
    assert_equals(elem.labels.length, 1);
    assert_equals(elem.labels[0].id, labelElementId);
  } else {
    assert_equals(elem.labels.length, 0);
  }
}

test(function() {
  assert_equals(document.getElementById("lbl0").control.id, "testoutput", "An output element should be labelable.");
}, "Check if the output element is a labelable element");

test(function() {
  testLabelsAttr("testoutput", "lbl0");
}, "Check if the output element can access 'labels'");

test(function() {
  assert_equals(document.getElementById("lbl1").control.id, "testprogress", "A progress element should be labelable.");
}, "Check if the progress element is a labelable element");

test(function() {
  testLabelsAttr("testprogress", "lbl1");
}, "Check if the progress element can access 'labels'");

test(function() {
  assert_equals(document.getElementById("lbl2").control.id, "testselect", "A select element should be labelable.");
}, "Check if the select element is a labelable element");

test(function() {
  testLabelsAttr("testselect", "lbl2");
}, "Check if the select element can access 'labels'");

test(function() {
  assert_equals(document.getElementById("lbl3").control.id, "testarea", "A textarea element should be labelable.");
}, "Check if the textarea element is a labelable form-element");

test(function() {
  testLabelsAttr("testarea", "lbl3");
}, "Check if the textarea element can access 'labels'");

test(function() {
  assert_equals(document.getElementById("lbl4").control.id, "testButton", "A button element should be labelable.");
}, "Check if the button element is a labelable element");

test(function() {
  testLabelsAttr("testButton", "lbl4");
}, "Check if the button element can access 'labels'");

test(function() {
  assert_equals(document.getElementById("lbl5").control, null, "An input element in hidden state should not be labelable.");
}, "Check if the hidden input element is not a labelable element.");

test(function() {
  var hiddenInput = document.getElementById("testHidden");
  assert_equals(hiddenInput.labels, null, "input[type=hidden] must have null .labels");

  this.add_cleanup(function () {
    hiddenInput.type = "hidden";
  });

  hiddenInput.type = "text";
  testLabelsAttr("testHidden", "lbl5");
  var labels = hiddenInput.labels;

  hiddenInput.type = "hidden";
  assert_equals(labels.length, 0, "Retained .labels NodeList should be empty after input type changed to hidden");
  assert_equals(hiddenInput.labels, null, ".labels NodeList should be null after input type changed to hidden");

  hiddenInput.type = "checkbox";
  assert_true(labels === hiddenInput.labels, ".labels property must return the [SameObject] after input type is toggled back from 'hidden'");
  assert_equals(hiddenInput.labels.length, 1, ".labels NodeList should contain the input after the input type is changed from 'hidden' to 'checkbox'");
}, "Check if the hidden input element has null 'labels'");

test(function() {
  assert_equals(document.getElementById("lbl6").control.id, "testRadio", "An input  element in radio state should be labelable.");
}, "Check if the input element in radio state is a labelable element");

test(function() {
  testLabelsAttr("testRadio", "lbl6");
}, "Check if the input element in radio state can access 'labels'");

test(function() {
  assert_not_equals(document.getElementById("lbl7").control, document.getElementById("testkeygen"));
  assert_equals(document.getElementById("lbl7").control, null, "A keygen element should not be labelable.");
}, "Check if the keygen element is not a labelable element");

test(function() {
  assert_equals(document.getElementById("testkeygen").labels, undefined);
}, "Check if the keygen element can access 'labels'");

test(function() {
  assert_equals(document.getElementById("lbl8").control.id, "testmeter", "A meter element should be labelable.");
}, "Check if the meter element is a labelable element");

test(function() {
  testLabelsAttr("testmeter", "lbl8");
}, "Check if the meter element can access 'labels'");

test(function() {
  assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testfieldset"));
  assert_equals(document.getElementById("lbl9").control, null, "A fieldset element should not be labelable.");
}, "Check if the fieldset element is not a labelable element");

test(function() {
  assert_equals(document.getElementById("testfieldset").labels, undefined);
}, "Check if the fieldset element can access 'labels'");

test(function() {
  assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testlabel"));
  assert_equals(document.getElementById("lbl10").control, null, "A label element should not be labelable.");
}, "Check if the label element is not a labelable element");

test(function() {
  assert_equals(document.getElementById("testlabel").labels, undefined);
}, "Check if the label element can access 'labels'");

test(function() {
  assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testobject"));
  assert_equals(document.getElementById("lbl11").control, null, "An object element should not be labelable.");
}, "Check if the object element is not a labelable element");

test(function() {
  assert_equals(document.getElementById("testobject").labels, undefined);
}, "Check if the object element can access 'labels'");

test(function() {
  assert_not_equals(document.getElementById("lbl9").control, document.getElementById("testimg"));
  assert_equals(document.getElementById("lbl12").control, null, "An img element should not be labelable.");
}, "Check if the img element is not a labelable element");

test(function() {
  assert_equals(document.getElementById("lbl9").labels, undefined);
}, "Check if the img element can access 'labels'");
</script>
back to top