Chromium Code Reviews

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

Issue 146773002: [CSS Grid Layout] Rename grid-definition-{columns|rows} to match the new syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Fixed renaming issues with some tests. Created 6 years, 10 months ago
Use n/p to move between diff chunks; N/P to move between comments.
Jump to:
View unified diff |
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-element-padding-margin.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 <script> 4 <script>
5 if (window.testRunner) 5 if (window.testRunner)
6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1); 6 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 </script> 7 </script>
8 <link href="resources/grid.css" rel="stylesheet"> 8 <link href="resources/grid.css" rel="stylesheet">
9 <style> 9 <style>
10 .grid { 10 .grid {
(...skipping 10 matching lines...)
21 } 21 }
22 22
23 .gridItem2 { 23 .gridItem2 {
24 grid-column: 2; 24 grid-column: 2;
25 grid-row: 2; 25 grid-row: 2;
26 width: 66px; 26 width: 66px;
27 height: 77px; 27 height: 77px;
28 } 28 }
29 29
30 .singleSingleTrackRepeat { 30 .singleSingleTrackRepeat {
31 grid-definition-rows: repeat(1, 18px); 31 grid-template-rows: repeat(1, 18px);
32 grid-definition-columns: repeat(1, 15%); 32 grid-template-columns: repeat(1, 15%);
33 } 33 }
34 34
35 .twoSingleTrackRepeat { 35 .twoSingleTrackRepeat {
36 grid-definition-rows: repeat(2, auto); 36 grid-template-rows: repeat(2, auto);
37 grid-definition-columns: repeat(2, minmax(15px, 50%)); 37 grid-template-columns: repeat(2, minmax(15px, 50%));
38 } 38 }
39 39
40 .twoDoubleTrackRepeat { 40 .twoDoubleTrackRepeat {
41 grid-definition-rows: repeat(2, minmax(5px, 10px) auto); 41 grid-template-rows: repeat(2, minmax(5px, 10px) auto);
42 grid-definition-columns: repeat(2, auto minmax(100px, 120px)); 42 grid-template-columns: repeat(2, auto minmax(100px, 120px));
43 } 43 }
44 44
45 .twoDoubleTrackWithNamedGridLineRepeat { 45 .twoDoubleTrackWithNamedGridLineRepeat {
46 grid-definition-rows: repeat(2, 10px (start) auto (end)); 46 grid-template-rows: repeat(2, 10px (start) auto (end));
47 grid-definition-columns: repeat(2, auto (middle) 250px (end)); 47 grid-template-columns: repeat(2, auto (middle) 250px (end));
48 } 48 }
49 49
50 .twoDoubleTrackWithTrailingNamedGridLineRepeat { 50 .twoDoubleTrackWithTrailingNamedGridLineRepeat {
51 grid-definition-rows: repeat(2, (before) 10px); 51 grid-template-rows: repeat(2, (before) 10px);
52 grid-definition-columns: repeat(2, (before) auto); 52 grid-template-columns: repeat(2, (before) auto);
53 } 53 }
54 54
55 .trailingNamedGridLineRepeat { 55 .trailingNamedGridLineRepeat {
56 grid-definition-rows: repeat(1, 10px) (end); 56 grid-template-rows: repeat(1, 10px) (end);
57 grid-definition-columns: repeat(1, 250px) (end); 57 grid-template-columns: repeat(1, 250px) (end);
58 } 58 }
59 59
60 .leadingNamedGridLineRepeat { 60 .leadingNamedGridLineRepeat {
61 grid-definition-rows: (start) repeat(2, 10px); 61 grid-template-rows: (start) repeat(2, 10px);
62 grid-definition-columns: (start) repeat(2, 250px); 62 grid-template-columns: (start) repeat(2, 250px);
63 } 63 }
64 64
65 .mixRepeatAfterNonRepeat { 65 .mixRepeatAfterNonRepeat {
66 grid-definition-rows: auto repeat(2, 10px); 66 grid-template-rows: auto repeat(2, 10px);
67 grid-definition-columns: (start) 140px repeat(2, 250px); 67 grid-template-columns: (start) 140px repeat(2, 250px);
68 } 68 }
69 69
70 .mixNonRepeatAfterRepeat { 70 .mixNonRepeatAfterRepeat {
71 grid-definition-rows: repeat(2, 10px) (end) auto; 71 grid-template-rows: repeat(2, 10px) (end) auto;
72 grid-definition-columns: repeat(2, 250px) 15% (last); 72 grid-template-columns: repeat(2, 250px) 15% (last);
73 } 73 }
74 </style> 74 </style>
75 <script src="../../resources/js-test.js"></script> 75 <script src="../../resources/js-test.js"></script>
76 </head> 76 </head>
77 <body> 77 <body>
78 <div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize">< /div> 78 <div class="grid singleSingleTrackRepeat" id="singleSingleTrackRepeatWithSize">< /div>
79 <div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRep eatWithoutSize"></div> 79 <div class="indefiniteSizeGrid singleSingleTrackRepeat" id="singleSingleTrackRep eatWithoutSize"></div>
80 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div> 80 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
81 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren"> 81 <div class="grid twoSingleTrackRepeat" id="twoSingleTrackRepeatWithChildren">
82 <div class="gridItem"></div> 82 <div class="gridItem"></div>
(...skipping 10 matching lines...)
93 <div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTra ckWithTrailingNamedGridLineRepeat"></div> 93 <div class="grid twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTra ckWithTrailingNamedGridLineRepeat"></div>
94 <div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat">< /div> 94 <div class="grid trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat">< /div>
95 <div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></d iv> 95 <div class="grid leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></d iv>
96 <div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat"> 96 <div class="grid mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat">
97 <div class="gridItem"></div> 97 <div class="gridItem"></div>
98 </div> 98 </div>
99 <div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div> 99 <div class="grid mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></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-definition-columns and grid- definition-rows with repeat() works as expected'); 103 description('Test that setting and getting grid-template-columns and grid-te mplate-rows with repeat() works as expected');
104 104
105 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); 105 debug("Test getting grid-template-columns and grid-template-rows set through CSS");
106 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thSize"), "120px", "18px"); 106 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thSize"), "120px", "18px");
107 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thoutSize"), "0px", "18px"); 107 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeatWi thoutSize"), "0px", "18px");
108 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), " 400px 400px", "0px 0px"); 108 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), " 400px 400px", "0px 0px");
109 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithC hildren"), "400px 400px", "44px 77px"); 109 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeatWithC hildren"), "400px 400px", "44px 77px");
110 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), " 33px 120px 0px 120px", "10px 77px 10px 0px"); 110 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), " 33px 120px 0px 120px", "10px 77px 10px 0px");
111 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGr idLineRepeat"), "33px (middle) 250px (end) 0px (middle) 250px (end)", "10px (sta rt) 77px (end) 10px (start) 0px (end)"); 111 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGr idLineRepeat"), "33px (middle) 250px (end) 0px (middle) 250px (end)", "10px (sta rt) 77px (end) 10px (start) 0px (end)");
112 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailin gNamedGridLineRepeat"), "(before) 0px (before) 0px", "(before) 10px (before) 10p x"); 112 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailin gNamedGridLineRepeat"), "(before) 0px (before) 0px", "(before) 10px (before) 10p x");
113 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepe at"), "250px (end)", "10px (end)"); 113 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepe at"), "250px (end)", "10px (end)");
114 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepea t"), "(start) 250px 250px", "(start) 10px 10px"); 114 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepea t"), "(start) 250px 250px", "(start) 10px 10px");
115 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat") , "(start) 140px 250px 250px", "44px 10px 10px"); 115 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat") , "(start) 140px 250px 250px", "44px 10px 10px");
116 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat") , "250px 250px 120px (last)", "10px 10px (end) 0px"); 116 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat") , "250px 250px 120px (last)", "10px 10px (end) 0px");
117 117
118 debug(""); 118 debug("");
119 debug("Test invalid repeat syntax."); 119 debug("Test invalid repeat syntax.");
120 function testInvalidSyntax(gridColumn) { 120 function testInvalidSyntax(gridColumn) {
121 element = document.createElement("div"); 121 element = document.createElement("div");
122 document.body.appendChild(element); 122 document.body.appendChild(element);
123 element.style.gridDefinitionColumns = gridColumn; 123 element.style.gridTemplateColumns = gridColumn;
124 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-definition-columns')", "none"); 124 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-template-columns')", "none");
125 document.body.removeChild(element); 125 document.body.removeChild(element);
126 } 126 }
127 testInvalidSyntax("repeat("); 127 testInvalidSyntax("repeat(");
128 testInvalidSyntax("repeat()"); 128 testInvalidSyntax("repeat()");
129 testInvalidSyntax("repeat(3 / auto)"); 129 testInvalidSyntax("repeat(3 / auto)");
130 testInvalidSyntax("repeat(3 , ,)"); 130 testInvalidSyntax("repeat(3 , ,)");
131 testInvalidSyntax("repeat(0, 15px)"); 131 testInvalidSyntax("repeat(0, 15px)");
132 testInvalidSyntax("repeat(-1, auto)"); 132 testInvalidSyntax("repeat(-1, auto)");
133 // Nesting is no allowed. 133 // Nesting is no allowed.
134 testInvalidSyntax("repeat(2, repeat(1, auto))"); 134 testInvalidSyntax("repeat(2, repeat(1, auto))");
135 </script> 135 </script>
136 </body> 136 </body>
137 </html> 137 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-element-padding-margin.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