Issue 529203 in chromium: [css-grid] Percentage columns shouldn't include border and padding

[chro...@googlecode.com]

Status: Assigned
Owner: r...@igalia.com
CC: r...@igalia.com, svil...@igalia.com, jfernan...@igalia.com
Labels: Type-Bug Pri-2 Cr-Blink-Layout-Grid OS-All

New issue 529203 by r...@igalia.com: [css-grid] Percentage columns
shouldn't include border and padding
https://code.google.com/p/chromium/issues/detail?id=529203


If you've a column with 100%, the size of the column is calculated
including the border and padding of the grid container. This is not right
and leads to weird results.

Example to reproduce the issue (http://jsbin.com/retama/edit?html,output):
<div style="display: grid; border: 5px solid black; padding: 25px; grid:
100% / 100%; width: 200px; height: 200px;">
<div style="background: lime;">item</div>
</div>

The height of the item is kept to 200px as it should, however the width
goes to 260px (200 + 5 + 25 + 25 + 5) instead of 200px.

Attachments:
jsbin.retama.1.html 376 bytes

--
You received this message because this project is configured to send all
issue notifications to this address.
You may adjust your notification preferences at:
https://code.google.com/hosting/settings

[chro...@googlecode.com]

Comment #2 on issue 529203 by jm.acuna73: [css-grid] Percentage columns

shouldn't include border and padding
https://code.google.com/p/chromium/issues/detail?id=529203

Use the property
box-sizing: border-box;

Method of specifying whether or not an element's borders and padding should
be included in size units: http://caniuse.com/#feat=css3-boxsizing

[chro...@googlecode.com]

Comment #3 on issue 529203 by bugd...@chromium.org: [css-grid] Percentage

columns shouldn't include border and padding

https://code.google.com/p/chromium/issues/detail?id=529203#c3

The following revision refers to this bug:
http://src.chromium.org/viewvc/blink?view=rev&rev=201909

------------------------------------------------------------------
r201909 | re...@igalia.com | 2015-09-08T12:00:12.201947Z

Changed paths:
A
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding-expected.txt?r1=201909&r2=201908&pathrev=201909
A
http://src.chromium.org/viewvc/blink/trunk/LayoutTests/fast/css-grid-layout/grid-percent-track-margin-border-padding.html?r1=201909&r2=201908&pathrev=201909
M
http://src.chromium.org/viewvc/blink/trunk/Source/core/layout/LayoutGrid.cpp?r1=201909&r2=201908&pathrev=201909

[css-grid] Percentage columns shouldn't include border and padding

Subtract border and padding when we're calculating the breadth of the
columns in LayoutGrid::computeUsedBreadthOfSpecifiedLength().

Added test to check the behavior for both columns and rows.

BUG=529203
TEST=fast/css-grid-layout/grid-percent-track-margin-border-padding.html

Review URL: https://codereview.chromium.org/1321723008
-----------------------------------------------------------------

[chro...@googlecode.com]

Updates:
Status: Fixed

Comment #4 on issue 529203 by r...@igalia.com: [css-grid] Percentage

columns shouldn't include border and padding
https://code.google.com/p/chromium/issues/detail?id=529203

@jm.acuna73 maybe I don't explain myself property, but that's not the issue
here.

Just think in a regular block (nothing related to grids):
<div style="border: 5px solid black; padding: 25px; width: 200px; height:
200px;">
<div style="background: lime; width: 100%; height: 100%;">item</div>
</div>

By default the item has 200x200 size.

If we use "box-sizing: border-box;", it gets its size reduced to 140x140
instead.

The problem with grid was that the width was going to 260px instead of
200px. And with "box-sizing: border-box;" to 200px instead of 140px.

Anyway this has been already solved by the commit in the previous comment.

[chro...@googlecode.com]

Comment #5 on issue 529203 by jfernan...@igalia.com: [css-grid] Percentage

columns shouldn't include border and padding
https://code.google.com/p/chromium/issues/detail?id=529203

This issue makes the following assertion to fail, so that would explain the
unexpected behavior in release builds:

Program received signal SIGSEGV, Segmentation fault.
0x000000000370a7e2 in blink::LayoutBox::computeLogicalHeight
(this=0x272e94a0c210, logicalHeight=..., logicalTop=..., computedValues=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBox.cpp:2288
2288 ASSERT(style()->logicalHeight().isAuto());
(gdb) bt
#0 0x000000000370a7e2 in blink::LayoutBox::computeLogicalHeight
(this=0x272e94a0c210, logicalHeight=..., logicalTop=..., computedValues=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBox.cpp:2288
#1 0x000000000370a30d in blink::LayoutBox::updateLogicalHeight
(this=0x272e94a0c210)
at ../../third_party/WebKit/Source/core/layout/LayoutBox.cpp:2237
#2 0x00000000036e5977 in blink::LayoutBlockFlow::layoutBlockFlow
(this=0x272e94a0c210, relayoutChildren=false, pageLogicalHeight=...,
layoutScope=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:410
#3 0x00000000036d73f8 in blink::LayoutBlockFlow::layoutBlock
(this=0x272e94a0c210, relayoutChildren=false)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:298
#4 0x00000000036b7fc8 in blink::LayoutBlock::layout (this=0x272e94a0c210)
at ../../third_party/WebKit/Source/core/layout/LayoutBlock.cpp:881
#5 0x00000000036c4eb6 in blink::LayoutObject::layoutIfNeeded
(this=0x272e94a0c210)
at ../../third_party/WebKit/Source/core/layout/LayoutObject.h:746
#6 0x0000000003745e71 in blink::LayoutGrid::logicalHeightForChild
(this=0x272e94a10010, child=..., columnTracks=...)
at ../../third_party/WebKit/Source/core/layout/LayoutGrid.cpp:630
#7 0x0000000003746312 in blink::LayoutGrid::minContentForChild
(this=0x272e94a10010, child=..., direction=blink::ForRows, columnTracks=...)
at ../../third_party/WebKit/Source/core/layout/LayoutGrid.cpp:672
#8 0x000000000374613f in blink::LayoutGrid::minSizeForChild
(this=0x272e94a10010, child=..., direction=blink::ForRows, columnTracks=...)
at ../../third_party/WebKit/Source/core/layout/LayoutGrid.cpp:645
#9 0x000000000374674d in
blink::LayoutGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems
(this=0x272e94a10010, direction=blink::ForRows, coordinate=...,
gridItem=..., track=...,
columnTracks=...)
at ../../third_party/WebKit/Source/core/layout/LayoutGrid.cpp:793
#10 0x0000000003745251 in
blink::LayoutGrid::resolveContentBasedTrackSizingFunctions
(this=0x272e94a10010, direction=blink::ForRows, sizingData=...)
at ../../third_party/WebKit/Source/core/layout/LayoutGrid.cpp:755
#11 0x000000000374412a in blink::LayoutGrid::computeUsedBreadthOfGridTracks
(this=0x272e94a10010, direction=blink::ForRows, sizingData=...,
freeSpace=...)
at ../../third_party/WebKit/Source/core/layout/LayoutGrid.cpp:425
#12 0x0000000003742eaf in blink::LayoutGrid::layoutGridItems
(this=0x272e94a10010)
at ../../third_party/WebKit/Source/core/layout/LayoutGrid.cpp:1318
#13 0x0000000003742cb7 in blink::LayoutGrid::layoutBlock
(this=0x272e94a10010, relayoutChildren=false)
at ../../third_party/WebKit/Source/core/layout/LayoutGrid.cpp:354
#14 0x00000000036b7fc8 in blink::LayoutBlock::layout (this=0x272e94a10010)
at ../../third_party/WebKit/Source/core/layout/LayoutBlock.cpp:881
#15 0x00000000036d7ec7 in blink::LayoutBlockFlow::layoutBlockChild
(this=0x272e94a0c110, child=..., marginInfo=...,
previousFloatLogicalBottom=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:561
#16 0x00000000036dcb7e in blink::LayoutBlockFlow::layoutBlockChildren
(this=0x272e94a0c110, relayoutChildren=false, layoutScope=...,
beforeEdge=..., afterEdge=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:1052
#17 0x00000000036e5771 in blink::LayoutBlockFlow::layoutBlockFlow
(this=0x272e94a0c110, relayoutChildren=false, pageLogicalHeight=...,
layoutScope=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:378
#18 0x00000000036d73f8 in blink::LayoutBlockFlow::layoutBlock
(this=0x272e94a0c110, relayoutChildren=false)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:298
#19 0x00000000036b7fc8 in blink::LayoutBlock::layout (this=0x272e94a0c110)
at ../../third_party/WebKit/Source/core/layout/LayoutBlock.cpp:881
#20 0x00000000036d7ec7 in blink::LayoutBlockFlow::layoutBlockChild
(this=0x272e94a0c010, child=..., marginInfo=...,
previousFloatLogicalBottom=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:561
#21 0x00000000036dcb7e in blink::LayoutBlockFlow::layoutBlockChildren
(this=0x272e94a0c010, relayoutChildren=false, layoutScope=...,
beforeEdge=..., afterEdge=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:1052
#22 0x00000000036e5771 in blink::LayoutBlockFlow::layoutBlockFlow
(this=0x272e94a0c010, relayoutChildren=false, pageLogicalHeight=...,
layoutScope=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:378
#23 0x00000000036d73f8 in blink::LayoutBlockFlow::layoutBlock
(this=0x272e94a0c010, relayoutChildren=false)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:298
#24 0x00000000036b7fc8 in blink::LayoutBlock::layout (this=0x272e94a0c010)
at ../../third_party/WebKit/Source/core/layout/LayoutBlock.cpp:881
#25 0x00000000036d7ec7 in blink::LayoutBlockFlow::layoutBlockChild
(this=0x272e94a04010, child=..., marginInfo=...,
previousFloatLogicalBottom=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:561
#26 0x00000000036dcb7e in blink::LayoutBlockFlow::layoutBlockChildren
(this=0x272e94a04010, relayoutChildren=false, layoutScope=...,
beforeEdge=..., afterEdge=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:1052
#27 0x00000000036e5771 in blink::LayoutBlockFlow::layoutBlockFlow
(this=0x272e94a04010, relayoutChildren=false, pageLogicalHeight=...,
layoutScope=...)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:378
#28 0x00000000036d73f8 in blink::LayoutBlockFlow::layoutBlock
(this=0x272e94a04010, relayoutChildren=false)
at ../../third_party/WebKit/Source/core/layout/LayoutBlockFlow.cpp:298
#29 0x00000000036b7fc8 in blink::LayoutBlock::layout (this=0x272e94a04010)
at ../../third_party/WebKit/Source/core/layout/LayoutBlock.cpp:881
#30 0x00000000037e0615 in blink::LayoutView::layoutContent
(this=0x272e94a04010)
at ../../third_party/WebKit/Source/core/layout/LayoutView.cpp:155
#31 0x00000000037e0c68 in blink::LayoutView::layout (this=0x272e94a04010)
at ../../third_party/WebKit/Source/core/layout/LayoutView.cpp:245
#32 0x00000000032d5fcc in blink::layoutFromRootObject (root=...)
at ../../third_party/WebKit/Source/core/frame/FrameView.cpp:804
#33 0x00000000032d5e91 in blink::FrameView::performLayout
(this=0x3a3edd38010, inSubtreeLayout=false)
at ../../third_party/WebKit/Source/core/frame/FrameView.cpp:866
---Type <return> to continue, or q <return> to quit---