Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!doctype html>
<meta charset="utf-8">
<title>CSSOM: Correct resolution of resolved value for the picker-icon pseudo-element</title>
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
select,
select::picker(select) {
appearance: base-select;
}
#test-select {
width: 321px;
}
#test-select::picker-icon {
width: 13px;
}
</style>
<select id="test-select">
<option>The only option</option>
</select>
<script>
test(() => {
const test_select = document.getElementById('test-select');
assert_equals(getComputedStyle(test_select, "picker-icon").width, "321px");
}, "Resolution of width is correct when pseudo-element argument is ignored (due to no colon)");
test(() => {
const test_select = document.getElementById('test-select');
assert_equals(getComputedStyle(test_select, ":picker-icon").width, "");
}, "Resolution of width is correct when pseudo-element argument is ignored (due to single-colon)");
test(() => {
const test_select = document.getElementById('test-select');
assert_equals(getComputedStyle(test_select, "::picker-icon").width, "13px");
}, "Resolution of width is correct for pseudo-element (due to double-colon)");
</script>