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-pseudo-backdrop.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<html class="reftest-wait">
<meta charset="utf-8">
<title>CSS ::backdrop pseudo-element on select::picker(select)</title>
<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
<link rel="help" href="https://drafts.csswg.org/css-forms/#the-picker-pseudo-element">
<link rel="help" href="https://drafts.csswg.org/css-position-4/#backdrop">
<link rel="match" href="select-picker-pseudo-backdrop-ref.html">
<script src="/resources/testdriver.js"></script>
<script src="/resources/testdriver-vendor.js"></script>
<style>
select, select::picker(select) {
appearance: base-select;
}
/*
* Make the select button invisible against the backdrop color so that
* the select button being covered by the backdrop (in this test) vs.
* being on the green body (in the reference) produces the same visual.
*/
body {
background: red;
color: green;
}
select::picker(select)::backdrop {
background: green;
}
</style>
<select>
<option>one</option>
<option>two</option>
</select>
<script>
(async () => {
await test_driver.bless();
document.querySelector("select").showPicker();
document.documentElement.classList.remove("reftest-wait");
})();
</script>