LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html - Issue 196943026: [CSS Grid Layout] Support span in auto-placement algorithm

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span.html

Issue 196943026: [CSS Grid Layout] Support span in auto-placement algorithm (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Rebased patch after GridResolvedPosition was introduced Created 6 years, 8 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

« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-span-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/grid-item-auto-placement-definite-span.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

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

	4 <style>

	5 .grid {

	6 grid-auto-rows: 50px;

	7 grid-auto-columns: 100px;

	8 }

	9

	10 .autoRowAutoColumnSpanning2 {

	11 background-color: maroon;

	12 grid-column: span 2;
	Julien - ping for review 2014/05/16 10:08:10 That should resolve to 'auto / auto' when we expan That should resolve to 'auto / auto' when we expand the shorthand. Is that intended?
	13 grid-row: auto;

	14 }

	15

	16 .autoRowAutoColumnSpanning3 {

	17 background-color: teal;

	18 grid-column: span 3;

	19 grid-row: auto;

	20 }

	21

	22 .autoRowSpanning2AutoColumn {

	23 background-color: aqua;

	24 grid-column: auto;

	25 grid-row: span 2;

	26 height: 100%;

	27 }

	28

	29 .autoRowSpanning3AutoColumn {

	30 background-color: salmon;

	31 grid-column: auto;

	32 grid-row: span 3;

	33 height: 100%;

	34 }

	35

	36 .autoRowSpanning2AutoColumnSpanning2 {

	37 background-color: olive;

	38 grid-column: span 2;

	39 grid-row: span 2;

	40 height: 100%;

	41 }

	42 </style>

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

	44 <body onload="checkLayout('.grid');">

	45

	46 <p>Thist test checks that span is supported in auto-placement for automatic posi tions.</p>

	47

	48 <div style="position: relative">

	49 <div class="grid gridAutoFlowRow">

	50 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0 " data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>

	51 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data- offset-y="0" data-expected-width="100" data-expected-height="50"></div>

	52 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="50" data-expected-width="100" data-expected-height="50"></div>

	53 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="1 00" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div >

	54 <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0 " data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>

	55 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="0" data-offset-y="150" data-expected-width="200" data-expected-height="1 00"></div>

	56 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data- offset-y="150" data-expected-width="100" data-expected-height="50"></div>

	57 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data- offset-y="200" data-expected-width="100" data-expected-height="50"></div>

	58 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="250" data-expected-width="100" data-expected-height="50"></div>

	59 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="100" data-offset-y="250" data-expected-width="200" data-expected-height= "100"></div>

	60 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="300" data-expected-width="100" data-expected-height="50"></div>

	61 </div>

	62 </div>

	63

	64 <div style="position: relative">

	65 <div class="grid gridAutoFlowRow">

	66 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0 " data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>

	67 <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" dat a-offset-y="0" data-expected-width="100" data-expected-height="50"></div>

	68 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data -offset-y="0" data-expected-width="100" data-expected-height="50"></div>

	69 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height=" 100"></div>

	70 <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="0 " data-offset-y="100" data-expected-width="100" data-expected-height="150"></div >

	71 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="100" data-offset-y="150" data-expected-width="200" data-expected-height= "100"></div>

	72 </div>

	73 </div>

	74

	75 <div style="position: relative">

	76 <div class="grid gridAutoFlowColumn">

	77 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0 " data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>

	78 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-of fset-y="100" data-expected-width="100" data-expected-height="50"></div>

	79 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data- offset-y="0" data-expected-width="100" data-expected-height="50"></div>

	80 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="1 00" data-offset-y="50" data-expected-width="100" data-expected-height="100"></di v>

	81 <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="2 00" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div >

	82 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="1 00"></div>

	83 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data- offset-y="100" data-expected-width="100" data-expected-height="50"></div>

	84 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="400" data- offset-y="100" data-expected-width="100" data-expected-height="50"></div>

	85 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="500" data- offset-y="0" data-expected-width="100" data-expected-height="50"></div>

	86 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="500" data-offset-y="50" data-expected-width="200" data-expected-height=" 100"></div>

	87 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="600" data- offset-y="0" data-expected-width="100" data-expected-height="50"></div>

	88 </div>

	89 </div>

	90

	91 <div style="position: relative">

	92 <div class="grid gridAutoFlowColumn">

	93 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0 " data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>

	94 <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data- offset-y="50" data-expected-width="100" data-expected-height="50"></div>

	95 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-o ffset-y="100" data-expected-width="100" data-expected-height="50"></div>

	96 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height=" 100"></div>

	97 <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="2 00" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>

	98 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-of fset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height=" 100"></div>

	99 </div>

	100 </div>

	101

	102 </body>

	103 </html>

OLD	NEW