base-appearance-inheritance.html (1396B)
1 <!DOCTYPE html> 2 <link rel=author href="mailto:jarhar@chromium.org"> 3 <link rel=help href="https://issues.chromium.org/issues/393500003"> 4 <link rel=help href="https://chromium-review.googlesource.com/c/chromium/src/+/7062764/comment/13e22855_e8a342a7/"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 8 <style> 9 .custom, .custom::picker(select) { 10 appearance: base-select; 11 } 12 </style> 13 14 <select class=custom> 15 <option>option</option> 16 </select> 17 18 <script> 19 test(() => { 20 const select = document.querySelector('select'); 21 const option = document.querySelector('option'); 22 const nestedSelect = document.createElement('select'); 23 const nestedSelectOption = document.createElement('option'); 24 select.appendChild(nestedSelect); 25 nestedSelect.appendChild(nestedSelectOption); 26 27 assert_equals(getComputedStyle(select).display, 'inline-flex', 28 'outer select should have base appearance.'); 29 assert_equals(getComputedStyle(option).display, 'flex', 30 'outer option should have base appearance.'); 31 assert_equals(getComputedStyle(nestedSelect).display, 'inline-block', 32 'nested select should have auto appearance.'); 33 assert_equals(getComputedStyle(nestedSelectOption).display, 'block', 34 'nested option should have auto appearance.'); 35 }, 'base appearance should not propagate to nested elements which support appearance.'); 36 </script>