766530 - Absolutely positioned element with 100% height doesn't grow to height of multiline inline relatively positioned parent

Status: RESOLVED DUPLICATE of bug 489100

(Core :: Layout, defect)

Description

[Pat O'Callaghan]

I wanted to create a step effect with some coloured text but also add some space to the left of the "step" text.

WHAT I DID
===========
To do this I made a h2 tag (in blue) "display: inline" and declared a :before pseudo-element (in red) "height: 100%" and absolutely positioned it to the left and top of the h2.

WHAT HAPPENED
=============
The pseudo-element doesn't grow to be 100% height of the wrapped multi-line text. Instead it only grows the height of the first line. This works as expected in the latest Chrome, IE7,8,9 and Opera 12.

See issue reproduced here 
https://dl.dropbox.com/u/5894212/pseudo-test.html

WHAT SHOULD HAVE HAPPENED
============================
The red pseudo-element should grow to be the same height as the blue multi-line text.

Comment 1

[Boris Zbarsky [:bzbarsky]]

This has nothing to do with pseudo-elements; it's purely a matter of sizing for an abs pos child of a rel pos inline...

Comment 2

[Boris Zbarsky [:bzbarsky]]

This is basically the same issue as bug 489100: the containing block is just the first box of the inline...