[Webkit-unassigned] [Bug 26396] New: Percentage top value on position:relative descendant not resolved correctly if containing block height is not specified explicitly

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=26396

           Summary: Percentage top value on position:relative descendant not
                    resolved correctly if containing block height is not
                    specified explicitly
           Product: WebKit
           Version: 528+ (Nightly build)
          Platform: PC
               URL: http://www.gtalbot.org/BrowserBugsSection/MSIE7Bugs/Perc
                    entualRelativePositioning.html
        OS/Version: Windows XP
            Status: UNCONFIRMED
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
        AssignedTo: webkit-unassigned at lists.webkit.org
        ReportedBy: browserbugs at gtalbot.org


This bug spun from comment #14 of bug 14749 and also (related) from bug 15930.

Steps to reproduce
------------------
Load provided URL

Expected results
----------------
The 400px wide by 200px tall red background box should appear toward the top of
the document content box, very close to the top of the document content box (as
if it had been defined as position: static)

Actual results in Safari 4.0 build 530.17
-----------------------------------------
The 400px wide by 200px tall red background box appears toward the middle of
the browser window viewport height

Explanation
-----------
When the height of the containing block of a relatively positioned element
(child or descendant) is auto (i.e., it depends on content height), then top:
<percentage>; must be resolved as top: auto;.

References
----------

 * "Percentages: refer to height of containing block" 
coming from CSS 2.1, Section 9.3.2 Box offsets: 'top', 'right', 'bottom',
'left'
http://www.w3.org/TR/CSS21/visuren.html#position-props

  * Percentage values for the 'top' property are relative to the containing
block.
  "if the element's position is 'relative' or 'static', the containing block is
formed by the content edge of the nearest block-level, table cell or
inline-block ancestor box." 
coming from CSS 2.1, Section 10.1 Definition of "containing block"
http://www.w3.org/TR/CSS21/visudet.html#containing-block-details

    * "If the height of the containing block is not specified explicitly (i.e.,
it depends on content height), and this element is not absolutely positioned,
[then] the [height] value computes to 'auto'." 
coming from CSS 2.1, Section 10.5 Content height: the 'height' property
http://www.w3.org/TR/CSS21/visudet.html#the-height-property


An important sentence has been added to the CSS 2.1, section 10.5 recently
which makes it possible to work around some difficulties in specific
CSS-webpage-templates:
"A percentage height on the root element is relative to the initial containing
block."
And the initial containing block "has the dimensions of the viewport and is
anchored at the canvas origin". So, defining 
html {height: 100%;}
is the way I worked around distinct difficulties in the webpages
http://www.gtalbot.org/BrowserBugsSection/Safari3Bugs/PositionRelativeTopNegativePercentage.html
and
http://www.gtalbot.org/BrowserBugsSection/Safari3Bugs/LiquidScrollerTabMenu.html

When the height of containing block of a relatively positioned with top:
percentage value is not specified explicitly (its height is/will be defined by
its intrinsec content, once its intrinsec content has been rendered/loaded),
then top: percentage value should be resolved as top: auto.

The spec makes sense (performance-wise) also in that it prevents browsers from
making lots of computation and re-rendering, reflowing of document content.

height: auto makes the height entirely dependent and defined by the intrinsec
content. 
height: 100% for the root element (topmost containing block in the document
containment hierarchy) refers to the initial containing
block's height which is defined by the browser window viewport height. The
former can not be computed in advance; the latter can be computed in advance.

regards, Gérard


-- 
Configure bugmail: https://bugs.webkit.org/userprefs.cgi?tab=email
------- You are receiving this mail because: -------
You are the assignee for the bug, or are watching the assignee.