196981 - Formating Model miscalculation?

Status: VERIFIED INVALID

(Core :: Layout, defect)

Description

[Daniel]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3b) Gecko/20030210
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.3b) Gecko/20030210

Page in URL has a layer with a boarder defined for a paragraph and anchor tag.
Both use same style.

.linkboarder {
	width: 100%;
	border-top: 3px solid #FF0000;
	border-right: 3px solid #FF0000;
	border-bottom: 3px solid #FF0000;
	border-left: 3px solid #FF0000;
}

Paragraph element extends past region of layer.

Anchor element ignors the width attribute and only encases the text with the
boarder.



Reproducible: Always

Steps to Reproduce:
1. Create an absolute layer
2. Creat style that has a border with a width of 100%
.linkborder {
	width: 100%;
	border-top: 3px solid #FF0000;
	border-right: 3px solid #FF0000;
	border-bottom: 3px solid #FF0000;
	border-left: 3px solid #FF0000;
}
3. Set style to an element (<p> tag)

Actual Results:  
Border will go out of the bounds of the layer by the number of pixels designated
for the border on the right and left side.

If style is used on a link element (<a>) the width attribute is ignored.

Expected Results:  
Border of element inside of a layer should be constrained to the size of the
layer's content area  when a 100% width is used.

Width attribute should be implemented in the anchor tag.

As far as I can tell by looking at the CSS1 recommendations the content of the
"content" area should remain inside the "content" area and not extend out into
the border or margin. I would also think the width attribute should override the
normal tag specifications.

This should probably be two seperate reports. One for the out of bounds border
and one for the anchor.

Comment 1

[Daniel]

Attachment: Example Page with border style

Comment 2

[Christopher Hoess (gone)]

Anchors are inline elements, so the width property does not apply to them. The
width of the paragraph is set to 100%; since its containing block is the div
(layer), the width will be 435 px. When the borders are added, of course, the
width of the content and borders together is 441 px, and it overflows the div.
Also, please read the CSS2 spec rather than CSS1, as Mozilla is (trying to be) a
CSS2 UA. INVALID.

Comment 3

[Boris Zbarsky [:bzbarsky]]

verified.

Comment 4

[Daniel]

inline anchor element aside (your correct I looked the wrong area and found if
you specify it as display: block, I get the correct effect) shouldn't the p tag
still conform to the 

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right'
+ 'border-right-width' + 'margin-right' = width of containing block  (10.3.3
Block-level, non-replaced elements in normal flow, for REC-CSS2). Or does this
fall under a different area?

10.1 Definition of "containing block" (CB) states that the p tag's CB is defined
by the div.

My understanding is that the <p> tag's total CB should fit with in the
containment area of the previous element (div tag in this case). Is this
incorrect? Should <p>'s CB width be the same size as <div>'s content width? 
IE:
div_width = p_containment_block = p_'margin-left' + p_'border-left-width' +
p_'padding-left' + p_'width' + p_'padding-right' + p_'border-right-width' +
p_'margin-right'

Or should it be that div_width = p_width? If so then boarders and margines can
possible over flow.

Comment 5

[Boris Zbarsky [:bzbarsky]]

> My understanding is that the <p> tag's total CB should fit with in the
> containment area of the previous element (div tag in this case). Is this
> incorrect?

It is incorrect.  If you go through the algorithm for widths step by step, you
will get the following results:

1)  width:100% means <p> width is equal to <div> width.
2)  Paddings and borders are set.
3)  The right margin becomes negative to satisfy the width constraints.