LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html - Issue 1228983003: [CSS Grid Layout] Do not stretch always grid items with auto width

Side by Side Diff

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Keyboard Shortcuts

	File
u :	up to issue
j / k :	jump to file after / before current file
J / K :	jump to next file with a comment after / before current file
	Side-by-side diff
i :	toggle intra-line diffs
e :	expand all comments
c :	collapse all comments
s :	toggle showing all comments
n / p :	next / previous diff chunk or comment
N / P :	next / previous comment
<Up> / <Down> :	next / previous line

	Issue
u :	up to list of issues
j / k :	jump to patch after / before current patch
o / <Enter> :	open current patch in side-by-side view
i :	open current patch in unified diff view

	Issue List
j / k :	jump to issue after / before current issue
o / <Enter> :	open current issue

Side by Side Diff: LayoutTests/fast/css-grid-layout/relayout-align-self-changed.html

Issue 1228983003: [CSS Grid Layout] Do not stretch always grid items with auto width (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 5 years, 5 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« LayoutTests/fast/css-grid-layout/relayout-align-items-changed.html ('K') | « LayoutTests/fast/css-grid-layout/relayout-align-items-changed-expected.txt ('k') | LayoutTests/fast/css-grid-layout/relayout-align-self-changed-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/relayout-justify-items-changed.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE HTML>

	2 <link href="resources/grid.css" rel="stylesheet">

	3 <style>

	4 .grid {

	5 grid: 100px 100px / 150px;

	6 width: 200px;
	svillar 2015/07/10 14:00:52 Do we really need width: here? Do we really need width: here? jfernandez 2015/07/10 15:07:24 See my comments above. Show quoted text On 2015/07/10 14:00:52, svillar wrote: > Do we really need width: here? See my comments above.
	7 position: relative;

	8 }

	9 .toStretch { align-self: end; }

	10 .fromStretch { align-self: stretch; }

	11 </style>

	12 <script src="../../resources/check-layout.js"></script>

	13 <p style="height: 20px">Tests how a align-self style change requires a relayout of the grid and previously stretched items.</p>
	svillar 2015/07/10 14:00:52 Why height on <p> element? Why height on <p> element? jfernandez 2015/07/10 15:07:24 Done. Show quoted text On 2015/07/10 14:00:52, svillar wrote: > Why height on <p> element? Done.
	14 <p>The grid bellow had initially 'align-self: end' and was changed to 'stretch'. </p>

	15 <div class="grid">

	16 <div style="width: 50px;" class="toStretch firstRowFirstColumn" data-expecte d-height="150" data-offset-y="0">
	svillar 2015/07/10 14:00:52 Is it possible to set the width in its child as we Is it possible to set the width in its child as we do with the height? Same for the other grid items jfernandez 2015/07/10 15:07:24 See my comments above. Show quoted text On 2015/07/10 14:00:52, svillar wrote: > Is it possible to set the width in its child as we do with the height? Same for > the other grid items See my comments above.
	17 <div style="height: 50px"></div>

	18 </div>

	19 <div style="width: 50px;" class="toStretch firstRowSecondColumn" data-expect ed-height="150" data-offset-y="0">

	20 <div style="height: 100px"></div>

	21 </div>

	22 </div>

	23 <p>The grid bellow was initially stretched and it has now 'align-self: center'.< /p>

	24 <div class="grid">

	25 <div style="width: 50px;" class="fromStretch firstRowFirstColumn" data-expec ted-height="50" data-offset-y="50">

	26 <div style="height: 50px"></div>

	27 </div>

	28 <div style="width: 50px;" class="fromStretch firstRowSecondColumn" data-expe cted-height="100" data-offset-y="25">

	29 <div style="height: 100px"></div>

	30 </div>

	31 </div>

	32 <script>

	33 document.body.offsetLeft;

	34 document.getElementsByClassName('toStretch')[0].style.alignSelf = 'stretch';

	35 document.getElementsByClassName('toStretch')[1].style.alignSelf = 'stretch';

	36 document.getElementsByClassName('fromStretch')[0].style.alignSelf = 'center';

	37 document.getElementsByClassName('fromStretch')[1].style.alignSelf = 'center';

	38 checkLayout(".grid");

	39 </script>

OLD	NEW