select-appearance.html | Explore in Territory

<!DOCTYPE html>
<html>
<meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100">
<style>
.rtl { direction: rtl; }
.no-appearance { appearance: none; }
</style>
<body>

<select></select>
<select style="direction: rtl;"></select>
<select style="appearance: none;"></select>
<select style="direction: rtl; appearance: none;"></select>
<br><br>
<select style="writing-mode: vertical-rl; direction: ltr;"></select>
<select style="writing-mode: vertical-rl; direction: rtl;"></select>
<select style="writing-mode: vertical-lr; direction: ltr;"></select>
<select style="writing-mode: vertical-lr; direction: rtl;"></select>
<select style="writing-mode: vertical-rl; direction: ltr; appearance: none;"></select>
<select style="writing-mode: vertical-rl; direction: rtl; appearance: none;"></select>
<select style="writing-mode: vertical-lr; direction: ltr; appearance: none;"></select>
<select style="writing-mode: vertical-lr; direction: rtl; appearance: none;"></select>

<br>
sideways-rl:
<div style="writing-mode: sideways-rl">
<select></select><br>
<select class="rtl"></select><br>
<select class="no-appearance"></select><br>
<select class="rtl no-appearance"></select>
</div>

sideways-lr:
<div style="writing-mode: sideways-lr">
<select></select><br>
<select class="rtl"></select><br>
<select class="no-appearance"></select><br>
<select class="rtl no-appearance"></select>
</div>

<script>
const selects = document.getElementsByTagName('select');
for(var s=0; s<selects.length; s++){
    for (var i = 0; i < 3; i++){
        var opt = document.createElement('option');
        opt.value = i;
        opt.innerHTML = `Option ${i+1}`;
        selects[s].appendChild(opt);
    }
}
</script>
</body>
</html>
chromium/third_party/blink/web_tests/fast/forms/select/select-appearance.html
