LayoutTests/fast/css-grid-layout/relayout-justify-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-justify-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-justify-items-changed.html ('K') | « LayoutTests/fast/css-grid-layout/relayout-justify-items-changed-expected.txt ('k') | LayoutTests/fast/css-grid-layout/relayout-justify-self-changed-expected.txt » ('j') | no next file with comments »
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: 150px / 100px 100px;

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

	8 }

	9 .fromStretch { justify-self: stretch; }

	10 .toStretch { justify-self: end; }

	11 </style>

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

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

	15 <div class="grid">

	16 <div style="height: 50px;" class="toStretch firstRowFirstColumn" data-expect ed-width="150" data-offset-x="0">
	svillar 2015/07/10 14:00:53 Perhaps we could set the height in the child the Perhaps we could set the height in the child the same we do for the width? Apply this to all the 4 cases. jfernandez 2015/07/10 15:07:25 See my comments above. Show quoted text On 2015/07/10 14:00:53, svillar wrote: > Perhaps we could set the height in the child the same we do for the width? > > Apply this to all the 4 cases. See my comments above.
	17 <div style="width: 50px;"></div>

	18 </div>

	19 <div style="height: 50px;" class="toStretch secondRowFirstColumn" data-expec ted-width="150" data-offset-x="0">

	20 <div style="width: 100px;"></div>

	21 </div>

	22 </div>

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

	24 <div class="grid">

	25 <div style="height: 50px;" class="fromStretch firstRowFirstColumn" data-expe cted-width="50" data-offset-x="50">

	26 <div style="width: 50px;"></div>

	27 </div>

	28 <div style="height: 50px;" class="fromStretch secondRowFirstColumn" data-exp ected-width="100" data-offset-x="25">

	29 <div style="width: 100px;"></div>

	30 </div>

	31 </div>

	32 <script>

	33 document.body.offsetLeft;

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

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

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

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

	38 checkLayout(".grid");

	39 </script>

OLD	NEW