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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/grid-template-areas-get-set.html

Issue 1160273004: [CSS Grid Layout] Support dots sequences in grid-template-areas (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebased patch Created 5 years, 6 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 | « no previous file | LayoutTests/fast/css-grid-layout/grid-template-areas-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>
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 #gridWithSingleStringTemplate { 6 #gridWithSingleStringTemplate {
7 grid-template-areas: "area"; 7 grid-template-areas: "area";
8 } 8 }
9 9
10 #gridWithTwoColumnsTemplate { 10 #gridWithTwoColumnsTemplate {
11 grid-template-areas: "first second"; 11 grid-template-areas: "first second";
12 } 12 }
13 13
14 #gridWithTwoRowsTemplate { 14 #gridWithTwoRowsTemplate {
15 grid-template-areas: "first" 15 grid-template-areas: "first"
16 "second"; 16 "second";
17 } 17 }
18 18
19 #gridWithSpanningColumnsTemplate { 19 #gridWithSpanningColumnsTemplate {
20 grid-template-areas: "span span"; 20 grid-template-areas: "span span";
21 } 21 }
22 22
23 #gridWithSpanningRowsDotTemplate { 23 #gridWithSpanningRowsDotTemplate {
24 grid-template-areas: "span" 24 grid-template-areas: "span"
25 "."; 25 ".";
26 } 26 }
27 27
28 #gridWithSpanningRowsDotsTemplate {
29 grid-template-areas: "span"
30 "....";
31 }
32
28 #gridWithDotColumn { 33 #gridWithDotColumn {
29 grid-template-areas: "header ." 34 grid-template-areas: "header ."
30 "footer ."; 35 "footer .";
31 } 36 }
32 37
38 #gridWithDotsColumn {
39 grid-template-areas: "header ......"
40 "footer ......";
41 }
42
43 #gridWithDotCells {
44 grid-template-areas: "first ."
45 ". second";
46 }
47
48 #gridWithDotsCells {
49 grid-template-areas: "first ......"
50 "..... second";
51 }
52
53 #gridWithComplexDotAreas {
54 grid-template-areas: ". header header ."
55 ". . . ."
56 "nav main main aside"
57 "nav main main aside"
58 ". . . aside"
59 ". footer footer aside";
60 }
61
62 #gridWithComplexDotsAreas {
63 grid-template-areas: "... header header ....."
64 "... ...... ...... ....."
65 "nav main main aside"
66 "nav main main aside"
67 "... ...... ...... aside"
68 "... footer footer aside";
69 }
70
71 #gridWithMixedDotAndDotsAreas {
72 grid-template-areas: "... title ."
73 ".. main main"
74 "nav ................... aside"
75 ". footer ......";
76 }
77
33 #gridWithHorizontalRectangle { 78 #gridWithHorizontalRectangle {
34 grid-template-areas: "a a a" 79 grid-template-areas: "a a a"
35 "a a a"; 80 "a a a";
36 } 81 }
37 82
38 #gridWithVerticalRectangle { 83 #gridWithVerticalRectangle {
39 grid-template-areas: "a a" 84 grid-template-areas: "a a"
40 "a a" 85 "a a"
41 "a a"; 86 "a a";
42 } 87 }
43 88
44 </style> 89 </style>
45 <script src="../../resources/js-test.js"></script> 90 <script src="../../resources/js-test.js"></script>
46 </head> 91 </head>
47 <body> 92 <body>
48 <div class="grid" id="gridWithDefaultTemplate"></div> 93 <div class="grid" id="gridWithDefaultTemplate"></div>
49 <div class="grid" id="gridWithSingleStringTemplate"></div> 94 <div class="grid" id="gridWithSingleStringTemplate"></div>
50 <div class="grid" id="gridWithTwoColumnsTemplate"></div> 95 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
51 <div class="grid" id="gridWithTwoRowsTemplate"></div> 96 <div class="grid" id="gridWithTwoRowsTemplate"></div>
52 <div class="grid" id="gridWithSpanningColumnsTemplate"></div> 97 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
53 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div> 98 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
99 <div class="grid" id="gridWithSpanningRowsDotsTemplate"></div>
54 <div class="grid" id="gridWithDotColumn"></div> 100 <div class="grid" id="gridWithDotColumn"></div>
101 <div class="grid" id="gridWithDotsColumn"></div>
102 <div class="grid" id="gridWithDotCells"></div>
103 <div class="grid" id="gridWithDotsCells"></div>
104 <div class="grid" id="gridWithComplexDotAreas"></div>
105 <div class="grid" id="gridWithComplexDotsAreas"></div>
106 <div class="grid" id="gridWithMixedDotAndDotsAreas"></div>
55 <div class="grid" id="gridWithHorizontalRectangle"></div> 107 <div class="grid" id="gridWithHorizontalRectangle"></div>
56 <div class="grid" id="gridWithVerticalRectangle"></div> 108 <div class="grid" id="gridWithVerticalRectangle"></div>
57 <script> 109 <script>
58 description("This test checks that grid-template-areas is properly parsed.") ; 110 description("This test checks that grid-template-areas is properly parsed.") ;
59 111
60 debug("Test getting grid-template-areas set through CSS."); 112 debug("Test getting grid-template-areas set through CSS.");
61 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te"); 113 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te");
62 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none") 114 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none")
63 115
64 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate"); 116 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate");
65 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate) .getPropertyValue('grid-template-areas')", '"area"') 117 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate) .getPropertyValue('grid-template-areas')", '"area"')
66 118
67 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns Template"); 119 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns Template");
68 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g etPropertyValue('grid-template-areas')", '"first second"') 120 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g etPropertyValue('grid-template-areas')", '"first second"')
69 121
70 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla te"); 122 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla te");
71 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP ropertyValue('grid-template-areas')", '"first" "second"') 123 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP ropertyValue('grid-template-areas')", '"first" "second"')
72 124
73 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann ingColumnsTemplate"); 125 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann ingColumnsTemplate");
74 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTempla te).getPropertyValue('grid-template-areas')", '"span span"') 126 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTempla te).getPropertyValue('grid-template-areas')", '"span span"')
75 127
76 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann ingRowsDotTemplate"); 128 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann ingRowsDotTemplate");
77 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTempla te).getPropertyValue('grid-template-areas')", '"span" "."') 129 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTempla te).getPropertyValue('grid-template-areas')", '"span" "."')
78 130
131 var gridWithSpanningRowsDotsTemplate = document.getElementById("gridWithSpan ningRowsDotsTemplate");
132 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotsTempl ate).getPropertyValue('grid-template-areas')", '"span" "."')
133
79 var gridWithDotColumn = document.getElementById("gridWithDotColumn"); 134 var gridWithDotColumn = document.getElementById("gridWithDotColumn");
80 shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropert yValue('grid-template-areas')", '"header ." "footer ."') 135 shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropert yValue('grid-template-areas')", '"header ." "footer ."')
81 136
137 var gridWithDotsColumn = document.getElementById("gridWithDotsColumn");
138 shouldBeEqualToString("window.getComputedStyle(gridWithDotsColumn).getProper tyValue('grid-template-areas')", '"header ." "footer ."')
139
140 var gridWithDotCells = document.getElementById("gridWithDotCells");
141 shouldBeEqualToString("window.getComputedStyle(gridWithDotCells).getProperty Value('grid-template-areas')", '"first ." ". second"')
142
143 var gridWithDotsCells = document.getElementById("gridWithDotsCells");
144 shouldBeEqualToString("window.getComputedStyle(gridWithDotsCells).getPropert yValue('grid-template-areas')", '"first ." ". second"')
145
146 var gridWithComplexDotAreas = document.getElementById("gridWithComplexDotAre as");
147 shouldBeEqualToString("window.getComputedStyle(gridWithComplexDotAreas).getP ropertyValue('grid-template-areas')", '". header header ." ". . . ." "nav main m ain aside" "nav main main aside" ". . . aside" ". footer footer aside"')
148
149 var gridWithComplexDotsAreas = document.getElementById("gridWithComplexDotsA reas");
150 shouldBeEqualToString("window.getComputedStyle(gridWithComplexDotsAreas).get PropertyValue('grid-template-areas')", '". header header ." ". . . ." "nav main main aside" "nav main main aside" ". . . aside" ". footer footer aside"')
151
152 var gridWithMixedDotAndDotsAreas = document.getElementById("gridWithMixedDot AndDotsAreas");
153 shouldBeEqualToString("window.getComputedStyle(gridWithMixedDotAndDotsAreas) .getPropertyValue('grid-template-areas')", '". title ." ". main main" "nav . asi de" ". footer ."')
154
82 var gridWithHorizontalRectangle = document.getElementById("gridWithHorizonta lRectangle"); 155 var gridWithHorizontalRectangle = document.getElementById("gridWithHorizonta lRectangle");
83 shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle). getPropertyValue('grid-template-areas')", '"a a a" "a a a"'); 156 shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle). getPropertyValue('grid-template-areas')", '"a a a" "a a a"');
84 157
85 var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRec tangle"); 158 var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRec tangle");
86 shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).ge tPropertyValue('grid-template-areas')", '"a a" "a a" "a a"'); 159 shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).ge tPropertyValue('grid-template-areas')", '"a a" "a a" "a a"');
87 160
88 debug("Test grid-template-areas: initial"); 161 debug("Test grid-template-areas: initial");
89 var element = document.createElement("div"); 162 var element = document.createElement("div");
90 document.body.appendChild(element); 163 document.body.appendChild(element);
91 element.style.gridTemplateAreas = "'foobar'"; 164 element.style.gridTemplateAreas = "'foobar'";
(...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after
135 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 208 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
136 209
137 debug(""); 210 debug("");
138 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;."); 211 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;.");
139 // <ident> only allows a leading '-'. 212 // <ident> only allows a leading '-'.
140 element.style.gridTemplateAreas = '"nav-up"'; 213 element.style.gridTemplateAreas = '"nav-up"';
141 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 214 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
142 </script> 215 </script>
143 </body> 216 </body>
144 </html> 217 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698