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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 2161003003: [css-grid] repeat() syntax should take a <track-list> argument (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch for landing Created 4 years, 5 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 | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt ('k') | third_party/WebKit/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="../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;
(...skipping 50 matching lines...) Expand 10 before | Expand all | Expand 10 after
61 61
62 .mixRepeatAfterNonRepeat { 62 .mixRepeatAfterNonRepeat {
63 grid-template-rows: auto repeat(2, 10px); 63 grid-template-rows: auto repeat(2, 10px);
64 grid-template-columns: [start] 140px repeat(2, 250px); 64 grid-template-columns: [start] 140px repeat(2, 250px);
65 } 65 }
66 66
67 .mixNonRepeatAfterRepeat { 67 .mixNonRepeatAfterRepeat {
68 grid-template-rows: repeat(2, 10px) [end] auto; 68 grid-template-rows: repeat(2, 10px) [end] auto;
69 grid-template-columns: repeat(2, 250px) 15% [last]; 69 grid-template-columns: repeat(2, 250px) 15% [last];
70 } 70 }
71
72 .multipleTrackRepeat {
73 grid-template-rows: repeat(3, min-content [a] max-content [b c] 20px [d]) [e ] 1em;
74 grid-template-columns: [start] 20px repeat(2, [a] minmax(20px, min-content) max-content [b]) 200px [c] min-content [end];
75 }
76
71 </style> 77 </style>
72 <script src="../../resources/js-test.js"></script> 78 <script src="../../resources/js-test.js"></script>
73 </head> 79 </head>
74 <body> 80 <body>
75 <div class="grid definite singleSingleTrackRepeat" id="singleSingleTrackRepeatWi thSize"></div> 81 <div class="grid definite singleSingleTrackRepeat" id="singleSingleTrackRepeatWi thSize"></div>
76 <div class="grid min-content singleSingleTrackRepeat" id="singleSingleTrackRepea tWithoutSize"></div> 82 <div class="grid min-content singleSingleTrackRepeat" id="singleSingleTrackRepea tWithoutSize"></div>
77 <div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleT rackRepeat"></div> 83 <div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleT rackRepeat"></div>
78 <div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleT rackRepeatWithChildren"> 84 <div class="grid definite twoSingleTrackRepeat alignContentStart" id="twoSingleT rackRepeatWithChildren">
79 <div class="gridItem"></div> 85 <div class="gridItem"></div>
80 <div class="gridItem2"></div> 86 <div class="gridItem2"></div>
81 </div> 87 </div>
82 <div class="grid definite twoDoubleTrackRepeat contentStart" id="twoDoubleTrackR epeat"> 88 <div class="grid definite twoDoubleTrackRepeat contentStart" id="twoDoubleTrackR epeat">
83 <div class="gridItem"></div> 89 <div class="gridItem"></div>
84 <div class="gridItem2"></div> 90 <div class="gridItem2"></div>
85 </div> 91 </div>
86 <div class="grid definite twoDoubleTrackWithNamedGridLineRepeat contentStart" id ="twoDoubleTrackWithNamedGridLineRepeat"> 92 <div class="grid definite twoDoubleTrackWithNamedGridLineRepeat contentStart" id ="twoDoubleTrackWithNamedGridLineRepeat">
87 <div class="gridItem"></div> 93 <div class="gridItem"></div>
88 <div class="gridItem2"></div> 94 <div class="gridItem2"></div>
89 </div> 95 </div>
90 <div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat justifyC ontentStart" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div> 96 <div class="grid definite twoDoubleTrackWithTrailingNamedGridLineRepeat justifyC ontentStart" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
91 <div class="grid definite trailingNamedGridLineRepeat" id="trailingNamedGridLine Repeat"></div> 97 <div class="grid definite trailingNamedGridLineRepeat" id="trailingNamedGridLine Repeat"></div>
92 <div class="grid definite leadingNamedGridLineRepeat" id="leadingNamedGridLineRe peat"></div> 98 <div class="grid definite leadingNamedGridLineRepeat" id="leadingNamedGridLineRe peat"></div>
93 <div class="grid definite mixRepeatAfterNonRepeat alignContentStart" id="mixRepe atAfterNonRepeat"> 99 <div class="grid definite mixRepeatAfterNonRepeat alignContentStart" id="mixRepe atAfterNonRepeat">
94 <div class="gridItem"></div> 100 <div class="gridItem"></div>
95 </div> 101 </div>
96 <div class="grid definite mixNonRepeatAfterRepeat alignContentStart" id="mixNonR epeatAfterRepeat"></div> 102 <div class="grid definite mixNonRepeatAfterRepeat alignContentStart" id="mixNonR epeatAfterRepeat"></div>
103 <div class="grid multipleTrackRepeat" id="multipleTrackRepeat"></div>
97 104
98 <script src="resources/grid-definitions-parsing-utils.js"></script> 105 <script src="resources/grid-definitions-parsing-utils.js"></script>
99 <script> 106 <script>
100 description('Test that setting and getting grid-template-columns and grid-te mplate-rows with repeat() works as expected'); 107 description('Test that setting and getting grid-template-columns and grid-te mplate-rows with repeat() works as expected');
101 108
102 debug("Test getting grid-template-columns and grid-template-rows set through CSS"); 109 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
103 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thSize"), "120px", "18px"); 110 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thSize"), "120px", "18px");
104 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thoutSize"), "0px", "18px"); 111 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thoutSize"), "0px", "18px");
105 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), " 400px 400px", "0px 0px"); 112 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), " 400px 400px", "0px 0px");
106 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithC hildren"), "400px 400px", "44px 77px"); 113 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithC hildren"), "400px 400px", "44px 77px");
107 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), " 33px 120px 0px 120px", "10px 77px 10px 0px"); 114 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), " 33px 120px 0px 120px", "10px 77px 10px 0px");
108 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGr idLineRepeat"), "33px [middle] 250px [end] 0px [middle] 250px [end]", "10px [sta rt] 77px [end] 10px [start] 0px [end]"); 115 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGr idLineRepeat"), "33px [middle] 250px [end] 0px [middle] 250px [end]", "10px [sta rt] 77px [end] 10px [start] 0px [end]");
109 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailin gNamedGridLineRepeat"), "[before] 0px [before] 0px", "[before] 10px [before] 10p x"); 116 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailin gNamedGridLineRepeat"), "[before] 0px [before] 0px", "[before] 10px [before] 10p x");
110 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepe at"), "250px [end]", "10px [end]"); 117 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepe at"), "250px [end]", "10px [end]");
111 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepea t"), "[start] 250px 250px", "[start] 10px 10px"); 118 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepea t"), "[start] 250px 250px", "[start] 10px 10px");
112 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat") , "[start] 140px 250px 250px", "44px 10px 10px"); 119 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat") , "[start] 140px 250px 250px", "44px 10px 10px");
113 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat") , "250px 250px 120px [last]", "10px 10px [end] 0px"); 120 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat") , "250px 250px 120px [last]", "10px 10px [end] 0px");
121 testGridDefinitionsValues(document.getElementById("multipleTrackRepeat"), "[sta rt] 20px [a] 20px 0px [b a] 20px 0px [b] 200px [c] 0px [end]", "0px [a] 0px [b c ] 20px [d] 0px [a] 0px [b c] 20px [d] 0px [a] 0px [b c] 20px [d e] 16px");
114 122
115 debug(""); 123 debug("");
116 debug("Test invalid repeat syntax."); 124 debug("Test invalid repeat syntax.");
117 function testInvalidSyntax(gridColumn) { 125 function testInvalidSyntax(gridColumn) {
118 element = document.createElement("div"); 126 element = document.createElement("div");
119 document.body.appendChild(element); 127 document.body.appendChild(element);
120 element.style.gridTemplateColumns = gridColumn; 128 element.style.gridTemplateColumns = gridColumn;
121 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-template-columns')", "none"); 129 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-template-columns')", "none");
122 document.body.removeChild(element); 130 document.body.removeChild(element);
123 } 131 }
124 testInvalidSyntax("repeat("); 132 testInvalidSyntax("repeat(");
125 testInvalidSyntax("repeat()"); 133 testInvalidSyntax("repeat()");
126 testInvalidSyntax("repeat(3 / auto)"); 134 testInvalidSyntax("repeat(3 / auto)");
127 testInvalidSyntax("repeat(3 , ,)"); 135 testInvalidSyntax("repeat(3 , ,)");
128 testInvalidSyntax("repeat(0, 15px)"); 136 testInvalidSyntax("repeat(0, 15px)");
129 testInvalidSyntax("repeat(-1, auto)"); 137 testInvalidSyntax("repeat(-1, auto)");
130 testInvalidSyntax("repeat(1, [foo])"); 138 testInvalidSyntax("repeat(1, [foo])");
131 testInvalidSyntax("repeat(1, )"); 139 testInvalidSyntax("repeat(1, )");
132 testInvalidSyntax("repeat(1)"); 140 testInvalidSyntax("repeat(1)");
141 testInvalidSyntax("repeat(3, [a] [a] 100px 200px)");
133 // Nesting is no allowed. 142 // Nesting is no allowed.
134 testInvalidSyntax("repeat(2, repeat(1, auto))"); 143 testInvalidSyntax("repeat(2, repeat(1, auto))");
144 testInvalidSyntax("repeat(2, [a] 100px 200px repeat(2, 20px))");
135 </script> 145 </script>
136 </body> 146 </body>
137 </html> 147 </html>
OLDNEW
« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-element-auto-repeat-get-set-expected.txt ('k') | third_party/WebKit/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