72195 - Reflow and auto margin-left causes a wrong position

Status: RESOLVED INVALID

(Core :: Layout: Block and Inline, defect)

Description

[wata7]

From Bugzilla Helper:
User-Agent: Mozilla/5.0 (X11; U; Linux 2.2.12 i386; en-US; m18) Gecko/20010131
Netscape6/6.01
BuildID:

When a block element has auto margin-left and other horizontal lengths
(padding-left/right, width and margin-right) are specified values, if the
sum of padding, width and margin-right is larger than the containing block
width, margin-left should be minus length.  But Mozilla won't.

Reproducible: Always
Steps to Reproduce:
Browse the following HTML.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML><HEAD><TITLE>test</TITLE>
<STYLE TYPE="text/css">
BODY {
  margin-left: 25%;
  margin-right: 25%;
}
P {
  padding: 10%;
  width: 120%;
  background-color: yellow;
}
P.x {
  margin-left: auto;
  margin-right: 0%;
}
P.y {
  margin-left: -40%;
  margin-right: auto;
}
</STYLE></HEAD>
<BODY>
<P CLASS="x">test1
<P CLASS="y">test2
</BODY>
</HTML>


Actual Results:  P.x and P.y will cause different layout.  P.x will be reflowed
to right,
and P.y will be reflowed to left.  The position of P.x is wrong.


Expected Results:  P.x and P.y should cause the same layout.

(padding-left + width + padding-right + margin-right) for P.x is 140%.
Therefore, margin-left should be -40%.

Comment 1

[Keyser Sose]

Attachment: Testcase

Comment 2

[Keyser Sose]

Confirmed
Platform: PC
OS: Linux 2.2.17
Mozilla Build: 2001032108

Marking NEW.

Comment 3

[Pierre Saslawsky]

See http://www.w3.org/TR/REC-CSS2/visudet.html#q6

    If the 'direction' property has the value 'ltr', the specified value of
    'margin-right' is ignored and the value is computed so as to make the
    equality true.

It means that 'margin-right' becomes -40%, not 'margin-left'.  Then the second 
rule applies and 'margin-left' becomes 0:

    If there is exactly one value specified as 'auto', its computed value
    follows from the equality. 

Closed as Invalid.

Comment 4

[wata7]

> It means that 'margin-right' becomes -40%, not 'margin-left'.  Then the
> second rule applies and 'margin-left' becomes 0:

  I don't think so.  See http://www.w3.org/TR/REC-CSS2/visudet.html#q6
more carefully.

   (If the border style is 'none', use '0' as the border width.) If all
   of the above have a specified value other than 'auto', the values are
   said to be "over-constrained" and one of the computed values will have
   to be different from its specified value. If the 'direction' property
   has the value 'ltr', the specified value of 'margin-right' is ignored
   and the value is computed so as to make the equality true.

This rule is applied only when all of values are not 'auto'.  However, in
this case, 'margin-left' is specified as 'auto'.  Therefore this rule must
not applied.  Then the following rule will be applied.

   If there is exactly one value specified as 'auto', its computed value
   follows from the equality.

I think that 'margin-left' should become -40%.  Is that wrong?

Reopened.

Comment 5

[Pierre Saslawsky]

My mistake.  Reassigned to attinasi and CCd dbaron who worked on block layout.  

Comment 6

[Boris Zbarsky [:bzbarsky]]

.

Comment 7

[Boris Zbarsky [:bzbarsky]]

It looks like the calculations in nsBlockReflowContext::AlignBlockHorizontally
are pretty bogus...

Comment 8

[Dick Boogaers]

I'm not sure if this is the same error. Browse to http://z123.org. It contains
buttons to change the pages style using CSS. After clicking number three, right
margins are not honoured any more.

I noticed that IE 6 uses much wider right margin for page 1 too.

Comment 9

[Harald Becker]

margin-left does position relativ from default position and not from zero
Example:
Style defintion:
UL {margin-left:25px}

html:
<ul>
<li>test</li>
</ul>

should position test 25 pixel indented, but mozilla does indented about 50 pixel!

Comment 10

[David Baron :dbaron: (⌚️UTC-5, no longer working on Mozilla)]

comment 9 is not related to this bug, but rather to
http://devedge.netscape.com/viewsource/2002/list-indent/

Comment 11

[Aaron Johnson]

Attachment: Bug in margin-left: auto; margin-right: auto

I am not sure this is related or not, but the use of the CSS properties:
margin-left: auto; margin-right: auto;
which is the "official" way of centering block items, causes a noticeable shift
in Mozilla 1.5 if links within the block have the property of a:hover set. I
looked at Opera 7.11 and Konqueror 3.1.3 and no shift occurs.

Comment 12

[Aaron Johnson]

This is additional information related to comment #11:

The bug does not seem to appear unless the window is maximized (not just sized)
on a 1280x1024 screen. My user_agent string is Mozilla/5.0 (X11; U; Linux i686;
en-US; rv:1.5) Gecko/20031107 Debian/1.5-3. I am also using KDE 3.1.4 and
geramik. I also tested on a Windows NT 4.0 system with Mozilla 1.4 and 1024x768
resolution and it does not appear.

Comment 13

[Aaron Johnson]

More information about comment #11:

It looks like the bug occurs when the window is sized at various widths. When I
size it a one width, it does not occur. When I size the width of the browser
window a few pixels smaller or greater, the bug occurs. I do not have the time
to check whether it occurs at even or odd window widths, but it is something I
will look into at a later time. I also noticed that the shift occurs on other
pages on a:hover tags, but I guess I didn't notice them until the borders on the
side of a box of my own page were covered in the shift.

Comment 14

[Eli Friedman]

The current rendering of the testcase is correct according to CSS 2.1 (http://www.w3.org/TR/CSS21/visudet.html#blockwidth):

"If 'width' is not 'auto' and 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + scrollbar width (if any) (plus any of 'margin-left' or 'margin-right' that are not 'auto') is larger than the width of the containing block, then any 'auto' values for 'margin-left' or 'margin-right' are, for the following rules, treated as zero."

(Note that this text is new in CSS2.1.)

According to these rules, the "auto" margin-left gets turned into 0, and since the situation is over-constrained, the margin-right changes to accommodate.  Therefore, this bug is invalid unless the spec changes.

Comment 15

[Boris Zbarsky [:bzbarsky]]

Should write an automated test case.