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

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-and-areas-get-get.html

Issue 149373004: [CSS Grid Layout] Implementation of the grid-template shorthand. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@grid-template-working
Patch Set: Adding checks and layout tests to verify misplaced 'none' arguments. Created 6 years, 10 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="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <style> 5 <style>
6 .grid { 6 .grid {
7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */ 7 /* Give an explicit size to the grid so that percentage grid tracks have a c onsistent resolution */
8 width: 800px; 8 width: 800px;
9 height: 600px; 9 height: 600px;
10 } 10 }
11 .gridItem { 11 .gridItem {
12 grid-column: 1; 12 grid-column: 1;
13 grid-row: 1; 13 grid-row: 1;
14 height: 22px; 14 height: 22px;
15 width: 77px; 15 width: 77px;
16 } 16 }
17 .gridWithFixed { 17 .gridWithFixed {
18 grid-template-columns: (first) 10px; 18 grid-template: (first) 10px / (first) "a" 15px;
19 grid-template-rows: (first) 15px;
20 } 19 }
21 .gridWithPercent { 20 .gridWithPercent {
22 grid-template-columns: 53% (last); 21 grid-template: 53% (last) / "a" 27% (last);
23 grid-template-rows: 27% (last);
24 } 22 }
25 .gridWithAuto { 23 .gridWithAuto {
26 grid-template-columns: (first) auto; 24 grid-template: (first) auto / "a" (last);
27 grid-template-rows: auto (last);
28 } 25 }
29 .gridWithMinMax { 26 .gridWithMinMax {
30 grid-template-columns: (first) minmax(10%, 15px); 27 grid-template: (first) minmax(10%, 15px) / "a" minmax(20px, 50%) (last);
31 grid-template-rows: minmax(20px, 50%) (last);
32 } 28 }
33 .gridWithFixedMultiple { 29 .gridWithFixedMultiple {
34 grid-template-columns: (first nav) 10px (last); 30 grid-template: (first nav) 10px (last) / (first nav) "a" 15px (last);
35 grid-template-rows: (first nav) 15px (last);
36 } 31 }
37 .gridWithPercentageSameStringMultipleTimes { 32 .gridWithPercentageSameStringMultipleTimes {
38 grid-template-columns: (first nav) 10% (nav) 15% (last); 33 grid-template: (first nav) 10% (nav) 15% (last) / (first nav2) "a b" 25% (na v2)
39 grid-template-rows: (first nav2) 25% (nav2) 75% (last); 34 "c d" 75% (la st);
40 } 35 }
41 .gridWithRepeat { 36 .gridWithRepeat {
42 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%); 37 grid-template: (first) 10px repeat(2, (nav nav2) 50%) / "a b c" 100px (nav)
43 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last); 38 (nav2) "d e f" 25% (nav)
39 (nav2) "g h i" 25% (last);
44 } 40 }
45 .gridWithEmptyParentheses { 41 .gridWithEmptyParentheses {
46 grid-template-columns: () 10px; 42 grid-template: () 10px / "a" 20px ( )
47 grid-template-rows: 20px ( ) 50px (); 43 "b" 50px ();
48 } 44 }
49 .gridWithoutParentheses { 45 .gridWithoutParentheses {
50 grid-template-columns: first nav 10px; 46 grid-template: first nav 10px / first "a" 50% last;
51 grid-template-rows: first 50% last;
52 } 47 }
53 .gridWithInvalidNestedParentheses { 48 .gridWithInvalidNestedParentheses {
54 grid-template-columns: (first (nav)) 10px (last); 49 grid-template: (first (nav)) 10px (last) / (first) "a" 50% (last (nav) nav2) ;
55 grid-template-rows: (first) 50% (last (nav) nav2);
56 } 50 }
57 .gridWithUnbalancedParentheses { 51 .gridWithUnbalancedParentheses {
58 grid-template-columns: (first nav 10px; 52 grid-template: (first nav 10px / (first) "a" 50% last);
59 grid-template-rows: (first) 50% last);
60 } 53 }
61 .gridWithMisplacedParentheses { 54 .gridWithMisplacedParentheses {
62 grid-template-columns: (first 10px) 50%; 55 grid-template: (first 10px) 50% / (first) "a b" (nav 50%);
63 grid-template-rows: (first) (nav 50%);
64 } 56 }
65 .gridWithContiguousParentheses { 57 .gridWithContiguousParentheses {
66 grid-template-columns: (first) (nav) 10px; 58 grid-template: (first) (nav) 10px / "a" 50px (nav nav2)
67 grid-template-rows: 50px (nav nav2) (middle) 10px; 59 "b" (middle)
60 "c" 10px;
68 } 61 }
69 </style> 62 </style>
70 <script src="../../resources/js-test.js"></script> 63 <script src="../../resources/js-test.js"></script>
71 </head> 64 </head>
72 <body> 65 <body>
73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 66 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 67 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
75 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div> 68 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div>
76 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren"> 69 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren">
77 <div class="gridItem"></div> 70 <div class="gridItem"></div>
(...skipping 58 matching lines...) Expand 10 before | Expand all | Expand 10 after
136 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS"); 129 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS");
137 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); 130 testGridDefinitionsSetBadJSValues("(foo)", "(bar");
138 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); 131 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)");
139 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); 132 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
140 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em"); 133 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em");
141 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ; 134 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ;
142 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); 135 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)");
143 </script> 136 </script>
144 </body> 137 </body>
145 </html> 138 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698