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