<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8>
    <title>Submitting element directionality: the dirname attribute</title>
    <link rel="author" title="Vincent Hilla" href="mailto:vhilla@mozilla.com">
    <link rel=help href="https://html.spec.whatwg.org/multipage/#submitting-element-directionality:-the-dirname-attribute">
    <script src="/resources/testharness.js"></script>
    <script src="/resources/testharnessreport.js"></script>
    <script src="resources/dirname.js"></script>
  </head>
  <body>
    <div id="log"></div>
    <form action="resources/dirname-iframe.html" method=get target="iframe">
      <textarea name="textarea" dirname="textarea.dir"></textarea>
      <p><button id="btn-submit" type=submit>Submit</button></p>
    </form>
    <iframe name="iframe"></iframe>

    <script>
      const types_applies = ["text", "search"];
      const types_not = [
        "hidden", "tel", "url", "email", "password", "date", "month", "week", "time",
        "datetime-local", "number", "range", "color", "checkbox", "radio", "file", "submit",
        "image", "reset", "button"
      ];
      const types = [...types_applies, ...types_not];
      let form = document.querySelector("form");
      for (const type of types) {
        let p = document.createElement("p");
        let lbl = document.createElement("label");
        let txt = document.createTextNode(type + ": ");
        let inp = document.createElement("input");
        inp.type = type;
        inp.name = type;
        inp.dirName = type + ".dir";
        inp.id = "testelement." + type
        lbl.appendChild(txt);
        lbl.appendChild(inp);
        p.appendChild(lbl);
        form.appendChild(p);
      }
      // Avoid continue in https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#constructing-form-data-set:attr-fe-dirname
      document.getElementById("testelement.checkbox").checked = true;
      document.getElementById("testelement.radio").checked = true;

      function assertInputSubmission(data) {
        for (const type of types_applies) {
          assert_equals(data.get(type + ".dir"), "ltr", "Submit ltr for input type=" + type);
        }
        for (const type of types_not) {
          assert_false(data.has(type + ".dir"), "Do not submit dir for input type=" + type);
        }
      }

      const data = new FormData(form);
      test(function() {
        assertInputSubmission(data);
      }, "Submit input element directionality to FormData, if dirname applies.");
      test(function() {
        assert_equals(data.get("textarea.dir"), "ltr", "Submit ltr for textarea");
      }, "Submit textarea element directionality to FormData.");

      document.getElementById("btn-submit").click();
      const t_inp = async_test("Submit input element directionality, if dirname applies.");
      onIframeLoadedDone(t_inp, function(params) {
        assertInputSubmission(params);
      });
      const t_ta = async_test("Submit textarea element directionality.");
      onIframeLoadedDone(t_ta, function(params) {
        assert_equals(params.get("textarea.dir"), "ltr", "Submit ltr for textarea");
      });
    </script>
  </body>
</html>
