| Summary: | [macOS] The color CSS property value is ignored on <select> elements | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | zalan <zalan> |
| Component: | Layout and Rendering | Assignee: | Aditya Keerthi <akeerthi> |
| Status: | RESOLVED FIXED | ||
| Severity: | Normal | CC: | akeerthi, bfulgham, karlcow, ntim, simon.fraser, webkit-bug-importer, zalan |
| Priority: | P2 | Keywords: | BrowserCompat, InRadar |
| Version: | WebKit Nightly Build | ||
| Hardware: | Unspecified | ||
| OS: | Unspecified | ||
Affects some Interop 2022 containment tests: css/css-contain/contain-size-select-elem-001.html css/css-contain/contain-size-select-elem-002.html Starting with
```
data:text/html,<!doctype%20html><title>foo</title><style>%20select%20{%20%20%20color:%20green;%20}%20</style>%20<select>%20%20%20<option>PASS%20if%20this%20is%20green.</option>%20</select>
```
document.getElementsByTagName('select')[0].style.color
returns ''
window.getComputedStyle(document.getElementsByTagName('select')[0]).getPropertyValue('color')
returns 'rgba(0, 0, 0, 0.847)'
document.getElementsByTagName('select')[0].style.color = 'green'
then
document.getElementsByTagName('select')[0].style.color
returns 'green'
But text is still blackish.
Finally let's set
document.getElementsByTagName('select')[0].style.border = '1px red dashed'
The button takes a dashed red border AND the text becomes green.
So it triggered the styling of the button.
Pull request: https://github.com/WebKit/WebKit/pull/2914 (In reply to Karl Dubost from comment #3) > Starting with > > ``` > data:text/html,<!doctype%20html><title>foo</ > title><style>%20select%20{%20%20%20color:%20green;%20}%20</ > style>%20<select>%20%20%20<option>PASS%20if%20this%20is%20green.</ > option>%20</select> > ``` > > document.getElementsByTagName('select')[0].style.color > returns '' > > window.getComputedStyle(document.getElementsByTagName('select')[0]). > getPropertyValue('color') > returns 'rgba(0, 0, 0, 0.847)' > > document.getElementsByTagName('select')[0].style.color = 'green' > then > document.getElementsByTagName('select')[0].style.color > returns 'green' > > But text is still blackish. > > Finally let's set > document.getElementsByTagName('select')[0].style.border = '1px red dashed' > > > The button takes a dashed red border AND the text becomes green. > So it triggered the styling of the button. (it works when specifying a border because the border drops native appearance) Committed 253074@main (d31184adaa0b): <https://commits.webkit.org/253074@main> Reviewed commits have been landed. Closing PR #2914 and removing active labels. |
<style> select { color: green; } </style> <select> <option>PASS if this is green.</option> </select>