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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set.html

Issue 1168453002: [CSSGridLayout] Switch from parentheses to brackets for grid line names (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Patch for landing v2 Created 5 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
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html ('k') | LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> 1 <!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
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 }
(...skipping 21 matching lines...) Expand all
32 grid-template-rows: repeat(2, auto); 32 grid-template-rows: repeat(2, auto);
33 grid-template-columns: repeat(2, minmax(15px, 50%)); 33 grid-template-columns: repeat(2, minmax(15px, 50%));
34 } 34 }
35 35
36 .twoDoubleTrackRepeat { 36 .twoDoubleTrackRepeat {
37 grid-template-rows: repeat(2, minmax(5px, 10px) auto); 37 grid-template-rows: repeat(2, minmax(5px, 10px) auto);
38 grid-template-columns: repeat(2, auto minmax(100px, 120px)); 38 grid-template-columns: repeat(2, auto minmax(100px, 120px));
39 } 39 }
40 40
41 .twoDoubleTrackWithNamedGridLineRepeat { 41 .twoDoubleTrackWithNamedGridLineRepeat {
42 grid-template-rows: repeat(2, 10px (start) auto (end)); 42 grid-template-rows: repeat(2, 10px [start] auto [end]);
43 grid-template-columns: repeat(2, auto (middle) 250px (end)); 43 grid-template-columns: repeat(2, auto [middle] 250px [end]);
44 } 44 }
45 45
46 .twoDoubleTrackWithTrailingNamedGridLineRepeat { 46 .twoDoubleTrackWithTrailingNamedGridLineRepeat {
47 grid-template-rows: repeat(2, (before) 10px); 47 grid-template-rows: repeat(2, [before] 10px);
48 grid-template-columns: repeat(2, (before) auto); 48 grid-template-columns: repeat(2, [before] auto);
49 } 49 }
50 50
51 .trailingNamedGridLineRepeat { 51 .trailingNamedGridLineRepeat {
52 grid-template-rows: repeat(1, 10px) (end); 52 grid-template-rows: repeat(1, 10px) [end];
53 grid-template-columns: repeat(1, 250px) (end); 53 grid-template-columns: repeat(1, 250px) [end];
54 } 54 }
55 55
56 .leadingNamedGridLineRepeat { 56 .leadingNamedGridLineRepeat {
57 grid-template-rows: (start) repeat(2, 10px); 57 grid-template-rows: [start] repeat(2, 10px);
58 grid-template-columns: (start) repeat(2, 250px); 58 grid-template-columns: [start] repeat(2, 250px);
59 } 59 }
60 60
61 .mixRepeatAfterNonRepeat { 61 .mixRepeatAfterNonRepeat {
62 grid-template-rows: auto repeat(2, 10px); 62 grid-template-rows: auto repeat(2, 10px);
63 grid-template-columns: (start) 140px repeat(2, 250px); 63 grid-template-columns: [start] 140px repeat(2, 250px);
64 } 64 }
65 65
66 .mixNonRepeatAfterRepeat { 66 .mixNonRepeatAfterRepeat {
67 grid-template-rows: repeat(2, 10px) (end) auto; 67 grid-template-rows: repeat(2, 10px) [end] auto;
68 grid-template-columns: repeat(2, 250px) 15% (last); 68 grid-template-columns: repeat(2, 250px) 15% [last];
69 } 69 }
70 </style> 70 </style>
71 <script src="../../resources/js-test.js"></script> 71 <script src="../../resources/js-test.js"></script>
72 </head> 72 </head>
73 <body> 73 <body>
74 <div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize">< /div> 74 <div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize">< /div>
75 <div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRep eatWithoutSize"></div> 75 <div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRep eatWithoutSize"></div>
76 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div> 76 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
77 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren"> 77 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
78 <div class="gridItem"></div> 78 <div class="gridItem"></div>
(...skipping 18 matching lines...) Expand all
97 <script src="resources/grid-definitions-parsing-utils.js"></script> 97 <script src="resources/grid-definitions-parsing-utils.js"></script>
98 <script> 98 <script>
99 description('Test that setting and getting grid-template-columns and grid-te mplate-rows with repeat() works as expected'); 99 description('Test that setting and getting grid-template-columns and grid-te mplate-rows with repeat() works as expected');
100 100
101 debug("Test getting grid-template-columns and grid-template-rows set through CSS"); 101 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
102 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thSize"), "120px", "18px"); 102 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thSize"), "120px", "18px");
103 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thoutSize"), "0px", "18px"); 103 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thoutSize"), "0px", "18px");
104 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), " 400px 400px", "0px 0px"); 104 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), " 400px 400px", "0px 0px");
105 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithC hildren"), "400px 400px", "44px 77px"); 105 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithC hildren"), "400px 400px", "44px 77px");
106 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), " 33px 120px 0px 120px", "10px 77px 10px 0px"); 106 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), " 33px 120px 0px 120px", "10px 77px 10px 0px");
107 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGr idLineRepeat"), "33px (middle) 250px (end) 0px (middle) 250px (end)", "10px (sta rt) 77px (end) 10px (start) 0px (end)"); 107 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGr idLineRepeat"), "33px [middle] 250px [end] 0px [middle] 250px [end]", "10px [sta rt] 77px [end] 10px [start] 0px [end]");
108 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailin gNamedGridLineRepeat"), "(before) 0px (before) 0px", "(before) 10px (before) 10p x"); 108 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailin gNamedGridLineRepeat"), "[before] 0px [before] 0px", "[before] 10px [before] 10p x");
109 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepe at"), "250px (end)", "10px (end)"); 109 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepe at"), "250px [end]", "10px [end]");
110 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepea t"), "(start) 250px 250px", "(start) 10px 10px"); 110 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepea t"), "[start] 250px 250px", "[start] 10px 10px");
111 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat") , "(start) 140px 250px 250px", "44px 10px 10px"); 111 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat") , "[start] 140px 250px 250px", "44px 10px 10px");
112 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat") , "250px 250px 120px (last)", "10px 10px (end) 0px"); 112 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat") , "250px 250px 120px [last]", "10px 10px [end] 0px");
113 113
114 debug(""); 114 debug("");
115 debug("Test invalid repeat syntax."); 115 debug("Test invalid repeat syntax.");
116 function testInvalidSyntax(gridColumn) { 116 function testInvalidSyntax(gridColumn) {
117 element = document.createElement("div"); 117 element = document.createElement("div");
118 document.body.appendChild(element); 118 document.body.appendChild(element);
119 element.style.gridTemplateColumns = gridColumn; 119 element.style.gridTemplateColumns = gridColumn;
120 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-template-columns')", "none"); 120 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-template-columns')", "none");
121 document.body.removeChild(element); 121 document.body.removeChild(element);
122 } 122 }
123 testInvalidSyntax("repeat("); 123 testInvalidSyntax("repeat(");
124 testInvalidSyntax("repeat()"); 124 testInvalidSyntax("repeat()");
125 testInvalidSyntax("repeat(3 / auto)"); 125 testInvalidSyntax("repeat(3 / auto)");
126 testInvalidSyntax("repeat(3 , ,)"); 126 testInvalidSyntax("repeat(3 , ,)");
127 testInvalidSyntax("repeat(0, 15px)"); 127 testInvalidSyntax("repeat(0, 15px)");
128 testInvalidSyntax("repeat(-1, auto)"); 128 testInvalidSyntax("repeat(-1, auto)");
129 testInvalidSyntax("repeat(1, (foo))"); 129 testInvalidSyntax("repeat(1, [foo])");
130 testInvalidSyntax("repeat(1, )"); 130 testInvalidSyntax("repeat(1, )");
131 testInvalidSyntax("repeat(1)"); 131 testInvalidSyntax("repeat(1)");
132 // Nesting is no allowed. 132 // Nesting is no allowed.
133 testInvalidSyntax("repeat(2, repeat(1, auto))"); 133 testInvalidSyntax("repeat(2, repeat(1, auto))");
134 </script> 134 </script>
135 </body> 135 </body>
136 </html> 136 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html ('k') | LayoutTests/fast/css-grid-layout/grid-element-repeat-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698