<!DOCTYPE html>
<body>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>

<input id="input" type="text" onchange="changeHandler()">
<input id="number" type="number" onchange="changeHandler()">
<textarea id="textarea" onchange="changeHandler()"></textarea>

<script>
var changeEventCounter = 0;
function changeHandler() {
  changeEventCounter++;
  element.value = '';
}

function elementDesc(element) {
  if (element.tagName == 'TEXTAREA')
    return 'TEXTAREA';
  return 'INPUT[type=' + element.type + ']';
}

function escape(str) {
  if (str === null || str === undefined)
    return 'null';
  var result ='\x22';
  for (var i = 0; i < str.length; ++i) {
    if (str[i] == '\b')
      result += '\\b';
    else if (str[i] == '\x22')
      result += '\\\x22';
    else
      result += str[i];
  }
  return result + '\x22';
}

function typeAsUser(userInput) {
  if (!userInput)
    return;
  if (userInput.indexOf('\b') < 0) {
    document.execCommand('InsertText', false, userInput);
    return;
  }
  for (var i = 0; i < userInput.length; ++i) {
    if (userInput[i] == '\b')
      document.execCommand('Delete', false, '');
    else
      document.execCommand('InsertText', false, userInput[i]);
  }
}

function testValueUpdateOnChange(element, userInput) {
  test(() => {
    changeEventCounter = 0;
    element.focus();
    document.execCommand('InsertText', false, userInput);
    assert_equals(element.value, userInput);
    element.blur();
    assert_equals(changeEventCounter, 1);
    assert_equals(element.value, '');

    element.focus();
    document.execCommand('InsertText', false, userInput);
    assert_equals(element.value, userInput);
    element.blur();
    assert_equals(changeEventCounter, 2);
  }, elementDesc(element) + ': Updating value in a CHANGE event handler');
}

function testUserEditSetValueUserEdit(element, initial, userInput1, jsInput, userInput2, expectation) {
  test(() => {
    changeEventCounter = 0;
    element.value = initial;
    element.focus();
    typeAsUser(userInput1);
    element.value = jsInput;
    typeAsUser(userInput2);
    element.blur();
    assert_equals(changeEventCounter, expectation ? 1 : 0);
  }, `${elementDesc(element)}: Sequence of User-edit ${escape(userInput1)}, element.value=${escape(jsInput)}, User-edit ${escape(userInput2)} should dispatch ${expectation ? 'a' : 'no'} CHANGE event.`);
}

var element = document.getElementById('input');
testValueUpdateOnChange(element, 'foo bar');
testUserEditSetValueUserEdit(element, '', null, 'FOO BAR', null, false);
testUserEditSetValueUserEdit(element, '0', 'foo bar', 'FOO BAR', null, true);
testUserEditSetValueUserEdit(element, '', null, 'hello', '\b\b\b\b\b', true);
testUserEditSetValueUserEdit(element, '', null, 'hello', 'abc\b\b\b', false);
testUserEditSetValueUserEdit(element, '', 'foo', 'hello', null, true);
testUserEditSetValueUserEdit(element, '', 'hello', 'hello', null, true);
testUserEditSetValueUserEdit(element, '', 'foo', 'hello', '\b\b\b\b\b', false);
testUserEditSetValueUserEdit(element, '', 'foo\b\b\b', 'hello', null, false);
testUserEditSetValueUserEdit(element, '', 'foo', '', null, false);
testUserEditSetValueUserEdit(element, '0', 'foo', '', '0', false);

element = document.getElementById('number');
testValueUpdateOnChange(element, '123');
testUserEditSetValueUserEdit(element, '', null, '999', null, false);
testUserEditSetValueUserEdit(element, '0', '123', '999', null, true);
testUserEditSetValueUserEdit(element, '', null, '234', '\b\b\b', true);
testUserEditSetValueUserEdit(element, '', null, '234', '56\b\b', false);
testUserEditSetValueUserEdit(element, '', '1', '234', null, true);
testUserEditSetValueUserEdit(element, '', '234', '234', null, true);
testUserEditSetValueUserEdit(element, '', '1', '234', '\b\b\b', false);
testUserEditSetValueUserEdit(element, '', '1\b', '234', null, false);
testUserEditSetValueUserEdit(element, '', '1', '', null, false);
testUserEditSetValueUserEdit(element, '0', '1', '', '0', false);

element = document.getElementById('textarea');
testValueUpdateOnChange(element, 'foo bar');
testUserEditSetValueUserEdit(element, '', null, 'FOO BAR', null, false);
testUserEditSetValueUserEdit(element, '0', 'foo bar', 'FOO BAR', null, true);
testUserEditSetValueUserEdit(element, '', null, 'hello', '\b\b\b\b\b', true);
testUserEditSetValueUserEdit(element, '', null, 'hello', 'abc\b\b\b', false);
testUserEditSetValueUserEdit(element, '', 'foo', 'hello', null, true);
testUserEditSetValueUserEdit(element, '', 'hello', 'hello', null, true);
testUserEditSetValueUserEdit(element, '', 'foo', 'hello', '\b\b\b\b\b', false);
testUserEditSetValueUserEdit(element, '', 'foo\b\b\b', 'hello', null, false);
testUserEditSetValueUserEdit(element, '', 'foo', '', null, false);
testUserEditSetValueUserEdit(element, '0', 'foo', '', '0', false);
</script>
</body>