[Webkit-unassigned] [Bug 196312] New: WebKit uses wrong baseline for empty inline-flex containers, when doing `vertical-align:baseline` alignment

bugzilla-daemon at webkit.org bugzilla-daemon at webkit.org
Wed Mar 27 13:11:07 PDT 2019


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

            Bug ID: 196312
           Summary: WebKit uses wrong baseline for empty inline-flex
                    containers, when doing `vertical-align:baseline`
                    alignment
           Product: WebKit
           Version: Safari 12
          Hardware: Unspecified
               URL: https://jsfiddle.net/dholbert/y6xef59s/
                OS: Unspecified
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: dholbert at mozilla.com
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

(Note: there's a Blink version of this bug at https://bugs.chromium.org/p/chromium/issues/detail?id=946669 )

STR:
(1) View this fiddle: https://jsfiddle.net/dholbert/y6xef59s/

EXPECTED RESULTS:
The four boxes should all look the same, with "abc" aligned consistently at the margin-bottom of the black-bordered area (it should be aligned 10px below the black border).

ACTUAL RESULTS:
"abc" is aligned further up, in the second case (for inline-flex). It looks like the bottom of the black-bordered-area's content-box is being used for baseline-alignment, rather than the bottom of its margin-box.



BROWSER COMPARISON:
Firefox 66 and Edge 18 both give "expected results"
Safari Safari 12 gives "actual results"
Chrome gives a more-severe version of "actual results" -- they have "abc" misaligned in the 3rd box as well (the inline-grid).


SPEC NOTES/JUSTIFICATION:
The alignment in play here is `vertical-align:baseline`, which is specced as follows (emphasis added)
 # [...] If the box does not have a baseline,
 # align the **bottom margin edge**
 # with the parent's baseline.
https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align

That should apply here, because an empty flex container does not have a baseline, as noted here:

 # [...] if the flex container has at least one item [...]
 # Otherwise, the flex container **has no first/last main-axis baseline set**
 # and one is synthesized if needed according to the rules of its alignment context.
https://drafts.csswg.org/css-flexbox-1/#flex-baselines

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20190327/0d36ccec/attachment.html>


More information about the webkit-unassigned mailing list