969795 - Position bug when element has "position:absolute" and position ancestor is inline-level

Status: UNCONFIRMED

(Core :: Layout: Positioned, defect)

Description

[avajayam]

Attachment: Position bug of inline-level ancestor

User Agent: Mozilla/5.0 (Windows NT 6.1; rv:26.0) Gecko/20100101 Firefox/26.0 (Beta/Release)
Build ID: 20131205075310

Steps to reproduce:

When made a test(HTML and CSS below) to line box of W3 CSS2 "9.4.2 Inline formatting contexts" section [1], the result in Firefox did not same as in Chrome or MSIE. And I expect the top margin edge of No2 element will on the green line also, just like Chrome or MSIE display, so this maybe a bug. 
The No1 is reference and No3 is to show vertical-align can influence the top position.

<style>
.demo { padding:20px; background:#eee}
.demo div { width:20px; font-size:10px; border:#0f0 1px solid; float:left}
.demo div > span { line-height:50px; position:relative; background:#0f0}
.demo div > span span { border:#f0f 1px solid; background:#ff0; position:absolute; top:0}
</style>

<div class="demo">
    <div><span><span>1</span></span></div>
    <div><span><span>2</span></span></div>
    <div><span style="vertical-align:middle"><span>3</span></span></div>
</div>


[1] "Line boxes that contain no text, no preserved white space, no inline elements with non-zero margins, padding, or borders, and no other in-flow content (such as images, inline blocks or inline tables), and do not end with a preserved newline must be treated as zero-height line boxes for the purposes of determining the positions of any elements inside of them, and must be treated as not existing for any other purpose."




Actual results:

The top margin edge of No2 element is higher then its inline-level ancestor(over the green line) 


Expected results:

The top margin edge of No2 element is below its inline-level ancestor(on the green line)

Comment 1

[Mats Palmgren (inactive)]

Looking at what you pasted in comment 0 it seems 1 and 2 have the same markup and styles
so I suspect it's not what you tested since you said 1 is a reference and 2 shows the bug.
Also, the three boxes in your screenshot have the same text ("z"?) so it's obviously not
a screenshot of the test in comment 0.  Can you upload the actual HTML file that 
demonstrates the problem please?

Comment 2

[avajayam]

(In reply to Mats Palmgren (:mats) from comment #1)
> Looking at what you pasted in comment 0 it seems 1 and 2 have the same
> markup and styles
> so I suspect it's not what you tested since you said 1 is a reference and 2
> shows the bug.
> Also, the three boxes in your screenshot have the same text ("z"?) so it's
> obviously not
> a screenshot of the test in comment 0.  Can you upload the actual HTML file
> that 
> demonstrates the problem please?

Thanks to figure the wrong HTML. The three same "z" text in screenshot was carelessly replaced with "1 2 3" for more easier description and a more span wrap in No1 when wrote bug, please neglect the screenshot, right(actual) is below, and make a bin(http://jsbin.com/vinac/1).
<div class="demo">
    <div><span>1</span></div>
    <div><span><span>2</span></span></div>
    <div><span style="vertical-align:middle"><span>3</span></span></div>
</div>

Comment 3

[Mats Palmgren (inactive)]

Attachment: Reporter's testcase

Comment 4

[Mats Palmgren (inactive)]

Attachment: Testcase #2

Comment 5

[Mats Palmgren (inactive)]

Attachment: Testcase #3 (same as #2 but in quirks mode)

In Quirks mode we have the same layout as Chrome.

Comment 6

[avajayam]

Yeah, in QM, the containing block be formed seem by from content edge to padding's.

.demo div { width:20px; font-size:10px; border:#0f0 10px solid; float:left}
/* 10px border width, easily compare. */

Comment 7

[Karen Seo]

Attachment: same problem

Thanks from assithinsorb1977.