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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-get-set.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
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-and-areas-get-get-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-get-set-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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) 15px;
19 grid-template-rows: (first) 15px;
20 } 19 }
21 .gridWithPercent { 20 .gridWithPercent {
22 grid-template-columns: 53% (last); 21 grid-template: 53% (last) / 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 / auto (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) / 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) 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) 25% (nav2) 75 % (last);
39 grid-template-rows: (first nav2) 25% (nav2) 75% (last);
40 } 34 }
41 .gridWithRepeat { 35 .gridWithRepeat {
42 grid-template-columns: (first) 10px repeat(2, (nav nav2) 50%); 36 grid-template: (first) 10px repeat(2, (nav nav2) 50%) / 100px repeat(2, (nav nav2) 25%) (last);
43 grid-template-rows: 100px repeat(2, (nav nav2) 25%) (last);
44 } 37 }
45 .gridWithEmptyParentheses { 38 .gridWithEmptyParentheses {
46 grid-template-columns: () 10px; 39 grid-template: () 10px / 20px ( ) 50px ();
47 grid-template-rows: 20px ( ) 50px ();
48 } 40 }
49 .gridWithoutParentheses { 41 .gridWithoutParentheses {
50 grid-template-columns: first nav 10px; 42 grid-template: first nav 10px / first 50% last;
51 grid-template-rows: first 50% last;
52 } 43 }
53 .gridWithInvalidNestedParentheses { 44 .gridWithInvalidNestedParentheses {
54 grid-template-columns: (first (nav)) 10px (last); 45 grid-template: (first (nav)) 10px (last) / (first) 50% (last (nav) nav2);
55 grid-template-rows: (first) 50% (last (nav) nav2);
56 } 46 }
57 .gridWithUnbalancedParentheses { 47 .gridWithUnbalancedParentheses {
58 grid-template-columns: (first nav 10px; 48 grid-template: (first nav 10px / (first) 50% last);
59 grid-template-rows: (first) 50% last);
60 } 49 }
61 .gridWithMisplacedParentheses { 50 .gridWithMisplacedParentheses {
62 grid-template-columns: (first 10px) 50%; 51 grid-template: (first 10px) 50% / (first) (nav 50%);
63 grid-template-rows: (first) (nav 50%);
64 } 52 }
65 .gridWithContiguousParentheses { 53 .gridWithContiguousParentheses {
66 grid-template-columns: (first) (nav) 10px; 54 grid-template: (first) (nav) 10px / 50px (nav nav2) (middle) 10px;
Julien - ping for review 2014/02/21 20:04:50 I would keep these with the longhands as it's unne
67 grid-template-rows: 50px (nav nav2) (middle) 10px;
68 } 55 }
69 </style> 56 </style>
70 <script src="../../resources/js-test.js"></script> 57 <script src="../../resources/js-test.js"></script>
71 </head> 58 </head>
72 <body> 59 <body>
73 <div class="grid gridWithFixed" id="gridWithFixedElement"></div> 60 <div class="grid gridWithFixed" id="gridWithFixedElement"></div>
74 <div class="grid gridWithPercent" id="gridWithPercentElement"></div> 61 <div class="grid gridWithPercent" id="gridWithPercentElement"></div>
75 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div> 62 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSize"> </div>
76 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren"> 63 <div class="indefiniteSizeGrid gridWithPercent" id="gridWithPercentWithoutSizeWi thChildren">
77 <div class="gridItem"></div> 64 <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"); 123 debug("Test getting and setting invalid grid-template-columns and grid-templ ate-rows through JS");
137 testGridDefinitionsSetBadJSValues("(foo)", "(bar"); 124 testGridDefinitionsSetBadJSValues("(foo)", "(bar");
138 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)"); 125 testGridDefinitionsSetBadJSValues("(foo bar)", "(bar foo)");
139 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em"); 126 testGridDefinitionsSetBadJSValues("foo bar 10px", "50% baz bar foo 2em");
140 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em"); 127 testGridDefinitionsSetBadJSValues("(foo (bar)) 10px", "50% ((baz bar) foo) 2 em");
141 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ; 128 testGridDefinitionsSetBadJSValues("(foo bar 10px", "50% (baz bar) foo) 2em") ;
142 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)"); 129 testGridDefinitionsSetBadJSValues("(foo 10px) 2em", "(50% bar) (foo)");
143 </script> 130 </script>
144 </body> 131 </body>
145 </html> 132 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-and-areas-get-get-expected.txt ('k') | LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-get-set-expected.txt » ('j') | Source/core/css/CSSComputedStyleDeclaration.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698