css/cssom/getComputedStyle-pseudo-checkmark.html

<!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>