third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html - Issue 1979603002: [css-grid] Fix behavior of flexible track breadths

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

Issue 1979603002: [css-grid] Fix behavior of flexible track breadths (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: New version fixing comment Created 4 years, 7 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
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <head>	3 <head>

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

5 <style>	5 <style>

6 .grid {	6 .grid {

7 font: 10px/1 Ahem;	7 font: 10px/1 Ahem;

8 }	8 }

9	9

10 .gridFixedAndMinContentAndFlex {	10 .gridFixedAndMinContentAndFlex {

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

12 }	12 }

13	13

14 .gridMinMaxFixedFlexAndMaxContentAndAuto {	14 .gridMinMaxFixedFlexAndMaxContentAndAuto {

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

16 }	16 }

17	17

18 .gridMinMaxFlexFixedAndMinContentAndFixed {	18 .gridMinMaxAutoFixedAndMinContentAndFixed {

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

20 }	20 }

21	21

22 .gridMinContentAndMinMaxFixedMinContentAndFlex {	22 .gridMinContentAndMinMaxFixedMinContentAndFlex {

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

24 }	24 }

25	25

26 .gridMaxContentAndMinMaxFixedMaxContentAndFlex {	26 .gridMaxContentAndMinMaxFixedMaxContentAndFlex {

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

28 }	28 }

29	29

(...skipping 26 matching lines...) Expand all Loading...
56 </div>	56 </div>

57	57

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

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

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

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

62 </div>	62 </div>

63 </div>	63 </div>

64	64

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

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

67 <div style="grid-column: 1 / span 2;">XXXX XXXX</div>	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>	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>	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>	70 <div style="grid-column: 2 / span 2; grid-row: 4;">XX XX XX XX</div>

71 </div>	71 </div>

72 </div>	72 </div>

73	73

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

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

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

(...skipping 16 matching lines...) Expand all Loading...
93 function checkColumns(gridId, columnValue)	93 function checkColumns(gridId, columnValue)

94 {	94 {

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

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

97 }	97 }

98	98

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

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

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

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

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

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

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

106	106

107 </script>	107 </script>

108 </html>	108 </html>

OLD	NEW