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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 16959008: [CSS Grid Layout] Rename grid-{rows|columns} to grid-definition-{rows|columns} (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: rebased Created 7 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 | « 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 #singleSingleTrackRepeat { 10 #singleSingleTrackRepeat {
11 grid-rows: repeat(1, 18px); 11 grid-definition-rows: repeat(1, 18px);
12 grid-columns: repeat(1, 15%); 12 grid-definition-columns: repeat(1, 15%);
13 } 13 }
14 14
15 #twoSingleTrackRepeat { 15 #twoSingleTrackRepeat {
16 grid-rows: repeat(2, auto); 16 grid-definition-rows: repeat(2, auto);
17 grid-columns: repeat(2, minmax(15px, 50%)); 17 grid-definition-columns: repeat(2, minmax(15px, 50%));
18 } 18 }
19 19
20 #twoDoubleTrackRepeat { 20 #twoDoubleTrackRepeat {
21 grid-rows: repeat(2, minmax(5px, 10px) auto); 21 grid-definition-rows: repeat(2, minmax(5px, 10px) auto);
22 grid-columns: repeat(2, auto minmax(100px, 120px)); 22 grid-definition-columns: repeat(2, auto minmax(100px, 120px));
23 } 23 }
24 24
25 #twoDoubleTrackWithNamedGridLineRepeat { 25 #twoDoubleTrackWithNamedGridLineRepeat {
26 grid-rows: repeat(2, 10px 'start' auto 'end'); 26 grid-definition-rows: repeat(2, 10px 'start' auto 'end');
27 grid-columns: repeat(2, auto 'middle' 250px 'end'); 27 grid-definition-columns: repeat(2, auto 'middle' 250px 'end');
28 } 28 }
29 29
30 #twoDoubleTrackWithTrailingNamedGridLineRepeat { 30 #twoDoubleTrackWithTrailingNamedGridLineRepeat {
31 grid-rows: repeat(2, 'before' 10px); 31 grid-definition-rows: repeat(2, 'before' 10px);
32 grid-columns: repeat(2, 'before' auto); 32 grid-definition-columns: repeat(2, 'before' auto);
33 } 33 }
34 34
35 #trailingNamedGridLineRepeat { 35 #trailingNamedGridLineRepeat {
36 grid-rows: repeat(1, 10px) 'end'; 36 grid-definition-rows: repeat(1, 10px) 'end';
37 grid-columns: repeat(1, 250px) 'end'; 37 grid-definition-columns: repeat(1, 250px) 'end';
38 } 38 }
39 39
40 #leadingNamedGridLineRepeat { 40 #leadingNamedGridLineRepeat {
41 grid-rows: 'start' repeat(2, 10px); 41 grid-definition-rows: 'start' repeat(2, 10px);
42 grid-columns: 'start' repeat(2, 250px); 42 grid-definition-columns: 'start' repeat(2, 250px);
43 } 43 }
44 44
45 #mixRepeatAfterNonRepeat { 45 #mixRepeatAfterNonRepeat {
46 grid-rows: auto repeat(2, 10px); 46 grid-definition-rows: auto repeat(2, 10px);
47 grid-columns: 'start' 140px repeat(2, 250px); 47 grid-definition-columns: 'start' 140px repeat(2, 250px);
48 } 48 }
49 49
50 #mixNonRepeatAfterRepeat { 50 #mixNonRepeatAfterRepeat {
51 grid-rows: repeat(2, 10px) 'end' auto; 51 grid-definition-rows: repeat(2, 10px) 'end' auto;
52 grid-columns: repeat(2, 250px) 15% 'last'; 52 grid-definition-columns: repeat(2, 250px) 15% 'last';
53 } 53 }
54 </style> 54 </style>
55 <script src="../js/resources/js-test-pre.js"></script> 55 <script src="../js/resources/js-test-pre.js"></script>
56 </head> 56 </head>
57 <body> 57 <body>
58 <div class="grid" id="singleSingleTrackRepeat"></div> 58 <div class="grid" id="singleSingleTrackRepeat"></div>
59 <div class="grid" id="twoSingleTrackRepeat"></div> 59 <div class="grid" id="twoSingleTrackRepeat"></div>
60 <div class="grid" id="twoDoubleTrackRepeat"></div> 60 <div class="grid" id="twoDoubleTrackRepeat"></div>
61 <div class="grid" id="twoDoubleTrackWithNamedGridLineRepeat"></div> 61 <div class="grid" id="twoDoubleTrackWithNamedGridLineRepeat"></div>
62 <div class="grid" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div> 62 <div class="grid" id="twoDoubleTrackWithTrailingNamedGridLineRepeat"></div>
63 <div class="grid" id="trailingNamedGridLineRepeat"></div> 63 <div class="grid" id="trailingNamedGridLineRepeat"></div>
64 <div class="grid" id="leadingNamedGridLineRepeat"></div> 64 <div class="grid" id="leadingNamedGridLineRepeat"></div>
65 <div class="grid" id="mixRepeatAfterNonRepeat"></div> 65 <div class="grid" id="mixRepeatAfterNonRepeat"></div>
66 <div class="grid" id="mixNonRepeatAfterRepeat"></div> 66 <div class="grid" id="mixNonRepeatAfterRepeat"></div>
67 <script> 67 <script>
68 description('Test that setting and getting grid-columns and grid-rows with r epeat() works as expected'); 68 description('Test that setting and getting grid-definition-columns and grid- definition-rows with repeat() works as expected');
69 69
70 debug("Test getting grid-columns and grid-rows set through CSS"); 70 debug("Test getting grid-definition-columns and grid-definition-rows set thr ough CSS");
71 var singleSingleTrackRepeat = document.getElementById("singleSingleTrackRepe at") 71 var singleSingleTrackRepeat = document.getElementById("singleSingleTrackRepe at")
72 shouldBeEqualToString("window.getComputedStyle(singleSingleTrackRepeat, ''). getPropertyValue('grid-rows')", "18px"); 72 shouldBeEqualToString("window.getComputedStyle(singleSingleTrackRepeat, ''). getPropertyValue('grid-definition-rows')", "18px");
73 shouldBeEqualToString("window.getComputedStyle(singleSingleTrackRepeat, ''). getPropertyValue('grid-columns')", "15%"); 73 shouldBeEqualToString("window.getComputedStyle(singleSingleTrackRepeat, ''). getPropertyValue('grid-definition-columns')", "15%");
74 74
75 var twoSingleTrackRepeat = document.getElementById("twoSingleTrackRepeat") 75 var twoSingleTrackRepeat = document.getElementById("twoSingleTrackRepeat")
76 shouldBeEqualToString("window.getComputedStyle(twoSingleTrackRepeat, '').get PropertyValue('grid-rows')", "auto auto"); 76 shouldBeEqualToString("window.getComputedStyle(twoSingleTrackRepeat, '').get PropertyValue('grid-definition-rows')", "auto auto");
77 shouldBeEqualToString("window.getComputedStyle(twoSingleTrackRepeat, '').get PropertyValue('grid-columns')", "minmax(15px, 50%) minmax(15px, 50%)"); 77 shouldBeEqualToString("window.getComputedStyle(twoSingleTrackRepeat, '').get PropertyValue('grid-definition-columns')", "minmax(15px, 50%) minmax(15px, 50%)" );
78 78
79 var twoDoubleTrackRepeat = document.getElementById("twoDoubleTrackRepeat") 79 var twoDoubleTrackRepeat = document.getElementById("twoDoubleTrackRepeat")
80 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackRepeat, '').get PropertyValue('grid-rows')", "minmax(5px, 10px) auto minmax(5px, 10px) auto"); 80 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackRepeat, '').get PropertyValue('grid-definition-rows')", "minmax(5px, 10px) auto minmax(5px, 10px ) auto");
81 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackRepeat, '').get PropertyValue('grid-columns')", "auto minmax(100px, 120px) auto minmax(100px, 12 0px)"); 81 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackRepeat, '').get PropertyValue('grid-definition-columns')", "auto minmax(100px, 120px) auto minma x(100px, 120px)");
82 82
83 var twoDoubleTrackWithNamedGridLineRepeat = document.getElementById("twoDoub leTrackWithNamedGridLineRepeat") 83 var twoDoubleTrackWithNamedGridLineRepeat = document.getElementById("twoDoub leTrackWithNamedGridLineRepeat")
84 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackWithNamedGridLi neRepeat, '').getPropertyValue('grid-rows')", "10px start auto end 10px start au to end"); 84 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackWithNamedGridLi neRepeat, '').getPropertyValue('grid-definition-rows')", "10px start auto end 10 px start auto end");
85 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackWithNamedGridLi neRepeat, '').getPropertyValue('grid-columns')", "auto middle 250px end auto mid dle 250px end"); 85 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackWithNamedGridLi neRepeat, '').getPropertyValue('grid-definition-columns')", "auto middle 250px e nd auto middle 250px end");
86 86
87 var twoDoubleTrackWithTrailingNamedGridLineRepeat = document.getElementById( "twoDoubleTrackWithTrailingNamedGridLineRepeat") 87 var twoDoubleTrackWithTrailingNamedGridLineRepeat = document.getElementById( "twoDoubleTrackWithTrailingNamedGridLineRepeat")
88 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackWithTrailingNam edGridLineRepeat, '').getPropertyValue('grid-rows')", "before 10px before 10px") ; 88 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackWithTrailingNam edGridLineRepeat, '').getPropertyValue('grid-definition-rows')", "before 10px be fore 10px");
89 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackWithTrailingNam edGridLineRepeat, '').getPropertyValue('grid-columns')", "before auto before aut o"); 89 shouldBeEqualToString("window.getComputedStyle(twoDoubleTrackWithTrailingNam edGridLineRepeat, '').getPropertyValue('grid-definition-columns')", "before auto before auto");
90 90
91 var trailingNamedGridLineRepeat = document.getElementById("trailingNamedGrid LineRepeat") 91 var trailingNamedGridLineRepeat = document.getElementById("trailingNamedGrid LineRepeat")
92 shouldBeEqualToString("window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('grid-rows')", "10px end"); 92 shouldBeEqualToString("window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('grid-definition-rows')", "10px end");
93 shouldBeEqualToString("window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('grid-columns')", "250px end"); 93 shouldBeEqualToString("window.getComputedStyle(trailingNamedGridLineRepeat, '').getPropertyValue('grid-definition-columns')", "250px end");
94 94
95 var leadingNamedGridLineRepeat = document.getElementById("leadingNamedGridLi neRepeat") 95 var leadingNamedGridLineRepeat = document.getElementById("leadingNamedGridLi neRepeat")
96 shouldBeEqualToString("window.getComputedStyle(leadingNamedGridLineRepeat, ' ').getPropertyValue('grid-rows')", "start 10px 10px"); 96 shouldBeEqualToString("window.getComputedStyle(leadingNamedGridLineRepeat, ' ').getPropertyValue('grid-definition-rows')", "start 10px 10px");
97 shouldBeEqualToString("window.getComputedStyle(leadingNamedGridLineRepeat, ' ').getPropertyValue('grid-columns')", "start 250px 250px"); 97 shouldBeEqualToString("window.getComputedStyle(leadingNamedGridLineRepeat, ' ').getPropertyValue('grid-definition-columns')", "start 250px 250px");
98 98
99 var mixRepeatAfterNonRepeat = document.getElementById("mixRepeatAfterNonRepe at") 99 var mixRepeatAfterNonRepeat = document.getElementById("mixRepeatAfterNonRepe at")
100 shouldBeEqualToString("window.getComputedStyle(mixRepeatAfterNonRepeat, ''). getPropertyValue('grid-rows')", "auto 10px 10px"); 100 shouldBeEqualToString("window.getComputedStyle(mixRepeatAfterNonRepeat, ''). getPropertyValue('grid-definition-rows')", "auto 10px 10px");
101 shouldBeEqualToString("window.getComputedStyle(mixRepeatAfterNonRepeat, ''). getPropertyValue('grid-columns')", "start 140px 250px 250px"); 101 shouldBeEqualToString("window.getComputedStyle(mixRepeatAfterNonRepeat, ''). getPropertyValue('grid-definition-columns')", "start 140px 250px 250px");
102 102
103 var mixNonRepeatAfterRepeat = document.getElementById("mixNonRepeatAfterRepe at") 103 var mixNonRepeatAfterRepeat = document.getElementById("mixNonRepeatAfterRepe at")
104 shouldBeEqualToString("window.getComputedStyle(mixNonRepeatAfterRepeat, ''). getPropertyValue('grid-rows')", "10px 10px end auto"); 104 shouldBeEqualToString("window.getComputedStyle(mixNonRepeatAfterRepeat, ''). getPropertyValue('grid-definition-rows')", "10px 10px end auto");
105 shouldBeEqualToString("window.getComputedStyle(mixNonRepeatAfterRepeat, ''). getPropertyValue('grid-columns')", "250px 250px 15% last"); 105 shouldBeEqualToString("window.getComputedStyle(mixNonRepeatAfterRepeat, ''). getPropertyValue('grid-definition-columns')", "250px 250px 15% last");
106 106
107 debug(""); 107 debug("");
108 debug("Test invalid repeat syntax."); 108 debug("Test invalid repeat syntax.");
109 function testInvalidSyntax(gridColumn) { 109 function testInvalidSyntax(gridColumn) {
110 element = document.createElement("div"); 110 element = document.createElement("div");
111 document.body.appendChild(element); 111 document.body.appendChild(element);
112 element.style.gridColumns = gridColumn; 112 element.style.gridDefinitionColumns = gridColumn;
113 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-columns')", "none"); 113 shouldBeEqualToString("window.getComputedStyle(element, '').getPropertyV alue('grid-definition-columns')", "none");
114 document.body.removeChild(element); 114 document.body.removeChild(element);
115 } 115 }
116 testInvalidSyntax("repeat("); 116 testInvalidSyntax("repeat(");
117 testInvalidSyntax("repeat()"); 117 testInvalidSyntax("repeat()");
118 testInvalidSyntax("repeat(3 / auto)"); 118 testInvalidSyntax("repeat(3 / auto)");
119 testInvalidSyntax("repeat(3 , ,)"); 119 testInvalidSyntax("repeat(3 , ,)");
120 testInvalidSyntax("repeat(0, 15px)"); 120 testInvalidSyntax("repeat(0, 15px)");
121 testInvalidSyntax("repeat(-1, auto)"); 121 testInvalidSyntax("repeat(-1, auto)");
122 // Nesting is no allowed. 122 // Nesting is no allowed.
123 testInvalidSyntax("repeat(2, repeat(1, auto))"); 123 testInvalidSyntax("repeat(2, repeat(1, auto))");
124 </script> 124 </script>
125 <script src="../js/resources/js-test-post.js"></script> 125 <script src="../js/resources/js-test-post.js"></script>
126 </body> 126 </body>
127 </html> 127 </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
This is Rietveld 408576698