Text inside of an element with display: inline-block should flow with text outside of it. #13143

Permutatrix · 2016-08-31T20:26:46Z

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <span id="outer" style="border: 1px solid #000">
      Test 3
      <span id="inner" style="display: inline-block; width: 100px; height: 100px">XYZ</span>
    </span>
  </body>
</html>

Firefox:

Chromium:

Servo:

If #inner is set to overflow: hidden, Firefox and Chrome will match Servo in the placement of the text but will still render the full border, whereas Servo will cut it off, as reported in #13142.

nox · 2017-10-04T22:58:48Z

Better but still incorrect.

Permutatrix · 2017-10-04T23:17:33Z

That is a lot better. It seems the "XYZ" is shifted one pixel down.

When I change the border width, the vertical shift of the "XYZ" changes to match—removing the border eliminates the disparity.

notriddle added I-wrong A-layout/inline labels Sep 4, 2016

nox added the C-has-manual-testcase label Oct 4, 2017

servo / servo

Text inside of an element with display: inline-block should flow with text outside of it. #13143

Text inside of an element with display: inline-block should flow with text outside of it. #13143

Permutatrix commented Aug 31, 2016

nox commented Oct 4, 2017

Permutatrix commented Oct 4, 2017

servo / servo

Join GitHub today

Text inside of an element with display: inline-block should flow with text outside of it. #13143

Text inside of an element with display: inline-block should flow with text outside of it. #13143

Comments

Permutatrix commented Aug 31, 2016

nox commented Oct 4, 2017

Permutatrix commented Oct 4, 2017