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

	6 width: 150px;
	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:25 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 #fromStretch { justify-items: stretch; }

	10 #toStretch { justify-items: end; }

	11 </style>

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

	13 <p style="height: 20px">Tests how a justify-items style change requires a relayo ut 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-items: end' and was changed to 'stretc h'.</p>

	15 <div id="toStretch" class="grid">

	16 <div style="height: 50px;" class="firstRowFirstColumn" data-expected-width=" 150" data-offset-x="0">
	svillar 2015/07/10 14:00:52 Can we set the height on its child the same we do Can we set the height on its child the same we do for width? Same for the other grid items jfernandez 2015/07/10 15:07:25 See my comments above. Show quoted text On 2015/07/10 14:00:52, svillar wrote: > Can we set the height on its child the same we do for width? Same for the other > grid items See my comments above.
	17 <div style="width: 50px;"></div>

	18 </div>

	19 <div style="height: 50px;" class="secondRowFirstColumn" data-expected-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-items: center '.</p>

	24 <div id="fromStretch" class="grid">

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

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

	27 </div>

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

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

	30 </div>

	31 </div>

	32 <script>

	33 document.body.offsetLeft;

	34 document.getElementById("toStretch").style.justifyItems = "stretch";

	35 document.getElementById("fromStretch").style.justifyItems = "center";

	36 checkLayout(".grid");

	37 </script>

OLD	NEW