1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<!doctype html>
<meta charset="utf-8">
<title>CSSOM: Correct resolution of resolved value for the checkmark pseudo-element</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values">
<link rel="help" href="https://drafts.csswg.org/css-forms/#checkmark-element">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
select,
select::picker(select) {
appearance: base-select;
}
#test-option {
width: 321px;
}
#test-option::checkmark {
width: 13px;
}
</style>
<select>
<option id="test-option">The only option</option>
</select>
<script>
test(() => {
const test_option = document.getElementById('test-option');
assert_equals(getComputedStyle(test_option, "checkmark").width, "321px");
}, "Resolution of width is correct when pseudo-element argument is ignored (due to no colon)");
test(() => {
const test_option = document.getElementById('test-option');
assert_equals(getComputedStyle(test_option, ":checkmark").width, "");
}, "Resolution of width is correct when pseudo-element argument is ignored (due to single-colon)");
test(() => {
const test_option = document.getElementById('test-option');
assert_equals(getComputedStyle(test_option, "::checkmark").width, "13px");
}, "Resolution of width is correct for pseudo-element (due to double-colon)");
</script>
|
