third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-sizing-rows-min-max-height.html - Issue 2480493002: [css-grid] Use min|max-sizes to compute flex fraction

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-sizing-rows-min-max-height.html

Issue 2480493002: [css-grid] Use min|max-sizes to compute flex fraction (Closed)

Patch Set: Patch for landing Created 4 years, 1 month ago

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

Jump to:

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-sizing-columns-min-max-width.html ('k') | third_party/WebKit/Source/core/layout/LayoutGrid.h » ('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 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">

	4 <style>

	5 .grid {

	6 margin: 3px;

	7 grid: minmax(10px, 1fr) minmax(10px, 4fr) / 50px;

	8 grid-row-gap: 33px;

	9 border: 5px dashed;

	10 padding: 2px;

	11 }

	12

	13 .float { float: left; }

	14

	15 .item:nth-child(1) { background-color: purple; }

	16 .item:nth-child(2) { background-color: blue; }

	17 </style>

	18

	19 <script src="../../resources/testharness.js"></script>

	20 <script src="../../resources/testharnessreport.js"></script>

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

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

	23 <div id="log"></div>

	24

	25 <p>This test PASS if all the grids in the same row look the same.</p>

	26

	27 <div class="grid float" style="max-height: 70px" data-expected-width="64" data-e xpected-height="84">

	28 <div class="item" data-expected-width="50" data-expected-height="10"></div>

	29 <div class="item" data-expected-width="50" data-expected-height="27"></div>

	30 </div>

	31 <div class="grid float" style="min-height: 70px; max-height: 60px" data-expected -width="64" data-expected-height="84">

	32 <div class="item" data-expected-width="50" data-expected-height="10"></div>

	33 <div class="item" data-expected-width="50" data-expected-height="27"></div>

	34 </div>

	35 <div class="grid float" style="height: 70px" data-expected-width="64" data-expec ted-height="84">

	36 <div class="item" data-expected-width="50" data-expected-height="10"></div>

	37 <div class="item" data-expected-width="50" data-expected-height="27"></div>

	38 </div>

	39

	40 <br clear="all">

	41

	42 <div class="grid float" style="min-height: 108px" data-expected-width="64" data- expected-height="122">

	43 <div class="item" data-expected-width="50" data-expected-height="15"></div>

	44 <div class="item" data-expected-width="50" data-expected-height="60"></div>

	45 </div>

	46 <div class="grid float" style="min-height: 108px; max-height: 60px" data-expecte d-width="64" data-expected-height="122">

	47 <div class="item" data-expected-width="50" data-expected-height="15"></div>

	48 <div class="item" data-expected-width="50" data-expected-height="60"></div>

	49 </div>

	50 <div class="grid float" style="height: 108px" data-expected-width="64" data-expe cted-height="122">

	51 <div class="item" data-expected-width="50" data-expected-height="15"></div>

	52 <div class="item" data-expected-width="50" data-expected-height="60"></div>

	53 </div>

	54

	55 <br clear="all">

	56

	57 <div class="grid float min-height-max-content" data-expected-width="64" data-exp ected-height="97">

	58 <div class="item" data-expected-width="50" data-expected-height="10"></div>

	59 <div class="item" data-expected-width="50" data-expected-height="40"></div>

	60 </div>

	61 <div class="grid float min-height-max-content max-height-min-content" data-expec ted-width="64" data-expected-height="97">

	62 <div class="item" data-expected-width="50" data-expected-height="10"></div>

	63 <div class="item" data-expected-width="50" data-expected-height="40"></div>

	64 </div>

	65 <div class="grid float max-content" data-expected-width="64" data-expected-heigh t="97">

	66 <div class="item" data-expected-width="50" data-expected-height="10"></div>

	67 <div class="item" data-expected-width="50" data-expected-height="40"></div>

	68 </div>

	69

	70 <br clear="all">

	71

	72 <div class="float min-content">

	73 <div class="grid min-height-max-content" data-expected-width="64" data-expec ted-height="97">

	74 <div class="item" data-expected-width="50" data-expected-height="10"></d iv>

	75 <div class="item" data-expected-width="50" data-expected-height="40"></d iv>

	76 </div>

	77 </div>

	78 <div class="float max-content">

	79 <div class="grid min-height-max-content max-height-min-content" data-expecte d-width="64" data-expected-height="97">

	80 <div class="item" data-expected-width="50" data-expected-height="10"></d iv>

	81 <div class="item" data-expected-width="50" data-expected-height="40"></d iv>

	82 </div>

	83 </div>

	84 <div class="float fit-content">

	85 <div class="grid max-content" data-expected-width="64" data-expected-height= "97">

	86 <div class="item" data-expected-width="50" data-expected-height="10"></d iv>

	87 <div class="item" data-expected-width="50" data-expected-height="40"></d iv>

	88 </div>

	89 </div>

	90

	91 </body>

OLD	NEW