503289 - Absolutely positioned kids of a relatively positioned button are clipped by the button

Status: RESOLVED DUPLICATE of bug 491180

(Core :: Layout: Form Controls, defect)

Description

[Ilya]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5 (.NET CLR 3.5.30729)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1) Gecko/20090624 Firefox/3.5 (.NET CLR 3.5.30729)

When a BUTTON element has 'position:relative' and something is absolutely positioned inside it, the 'top' property of this positioned child is calculated not from the top edge of the button (as expected), but from its vertical center. Also, if the positioned element exceeds the button's area, it's visually cut by the button's edge even if it has 'overflow:visible' (but still affects the height of the outline rectangle when the button is clicked).

Reproducible: Always

Steps to Reproduce:
1. Create a HTML page with a button and some element inside it styled to be positioned absolutely, e.g.
  <style>
button { width: 200px; height: 60px; border: 0; padding: 0; position: relative; overflow: visible; }
button span { position: absolute; top: 0; left: 0; background: #fdd; padding: 10px; }
 /* fix for another bug, https://bugzilla.mozilla.org/show_bug.cgi?id=140562#c8 */
button::-moz-focus-inner { padding:0; border:0; }
button:focus { outline: 1px dotted; }
  </style>
  <p><button type="button"><span>111</span></button></p>
(link to example page is specified above)

2. Open this page with Firefox
Actual Results:  
The positioned SPAN is located below the button's vertical center

Expected Results:  
The positioned SPAN should be located at the button's top edge (as the same code is rendered by other browsers like Opera 9.63, Google Chrome 2, Safari 4 and MSIE 8).

Comment 1

[u88484]

Can you please attach an html file here with the code to reproduce the bug?

Comment 2

[Ilya]

Attachment: test case

Sample HTML+CSS to demonstrate the problem

Comment 3

[u88484]

Also, is this a regression from Firefox 3.0.x?

Comment 4

[Ilya]

Attachment: test case

demo of difference between positioning in BUTTON and DIV elements with the same CSS code

Comment 5

[Ilya]

It's not a regression, Firefox 3.5 and Firefox 3.0.11 behave the same in this way. Firefox 2.0.20 renders it a bit different — the top coordinate also calculates from vertical center, but the exceeding part of the positioned element isn't cut. Firefox 3.6a1pre (Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2a1pre) Gecko/20090706 Minefield/3.6a1pre) behaves the same way as 3.0/3.5

Comment 6

[Boris Zbarsky [:bzbarsky]]

The vertical center thing is a duplicate of bug 437722. Re-summarizing this bug to focus on the clipping issue.

The thing is, web pages commonly have overflow:visible buttons with overflowing text and expect the text to be clipped.  roc, can we have that happen while not clipping abs pos descendants?  And would we want to?

Comment 7

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

(In reply to comment #6)
> The thing is, web pages commonly have overflow:visible buttons with overflowing
> text and expect the text to be clipped.  roc, can we have that happen while not
> clipping abs pos descendants?

The call to OverflowClip from nsHTMLButtonControlFrame::BuildDisplayList would need to take an extra parameter to specify this quirky behaviour (actually it should probably just take a flags word), but it's easy.

> And would we want to?

If other browsers consistently don't clip abs-pos descendants, we should follow.

Comment 8

[Boris Zbarsky [:bzbarsky]]

Ah, the clipping thing is a duplicate of bug