Open Bug 595056 Opened 16 years ago Updated 3 years ago

Text with a lighter color and opacity is rendered incorrently

Categories

(Firefox :: General, defect)

Product:
Firefox
Component:
General
Version:
3.6 Branch
Platform:
x86
Windows 7
Type:
defect

Tracking

()

Status:
UNCONFIRMED

People

(Reporter: simonpai, Unassigned)

Details

User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-TW; rv:1.9.2.9) Gecko/20100824 Firefox/3.6.9 Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.1; zh-TW; rv:1.9.2.9) Gecko/20100824 Firefox/3.6.9 For example, <span style="color: #666666; opacity: 0.9;">Text</span> <span style="color: #EEEEEE; opacity: 0.4;">Text</span> Reproducible: Always Steps to Reproduce: 1. include the <span>s described in an HTML file, open the file with FF Actual Results: You can see some green color appearing on the text. Expected Results: The text should be gray with some transparency. <table> <tr> <th>Color/Opacity</th> <th>1.0</th> <th>0.9</th> <th>0.8</th> <th>0.7</th> <th>0.6</th> <th>0.5</th> <th>0.4</th> <th>0.3</th> <th>0.2</th> <th>0.1</th> <th>0.0</th> </tr> <tr> <td class="color-title">0</td> <td style="color: #0; opacity: 1.0; ">Text</td> <td style="color: #0; opacity: 0.9; ">Text</td> <td style="color: #0; opacity: 0.8; ">Text</td> <td style="color: #0; opacity: 0.7; ">Text</td> <td style="color: #0; opacity: 0.6; ">Text</td> <td style="color: #0; opacity: 0.5; ">Text</td> <td style="color: #0; opacity: 0.4; ">Text</td> <td style="color: #0; opacity: 0.3; ">Text</td> <td style="color: #0; opacity: 0.2; ">Text</td> <td style="color: #0; opacity: 0.1; ">Text</td> <td style="color: #0; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">111111</td> <td style="color: #111111; opacity: 1.0; ">Text</td> <td style="color: #111111; opacity: 0.9; ">Text</td> <td style="color: #111111; opacity: 0.8; ">Text</td> <td style="color: #111111; opacity: 0.7; ">Text</td> <td style="color: #111111; opacity: 0.6; ">Text</td> <td style="color: #111111; opacity: 0.5; ">Text</td> <td style="color: #111111; opacity: 0.4; ">Text</td> <td style="color: #111111; opacity: 0.3; ">Text</td> <td style="color: #111111; opacity: 0.2; ">Text</td> <td style="color: #111111; opacity: 0.1; ">Text</td> <td style="color: #111111; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">222222</td> <td style="color: #222222; opacity: 1.0; ">Text</td> <td style="color: #222222; opacity: 0.9; ">Text</td> <td style="color: #222222; opacity: 0.8; ">Text</td> <td style="color: #222222; opacity: 0.7; ">Text</td> <td style="color: #222222; opacity: 0.6; ">Text</td> <td style="color: #222222; opacity: 0.5; ">Text</td> <td style="color: #222222; opacity: 0.4; ">Text</td> <td style="color: #222222; opacity: 0.3; ">Text</td> <td style="color: #222222; opacity: 0.2; ">Text</td> <td style="color: #222222; opacity: 0.1; ">Text</td> <td style="color: #222222; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">333333</td> <td style="color: #333333; opacity: 1.0; ">Text</td> <td style="color: #333333; opacity: 0.9; ">Text</td> <td style="color: #333333; opacity: 0.8; ">Text</td> <td style="color: #333333; opacity: 0.7; ">Text</td> <td style="color: #333333; opacity: 0.6; ">Text</td> <td style="color: #333333; opacity: 0.5; ">Text</td> <td style="color: #333333; opacity: 0.4; ">Text</td> <td style="color: #333333; opacity: 0.3; ">Text</td> <td style="color: #333333; opacity: 0.2; ">Text</td> <td style="color: #333333; opacity: 0.1; ">Text</td> <td style="color: #333333; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">444444</td> <td style="color: #444444; opacity: 1.0; ">Text</td> <td style="color: #444444; opacity: 0.9; ">Text</td> <td style="color: #444444; opacity: 0.8; ">Text</td> <td style="color: #444444; opacity: 0.7; ">Text</td> <td style="color: #444444; opacity: 0.6; ">Text</td> <td style="color: #444444; opacity: 0.5; ">Text</td> <td style="color: #444444; opacity: 0.4; ">Text</td> <td style="color: #444444; opacity: 0.3; ">Text</td> <td style="color: #444444; opacity: 0.2; ">Text</td> <td style="color: #444444; opacity: 0.1; ">Text</td> <td style="color: #444444; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">555555</td> <td style="color: #555555; opacity: 1.0; ">Text</td> <td style="color: #555555; opacity: 0.9; ">Text</td> <td style="color: #555555; opacity: 0.8; ">Text</td> <td style="color: #555555; opacity: 0.7; ">Text</td> <td style="color: #555555; opacity: 0.6; ">Text</td> <td style="color: #555555; opacity: 0.5; ">Text</td> <td style="color: #555555; opacity: 0.4; ">Text</td> <td style="color: #555555; opacity: 0.3; ">Text</td> <td style="color: #555555; opacity: 0.2; ">Text</td> <td style="color: #555555; opacity: 0.1; ">Text</td> <td style="color: #555555; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">666666</td> <td style="color: #666666; opacity: 1.0; ">Text</td> <td style="color: #666666; opacity: 0.9; ">Text</td> <td style="color: #666666; opacity: 0.8; ">Text</td> <td style="color: #666666; opacity: 0.7; ">Text</td> <td style="color: #666666; opacity: 0.6; ">Text</td> <td style="color: #666666; opacity: 0.5; ">Text</td> <td style="color: #666666; opacity: 0.4; ">Text</td> <td style="color: #666666; opacity: 0.3; ">Text</td> <td style="color: #666666; opacity: 0.2; ">Text</td> <td style="color: #666666; opacity: 0.1; ">Text</td> <td style="color: #666666; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">777777</td> <td style="color: #777777; opacity: 1.0; ">Text</td> <td style="color: #777777; opacity: 0.9; ">Text</td> <td style="color: #777777; opacity: 0.8; ">Text</td> <td style="color: #777777; opacity: 0.7; ">Text</td> <td style="color: #777777; opacity: 0.6; ">Text</td> <td style="color: #777777; opacity: 0.5; ">Text</td> <td style="color: #777777; opacity: 0.4; ">Text</td> <td style="color: #777777; opacity: 0.3; ">Text</td> <td style="color: #777777; opacity: 0.2; ">Text</td> <td style="color: #777777; opacity: 0.1; ">Text</td> <td style="color: #777777; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">888888</td> <td style="color: #888888; opacity: 1.0; ">Text</td> <td style="color: #888888; opacity: 0.9; ">Text</td> <td style="color: #888888; opacity: 0.8; ">Text</td> <td style="color: #888888; opacity: 0.7; ">Text</td> <td style="color: #888888; opacity: 0.6; ">Text</td> <td style="color: #888888; opacity: 0.5; ">Text</td> <td style="color: #888888; opacity: 0.4; ">Text</td> <td style="color: #888888; opacity: 0.3; ">Text</td> <td style="color: #888888; opacity: 0.2; ">Text</td> <td style="color: #888888; opacity: 0.1; ">Text</td> <td style="color: #888888; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">999999</td> <td style="color: #999999; opacity: 1.0; ">Text</td> <td style="color: #999999; opacity: 0.9; ">Text</td> <td style="color: #999999; opacity: 0.8; ">Text</td> <td style="color: #999999; opacity: 0.7; ">Text</td> <td style="color: #999999; opacity: 0.6; ">Text</td> <td style="color: #999999; opacity: 0.5; ">Text</td> <td style="color: #999999; opacity: 0.4; ">Text</td> <td style="color: #999999; opacity: 0.3; ">Text</td> <td style="color: #999999; opacity: 0.2; ">Text</td> <td style="color: #999999; opacity: 0.1; ">Text</td> <td style="color: #999999; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">AAAAAA</td> <td style="color: #AAAAAA; opacity: 1.0; ">Text</td> <td style="color: #AAAAAA; opacity: 0.9; ">Text</td> <td style="color: #AAAAAA; opacity: 0.8; ">Text</td> <td style="color: #AAAAAA; opacity: 0.7; ">Text</td> <td style="color: #AAAAAA; opacity: 0.6; ">Text</td> <td style="color: #AAAAAA; opacity: 0.5; ">Text</td> <td style="color: #AAAAAA; opacity: 0.4; ">Text</td> <td style="color: #AAAAAA; opacity: 0.3; ">Text</td> <td style="color: #AAAAAA; opacity: 0.2; ">Text</td> <td style="color: #AAAAAA; opacity: 0.1; ">Text</td> <td style="color: #AAAAAA; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">BBBBBB</td> <td style="color: #BBBBBB; opacity: 1.0; ">Text</td> <td style="color: #BBBBBB; opacity: 0.9; ">Text</td> <td style="color: #BBBBBB; opacity: 0.8; ">Text</td> <td style="color: #BBBBBB; opacity: 0.7; ">Text</td> <td style="color: #BBBBBB; opacity: 0.6; ">Text</td> <td style="color: #BBBBBB; opacity: 0.5; ">Text</td> <td style="color: #BBBBBB; opacity: 0.4; ">Text</td> <td style="color: #BBBBBB; opacity: 0.3; ">Text</td> <td style="color: #BBBBBB; opacity: 0.2; ">Text</td> <td style="color: #BBBBBB; opacity: 0.1; ">Text</td> <td style="color: #BBBBBB; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">CCCCCC</td> <td style="color: #CCCCCC; opacity: 1.0; ">Text</td> <td style="color: #CCCCCC; opacity: 0.9; ">Text</td> <td style="color: #CCCCCC; opacity: 0.8; ">Text</td> <td style="color: #CCCCCC; opacity: 0.7; ">Text</td> <td style="color: #CCCCCC; opacity: 0.6; ">Text</td> <td style="color: #CCCCCC; opacity: 0.5; ">Text</td> <td style="color: #CCCCCC; opacity: 0.4; ">Text</td> <td style="color: #CCCCCC; opacity: 0.3; ">Text</td> <td style="color: #CCCCCC; opacity: 0.2; ">Text</td> <td style="color: #CCCCCC; opacity: 0.1; ">Text</td> <td style="color: #CCCCCC; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">DDDDDD</td> <td style="color: #DDDDDD; opacity: 1.0; ">Text</td> <td style="color: #DDDDDD; opacity: 0.9; ">Text</td> <td style="color: #DDDDDD; opacity: 0.8; ">Text</td> <td style="color: #DDDDDD; opacity: 0.7; ">Text</td> <td style="color: #DDDDDD; opacity: 0.6; ">Text</td> <td style="color: #DDDDDD; opacity: 0.5; ">Text</td> <td style="color: #DDDDDD; opacity: 0.4; ">Text</td> <td style="color: #DDDDDD; opacity: 0.3; ">Text</td> <td style="color: #DDDDDD; opacity: 0.2; ">Text</td> <td style="color: #DDDDDD; opacity: 0.1; ">Text</td> <td style="color: #DDDDDD; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">EEEEEE</td> <td style="color: #EEEEEE; opacity: 1.0; ">Text</td> <td style="color: #EEEEEE; opacity: 0.9; ">Text</td> <td style="color: #EEEEEE; opacity: 0.8; ">Text</td> <td style="color: #EEEEEE; opacity: 0.7; ">Text</td> <td style="color: #EEEEEE; opacity: 0.6; ">Text</td> <td style="color: #EEEEEE; opacity: 0.5; ">Text</td> <td style="color: #EEEEEE; opacity: 0.4; ">Text</td> <td style="color: #EEEEEE; opacity: 0.3; ">Text</td> <td style="color: #EEEEEE; opacity: 0.2; ">Text</td> <td style="color: #EEEEEE; opacity: 0.1; ">Text</td> <td style="color: #EEEEEE; opacity: 0.0; ">Text</td> </tr> <tr> <td class="color-title">FFFFFF</td> <td style="color: #FFFFFF; opacity: 1.0; ">Text</td> <td style="color: #FFFFFF; opacity: 0.9; ">Text</td> <td style="color: #FFFFFF; opacity: 0.8; ">Text</td> <td style="color: #FFFFFF; opacity: 0.7; ">Text</td> <td style="color: #FFFFFF; opacity: 0.6; ">Text</td> <td style="color: #FFFFFF; opacity: 0.5; ">Text</td> <td style="color: #FFFFFF; opacity: 0.4; ">Text</td> <td style="color: #FFFFFF; opacity: 0.3; ">Text</td> <td style="color: #FFFFFF; opacity: 0.2; ">Text</td> <td style="color: #FFFFFF; opacity: 0.1; ">Text</td> <td style="color: #FFFFFF; opacity: 0.0; ">Text</td> </tr> </table>
Sounds like bug 363861. If the testcases and screenshots there show the issue you are seeing, this is most likely a duplicate of that bug.
Version: unspecified → 3.6 Branch
Severity: normal → S3
You need to log in before you can comment on or make changes to this bug.