input-appearance-scroll-size.html | Explore in Territory

<!DOCTYPE html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<p>An input element can have its scrollWidth/scrollHeight changed while being
temporarily in preview state. This test ensures that these two values do not
depend on the configured font type (the preview always happens with default
font).</p>
<div><input id="referenceInput" style="width: 10px; height: 6px"></div>
<div><input id="modifiedInput" style="font: 12px Times; width: 10px; height: 6px"></div>
<div><textarea id="referenceTextArea" style="width: 10px; height: 6px"></textarea></div>
<div><textarea id="modifiedTextArea" style="font: 12px Times; width: 10px; height: 6px"></textarea></div>
<script>
for (const writingMode of ["horizontal-tb", "vertical-lr", "vertical-rl"]) {
    for (const inputType of ["text", "password", "search", "number", "email", "url", "tel"]) {
        test(() => {
            referenceInput.type = inputType;
            referenceInput.style.writingMode = writingMode;
            modifiedInput.type = inputType;
            modifiedInput.style.writingMode = writingMode;

            var value = 'Foooooooooooooooooooooooooooooooooooo';
            internals.setSuggestedValue(referenceInput, value);
            internals.setSuggestedValue(modifiedInput, value);

            assert_approx_equals(referenceInput.scrollWidth, modifiedInput.scrollWidth, 1,
                'Elements should have same scrollWidth');
            assert_approx_equals(referenceInput.scrollHeight, modifiedInput.scrollHeight, 1,
                'Elements should have same scrollHeight');
        }, `Testing that <input=${inputType}> ${writingMode} elements\' scroll size does not depend on font type.`);
    }

    test(() => {
        referenceTextArea.style.writingMode = writingMode;
        modifiedTextArea.style.writingMode = writingMode;

        var value = 'Foooooooooooooooooooooooooooooooooooo';
        internals.setSuggestedValue(referenceTextArea, value);
        internals.setSuggestedValue(modifiedTextArea, value);

        assert_approx_equals(referenceTextArea.scrollWidth, modifiedTextArea.scrollWidth, 1,
            'Elements should have same scrollWidth');
        assert_approx_equals(referenceTextArea.scrollHeight, modifiedTextArea.scrollHeight, 1,
            'Elements should have same scrollHeight');
    }, `Testing that <textarea> ${writingMode} elements\' scroll size does not depend on font type.`);
}
</script>
</html>
chromium/third_party/blink/web_tests/fast/forms/text/input-appearance-scroll-size.html
