Bug 234935

Summary:

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

Product:

WebKit

Reporter:

Oliver Byford <oliver.byford>

Component:

Layout and Rendering

Assignee:

zalan <zalan>

Status:

RESOLVED FIXED

Severity:

Normal

CC:

bfulgham, koivisto, simon.fraser, webkit-bug-importer, zalan

Priority:

Keywords:

InRadar

Version:

Safari Technology Preview

Hardware:

Mac (Apple Silicon)

OS:

macOS 12

Attachments:

Description	Flags
CodePen in Safari Technology Preview r137	none
CodePen in Safari 15.1 (17612.2.9.1.20)	none
CodePen in Chrome 96	none
Patch	none
Patch	none

Description Oliver Byford 2022-01-06 13:26:52 PST

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

Comment 1 Oliver Byford 2022-01-06 13:27:23 PST

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

Comment 2 Oliver Byford 2022-01-06 13:27:36 PST

Created attachment 448532 [details]
CodePen in Chrome 96

Comment 3 Radar WebKit Bug Importer 2022-01-06 13:46:48 PST

<rdar://problem/87217423>

Comment 4 zalan 2022-01-06 13:48:07 PST

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

Comment 5 Radar WebKit Bug Importer 2022-01-06 13:48:26 PST

<rdar://problem/87217516>

Comment 6 Alexey Proskuryakov 2022-01-06 21:24:06 PST

<rdar://problem/87217423>

Comment 7 zalan 2022-01-07 12:01:23 PST

Created attachment 448617 [details]
Patch

Comment 8 Antti Koivisto 2022-01-07 12:15:59 PST

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

Comment 9 zalan 2022-01-07 12:17:44 PST

Created attachment 448618 [details]
Patch

Comment 10 EWS 2022-01-07 13:18:04 PST

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].