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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 23528004: [CSS Grid Layout] Update named grid lines syntax to the last version of the specs (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@named
Patch Set: Final patch for landing Created 7 years, 1 month 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/non-grid-columns-rows-get-set-multiple-expected.txt ('k') | LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html » ('J')
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 .singleSingleTrackRepeat { 6 .singleSingleTrackRepeat {
7 grid-definition-rows: repeat(1, 18px); 7 grid-definition-rows: repeat(1, 18px);
8 grid-definition-columns: repeat(1, 15%); 8 grid-definition-columns: repeat(1, 15%);
9 } 9 }
10 10
11 .twoSingleTrackRepeat { 11 .twoSingleTrackRepeat {
12 grid-definition-rows: repeat(2, auto); 12 grid-definition-rows: repeat(2, auto);
13 grid-definition-columns: repeat(2, minmax(15px, 50%)); 13 grid-definition-columns: repeat(2, minmax(15px, 50%));
14 } 14 }
15 15
16 .twoDoubleTrackRepeat { 16 .twoDoubleTrackRepeat {
17 grid-definition-rows: repeat(2, minmax(5px, 10px) auto); 17 grid-definition-rows: repeat(2, minmax(5px, 10px) auto);
18 grid-definition-columns: repeat(2, auto minmax(100px, 120px)); 18 grid-definition-columns: repeat(2, auto minmax(100px, 120px));
19 } 19 }
20 20
21 .twoDoubleTrackWithNamedGridLineRepeat { 21 .twoDoubleTrackWithNamedGridLineRepeat {
22 grid-definition-rows: repeat(2, 10px 'start' auto 'end'); 22 grid-definition-rows: repeat(2, 10px (start) auto (end));
23 grid-definition-columns: repeat(2, auto 'middle' 250px 'end'); 23 grid-definition-columns: repeat(2, auto (middle) 250px (end));
24 } 24 }
25 25
26 .twoDoubleTrackWithTrailingNamedGridLineRepeat { 26 .twoDoubleTrackWithTrailingNamedGridLineRepeat {
27 grid-definition-rows: repeat(2, 'before' 10px); 27 grid-definition-rows: repeat(2, (before) 10px);
28 grid-definition-columns: repeat(2, 'before' auto); 28 grid-definition-columns: repeat(2, (before) auto);
29 } 29 }
30 30
31 .trailingNamedGridLineRepeat { 31 .trailingNamedGridLineRepeat {
32 grid-definition-rows: repeat(1, 10px) 'end'; 32 grid-definition-rows: repeat(1, 10px) (end);
33 grid-definition-columns: repeat(1, 250px) 'end'; 33 grid-definition-columns: repeat(1, 250px) (end);
34 } 34 }
35 35
36 .leadingNamedGridLineRepeat { 36 .leadingNamedGridLineRepeat {
37 grid-definition-rows: 'start' repeat(2, 10px); 37 grid-definition-rows: (start) repeat(2, 10px);
38 grid-definition-columns: 'start' repeat(2, 250px); 38 grid-definition-columns: (start) repeat(2, 250px);
39 } 39 }
40 40
41 .mixRepeatAfterNonRepeat { 41 .mixRepeatAfterNonRepeat {
42 grid-definition-rows: auto repeat(2, 10px); 42 grid-definition-rows: auto repeat(2, 10px);
43 grid-definition-columns: 'start' 140px repeat(2, 250px); 43 grid-definition-columns: (start) 140px repeat(2, 250px);
44 } 44 }
45 45
46 .mixNonRepeatAfterRepeat { 46 .mixNonRepeatAfterRepeat {
47 grid-definition-rows: repeat(2, 10px) 'end' auto; 47 grid-definition-rows: repeat(2, 10px) (end) auto;
48 grid-definition-columns: repeat(2, 250px) 15% 'last'; 48 grid-definition-columns: repeat(2, 250px) 15% (last);
49 } 49 }
50 </style> 50 </style>
51 <script src="../../resources/js-test.js"></script> 51 <script src="../../resources/js-test.js"></script>
52 </head> 52 </head>
53 <body> 53 <body>
54 <div class="singleSingleTrackRepeat" id="singleSingleTrackRepeat"></div> 54 <div class="singleSingleTrackRepeat" id="singleSingleTrackRepeat"></div>
55 <div class="twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div> 55 <div class="twoSingleTrackRepeat" id="twoSingleTrackRepeat"></div>
56 <div class="twoDoubleTrackRepeat" id="twoDoubleTrackRepeat"></div> 56 <div class="twoDoubleTrackRepeat" id="twoDoubleTrackRepeat"></div>
57 <div class="twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGr idLineRepeat"></div> 57 <div class="twoDoubleTrackWithNamedGridLineRepeat" id="twoDoubleTrackWithNamedGr idLineRepeat"></div>
58 <div class="twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWit hTrailingNamedGridLineRepeat"></div> 58 <div class="twoDoubleTrackWithTrailingNamedGridLineRepeat" id="twoDoubleTrackWit hTrailingNamedGridLineRepeat"></div>
59 <div class="trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div> 59 <div class="trailingNamedGridLineRepeat" id="trailingNamedGridLineRepeat"></div>
60 <div class="leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div> 60 <div class="leadingNamedGridLineRepeat" id="leadingNamedGridLineRepeat"></div>
61 <div class="mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat"></div> 61 <div class="mixRepeatAfterNonRepeat" id="mixRepeatAfterNonRepeat"></div>
62 <div class="mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div> 62 <div class="mixNonRepeatAfterRepeat" id="mixNonRepeatAfterRepeat"></div>
63 63
64 <script src="resources/grid-definitions-parsing-utils.js"></script> 64 <script src="resources/grid-definitions-parsing-utils.js"></script>
65 <script> 65 <script>
66 description('Test that setting and getting grid-definition-columns and grid- definition-rows with repeat() works as expected'); 66 description('Test that setting and getting grid-definition-columns and grid- definition-rows with repeat() works as expected');
67 67
68 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS"); 68 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");
69 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeat") , "15%", "18px"); 69 testGridDefinitionsValues(document.getElementById("singleSingleTrackRepeat") , "15%", "18px");
70 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), " minmax(15px, 50%) minmax(15px, 50%)", "auto auto"); 70 testGridDefinitionsValues(document.getElementById("twoSingleTrackRepeat"), " minmax(15px, 50%) minmax(15px, 50%)", "auto auto");
71 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), " auto minmax(100px, 120px) auto minmax(100px, 120px)", "minmax(5px, 10px) auto mi nmax(5px, 10px) auto"); 71 testGridDefinitionsValues(document.getElementById("twoDoubleTrackRepeat"), " auto minmax(100px, 120px) auto minmax(100px, 120px)", "minmax(5px, 10px) auto mi nmax(5px, 10px) auto");
72 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGr idLineRepeat"), "auto middle 250px end auto middle 250px end", "10px start auto end 10px start auto end"); 72 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithNamedGr idLineRepeat"), "auto (middle) 250px (end) auto (middle) 250px (end)", "10px (st art) auto (end) 10px (start) auto (end)");
73 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailin gNamedGridLineRepeat"), "before auto before auto", "before 10px before 10px"); 73 testGridDefinitionsValues(document.getElementById("twoDoubleTrackWithTrailin gNamedGridLineRepeat"), "(before) auto (before) auto", "(before) 10px (before) 1 0px");
74 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepe at"), "250px end", "10px end"); 74 testGridDefinitionsValues(document.getElementById("trailingNamedGridLineRepe at"), "250px (end)", "10px (end)");
75 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepea t"), "start 250px 250px", "start 10px 10px"); 75 testGridDefinitionsValues(document.getElementById("leadingNamedGridLineRepea t"), "(start) 250px 250px", "(start) 10px 10px");
76 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat") , "start 140px 250px 250px", "auto 10px 10px"); 76 testGridDefinitionsValues(document.getElementById("mixRepeatAfterNonRepeat") , "(start) 140px 250px 250px", "auto 10px 10px");
77 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat") , "250px 250px 15% last", "10px 10px end auto"); 77 testGridDefinitionsValues(document.getElementById("mixNonRepeatAfterRepeat") , "250px 250px 15% (last)", "10px 10px (end) auto");
78 78
79 debug(""); 79 debug("");
80 debug("Test invalid repeat syntax."); 80 debug("Test invalid repeat syntax.");
81 function testInvalidSyntax(gridColumn) { 81 function testInvalidSyntax(gridColumn) {
82 element = document.createElement("div"); 82 element = document.createElement("div");
83 document.body.appendChild(element); 83 document.body.appendChild(element);
84 element.style.gridDefinitionColumns = gridColumn; 84 element.style.gridDefinitionColumns = gridColumn;
85 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-definition-columns')", "none"); 85 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-definition-columns')", "none");
86 document.body.removeChild(element); 86 document.body.removeChild(element);
87 } 87 }
88 testInvalidSyntax("repeat("); 88 testInvalidSyntax("repeat(");
89 testInvalidSyntax("repeat()"); 89 testInvalidSyntax("repeat()");
90 testInvalidSyntax("repeat(3 / auto)"); 90 testInvalidSyntax("repeat(3 / auto)");
91 testInvalidSyntax("repeat(3 , ,)"); 91 testInvalidSyntax("repeat(3 , ,)");
92 testInvalidSyntax("repeat(0, 15px)"); 92 testInvalidSyntax("repeat(0, 15px)");
93 testInvalidSyntax("repeat(-1, auto)"); 93 testInvalidSyntax("repeat(-1, auto)");
94 // Nesting is no allowed. 94 // Nesting is no allowed.
95 testInvalidSyntax("repeat(2, repeat(1, auto))"); 95 testInvalidSyntax("repeat(2, repeat(1, auto))");
96 </script> 96 </script>
97 <script src="../js/resources/js-test-post.js"></script> 97 <script src="../js/resources/js-test-post.js"></script>
98 </body> 98 </body>
99 </html> 99 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt ('k') | LayoutTests/fast/css-grid-layout/non-grid-element-repeat-get-set-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/non-named-grid-line-get-set.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698