LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html - Issue 362733002: [CSS Grid Layout] Support sparse in auto-placement algorithm

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html

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

Patch Set: Created 6 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

« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-auto-flow-resolution-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/grid-item-auto-placement-automatic-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-template-columns: 50px 100px 150px 200px;

	7 grid-template-rows: 50px 100px 150px 200px;

	8 }

	9

	10 .unconstrainedContainer {

	11 /* For accurate x / y offset. */

	12 position: relative;

	13 }

	14 </style>

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

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

	17

	18 <p>This test checks that the auto-placement algorithm is sparse by default.</p>

	19

	20 <div class="unconstrainedContainer">

	21 <div class="grid">

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

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

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

	25 <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="5 0" data-offset-y="50" data-expected-width="250" data-expected-height="100"></div >

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

	27 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data- offset-y="150" data-expected-width="150" data-expected-height="150"></div>

	28 </div>

	29 </div>

	30

	31 <div class="unconstrainedContainer">

	32 <div class="grid">

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

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

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

	36 <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data -offset-y="50" data-expected-width="150" data-expected-height="100"></div>

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

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

	39 <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning3" data-of fset-x="50" data-offset-y="150" data-expected-width="450" data-expected-height=" 350"></div>

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

	41 </div>

	42 </div>

	43

	44 <div class="unconstrainedContainer">

	45 <div class="grid gridAutoFlowColumn">

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

	47 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0 " data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>

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

	49 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="5 0" data-offset-y="50" data-expected-width="100" data-expected-height="250"></div >

	50 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="1 50" data-offset-y="0" data-expected-width="150" data-expected-height="150"></div >

	51 <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data- offset-y="150" data-expected-width="150" data-expected-height="150"></div>

	52 </div>

	53 </div>

	54

	55 <div class="unconstrainedContainer">

	56 <div class="grid gridAutoFlowColumn">

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

	58 <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0 " data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>

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

	60 <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="50" data- offset-y="150" data-expected-width="100" data-expected-height="150"></div>

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

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

	63 <div class="sizedToGridArea autoRowSpanning3AutoColumnSpanning2" data-of fset-x="150" data-offset-y="50" data-expected-width="350" data-expected-height=" 450"></div>

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

	65 </div>

	66 </div>

	67

	68 </body>

	69 </html>

OLD	NEW