1443663 - css: background color on optgroup not rendered correctly when it has been overridden in a style sheet

Status: NEW

(Core :: Layout: Form Controls, defect, P3)

Description

[John Ross]

Attachment: FireFoxView.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20180206200532

Steps to reproduce:

An optgroup (in select element) - when a background color has been overridden by a second stylesheet, will not display the new color. Instead appears to default back to the agent's background color.
See attached files. (FireFoxView.png)


Actual results:

Does not show the correct background color on an optgroup element when overriden.


Expected results:

Show show the correct color.

Comment 1

[John Ross]

Attachment: CorrectView.png

Correct view of rendering optgroup as shown in another browser.

Comment 2

[David Olah]

I managed to reproduce this issue on (Windows NT 10.0; Win64; x64; rv:60.0) Gecko/20100101 Firefox/60.0a1 and Firefox/58.0

Bug 1394491 might be a duplicate to this issue, please take a look.

I reproduced the issue with the following steps:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_optgroup

1) open the link below
2) right click on the drop down from the right side of the page and inspect element
3) in the Inspector, select an optgroup from the list
4) In Rules (right side), paste the following code: 

element {

    background-color: blue;
    color: white;
    background-color: yellow;

}

5) uncheck the first background colour and check the second

Expected result: the element from the drop down should have the second colour
Actual result: the element from the dropdown has the first colour that is unchecked

Comment 3

[John Ross]

Hi David,

The problem occurs when a second style sheet is loaded that overrides the style from the initial style sheet. The problems is specific to optgroup element's background color.

eg:
<link href="/css/AppPage.css" type="text/css" rel="stylesheet" media="all" />
<link href="/css/AppPage2.css" type="text/css" rel="stylesheet" media="all" />

where the second style sheet is used to override element properties in the first style sheet.

The example that you provided does not show the error.

Comment 4

[Jet Villegas (inactive)]

[Triage 2018/03/23 - P3]