<!DOCTYPE html>
<script src="file:///gen/layout_test_data/mojo/public/js/mojo_bindings.js"></script>
<script src="file:///gen/third_party/blink/public/mojom/choosers/file_chooser.mojom.js"></script>
<script src="../fast/forms/resources/mock-file-chooser.js"></script>
<script src="../fast/forms/resources/common.js"></script>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<div id="container"></div>
<input type=file multiple>
<script>
class MyControl extends HTMLElement {
  static get formAssociated() { return true; }

  constructor() {
    super();
    this.internals_ = this.attachInternals();
    this.value_ = '';
  }

  get value() {
    return this.value_;
  }
  set value(fileOrString) {
    this.internals_.setFormValue(fileOrString);
    this.value_ = fileOrString;
  }
  setValues(nameValues) {
    const formData = new FormData();
    for (let p of nameValues) {
      formData.append(p[0], p[1]);
    }
    this.internals_.setFormValue(this.value_, formData);
  }
}
customElements.define('my-control', MyControl);

function selectFilePromise(paths) {
  return new Promise((resolve, reject) => {
    mockFileChooserFactory.setPathsToBeChosen(paths);
    const file = document.querySelector('input[type=file]');
    file.addEventListener('change', () => { resolve(file) });
    clickElement(file);
    setTimeout(reject, 3000);
  });
}

function submitPromise(t) {
  return new Promise((resolve, reject) => {
    const iframe = document.querySelector('iframe');
    iframe.onload = () => resolve(iframe.contentWindow.location.search);
    iframe.onerror = () => reject();
    document.querySelector('form').submit();
  });
}

promise_test(async t => {
  $('container').innerHTML = '<form action="../external/wpt/common/blank.html" target="if1">' +
      '<input name=name-pd1 value="value-pd1">' +
      '<my-control name=ce1></my-control>' +
      '</form>' +
      '<iframe name="if1"></iframe>';
  const fileInput = await selectFilePromise(['../OWNERS']);
  document.querySelector('my-control').value = fileInput.files[0];
  return submitPromise(t).then(query => {
    assert_equals(query, '?name-pd1=value-pd1&ce1=OWNERS');
  });
}, 'Single value - A file value');

promise_test(async t => {
  $('container').innerHTML = '<form action="../external/wpt/common/blank.html" target="if1">' +
      '<my-control name=ce1></my-control>' +
      '</form>' +
      '<iframe name="if1"></iframe>';
  const fileInput = await selectFilePromise(['../OWNERS', '../PRESUBMIT.py']);
  document.querySelector('my-control').setValues(
      [['sub1', fileInput.files[0]], ['sub2', fileInput.files[1]]]);
  return submitPromise(t).then(query => {
    assert_equals(query, '?sub1=OWNERS&sub2=PRESUBMIT.py');
  });
}, 'Multiple values - file values');
</script>