form-associated-state-restore-frame.html

<!DOCTYPE html>
<body>
<script>
class MyControl1 extends HTMLElement {
  static get formAssociated() { return true; }
  constructor() {
    super();
    this.internals_ = this.attachInternals();
    this.value_ = 'initial';
  }
  get value() {
    return this.value_;
  }
  set value(v) {
    this.value_ = v;
    this.internals_.setFormValue(v);
  }
  formStateRestoreCallback(v, mode) {
    this.value = v;
    this.lastRestoreMode = mode;
  }
}
customElements.define('my-control-1', MyControl1);
</script>
<input id=emptyOnFirstVisit name="state">

<form action="../../resources/back.html" id="form1">
<my-control-1></my-control-1>
<my-control-1 id="nested-focus"><my-control-1 id="focus" tabindex=0></my-control-1></my-control-1>
<my-control-1 id="disabled" disabled></my-control-1>
<my-control-1 id="readonly" readonly></my-control-1>
<fieldset disabled><my-control-1 id="fieldset-disabled"></my-control-1></fieldset>
<my-control-2></my-control-2>
<control-with-state id='control-with-state'></control-with-state>
<control-with-state id='control-with-null-value'></control-with-state>
</form>

<script>

let $ = document.querySelector.bind(document);

function upgradeMyControl2() {
  class MyControl2 extends HTMLElement {
    static get formAssociated() { return true; }
    constructor() {
      super();
      this.internals_ = this.attachInternals();
      this.value_ = 'initial';
    }
    get value() {
      return this.value_;
    }
    set value(v) {
      this.value_ = v;
      this.internals_.setFormValue(v);
    }
    formStateRestoreCallback(v, mode) {
      this.value = v;
      this.lastRestoreMode = mode;
    }
  }
  customElements.define('my-control-2', MyControl2);
  customElements.upgrade($('my-control-2'));
}

function upgradeControlWithState() {
  class ControlWithState extends HTMLElement {
    static get formAssociated() { return true; }
    constructor() {
      super();
      this.internals_ = this.attachInternals();
      this.value_ = 'initial';
      this.state_ = 'initial/initial';
    }
    get value() {
      return this.value_;
    }
    get state() {
      return this.state_;
    }
    set value(v) {
      this.value_ = v;
      this.state_ = v ? (v + '/' + v) : 'null';
      this.internals_.setFormValue(this.value_, this.state_);
    }
    // formStateRestoreCallback should be called with state intead of value.
    // See crbug.com/1429585
    formStateRestoreCallback(state, mode) {
      if (state === 'null') {
        this.value = null;
      } else {
        let index = state.indexOf('/');
        this.value = state.substring(0, index);
      }
      this.lastRestoreMode = mode;
      this.lastRestoreState = state;
    }
  }
  customElements.define('control-with-state', ControlWithState);
  customElements.upgrade($('#control-with-state'));
  customElements.upgrade($('#control-with-null-value'));
}

function runTest() {
  let state = $('#emptyOnFirstVisit');
  if (!state.value) {
    // First visit
    state.value = 'visited';
    upgradeMyControl2();
    upgradeControlWithState();

    $('my-control-1').value = 'edit1';
    $('#focus').value = 'edit3';
    $('#nested-focus').value = 'edit4';
    $('#disabled').value = 'edit5';
    $('#readonly').value = 'edit6';
    $('#fieldset-disabled').value = 'edit7';
    $('my-control-2').value = 'edit2';
    $('#control-with-state').value = 'edit8';
    $('#control-with-null-value').value = null;
    setTimeout(() => { $('form').submit(); }, 100);
  } else {
    // Second visit
    upgradeMyControl2();
    upgradeControlWithState();
    parent.doneTest();
  }
}

$('#focus').focus();
window.onload = () => {
  setTimeout(runTest, 1);
};
</script>
</body>
chromium/third_party/blink/web_tests/custom-elements/resources/form-associated-state-restore-frame.html
