Closed Bug 1549620 Opened 7 months ago Closed 3 months ago

[css-grid] repeat(auto-fill/fit) needs to take box-sizing:border-box into account for the input sizes

Categories

(Core :: Layout: Grid, defect, P4)

defect

Tracking

()

RESOLVED FIXED
mozilla71
Tracking Status
firefox71 --- fixed

People

(Reporter: Oriol, Assigned: mats)

References

Details

(Keywords: testcase)

Attachments

(2 files)

Attached file testcase.htm

Open attached testcase.
The columns are sized with repeat(auto-fill, 100px).
The spec says https://drafts.csswg.org/css-grid/#auto-repeat

if the grid container has a definite min size in the relevant axis, the number of repetitions is the smallest possible positive integer that fulfills that minimum requirement.

The min size is 210px, but note box-sizing: border-box; padding: 5px. Then,

  • With 1 repetition, the outer size would be 5px + 1*100px + 5px = 110px, which doesn't fulfill the minimum
  • With 2 repetitions, the outer size would be 5px + 2*100px + 5px = 210px, which does fulfill the minimum.

So there should be 2 columns, but there are 3.
The other axis behaves as expected, and there are 2 rows.

Note that in Chromium there are 3 columns and 3 rows, but this is being addressed in http://crrev/c/1588388

Summary: [css-grid] auto rows ignore box-sizing → [css-grid] auto columns ignore box-sizing
Keywords: testcase
OS: Unspecified → All
Priority: -- → P4
Hardware: Unspecified → All
Summary: [css-grid] auto columns ignore box-sizing → [css-grid] repeat(auto-fill/fit) needs to take box-sizing:border-box into account for the input sizes
Assignee: nobody → mats

There are some WPTs for this, but they depend on having a working offsetLeft/offsetTop (bug 400258)...

Depends on: 400258
Pushed by mpalmgren@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/18126d4319d7
[css-grid] Take box-sizing:border-box into account when calculating the input sizes for repeat(auto-fill/fit) track count.  r=dholbert
Created web-platform-tests PR https://github.com/web-platform-tests/wpt/pull/19056 for changes under testing/web-platform/tests
Upstream web-platform-tests status checks passed, PR will merge once commit reaches central.
Flags: in-testsuite+
Status: NEW → RESOLVED
Closed: 3 months ago
Resolution: --- → FIXED
Target Milestone: --- → mozilla71
Upstream PR merged by moz-wptsync-bot
You need to log in before you can comment on or make changes to this bug.