select-dropdown-consistent-background-color.html

<html>
<script>
function $(id) {
    return document.getElementById(id);
}

function testGetComputedStyle(el) {
    return el.ownerDocument.defaultView.getComputedStyle(el);
}

function test() {
    var default_op = $('default-select').options[0];
    var size0_op = $('size0-select').options[0];
    var size1_op = $('size1-select').options[0];

    var default_color = testGetComputedStyle(default_op)['background-color'];
    var size0_color = testGetComputedStyle(size0_op)['background-color'];
    var size1_color = testGetComputedStyle(size1_op)['background-color'];

    $('result').textContent =
        (default_color == size0_color && default_color == size1_color) ? "PASS"
                                                                       : "FAIL";
    if (window.testRunner)
        testRunner.dumpAsText();
}
</script>
<body onload='test();'>
This test verifies that the dropdown background colors of &lt;select&gt; and &lt;select size="0"|"1"&gt; are consistent. You should see PASS below if test passes. Otherwise, FAIL shows up.
<div id='result'>Oops</div>

Default:
<select id='default-select'>
    <option>Item 1</option>
    <option>Item 2</option>
</select>

Size=0:
<select size="0" id='size0-select'>
    <option>Item 1</option>
    <option>Item 2</option>
</select>

Size=1:
<select size="1" id='size1-select'>
    <option>Item 1</option>
    <option>Item 2</option>
</select>

<br>
Note: Two items are used so that you could manually see the difference. The test logic only needs the first item to run.

</body>
</html>
chromium/third_party/blink/web_tests/fast/html/select-dropdown-consistent-background-color.html
