Bug 238667 – [macOS] The color CSS property value is ignored on <select> elements

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[alan]

<style>
select {
  color: green;
}
</style>
<select>
  <option>PASS if this is green.</option>
</select>

[Radar WebKit Bug Importer]

<rdar://problem/91167635>

[Tim Nguyen (:ntim)]

Affects some Interop 2022 containment tests:
css/css-contain/contain-size-select-elem-001.html
css/css-contain/contain-size-select-elem-002.html

[Karl Dubost]

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.

[Aditya Keerthi]

Pull request: https://github.com/WebKit/WebKit/pull/2914

[Aditya Keerthi]

(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)

[EWS]

Committed 253074@main (d31184adaa0b): <https://commits.webkit.org/253074@main>

Reviewed commits have been landed. Closing PR #2914 and removing active labels.