Emilio Cobos Álvarez
249074444c
Differential Revision: https://phabricator.services.mozilla.com/D293487
68 lines
1.8 KiB
HTML
68 lines
1.8 KiB
HTML
<!doctype html>
|
|
<meta charset="utf-8">
|
|
<title>CSSOM: getComputedStyle with ::picker(select)</title>
|
|
|
|
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">
|
|
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values">
|
|
|
|
<script src=/resources/testharness.js></script>
|
|
<script src=/resources/testharnessreport.js></script>
|
|
|
|
<style>
|
|
select,
|
|
select::picker(select) {
|
|
appearance: base-select;
|
|
}
|
|
|
|
#test-select::picker(select) {
|
|
background-color: rgb(0, 128, 0);
|
|
}
|
|
|
|
#test-div::picker(select) {
|
|
background-color: rgb(0, 0, 255);
|
|
}
|
|
</style>
|
|
|
|
<select id="test-select">
|
|
<option>The only option</option>
|
|
</select>
|
|
|
|
<div id="test-div"></div>
|
|
|
|
<div id="test-div-no-rules"></div>
|
|
|
|
<script>
|
|
test(() => {
|
|
const select = document.getElementById('test-select');
|
|
const style = getComputedStyle(select, '::picker(select)');
|
|
assert_equals(style.backgroundColor, 'rgb(0, 128, 0)');
|
|
}, '::picker(select) returns picker element style');
|
|
|
|
test(() => {
|
|
const div = document.getElementById('test-div');
|
|
const style = getComputedStyle(div, '::picker(select)');
|
|
assert_equals(style.backgroundColor, 'rgb(0, 0, 255)');
|
|
}, '::picker(select) on non-select element resolves the style');
|
|
|
|
test(() => {
|
|
const div = document.getElementById('test-div-no-rules');
|
|
const style = getComputedStyle(div, '::picker(select)');
|
|
assert_equals(style.backgroundColor, 'rgba(0, 0, 0, 0)');
|
|
}, '::picker(select) on non-select element with no rules resolves the style');
|
|
|
|
[
|
|
"::picker",
|
|
"::picker()",
|
|
"::picker(div)",
|
|
":picker(select)",
|
|
"::picker(select)a",
|
|
"::picker( )",
|
|
].forEach(pseudo => {
|
|
test(() => {
|
|
const select = document.getElementById('test-select');
|
|
const style = getComputedStyle(select, pseudo);
|
|
assert_equals(style.length, 0);
|
|
}, `Invalid pseudo-element should return empty style: ${pseudo}`);
|
|
});
|
|
</script>
|