<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
<title>Test Page for <select> elements</title>
</head>
<body>
<p>
<label for="plainSelect">Plain Select:</label>
<select id="plainSelect" aria-label="plain-select">
<option>alpha</option>
<option>beta</option>
<option>gamma</option>
<option value="last">omega</option>
<option disabled>disabledOption</option>
</select>
<script>
let select_event_log = [];
let log_handler = e => select_event_log.push(`${e.type}`);
document.getElementById('plainSelect').addEventListener('change', log_handler);
document.getElementById('plainSelect').addEventListener('input', log_handler);
</script>
</p>
<p>
<label for="groupedSelect">Grouped Select:</label>
<select id="groupedSelect" aria-label="grouped-select">
<optgroup label="Greek">
<option>alpha</option>
<option>beta</option>
<option>gamma</option>
</optgroup>
<optgroup label="Latin">
<option>a</option>
<option>b</option>
<option>c</option>
</optgroup>
<optgroup label="Disabled" disabled>
<option>foobar</option>
</optgroup>
</select>
</p>
<p>
<label for="disabledSelect">Disabled Select:</label>
<select id="disabledSelect" disabled aria-label="disabled-select">
<option>alpha</option>
<option>beta</option>
<option>gamma</option>
</select>
</p>
<p>
<label for="nonOptionsSelect">Select With non-<option> Children:</label>
<select id="nonOptionsSelect" aria-label="non-options-select">
<option>alpha</option>
<hr />
<span value="beta">beta</span>
<button value="gamma">gamma</button>
<option>delta</option>
<button value="epsilon">epsilon</button>
<option>epsilon</option>
</select>
</p>
<p>
<label for="listboxSelect">Listbox Select:</label>
<select id="listboxSelect" size="5" multiple aria-label="listbox-select">
<option>alpha</option>
<option>beta</option>
<option>gamma</option>
<option>delta</option>
<option>epsilon</option>
</select>
</p>
<p>
<label for="eventListenerSelect">Select with event listeners:</label>
<select id="eventListenerSelect" aria-label="event-listener-select">
<option>alpha</option>
<option>beta</option>
<option>gamma</option>
</select>
</p>
<p style="position:absolute; top: 150vh;">
<label for="offscreenSelect">Offscreen Select:</label>
<select id="offscreenSelect" aria-label="offscreen-select">
<option>alpha</option>
<option>beta</option>
</p>
</body>
</html>
