autofilled.html | Explore in Territory

<head>
<script src="../../resources/js-test.js"></script>
<script src="resources/common.js"></script>
<script>

function backgroundOf(element) {
    return document.defaultView.getComputedStyle(element, null).getPropertyValue('background-color');
}

function foregroundOf(element) {
    return document.defaultView.getComputedStyle(element, null).getPropertyValue('color');
}

var select2;
var autofilledSelectForeground;
var autofilledSelectBackground;
var originalForeground = 'rgb(255, 255, 255)';
var originalBackground = 'rgb(255, 255, 255)';

function test() {
    if (!window.internals) {
        testFailed('This test requires the test harness to run.');
        return;
    }

    var field = document.getElementById('field');
    var search = document.getElementById('search');
    var textarea1 = document.getElementById('textarea1');
    var textarea2 = document.getElementById('textarea2');
    textarea2.value = 'autofilled is true';
    var select1 = document.getElementById('select1');
    select2 = document.getElementById('select2');
    var select3 = document.getElementById('select3');

    shouldBe('foregroundOf(textarea1)', 'originalForeground');
    shouldBe('backgroundOf(textarea1)', 'originalBackground');

    internals.setAutofilled(field, true);
    internals.setAutofilled(search, true);
    internals.setAutofilled(textarea1, true);
    internals.setAutofilled(textarea2, true);
    internals.setAutofilled(select1, true);
    internals.setAutofilled(select2, true);
    internals.setAutofilled(select3, true);

    shouldBeEqualToString('search.value', 'Search value');

    // Both the foreground and background colors should change.
    // Note that the background color of <input> and <textarea> are
    // determined by the native theme, which overrides CSS
    // background colors. So we skip testing background colors in
    // this test.
    shouldNotBe('foregroundOf(field)', 'originalForeground');
    shouldNotBe('foregroundOf(search)', 'originalForeground');
    shouldNotBe('foregroundOf(textarea1)', 'originalForeground');
    shouldNotBe('foregroundOf(textarea2)', 'originalForeground');
    shouldNotBe('foregroundOf(select1)', 'originalForeground');
    shouldNotBe('backgroundOf(select1)', 'originalBackground');
    shouldNotBe('foregroundOf(select2)', 'originalForeground');
    shouldNotBe('backgroundOf(select2)', 'originalBackground');
    shouldNotBe('foregroundOf(select3)', 'originalForeground');
    shouldNotBe('backgroundOf(select3)', 'originalBackground');

    // Remove an unselected option from <select> element. This should not affect the background color for the autofilled <select> element.
    shouldBe('select2.options.length', '3');
    select2.removeChild(select2.childNodes[1]);
    shouldBe('select2.options.length', '2');
    autofilledSelectForeground = foregroundOf(select2);
    autofilledSelectBackground = backgroundOf(select2);
    shouldBe('foregroundOf(select2)', 'autofilledSelectForeground');
    shouldBe('backgroundOf(select2)', 'autofilledSelectBackground');

    internals.setAutofilled(field, false);
    internals.setAutofilled(textarea1, false);
    internals.setAutofilled(select1, false);

    // Cancel search by pressing cancel button
    var cancelPos = searchCancelButtonPosition(search);
    eventSender.mouseMoveTo(cancelPos.x, cancelPos.y);
    eventSender.mouseDown();
    eventSender.mouseUp();
    shouldBeEmptyString('search.value');

    // Edit text in the autofilled textarea.
    textarea2.focus();
    document.execCommand('Delete', false, null);
    document.execCommand('Delete', false, null);
    document.execCommand('Delete', false, null);
    document.execCommand('Delete', false, null);
    document.execCommand('InsertText', false, 'false');

    // Remove selected option for select2 element
    select2.removeChild(select2[select2.selectedIndex]);

    // Change selected option for select3 element
    select3.selectedIndex = 2;

    // Colors should be restored.
    shouldBe('foregroundOf(field)', 'originalForeground');
    shouldBe('foregroundOf(search)', 'originalForeground');
    shouldBe('foregroundOf(textarea1)', 'originalForeground');
    shouldBe('foregroundOf(textarea2)', 'originalForeground');
    shouldBe('foregroundOf(select1)', 'originalForeground');
    shouldBe('backgroundOf(select1)', 'originalBackground');
    shouldBe('foregroundOf(select2)', 'originalForeground');
    shouldBe('backgroundOf(select2)', 'originalBackground');
    shouldBe('foregroundOf(select3)', 'originalForeground');
    shouldBe('backgroundOf(select3)', 'originalBackground');
}
</script>

<style>
#field, #search, #textarea1, #textarea2, #select1, #select2, #select3 {
    color: #FFFFFF;
    background-color: #FFFFFF;
}
</style>
</head>
<body onload="test()">
    This tests that foreground and background colors properly change for autofilled inputs or select options.  It can only be run using the test harness.<br>
    <form name="fm">
        <input type="text" id="field" value="Field value">
        <input type="search" id="search" value="Search value">
        <textarea id="textarea1"></textarea>
        <textarea id="textarea2"></textarea>
        <select id="select1"></select>
        <select id="select2">
            <option selected>1</option>
            <option >2</option>
            <option>3</option>
        </select>
        <select id="select3">
            <option selected>1</option>
            <option >2</option>
            <option>3</option>
        </select>
    </form>
    <div id="console"></div>
</body>
chromium/third_party/blink/web_tests/fast/forms/autofilled.html
