third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html - Issue 1309513008: [css-grid] Implement grid gutters

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html

Issue 1309513008: [css-grid] Implement grid gutters (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Rebased patch for landing Created 5 years, 2 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-gutters-and-alignment-expected.txt ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt » ('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="resources/grid-alignment.css" rel="stylesheet">

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

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

	6 <script src="../../resources/js-test.js"></script>

	7 <style>

	8 .gridMaxFlexContent { grid-template: minmax(30px, 2fr) / 50px; }

	9 .gridTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2 fr) / 50px; }

	10 .gridIgnoreSecondGridItem { grid-template: minmax(300px, 3fr) minmax(150px, 1fr) / 50px; }

	11

	12 .gridRowsMaxFlexContent { grid-template: 50px / minmax(30px, 2fr); }

	13 .gridRowsTwoMaxFlexContent { grid-template: 50px / minmax(10px, 1fr) minmax(10px , 2fr); }

	14 .gridRowsTwoDoubleMaxFlexContent { grid-template: 50px / minmax(10px, 0.5fr) min max(10px, 2fr); }

	15

	16 .gridMinMaxFlexFixedAndMinContentAndFixed { grid-template-columns: minmax(0.5fr, 35px) min-content 25px; }

	17 .gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: min-cont ent minmax(20px, min-content) 2fr; }

	18 .gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: max-cont ent minmax(20px, max-content) 1fr; }

	19

	20 div.grid > div { font: 10px/1 Ahem; }

	21

	22 .gridRowColumnGaps {

	23 grid-row-gap: 33px;

	24 grid-column-gap: 19px;

	25 }

	26

	27 </style>

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

	29

	30 <!-- Check that gutters do not interfere with flex content resolution for column s -->

	31

	32 <div style="width: 120px; height: 10px;">

	33 <div class="grid gridTwoDoubleMaxFlexContent gridRowColumnGaps" data-expecte d-width="120" data-expected-height="50">

	34 <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20 " data-expected-height="50"></div>

	35 <div class="sizedToGridArea firstRowSecondColumn" data-expected-width="8 1" data-expected-height="50"></div>

	36 </div>

	37 </div>

	38

	39 <div style="width: 570px; height: 10px;">

	40 <div class="grid gridIgnoreSecondGridItem gridRowColumnGaps" data-expected-w idth="570" data-expected-height="50">

	41 <div class="firstRowFirstColumn" data-expected-width="401" data-expected -height="50"></div>

	42 <div class="firstRowSecondColumn" data-expected-width="150" data-expecte d-height="50"></div>

	43 </div>

	44 </div>

	45

	46 <!-- Check that gutters do not interfere with flex content resolution for rows - ->

	47

	48 <div style="width: 10px; height: 60px">

	49 <div class="grid gridRowsTwoMaxFlexContent gridRowColumnGaps" style="height: 100%" data-expected-width="10" data-expected-height="60">

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

	51 <div class="secondRowFirstColumn" data-expected-width="50" data-expected -height="17"></div>

	52 </div>

	53 </div>

	54

	55 <div style="width: 10px; height: 60px">

	56 <div class="grid gridRowsTwoDoubleMaxFlexContent gridRowColumnGaps" data-exp ected-width="10" data-expected-height="63">

	57 <div class="firstRowFirstColumn" data-expected-width="50" data-expected- height="10"></div>

	58 <div class="secondRowFirstColumn" data-expected-width="50" data-expected -height="20"></div>

	59 </div>

	60 </div>

	61

	62 <!-- Check that gutters do not interfere with flex content resolution with conte nt sized tracks -->

	63

	64 <div style="position: relative; width: 100px;">

	65 <div class="grid gridMinMaxFlexFixedAndMinContentAndFixed gridRowColumnGaps" data-expected-width="100" data-expected-height="199">

	66 <div style="grid-column: 1 / span 2;" data-expected-width="54" data-expe cted-height="20">XXXX XXXX</div>

	67 <div style="grid-column: 2 / span 2; grid-row: 2;" data-expected-width=" 44" data-expected-height="20">XXX XXX</div>

	68 <div style="grid-column: 1 / -1; grid-row: 3;" data-expected-width="98" data-expected-height="20">XXXXX XXXXX</div>

	69 <div style="grid-column: 2 / span 2; grid-row: 4;" data-expected-width=" 44" data-expected-height="40">XX XX XX XX</div>

	70 </div>

	71 </div>

	72

	73 <div style="position: relative; width: 100px;">

	74 <div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumn Gaps" data-expected-width="100" data-expected-height="149">

	75 <div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</di v>

	76 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100" >XXX XXX XXX</div>

	77 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width=" 40">XXXX XXXX</div>

	78 <div style="grid-column: 1; grid-row: 4;" data-expected-width="1" data-e xpected-height="0"></div>

	79 </div>

	80 </div>

	81

	82 <div style="position: relative; width: 100px;">

	83 <div class="grid gridMaxContentAndMinMaxFixedMaxContentAndFlex gridRowColumn Gaps" data-expected-width="100" data-expected-height="139">

	84 <div style="grid-column: 2 / span 2;" data-expected-width="39">XX</div>

	85 <div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="109" >XXX XXX XXX</div>

	86 <div style="grid-column: 1 / span 2; grid-row: 3;" data-expected-width=" 90">XXXX XXXX</div>

	87 <div style="grid-column: 1; grid-row: 4;" data-expected-width="51" data- expected-height="0"></div>

	88 </div>

	89 </div>

	90

	91 </body>

OLD	NEW