LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html - Issue 448993002: [CSSGridLayout] Skip items spanning flex tracks in track sizing algo

Side by Side Diff: LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html

Issue 448993002: [CSSGridLayout] Skip items spanning flex tracks in track sizing algo (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

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

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <html>

	3 <head>

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

	5 <style>

	6 .grid {

	7 font: 10px/1 Ahem;

	8 }

	9

	10 .gridFixedAndMinContentAndFlex {

	11 grid-template-columns: 20px min-content 1fr;

	12 }

	13

	14 .gridMinMaxFixedFlexAndMaxContentAndAuto {

	15 grid-template-columns: minmax(20px, 1fr) max-content auto;

	16 }

	17

	18 .gridMinMaxFlexFixedAndMinContentAndFixed {

	19 grid-template-columns: minmax(0.5fr, 35px) min-content 25px;

	20 }

	21

	22 .gridMinContentAndMinMaxFixedMinContentAndFlex {

	23 grid-template-columns: min-content minmax(20px, min-content) 2fr;

	24 }

	25

	26 .gridMaxContentAndMinMaxFixedMaxContentAndFlex {

	27 grid-template-columns: max-content minmax(20px, max-content) 1fr;

	28 }

	29

	30 </style>

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

	32 </head>

	33 <body>

	34

	35 <p>Test that resolving auto tracks on grid items works properly.</p>

	36

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

	38 <div id="gridFixedAndMinContentAndFlex" class="grid gridFixedAndMinContentAn dFlex">

	39 <div style="grid-column: 2 / span 2;">XXXXXXXX</div>

	40 <div style="grid-column: 1 / span 2; grid-row: 2;">XXXXX</div>

	41 </div>

	42 </div>

	43

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

	45 <div id="gridFixedAndMinContentAndFlexMultipleOverlap" class="grid gridFixed AndMinContentAndFlex">

	46 <div style="grid-column: 1 / span 2;">XXX XXX</div>

	47 <div style="grid-column: 1 / -1; grid-row: 2;">XXXX</div>

	48 </div>

	49 </div>

	50

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

	52 <div id="gridMinMaxFixedFlexAndMaxContentAndAuto" class="grid gridMinMaxFixe dFlexAndMaxContentAndAuto">

	53 <div style="grid-column: 1 / span 2;">XXX XXX</div>

	54 <div style="grid-column: 2 / span 2; grid-row: 2;">XXXX</div>

	55 </div>

	56 </div>

	57

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

	59 <div id="gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems" class=" grid gridMinMaxFixedFlexAndMaxContentAndAuto">

	60 <div style="grid-column: 1 / -1;">XXX XXX</div>

	61 <div style="grid-column: 1 / span 2; grid-row: 2;">XXXX XXXX</div>

	62 </div>

	63 </div>

	64

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

	66 <div id="gridMinMaxFlexFixedAndMinContentAndFixed" class="grid gridMinMaxFle xFixedAndMinContentAndFixed">

	67 <div style="grid-column: 1 / span 2;">XXXX XXXX</div>

	68 <div style="grid-column: 2 / span 2; grid-row: 2;">XXX XXX</div>

	69 <div style="grid-column: 1 / -1; grid-row: 3;">XXXXX XXXXX</div>

	70 <div style="grid-column: 2 / span 2; grid-row: 4;">XX XX XX XX</div>

	71 </div>

	72 </div>

	73

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

	75 <div id="gridMinContentAndMinMaxFixedMinContentAndFlex" class="grid gridMinC ontentAndMinMaxFixedMinContentAndFlex">

	76 <div style="grid-column: 2 / span 2;">XXXXX</div>

	77 <div style="grid-column: 1 / -1; grid-row: 2;">XXX XXX XXX</div>

	78 <div style="grid-column: 1 / span 2; grid-row: 3;">XXXX XXXX</div>

	79 </div>

	80 </div>

	81

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

	83 <div id="gridMaxContentAndMinMaxFixedMaxContentAndFlex" class="grid gridMaxC ontentAndMinMaxFixedMaxContentAndFlex">

	84 <div style="grid-column: 2 / span 2;">XXXXX</div>

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

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

	87 </div>

	88 </div>

	89

	90 </body>

	91 <script src="resources/grid-definitions-parsing-utils.js"></script>

	92 <script>

	93 function checkColumns(gridId, columnValue)

	94 {

	95 window.gridElement = document.getElementById(gridId);

	96 shouldBeEqualToString("window.getComputedStyle(" + gridId + ", '').getPrope rtyValue('grid-template-columns')", columnValue);

	97 }

	98

	99 checkColumns("gridFixedAndMinContentAndFlex", "20px 30px 50px");

	100 checkColumns("gridFixedAndMinContentAndFlexMultipleOverlap", "20px 10px 70px");

	101 checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px");

	102 checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100p x 0px 0px");

	103 checkColumns("gridMinMaxFlexFixedAndMinContentAndFixed", "35px 5px 25px");

	104 checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px");

	105 checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px");

	106

	107 </script>

	108 </html>

OLD	NEW