178330 - subpixel fractions of size result in strange rendering

Status: RESOLVED DUPLICATE of bug 63336

(Core :: CSS Parsing and Computation, defect, P3)

Description

[Pavol Vaskovic]

I've ran to this problem while I was doing pure CSS design. I've tryed to avois
pixel units, so I used fraction of ems for padding values. Result was quite
unsatifying: http://pali.sk/test/cctn-test.html looks like
http://pali.sk/test/bad-lines.gif

I've also created testcase, but this time I've used pixel fractions. Some values
resulted in top and bottom borders overlaping, some result in 1 pixel *margin*!
between borders. I know that pixel fractions are almost meaningless, but other
relative units surely result to such values... 

I think that these values should be rounded to pixels before drawing on screen.
This is behavior used in Opera and IE.

Comment 1

[Pavol Vaskovic]

Attachment: testcase using fractions in padding and margin values

Comment 2

[Boris Zbarsky [:bzbarsky]]

roc, is this dependent on your units bug or an outright dup?

Comment 3

[Robert O'Callahan (:roc) (email my personal email if necessary)]

I'm not sure.

My units proposal won't really 'fix' this. This is asking us to round everything
to pixels before we do layout.

Comment 4

[Niklas Dougherty]

All lengths are real numbers in the CSS spec, so rounding should only be made
after totals calculations. Now, there is a bug filed for this, I believe.

<table style="width:30px; margin: 1.33px; padding: 1.33px; border: 0.33px solid
red">

Totals here is 30 + 2.66 + 2.66 + 0.66 = 35.98, yielding a rounded value of 36
for the containing block. Actual width of elements: table: 30, margin: 2x1,
padding: 2x1, border: 2x1.

If rounding before totals calculation, border would be 0, table 30 and the rest
2x1, giving a containing block of 34px.

Mozilla does render this as a 30px wide table with a 1 px border and a 1 px
margin, ignoring the 1 px padding, giving a total of 34px. IE 5 Mac doesn't
render the border at all.

Comment 5

[Niklas Dougherty]

Attachment: test case (15 consecutive divs)

In this test case, each div has a margin, padding and border of 0.33px. Total
is thus 15x3x2x0.33=29.7px. Add to that an enclosing div with 5px width and
0.33px padding (margin outside border ignored here), adding 2x5.33 = 10.66.
Grand total is 40.36, rounded to 40. Mozilla renders this at 37px height, which
is slightly wrong. But then again, look at how IE 5 Mac renders this: 10px
total.

Comment 6

[Eric A. Meyer (dead account)]

Is this a duplicate of bug 176237?

Comment 7

[Robert O'Callahan (:roc) (email my personal email if necessary)]

*** This bug has been marked as a duplicate of 63336 ***