form-control-form-attribute.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /shadow-dom/form-control-form-attribute.html - WPT Dashboard Interop Dashboard

<!doctype html>

<meta charset=utf-8>

<title>Form controls' form attribute</title>

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

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

<div id="testcontent">

  <form id="form">form</form>

  <input id="input" form="form">

</div>

<script>

test(() => {

  assert_equals(document.getElementById('input').form,

                document.getElementById('form'));

}, "Form control's form attribute should point to the form element.");

test(() => {

  var testcontent = document.getElementById("testcontent");

  var host = document.createElement("div");

  var sr = host.attachShadow({mode: "open"});

  sr.innerHTML = testcontent.innerHTML;

  var input = sr.getElementById("input");

  var form = sr.getElementById("form");

  // Should have null form when shadow DOM isn't connected.

  assert_equals(input.form, null);

  testcontent.appendChild(host);

  assert_equals(input.form, form);

  host.remove();

  assert_equals(input.form, null);

  testcontent.appendChild(host);

  assert_equals(input.form, form);

  input.remove();

  assert_equals(input.form, null);

  sr.appendChild(input);

  assert_equals(input.form, form);

  form.id = "foobar";

  assert_equals(input.form, null);

  form.id = "form";

  assert_equals(input.form, form);

  form.remove();

  assert_equals(input.form, null);

  sr.appendChild(form);

  assert_equals(input.form, form);

  host.remove();

}, "Shadow form control's form attribute should work also in shadow DOM.");

test(() => {

  var testcontent = document.getElementById("testcontent");

  var host = document.createElement("div");

  var sr = host.attachShadow({mode: "open"});

  sr.innerHTML = "<form id='form'><input id='input'></form>";

  var input = sr.getElementById("input");

  var form = sr.getElementById("form");

  assert_equals(input.form, form);

  input.remove();

  assert_equals(input.form, null);

  form.appendChild(input);

  assert_equals(input.form, form);

  form.remove();

  assert_equals(input.form, form);

  host.remove();

}, "Form element as form control's ancestor should work also in shadow DOM.");

</script>