<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../../resources/js-test-pre.js"></script>
</head>
<body>
<p id="description"></p>
<div id="console"></div>

<div id=container>
<input type="text" id="f" size="5" maxlength="4">
<input type="text" id="e" size="5" maxlength="4">
<input type="text" id="d" size="5">
<input type="text" id="c" size="5">
<input type="text" id="j" size="5" maxlength="4">
<input type="text" id="i" size="5" maxlength="4">
<input type="text" id="h" size="5">
<input type="text" id="g" size="5">
<input type="text" id="k" size="5" maxlength="4">
<input type="text" id="l" size="5" maxlength="0">
<input type="text" id="m" size="5" maxlength="">
<input type="text" id="n" size="5" maxlength="invalid">
<input type="text" id="huge" size="5" maxlength="9999999999">
</div>

<script>
function domValueOf(id) {
    return document.getElementById(id).value;
}
function visibleValueOf(id) {
    const element = document.getElementById(id);
    const shadowRoot = internals.shadowRoot(element);
    const range = new Range;
    range.selectNodeContents(shadowRoot);
    return internals.rangeAsText(range);
}

var fancyX = "x" + String.fromCharCode(0x305) + String.fromCharCode(0x332);

debug("set value attribute that violates maxlength (with pasted value)");
document.getElementById("f").focus();
document.execCommand("InsertHTML", false, "123");
document.getElementById("f").setAttribute('value', '12345');
shouldBe("domValueOf('f')", "'123'");  // setAttribute() doesn't change the value because the value is dirty.
shouldBe("visibleValueOf('f')", "'123'");

debug("set value property that violates maxlength (with pasted value)");
document.getElementById("e").focus();
document.execCommand("InsertHTML", false, "123");
document.getElementById("e").value = '12345';
shouldBe("domValueOf('e')", "'12345'");  // Unlike setAttribute(), .value property changes the value.
shouldBe("visibleValueOf('e')", "'12345'");

debug("set maxlength attribute that is smaller than pasted value");
document.getElementById("d").focus();
document.execCommand("InsertHTML", false, "12345");
document.getElementById("d").setAttribute('maxlength', 4);
shouldBe("domValueOf('d')", "'12345'");
shouldBe("visibleValueOf('d')", "'12345'");

debug("set maxLength property that is smaller than pasted value");
document.getElementById("c").focus();
document.execCommand("InsertHTML", false, "12345");
document.getElementById("c").maxLength = 4;
shouldBe("domValueOf('c')", "'12345'");
shouldBe("visibleValueOf('c')", "'12345'");

debug("set value attribute that violates maxlength (with pasted value)");
document.getElementById("j").focus();
document.execCommand("InsertHTML", false, "123");
document.getElementById("j").setAttribute('value', '12' + fancyX + '45');
shouldBe("domValueOf('j')", "'123'");
shouldBe("visibleValueOf('j')", "'123'");

debug("set value property that violates maxlength (with pasted value)");
document.getElementById("i").focus();
document.execCommand("InsertHTML", false, "123");
document.getElementById("i").value = '12' + fancyX + '45';
shouldBe("domValueOf('i')", "'12' + fancyX + '45'");
shouldBe("visibleValueOf('i')", "'12' + fancyX + '45'");

debug("set maxlength attribute that is smaller than pasted value");
document.getElementById("h").focus();
document.execCommand("InsertHTML", false, "12x&#x305;&#x332;45");
document.getElementById("h").setAttribute('maxlength', 4);
shouldBe("domValueOf('h')", "'12' + fancyX + '45'");
shouldBe("visibleValueOf('h')", "'12' + fancyX + '45'");

debug("set maxLength property that is smaller than pasted value");
document.getElementById("g").focus();
document.execCommand("InsertHTML", false, "12x&#x305;&#x332;45");
document.getElementById("g").maxLength = 4;
shouldBe("domValueOf('g')", "'12' + fancyX + '45'");
shouldBe("visibleValueOf('g')", "'12' + fancyX + '45'");

debug("pasting too much text");
document.getElementById("k").focus();
document.execCommand("InsertHTML", false, "12x&#x305;&#x332;45");
let truncatedFancyX = "x" + String.fromCharCode(0x305);
shouldBe("domValueOf('k')", "'12' + truncatedFancyX");
shouldBe("visibleValueOf('k')", "'12' + truncatedFancyX");

debug("pasting too much text with maxlength=0");
document.getElementById("l").focus();
document.execCommand("InsertHTML", false, "12x&#x305;&#x332;45");
shouldBe("domValueOf('l')", "''");
shouldBe("visibleValueOf('l')", "''");

debug("empty maxlength should be ignored.");
document.getElementById("m").focus();
document.execCommand("InsertHTML", false, "12x&#x305;&#x332;45");
shouldBe("domValueOf('m')", "'12' + fancyX + '45'");
shouldBe("visibleValueOf('m')", "'12' + fancyX + '45'");

debug("invalid maxlength should be ignored.");
document.getElementById("n").focus();
document.execCommand("InsertHTML", false, "12x&#x305;&#x332;45");
shouldBe("domValueOf('n')", "'12' + fancyX + '45'");
shouldBe("visibleValueOf('n')", "'12' + fancyX + '45'");
document.getElementById("huge").focus();
document.execCommand("InsertHTML", false, "12x&#x305;&#x332;45");
shouldBe("domValueOf('huge')", "'12' + fancyX + '45'");
shouldBe("visibleValueOf('huge')", "'12' + fancyX + '45'");

document.getElementById('container').innerHTML = '';
</script>
<script src="../../resources/js-test-post.js"></script>
</body>
</html>