Open Bug 595056 Opened 13 years ago Updated 6 months 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.