Bug 234935 – Inline blocks that contain text with min-width, box-sizing: border-box incorrectly include the border in width calculation

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Oliver Byford]

Created attachment 448530 [details]
CodePen in Safari Technology Preview r137

Given a span that contains a single character, and the following CSS:

span {
  display: inline-block;
  box-sizing: border-box;
  min-width: 50px;
  min-height: 50px;
  border: 10px solid;
}

Expected result: The box should be 50px wide and 50px high.
Actual result: The box is 70px wide (because it includes the border width, as if using box-sizing: content-box) and 50px high.

If the box does not contain any text, the width is calculated correctly.

CodePen: https://codepen.io/36degrees/pen/GRMBpQE

Bisected using bisect-builds -s 285788 -e 287707 --sanity-check

Works: r286120
Fails: r286121
https://trac.webkit.org/r286121

[Oliver Byford]

Created attachment 448531 [details]
CodePen in Safari 15.1 (17612.2.9.1.20)

[Oliver Byford]

Created attachment 448532 [details]
CodePen in Chrome 96

[Radar WebKit Bug Importer]

<rdar://problem/87217423>

[alan]

oh you bisected it, awesome!!!
Will fix it shortly.

[Radar WebKit Bug Importer]

<rdar://problem/87217516>

[Alexey Proskuryakov]

<rdar://problem/87217423>

[alan]

Created attachment 448617 [details]
Patch

[Antti Koivisto]

Comment on attachment 448617 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=448617&action=review

> Source/WebCore/layout/formattingContexts/inline/InlineFormattingContext.cpp:172
> +        , ceiledLayoutUnit(computedIntrinsicWidthForConstraint(IntrinsicWidthMode::Maximum))

odd comma placement

[alan]

Created attachment 448618 [details]
Patch

[EWS]

Committed r287779 (245839@main): <https://commits.webkit.org/245839@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 448618 [details].