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