number-validation-message.html | Explore in Territory

<!DOCTYPE html>
<html>
<head>
<script src="../../../resources/js-test.js"></script>
</head>
<body>
<script>
if (window.internals)
    internals.runtimeFlags.langAttributeAwareFormControlUIEnabled = true;
description('Test for validationMessage IDL attribute for &lt;input type=number>');
var parent = document.createElement('div');
document.body.appendChild(parent);
parent.innerHTML = '<input type=number id=number maxlength=1 pattern=x>';
var input = document.getElementById('number');

function testIt(value, min, max, step)
{
    input.setAttribute("max", max);
    input.setAttribute("min", min);
    input.setAttribute("step", step);
    input.setAttribute("value", value);
    return input.validationMessage;
}

debug('No message')
shouldBeEqualToString('testIt("", "", "")', '');

debug('Value missing')
input.setAttribute("required", "");
shouldBeEqualToString('testIt("", "", "")', 'Please fill out this field.');
input.removeAttribute("required");

debug('Type mismatch');
shouldBeEqualToString('testIt("foo", "", "")', '');

debug('Range overflow')
shouldBeEqualToString('testIt("200", "", "100")', 'Value must be less than or equal to 100.');
// The following tests might show English text + non-English numbers. It's
// expected and it never happens in products.
input.lang = 'fr-fr';
shouldBeEqualToString('testIt("200", "", "100.4")', 'Value must be less than or equal to 100,4.');
input.lang = 'ar-eg';
shouldBeEqualToString('testIt("200", "", "100")', 'Value must be less than or equal to \u0661\u0660\u0660.');
input.lang = 'en-us';

debug('Range underflow')
shouldBeEqualToString('testIt("10", "50", "100")', 'Value must be greater than or equal to 50.');
input.lang = 'ar-eg';
shouldBeEqualToString('testIt("10", "50", "100")', 'Value must be greater than or equal to \u0665\u0660.');
input.lang = 'en-us';

debug('Step mismatch')
shouldBeEqualToString('testIt("55", "0", "100", "10")', 'Please enter a valid value. The two nearest valid values are 50 and 60.');

debug('Range invalid');
shouldBeEqualToString('testIt("10", "100", "50")', 'Minimum value (100) must be less than the maximum value (50).');

</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/number/number-validation-message.html
