Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /html/semantics/forms/the-select-element/customizable-select/select-picker-icon-open-state.html - WPT Dashboard Interop Dashboard
<!doctype html>
<html class="reftest-wait">
<link rel="author" href="mailto:wpt@keithcirkel.co.uk" />
<link rel="match" href="select-picker-icon-open-state-ref.html" />
<meta
name="assert"
content="::picker-icon colour updates when select:open pseudo-class applies"
/>
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
body {
font-family: monospace;
font-size: 16px;
}
select,
select::picker(select) {
appearance: base-select;
}
select:focus-visible {
outline: none;
}
select::picker-icon {
color: red;
}
select:open::picker-icon {
color: green;
}
</style>
<select>
<option>One</option>
<option>Two</option>
</select>
<script>
(async () => {
await new Promise(requestAnimationFrame);
await test_driver.bless();
await new Promise(requestAnimationFrame);
try {
document.querySelector("select").showPicker();
} catch (error) {}
await new Promise(requestAnimationFrame);
document.documentElement.classList.remove("reftest-wait");
})();
</script>
</html>