Bug 234935 - Inline blocks that contain text with min-width, box-sizing: border-box incorrectly include the border in width calculation
Summary: Inline blocks that contain text with min-width, box-sizing: border-box incorr...
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari Technology Preview
Hardware: Mac (Apple Silicon) macOS 12
: P2 Normal
Assignee: zalan
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2022-01-06 13:26 PST by Oliver Byford
Modified: 2022-01-07 13:18 PST (History)
5 users (show)

See Also:

Attachments
CodePen in Safari Technology Preview r137 (1.58 MB, image/png)
2022-01-06 13:26 PST, Oliver Byford 		no flags Details
CodePen in Safari 15.1 (17612.2.9.1.20) (642.78 KB, image/png)
2022-01-06 13:27 PST, Oliver Byford 		no flags Details
CodePen in Chrome 96 (1.52 MB, image/png)
2022-01-06 13:27 PST, Oliver Byford 		no flags Details
Patch (5.29 KB, patch)
2022-01-07 12:01 PST, zalan 		no flags Details | Formatted Diff | Diff
Patch (5.29 KB, patch)
2022-01-07 12:17 PST, zalan 		no flags Details | Formatted Diff | Diff
Show Obsolete (1) View All Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
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].