Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(232)

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

Issue 582733003: [CSSGridLayout] Pass the valid tracks for |tracksForGrowAboveMaxBreadth| (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years, 3 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
OLDNEW
1 <html> 1 <html>
2 <head> 2 <head>
3 <link href="resources/grid.css" rel="stylesheet"/> 3 <link href="resources/grid.css" rel="stylesheet"/>
4 <style> 4 <style>
5 .grid { 5 .grid {
6 font: 10px/1 Ahem; 6 font: 10px/1 Ahem;
7 } 7 }
8 .gridMinContentFixedAndAuto { 8 .gridMinContentFixedAndAuto {
9 grid-template-columns: minmax(min-content, 15px) auto; 9 grid-template-columns: minmax(min-content, 15px) auto;
10 } 10 }
(...skipping 23 matching lines...) Expand all
34 } 34 }
35 .gridAutoMaxContent { 35 .gridAutoMaxContent {
36 grid-template-columns: auto max-content; 36 grid-template-columns: auto max-content;
37 } 37 }
38 .gridMaxContentAndMinContentFixed { 38 .gridMaxContentAndMinContentFixed {
39 grid-template-columns: max-content minmax(min-content, 35px); 39 grid-template-columns: max-content minmax(min-content, 35px);
40 } 40 }
41 .gridMaxContentAndMaxContentFixed { 41 .gridMaxContentAndMaxContentFixed {
42 grid-template-columns: max-content minmax(max-content, 35px); 42 grid-template-columns: max-content minmax(max-content, 35px);
43 } 43 }
44 .gridMinContentFixedAndFixedFixedAndAuto {
45 grid-template-columns: minmax(min-content, 20px) minmax(20px, 30px) auto;
46 }
47 .gridAutoAndFixedFixedAndMaxContentFixed {
48 grid-template-columns: auto minmax(20px, 30px) minmax(max-content, 20px);
49 }
44 50
45 </style> 51 </style>
46 <script src="../../resources/js-test.js"></script> 52 <script src="../../resources/js-test.js"></script>
47 </head> 53 </head>
48 <body> 54 <body>
49 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto"> 55 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAuto">
50 <div class="firstRowBothColumn">XXXX XXXX</div> 56 <div class="firstRowBothColumn">XXXX XXXX</div>
51 </div> 57 </div>
52 58
53 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto"> 59 <div class="grid gridAutoAndAuto" id="gridAutoAndAuto">
(...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after
91 <div class="constrainedContainer"> 97 <div class="constrainedContainer">
92 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixed"> 98 <div class="grid gridMaxContentAndMinContentFixed" id="gridMaxContentAndMinConte ntFixed">
93 <div class="firstRowBothColumn">XXXX XXXX</div> 99 <div class="firstRowBothColumn">XXXX XXXX</div>
94 </div> 100 </div>
95 </div> 101 </div>
96 102
97 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixed"> 103 <div class="grid gridMaxContentAndMaxContentFixed" id="gridMaxContentAndMaxConte ntFixed">
98 <div class="firstRowBothColumn">XXXX XXXX</div> 104 <div class="firstRowBothColumn">XXXX XXXX</div>
99 </div> 105 </div>
100 106
107 <!-- The next four force the grid to grow only a particular subset of tracks abo ve the limits -->
108 <div class="constrainedContainer">
109 <div class="grid gridMinContentFixedAndAuto" id="gridMinContentFixedAndAutoA boveLimits">
110 <div class="firstRowBothColumn">XXXX XXXX</div>
111 <div class="firstRowBothColumn">XXXXXXXXXXX</div>
112 </div>
113 </div>
114
115 <div class="constrainedContainer">
116 <div class="grid gridMaxContentFixedAndAuto" id="gridMaxContentFixedAndAutoA boveLimits">
117 <div class="firstRowBothColumn">XXXX XXXX</div>
118 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
119 </div>
120 </div>
121
122 <div class="constrainedContainer">
123 <div class="grid gridMinContentFixedAndFixedFixedAndAuto" id="gridMinContent FixedAndFixedFixedAndAuto">
124 <div class="firstRowBothColumn">XXXX XXXX</div>
125 <div class="firstRowBothColumn">XXXXXXXXXX</div>
126 </div>
127 </div>
128
129 <div class="constrainedContainer">
130 <div class="grid gridAutoAndFixedFixedAndMaxContentFixed" id="gridAutoAndFix edFixedAndMaxContentFixed">
131 <div class="firstRowBothColumn">XXXX XXXX</div>
132 <div class="firstRowBothColumn">XXXXXXXXXXXXXXX</div>
133 </div>
134 </div>
135
101 <script> 136 <script>
102 function testGridColumnsValues(id, computedColumnValue) 137 function testGridColumnsValues(id, computedColumnValue)
103 { 138 {
104 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert yValue('grid-template-columns')", computedColumnValue); 139 shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropert yValue('grid-template-columns')", computedColumnValue);
105 } 140 }
106 141
107 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px"); 142 testGridColumnsValues("gridMinContentFixedAndAuto", "15px 75px");
108 testGridColumnsValues("gridAutoAndAuto", "45px 45px"); 143 testGridColumnsValues("gridAutoAndAuto", "45px 45px");
109 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px"); 144 testGridColumnsValues("gridMinContentAndMinContentFixed", "20px 30px");
110 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px"); 145 testGridColumnsValues("gridMaxContentAndMinContent", "70px 20px");
111 testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px"); 146 testGridColumnsValues("gridFixedMinContentAndMaxContent", "10px 80px");
112 testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px"); 147 testGridColumnsValues("gridFixedMaxContentAndMinContent", "60px 30px");
113 testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px"); 148 testGridColumnsValues("gridMinContentAndMaxContentFixed", "20px 70px");
114 testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px"); 149 testGridColumnsValues("gridMaxContentFixedAndAuto", "65px 25px");
115 testGridColumnsValues("gridAutoMinContent", "70px 20px"); 150 testGridColumnsValues("gridAutoMinContent", "70px 20px");
116 testGridColumnsValues("gridAutoMaxContent", "20px 70px"); 151 testGridColumnsValues("gridAutoMaxContent", "20px 70px");
117 testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px"); 152 testGridColumnsValues("gridMaxContentAndMinContentFixed", "70px 20px");
118 testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px"); 153 testGridColumnsValues("gridMaxContentAndMaxContentFixed", "55px 35px");
154
155 testGridColumnsValues("gridMinContentFixedAndAutoAboveLimits", "15px 95px");
156 testGridColumnsValues("gridMaxContentFixedAndAutoAboveLimits", "65px 85px");
157 testGridColumnsValues("gridMinContentFixedAndFixedFixedAndAuto", "20px 20px 6 0px");
158 testGridColumnsValues("gridAutoAndFixedFixedAndMaxContentFixed", "40px 20px 9 0px");
119 </script> 159 </script>
120 </body> 160 </body>
121 </html> 161 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698