<html>
    <head>
      <base href="https://bugs.webkit.org/">
    </head>
    <body><table border="1" cellspacing="0" cellpadding="8">
        <tr>
          <th>Bug ID</th>
          <td><a class="bz_bug_link 
          bz_status_NEW "
   title="NEW - WebKit uses wrong baseline for empty inline-flex containers, when doing `vertical-align:baseline` alignment"
   href="https://bugs.webkit.org/show_bug.cgi?id=196312">196312</a>
          </td>
        </tr>

        <tr>
          <th>Summary</th>
          <td>WebKit uses wrong baseline for empty inline-flex containers, when doing `vertical-align:baseline` alignment
          </td>
        </tr>

        <tr>
          <th>Product</th>
          <td>WebKit
          </td>
        </tr>

        <tr>
          <th>Version</th>
          <td>Safari 12
          </td>
        </tr>

        <tr>
          <th>Hardware</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>URL</th>
          <td>https://jsfiddle.net/dholbert/y6xef59s/
          </td>
        </tr>

        <tr>
          <th>OS</th>
          <td>Unspecified
          </td>
        </tr>

        <tr>
          <th>Status</th>
          <td>NEW
          </td>
        </tr>

        <tr>
          <th>Severity</th>
          <td>Normal
          </td>
        </tr>

        <tr>
          <th>Priority</th>
          <td>P2
          </td>
        </tr>

        <tr>
          <th>Component</th>
          <td>Layout and Rendering
          </td>
        </tr>

        <tr>
          <th>Assignee</th>
          <td>webkit-unassigned@lists.webkit.org
          </td>
        </tr>

        <tr>
          <th>Reporter</th>
          <td>dholbert@mozilla.com
          </td>
        </tr>

        <tr>
          <th>CC</th>
          <td>bfulgham@webkit.org, simon.fraser@apple.com, zalan@apple.com
          </td>
        </tr></table>
      <p>
        <div>
        <pre>(Note: there's a Blink version of this bug at <a href="https://bugs.chromium.org/p/chromium/issues/detail?id=946669">https://bugs.chromium.org/p/chromium/issues/detail?id=946669</a> )

STR:
(1) View this fiddle: <a href="https://jsfiddle.net/dholbert/y6xef59s/">https://jsfiddle.net/dholbert/y6xef59s/</a>

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.
<a href="https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align">https://drafts.csswg.org/css2/visudet.html#propdef-vertical-align</a>

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.
<a href="https://drafts.csswg.org/css-flexbox-1/#flex-baselines">https://drafts.csswg.org/css-flexbox-1/#flex-baselines</a></pre>
        </div>
      </p>


      <hr>
      <span>You are receiving this mail because:</span>

      <ul>
          <li>You are the assignee for the bug.</li>
      </ul>
    </body>
</html>