<!doctype html>
<head>
<meta charset="iso-8859-1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>
<style>
    .upper * { text-transform: uppercase; }
    .capitalized * { text-transform: capitalize; }
    .lower * { text-transform: lowercase; }
</style>
The text in the button, popup menu and list box should have the same case as in the
accompanying text.
<div class="upper">
    <select><option>heLLo</option><option>woRLd</option></select>
    <select multiple="true"><option>heLLo</option><option>woRLd</option></select>
    <span>heLLo woRLd</span>
</div>
<div class="capitalized">
    <select><option>heLLo</option><option>woRLd</option></select>
    <select multiple="true"><option>heLLo</option><option>woRLd</option></select>
    <span>heLLo woRLd</span>
</div>
<div class="lower">
    <select><option>heLLo</option><option>woRLd</option></select>
    <select multiple="true"><option>heLLo</option><option>woRLd</option></select>
    <span>heLLo woRLd</span>
</div>
<div class="upper">
    <select><option></option><option></option></select>
    <select multiple="true"><option></option><option></option></select>
    <span> </span>
</div>
<div class="capitalized">
    <select><option></option><option></option></select>
    <select multiple="true"><option></option><option></option></select>
    <span> </span>
</div>
<div class="lower">
    <select><option></option><option></option></select>
    <select multiple="true"><option></option><option></option></select>
    <span> </span>
</div>
</body>
