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

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/named-grid-line-get-set.html

Issue 2033033002: [css-grid] Percentage columns can always be resolved during layout (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Get rid of hasDefiniteLogicalWidth() 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
OLDNEW
1 <!DOCTYPE HTML> 1 <!DOCTYPE HTML>
2 <html> 2 <html>
3 <head> 3 <head>
4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet"> 4 <link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel ="stylesheet">
5 <link href="resources/grid.css" rel="stylesheet"> 5 <link href="resources/grid.css" rel="stylesheet">
6 <link href="resources/grid-alignment.css" rel="stylesheet"> 6 <link href="resources/grid-alignment.css" rel="stylesheet">
7 <style> 7 <style>
8 .definite { 8 .definite {
9 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ 9 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */
10 width: 800px; 10 width: 800px;
11 height: 600px; 11 height: 600px;
12 } 12 }
13 .gridItem { 13 .gridItem {
14 grid-column: 1; 14 grid-column: 1;
15 grid-row: 1; 15 grid-row: 1;
16 height: 22px; 16 height: 22px;
17 width: 77px; 17 width: 77px;
18 } 18 }
19 .gridWithFixed { 19 .gridWithFixed {
20 grid-template-columns: [first] 10px; 20 grid-template-columns: [first] 10px;
21 grid-template-rows: [first] 15px; 21 grid-template-rows: [first] 15px;
22 } 22 }
23 .gridWithPercent { 23 .gridWithPercent {
24 grid-template-columns: 53% [last]; 24 grid-template-columns: 50% [last];
svillar 2016/06/08 10:38:03 I guess this is not really needed. It also leads t
Manuel Rego 2016/06/08 11:56:30 Again the same reason than before.
25 grid-template-rows: 27% [last]; 25 grid-template-rows: 27% [last];
26 } 26 }
27 .gridWithAuto { 27 .gridWithAuto {
28 grid-template-columns: [first] auto; 28 grid-template-columns: [first] auto;
29 grid-template-rows: auto [last]; 29 grid-template-rows: auto [last];
30 } 30 }
31 .gridWithMinMax { 31 .gridWithMinMax {
32 grid-template-columns: [first] minmax(10%, 15px); 32 grid-template-columns: [first] minmax(10%, 15px);
33 grid-template-rows: minmax(20px, 50%) [last]; 33 grid-template-rows: minmax(20px, 50%) [last];
34 } 34 }
(...skipping 62 matching lines...) Expand 10 before | Expand all | Expand 10 after
97 <div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBracke ts"></div> 97 <div class="grid definite gridWithMisplacedBrackets" id="gridWithMisplacedBracke ts"></div>
98 <div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrac kets"></div> 98 <div class="grid definite gridWithContiguousBrackets" id="gridWithContiguousBrac kets"></div>
99 <div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustom Idents"></div> 99 <div class="grid definite gridWithInvalidCustomIdents" id="gridWithInvalidCustom Idents"></div>
100 100
101 <script src="resources/grid-definitions-parsing-utils.js"></script> 101 <script src="resources/grid-definitions-parsing-utils.js"></script>
102 <script> 102 <script>
103 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected'); 103 description('Test that setting and getting grid-template-columns and grid-te mplate-rows works as expected');
104 104
105 debug("Test getting grid-template-columns and grid-template-rows set through CSS"); 105 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
106 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " [first] 10px", "[first] 15px"); 106 testGridDefinitionsValues(document.getElementById("gridWithFixedElement"), " [first] 10px", "[first] 15px");
107 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "424px [last]", "162px [last]"); 107 testGridDefinitionsValues(document.getElementById("gridWithPercentElement"), "400px [last]", "162px [last]");
108 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px [last]", "0px [last]"); 108 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz e"), "0px [last]", "0px [last]");
109 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "77px [last]", "22px [last]"); 109 testGridDefinitionsValues(document.getElementById("gridWithPercentWithoutSiz eWithChildren"), "38.5px [last]", "22px [last]");
110 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[ first] 0px", "0px [last]"); 110 testGridDefinitionsValues(document.getElementById("gridWithAutoElement"), "[ first] 0px", "0px [last]");
111 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "[first] 77px", "22px [last]"); 111 testGridDefinitionsValues(document.getElementById("gridWithAutoWithChildrenE lement"), "[first] 77px", "22px [last]");
112 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first ] 80px", "300px [last]"); 112 testGridDefinitionsValues(document.getElementById("gridWithMinMax"), "[first ] 80px", "300px [last]");
113 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]"); 113 testGridDefinitionsValues(document.getElementById("gridWithFixedMultiple"), "[first nav] 10px [last]", "[first nav] 15px [last]");
114 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [ nav2] 450px [last]"); 114 testGridDefinitionsValues(document.getElementById("gridWithPercentageSameStr ingMultipleTimes"), "[first nav] 80px [nav] 120px [last]", "[first nav2] 150px [ nav2] 450px [last]");
115 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav n av2] 150px [last]"); 115 testGridDefinitionsValues(document.getElementById("gridWithRepeatElement"), "[first] 10px [nav nav2] 400px [nav nav2] 400px", "100px [nav nav2] 150px [nav n av2] 150px [last]");
116 testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px"); 116 testGridDefinitionsValues(document.getElementById("gridWithEmptyBrackets"), "10px", "20px 50px");
117 117
118 debug(""); 118 debug("");
119 debug("Test getting and setting grid-template-columns and grid-template-rows through JS"); 119 debug("Test getting and setting grid-template-columns and grid-template-rows through JS");
(...skipping 25 matching lines...) Expand all
145 testGridDefinitionsSetBadJSValues("[foo]", "[bar"); 145 testGridDefinitionsSetBadJSValues("[foo]", "[bar");
146 testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]"); 146 testGridDefinitionsSetBadJSValues("[foo bar]", "[bar foo]");
147 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); 147 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
148 testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2 em"); 148 testGridDefinitionsSetBadJSValues("[foo [bar]] 10px", "50% [[baz bar] foo] 2 em");
149 testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em") ; 149 testGridDefinitionsSetBadJSValues("[foo bar 10px", "50% [baz bar] foo] 2em") ;
150 testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]"); 150 testGridDefinitionsSetBadJSValues("[foo 10px] 2em", "[50% bar] [foo]");
151 testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]"); 151 testGridDefinitionsSetBadJSValues("[auto] 2em", "50% [bar initial]");
152 </script> 152 </script>
153 </body> 153 </body>
154 </html> 154 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698