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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-item-area-get-set.html

Issue 22215002: Allow grid positions to be named grid areas (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 years, 4 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 | Annotate | Revision Log
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-area-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> 1 <!DOCTYPE html>
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 {
7 grid-template: "firstArea" "secondArea"
8 "thirdArea" "thirdArea";
9 }
10
6 #oneValueGridArea { 11 #oneValueGridArea {
7 grid-area: 1; 12 grid-area: 1;
8 } 13 }
9 14
15 #oneValueIdentGridArea {
16 grid-area: thirdArea;
17 }
18
10 #twoValueGridArea { 19 #twoValueGridArea {
11 grid-area: -1 / span 1; 20 grid-area: -1 / span 1;
12 } 21 }
13 22
23 #twoValueIdentGridArea {
24 grid-area: firstArea / secondArea;
25 }
26
14 #threeValueGridArea { 27 #threeValueGridArea {
15 grid-area: span / 10 / -1; 28 grid-area: span / 10 / -1;
16 } 29 }
17 30
18 #fourValueGridArea { 31 #fourValueGridArea {
19 grid-area: -5 / 5 span / span 8 / 9; 32 grid-area: -5 / 5 span / span 8 / 9;
20 } 33 }
34
35 #fourValueMixedGridArea {
36 grid-area: firstArea / span / nonExistent / "foobar";
37 }
21 </style> 38 </style>
22 <script src="../js/resources/js-test-pre.js"></script> 39 <script src="../js/resources/js-test-pre.js"></script>
23 </head> 40 </head>
24 <body> 41 <body>
25 <div class="grid"> 42 <div class="grid">
26 <div id="oneValueGridArea"></div> 43 <div id="oneValueGridArea"></div>
44 <div id="oneValueIdentGridArea"></div>
27 <div id="twoValueGridArea"></div> 45 <div id="twoValueGridArea"></div>
46 <div id="twoValueIdentGridArea"></div>
28 <div id="threeValueGridArea"></div> 47 <div id="threeValueGridArea"></div>
29 <div id="fourValueGridArea"></div> 48 <div id="fourValueGridArea"></div>
49 <div id="fourValueMixedGridArea"></div>
30 </div> 50 </div>
31 <script> 51 <script>
32 description('This test checks that grid-area is properly parsed and stored i nternally.'); 52 description('This test checks that grid-area is properly parsed and stored i nternally.');
33 function valueOrDefaultGridPosition(gridPosition) 53 function valueOrDefaultGridPosition(gridPosition)
34 { 54 {
35 return gridPosition === undefined ? "auto" : gridPosition; 55 return gridPosition === undefined ? "auto" : gridPosition;
36 } 56 }
37 57
38 function checkColumnRowValues(gridItem, gridRowStart, gridColumnStart, gridR owEnd, gridColumnEnd) 58 function checkColumnRowValues(gridItem, gridRowStart, gridColumnStart, gridR owEnd, gridColumnEnd)
39 { 59 {
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after
97 var element = document.createElement("div"); 117 var element = document.createElement("div");
98 parentElement.appendChild(element); 118 parentElement.appendChild(element);
99 element.style.gridArea = "inherit"; 119 element.style.gridArea = "inherit";
100 checkColumnRowValues(element, "1", "2", "3", "4"); 120 checkColumnRowValues(element, "1", "2", "3", "4");
101 121
102 document.body.removeChild(parentElement); 122 document.body.removeChild(parentElement);
103 } 123 }
104 124
105 debug("Test getting grid-area set through CSS"); 125 debug("Test getting grid-area set through CSS");
106 testGridAreaCSSParsing("oneValueGridArea", "1"); 126 testGridAreaCSSParsing("oneValueGridArea", "1");
127 testGridAreaCSSParsing("oneValueIdentGridArea", "thirdArea", "thirdArea", "t hirdArea", "thirdArea");
107 testGridAreaCSSParsing("twoValueGridArea", "-1", "span 1"); 128 testGridAreaCSSParsing("twoValueGridArea", "-1", "span 1");
129 testGridAreaCSSParsing("twoValueIdentGridArea", "firstArea", "secondArea", " firstArea", "secondArea");
108 testGridAreaCSSParsing("threeValueGridArea", "span 1", "10", "-1"); 130 testGridAreaCSSParsing("threeValueGridArea", "span 1", "10", "-1");
109 testGridAreaCSSParsing("fourValueGridArea", "-5", "span 5", "span 8", "9"); 131 testGridAreaCSSParsing("fourValueGridArea", "-5", "span 5", "span 8", "9");
132 testGridAreaCSSParsing("fourValueMixedGridArea", "firstArea", "span 1", "non Existent", "1 foobar");
110 133
111 debug(""); 134 debug("");
112 debug("Test getting and setting grid-area set through JS"); 135 debug("Test getting and setting grid-area set through JS");
113 testGridAreaJSParsing("-1"); 136 testGridAreaJSParsing("-1");
114 testGridAreaJSParsing("-1 / span 5"); 137 testGridAreaJSParsing("-1 / span 5");
115 testGridAreaJSParsing("-1 / 10 / span 3"); 138 testGridAreaJSParsing("-1 / 10 / span 3");
116 139
117 debug(""); 140 debug("");
118 debug("Test setting grid-area to 'initial' through JS"); 141 debug("Test setting grid-area to 'initial' through JS");
119 testInitialGridArea(); 142 testInitialGridArea();
120 143
121 debug(""); 144 debug("");
122 debug("Test setting grid-area to 'inherit' through JS"); 145 debug("Test setting grid-area to 'inherit' through JS");
123 testInheritGridArea(); 146 testInheritGridArea();
124 147
125 debug(""); 148 debug("");
126 debug("Test setting some positions to invalid values through JS"); 149 debug("Test setting some positions to invalid values through JS");
127 testGridAreaInvalidJSParsing("span / span / span /"); 150 testGridAreaInvalidJSParsing("span / span / span /");
128 testGridAreaInvalidJSParsing("1/ span span / 1 / span"); 151 testGridAreaInvalidJSParsing("1/ span span / 1 / span");
129 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1"); 152 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 -1");
130 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1"); 153 testGridAreaInvalidJSParsing("span / 1 / -1 / 1 span -1");
131 </script> 154 </script>
132 </body> 155 </body>
133 </html> 156 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-item-area-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698