Bug 54613

Summary: percentage based margin-top for an absolute positioned element is incorrectly computed based on the height of the viewport.
Product: WebKit Reporter: Philippe Wittenbergh <phiw2>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Normal CC: betravis, drophierjespam, paroga
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
Attachments:
Description Flags
test case
none
test case 2
none
test case 3
none
This clearly shows percentage as being calculated as 50% of height of parent, not width of parent. none

Philippe Wittenbergh
Reported 2011-02-16 20:56:51 PST
Created attachment 82750 [details] test case An absolute positioned element whose containing block is the viewport (initial containing block) has percentages for its margin-top computed based on the height of the viewport (instead of the width). Css 2.1:8.3 is formal in specifying that percentages for margin (and padding) are computed based on the *width* of the containing block. http://www.w3.org/TR/CSS21/box.html#propdef-margin In the testcase, the div has a 5% margin-top. Widening or narrowing the window horizontally doesn’t change the position of the block. Gecko and Opera behave correctly.
Attachments
test case (478 bytes, text/html)
2011-02-16 20:56 PST, Philippe Wittenbergh 		no flags
Details
test case 2 (541 bytes, text/html)
2011-02-16 21:29 PST, Philippe Wittenbergh 		no flags
Details
test case 3 (609 bytes, text/html)
2012-04-30 17:46 PDT, Alexandre 		no flags
Details
This clearly shows percentage as being calculated as 50% of height of parent, not width of parent. (309 bytes, text/html)
2012-08-03 07:30 PDT, Mark Rabjohn 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Philippe Wittenbergh
Comment 1 2011-02-16 21:29:18 PST
Created attachment 82755 [details] test case 2 There should be no red in this test case (resize window vertically…)
Patrick R. Gansterer
Comment 2 2011-02-19 08:52:09 PST
Reproduced with r79118.
Mattijs
Comment 3 2011-12-23 06:35:47 PST
I can confirm that this bug is still there. Tested on Safari 5.1.1 (6534.51.22) and Chrome 16.0.912.63
Alexandre
Comment 4 2012-04-30 17:46:11 PDT
Created attachment 139552 [details] test case 3
Alexandre
Comment 5 2012-04-30 17:50:12 PDT
Comment on attachment 139552 [details] test case 3 Tested on 30 April 2012 webkit night build on Mac OSX.
Mark Rabjohn
Comment 6 2012-08-03 07:30:35 PDT
Created attachment 156378 [details] This clearly shows percentage as being calculated as 50% of height of parent, not width of parent. This shows margin-top configured relative to parent element. On compliant browser, the green box is outside the red box. On Chrome and Safari, the green box is fully inside of the red box. This clearly shows percentage as being calculated as 50% of height of parent, not width of parent.
Bear Travis
Comment 7 2012-12-14 10:43:11 PST
I believe this has been fixed with bug 103246 and can be closed.
Philippe Wittenbergh
Comment 8 2012-12-14 17:07:18 PST
Yes this does work correctly now. Thanks! Tested with WebKit nightly @r137751, the attached test cases and my real world usage work as expected.
Note You need to log in before you can comment on or make changes to this bug.