third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html - Issue 815833005: [css-grid] Handle min-content/max-content with orthogonal flows

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-percentages-and-orthogonal-flows.html

Issue 815833005: [css-grid] Handle min-content/max-content with orthogonal flows (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Applied suggested changes. Created 4 years, 6 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html ('k') | third_party/WebKit/Source/core/layout/LayoutBlock.h » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('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 <link href="resources/grid-alignment.css" rel="stylesheet">

	4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">

	5 <link href="../css-intrinsic-dimensions/resources/height-keyword-classes.css" re l="stylesheet">

	6 <style>

	7 body {

	8 margin: 0;

	9 }

	10

	11 .container {

	12 position: relative;

	13 }

	14

	15 .grid {

	16 font: 10px/1 Ahem;

	17 grid-template-columns: 100px 25%;

	18 grid-template-rows: 50% 150px;

	19 }

	20 .item {

	21 width: 100%;

	22 height: 100%;

	23 }
	svillar 2016/06/02 14:39:40 Do we really need this? We stretch by default. Do we really need this? We stretch by default. jfernandez 2016/06/02 21:39:25 Yes, we need it because we don't allow (yet) stret Show quoted text On 2016/06/02 14:39:40, svillar wrote: > Do we really need this? We stretch by default. Yes, we need it because we don't allow (yet) stretch alignment with orthogonal flows.
	24 </style>

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

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

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

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

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

	30 <p>This test checks that grid tracks are correctly sized when using percentage l engths and orthogonal flows.</p>

	31

	32 <p>HORIZONTAL-TB container with VERTICAL-LR items.</p>

	33 <div class="container">

	34 <div class="grid itemsStart contentStart fit-content" data-expected-width="1 20" data-expected-height="260">

	35 <div class="item firstRowFirstColumn verticalLR" data-offset-x="0" da ta-offset-y="0" data-expected-width="100" data-expected-height="110">X X X</div >

	36 <div class="item firstRowSecondColumn verticalLR" data-offset-x="100" d ata-offset-y="0" data-expected-width="20" data-expected-height="110">X X X X X X</div>

	37 <div class="item secondRowFirstColumn verticalLR" data-offset-x="0" da ta-offset-y="110" data-expected-width="100" data-expected-height="150">X X X X X X</div>

	38 <div class="item secondRowSecondColumn verticalLR" data-offset-x="100" d ata-offset-y="110" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div>

	39 </div>

	40 </div>

	41

	42 <p>HORIZONTAL-TB container with VERTICAL-RL items.</p>

	43 <div class="container">

	44 <div class="grid itemsStart contentStart fit-content" data-expected-width="1 20" data-expected-height="260">

	45 <div class="item firstRowFirstColumn verticalRL" data-offset-x="0" da ta-offset-y="0" data-expected-width="100" data-expected-height="110">X X X</div >

	46 <div class="item firstRowSecondColumn verticalRL" data-offset-x="100" d ata-offset-y="0" data-expected-width="20" data-expected-height="110">X X X X X X</div>

	47 <div class="item secondRowFirstColumn verticalRL" data-offset-x="0" da ta-offset-y="110" data-expected-width="100" data-expected-height="150">X X X X X X</div>

	48 <div class="item secondRowSecondColumn verticalRL" data-offset-x="100" d ata-offset-y="110" data-expected-width="20" data-expected-height="150">X X X X X X X X X X X X</div>

	49 </div>

	50 </div>

	51

	52 <p>VERTICAL-LR container with HORIZONTAL-TB items.</p>

	53 <div class="container">

	54 <div class="grid itemsStart contentStart verticalLR fit-content" data-expect ed-width="260" data-expected-height="120">

	55 <div class="item firstRowFirstColumn horizontalTB" data-offset-x="0" data-offset-y="0" data-expected-width="110" data-expected-height="100">X X X</ div>

	56 <div class="item firstRowSecondColumn horizontalTB" data-offset-x="0" d ata-offset-y="100" data-expected-width="110" data-expected-height="20">X X X X X X</div>

	57 <div class="item secondRowFirstColumn horizontalTB" data-offset-x="110" data-offset-y="0" data-expected-width="150" data-expected-height="100">X X X X X X</div>

	58 <div class="item secondRowSecondColumn horizontalTB" data-offset-x="110" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div>

	59 </div>

	60 </div>

	61

	62 <p>VERTICAL-RL container with HORIZONTAL-TB items.</p>

	63 <div class="container">

	64 <div class="grid itemsStart contentStart verticalRL fit-content" data-expect ed-width="260" data-expected-height="120">

	65 <div class="item firstRowFirstColumn horizontalTB" data-offset-x="150" data-offset-y="0" data-expected-width="110" data-expected-height="100">X X X</ div>

	66 <div class="item firstRowSecondColumn horizontalTB" data-offset-x="150" data-offset-y="100" data-expected-width="110" data-expected-height="20">X X X X X X</div>

	67 <div class="item secondRowFirstColumn horizontalTB" data-offset-x="0" d ata-offset-y="0" data-expected-width="150" data-expected-height="100">X X X X X X</div>

	68 <div class="item secondRowSecondColumn horizontalTB" data-offset-x="0" data-offset-y="100" data-expected-width="150" data-expected-height="20">X X X X X X X X X X X X</div>

	69 </div>

	70 </div>

	71 </body>

OLD	NEW