Bug 156798 - Abspos flex item static position
Summary: Abspos flex item static position
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: WebKit Nightly Build
Hardware: All iOS 9.3
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2016-04-20 11:01 PDT by Greg Whitworth
Modified: 2016-11-02 15:07 PDT (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Greg Whitworth 2016-04-20 11:01:06 PDT
The specification[1] was updated over a year ago to change the static position of an abspos item. To test this:

1. Open http://jsbin.com/xowulasica/edit?html,css,output
2. You should only see a blue square

Expected
---------------
You should only see a blue square

Actual
---------------
You see a blue and green square

[1] https://drafts.csswg.org/css-flexbox/#abspos-items
Comment 1 Radar WebKit Bug Importer 2016-06-09 12:26:25 PDT
<rdar://problem/26724633>
Comment 2 Daniel Holbert 2016-11-02 11:34:58 PDT
Note: the testcase/expectations in comment 0 do not quite match the latest spec text here. Currently, the CSS Align spec basically says that the flex container's "align-items" value should be ignored for abspos children.  (And Greg's original testcase here depends on it being honored for abspos children.)  See notes on https://bugs.chromium.org/p/chromium/issues/detail?id=661662 for more details.


Here's a modified version of the original testcase, which uses "align-self: center" on all children, rather than "align-items: center" on the parent. This should still be a valid testcase for this bug.
 http://jsbin.com/yudabaxiyo/1/edit?html,css,output

Expected
---------------
You should only see a blue square
Comment 3 Daniel Holbert 2016-11-02 15:07:31 PDT
(In reply to comment #2)
> This should still be a valid testcase for this bug.
>  http://jsbin.com/yudabaxiyo/1/edit?html,css,output

FWIW, this testcase gives "expected" results in these recent versions of all other major web engines:
 * Chrome 54 (latest release)
 * Edge 14 (latest release)
 * Firefox Nightly 52 (2016-11-02), where this was only fixed in the past few days.