932506 - CSS Render bug in Firefox 24.0 Mac OS X with input type=checkbox

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Douglas Moyes]

Attachment: Screen Shot 2013-10-29 at 2.31.15 PM.png

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_5) AppleWebKit/536.30.1 (KHTML, like Gecko) Version/6.0.5 Safari/536.30.1

Steps to reproduce:

default.css:
table.serverlist td input {
        border:none;
        width:400px;
}
.cbcell {
    text-align: center;
    width: 60px;
}

HTML:	

<table class='form serverlist' id="formtable">
	<caption>Edit Active/Inactive Server List</caption>
	<tr> <th>Server</th>
	<th class='cbcell'>Active</th><th class='cbcell'>Delete</th></tr>
	<tr>
	<td><input type='text' name='Srv:0' value='x.x.x.x'></td>
	<td><input type='checkbox' value='T' name='Act:0' checked class='cbcell'></td>
	<td><input type='checkbox' value='T' name='Del:0' class='cbcell'></td>
</tr>
<tr>
	<td><input type='text' name='Srv:1' value='x.x.x.x'></td>
	<td><input type='checkbox' value='T' name='Act:1'  class='cbcell'></td>
	<td><input type='checkbox' value='T' name='Del:1' class='cbcell'></td>
</tr>
<tr>
	<td><input type='text' name='Srv:2' value=''></td>
	<td><input type='checkbox' value='T' name='Act:2'  class='cbcell'></td>
	<td><input type='checkbox' value='T' name='Del:2' class='cbcell'></td>
</tr>
</table>


Actual results:

In all browsers, including the Linux 24.0 version of Firefox, the check box displays within the table boundaries, however, on the Mac version of Firefox 24, the checkbox is rendered outside of the table boundaries, and centered in a box that's 400px wide.

This is resolved if "table.serverlist td input" css definition is changed to "table.serverlist td input[type=text]". No other browser renders this code in that way, neither does Firefox for other platforms-- just Firefox for Mac OS X.


Expected results:

I'd expect Firefox to render the same exact way on the Mac as it does Linux.  It was a nice assumption to make.

Attached is the actual render, with the checkbox input field highlighted with Firebug.

Comment 1

[Boris Zbarsky [:bzbarsky]]

The screenshot definitely doesn't match the CSS pasted in the bug, and I see the same rendering in Chrome and Firefox on OSX with the HTML/CSS from comment 0.

Douglas, can you please attach the actual page in question, or link to it?

Comment 2

[Douglas Moyes]

Attachment: default.css (short version)

Can't give the full CSS, but here's part of it, which still has the same effect.

Comment 3

[Douglas Moyes]

Attachment: test.html

Here's and HTML page that behaves the same way

Comment 4

[Mats Palmgren (inactive)]

Attachment: Testcase #1

Hmm, we render this differently on Linux and OSX...

Comment 5

[Mats Palmgren (inactive)]

Attachment: Testcase #2

If I replace the checkboxes with a couple of generic inline-blocks
then we render it the same on Linux and OSX.  Given the specified
width:400px I suspect this is the correct rendering per spec.

I'm guessing the bug in Testcase #1 is that we ignore a specified width
on checkboxes on Linux (GTK) for some reason.

Comment 6

[Boris Zbarsky [:bzbarsky]]

Attachment: Testcase showing what's really going on

So the key ingredients for the visual effect are:

1)  A fixed-width fixed-layout table.
2)  Cells that are too narrow for the input inside.
3)  A checkbox input whose width has been explicitly increased by the page's 
    CSS.

but the real question (which this testcase tests after the <hr>) is: how should a checkbox with a manually set CSS width render?  On Mac we seem to center it in the box defined by the manually set width.  Chrome on Mac left-aligns the checkbox drawing in the 400px box.  Mats, what happens on Linux?

Comment 7

[Mats Palmgren (inactive)]

Attachment: Screenshot on Linux64 Nightly

Comment 8

[Mats Palmgren (inactive)]

Chrome, IE10, Opera(Presto) all agree with our OSX rendering, so I think this bug is
invalid and we should file a new bug about honoring the specified width (and height?)
on checkboxes also on Linux.

Comment 9

[Boris Zbarsky [:bzbarsky]]

The Linux behavior there certainly seems like a bug.

But Chrome on Mac doesn't agree with our OSX rendering, like I said in comment 6: The width is the same but the alignment is different....

Presto _does_ agree with our rendering on OSX.

I just checked IE10 on Windows, and you're right.  It agrees with our Mac rendering on my testcase.  Same thing for the IE11 preview.

Douglas, when you said "all browsers" in comment 0, did you mean "Chrome and Safari"?

Comment 10

[Mats Palmgren (inactive)]

The Chrome and Opera I tested were on Linux.  Chrome (32) on Linux renders it differently
(centered checkboxes) than the Chrome (32) on OSX (left-aligned checkboxes).

Comment 11

[Boris Zbarsky [:bzbarsky]]

OK.  I just checked Chrome on Windows, and it matches what you describe; centered checkboxes.

Given that, I agree that the rendering on Mac is correct and we should just fix the Linux sizing bogosity....

Comment 12

[Douglas Moyes]

Failure to read full CSS.

cbcell is assigned as a CSS class to each checkbox, which should set the width to 60px (and does so in Chromium, Safari (okay it ignores width completely), and non-Mac Firefox).

Firefox on the mac, for whatever reason, is keeping the 400px attribute, and ignoring the 60px attribute.

(In reply to Mats Palmgren (:mats) from comment #5)
> Created attachment 825044 [details]
> Testcase #2
> 
> If I replace the checkboxes with a couple of generic inline-blocks
> then we render it the same on Linux and OSX.  Given the specified
> width:400px I suspect this is the correct rendering per spec.
> 
> I'm guessing the bug in Testcase #1 is that we ignore a specified width
> on checkboxes on Linux (GTK) for some reason.

Comment 13

[Mats Palmgren (inactive)]

table.serverlist td input {
	border:none;
	width:400px;
}

has higher specificity than

.cbcell {
	width:60px;
	text-align:center;
}

Comment 14

[Mats Palmgren (inactive)]

(I filed bug 933260 on fixing our GTK rendering to match OSX.)

Comment 15

[Boris Zbarsky [:bzbarsky]]

Douglas, comment 13 is right.  There are two styles on the page that assign a width to the input, and the 400px one has higher specificity.

If you just add an outline to the inputs, you'll see that Chrome on Mac is in fact giving them a 400px width; it's just putting the little checkbox drawing all the way on the left, not centered.  I strongly suggest also testing in Chrome/Safari on Linux and Windows, since they behave differently there than on Mac for this testcase.