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

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: 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') | Source/core/css/parser/CSSPropertyParser.cpp » ('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">
svillar 2015/06/05 10:38:09 Let's use this change to fix this and use the prop
Manuel Rego 2015/06/05 11:20:10 Done.
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
svillar 2015/06/05 10:38:09 I miss more complex use cases. I know that they sh
Manuel Rego 2015/06/05 11:20:09 Yeah, I also thought about that. I'm adding some e
33 #gridWithHorizontalRectangle { 43 #gridWithHorizontalRectangle {
34 grid-template-areas: "a a a" 44 grid-template-areas: "a a a"
35 "a a a"; 45 "a a a";
36 } 46 }
37 47
38 #gridWithVerticalRectangle { 48 #gridWithVerticalRectangle {
39 grid-template-areas: "a a" 49 grid-template-areas: "a a"
40 "a a" 50 "a a"
41 "a a"; 51 "a a";
42 } 52 }
43 53
44 </style> 54 </style>
45 <script src="../../resources/js-test.js"></script> 55 <script src="../../resources/js-test.js"></script>
46 </head> 56 </head>
47 <body> 57 <body>
48 <div class="grid" id="gridWithDefaultTemplate"></div> 58 <div class="grid" id="gridWithDefaultTemplate"></div>
49 <div class="grid" id="gridWithSingleStringTemplate"></div> 59 <div class="grid" id="gridWithSingleStringTemplate"></div>
50 <div class="grid" id="gridWithTwoColumnsTemplate"></div> 60 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
51 <div class="grid" id="gridWithTwoRowsTemplate"></div> 61 <div class="grid" id="gridWithTwoRowsTemplate"></div>
52 <div class="grid" id="gridWithSpanningColumnsTemplate"></div> 62 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
53 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div> 63 <div class="grid" id="gridWithSpanningRowsDotTemplate"></div>
64 <div class="grid" id="gridWithSpanningRowsDotsTemplate"></div>
54 <div class="grid" id="gridWithDotColumn"></div> 65 <div class="grid" id="gridWithDotColumn"></div>
66 <div class="grid" id="gridWithDotsColumn"></div>
55 <div class="grid" id="gridWithHorizontalRectangle"></div> 67 <div class="grid" id="gridWithHorizontalRectangle"></div>
56 <div class="grid" id="gridWithVerticalRectangle"></div> 68 <div class="grid" id="gridWithVerticalRectangle"></div>
57 <script> 69 <script>
58 description("This test checks that grid-template-areas is properly parsed.") ; 70 description("This test checks that grid-template-areas is properly parsed.") ;
59 71
60 debug("Test getting grid-template-areas set through CSS."); 72 debug("Test getting grid-template-areas set through CSS.");
61 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te"); 73 var gridWithDefaultTemplate = document.getElementById("gridWithDefaultTempla te");
62 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none") 74 shouldBeEqualToString("window.getComputedStyle(gridWithDefaultTemplate).getP ropertyValue('grid-template-areas')", "none")
63 75
64 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate"); 76 var gridWithSingleStringTemplate = document.getElementById("gridWithSingleSt ringTemplate");
65 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate) .getPropertyValue('grid-template-areas')", '"area"') 77 shouldBeEqualToString("window.getComputedStyle(gridWithSingleStringTemplate) .getPropertyValue('grid-template-areas')", '"area"')
66 78
67 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns Template"); 79 var gridWithTwoColumnsTemplate = document.getElementById("gridWithTwoColumns Template");
68 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g etPropertyValue('grid-template-areas')", '"first second"') 80 shouldBeEqualToString("window.getComputedStyle(gridWithTwoColumnsTemplate).g etPropertyValue('grid-template-areas')", '"first second"')
69 81
70 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla te"); 82 var gridWithTwoRowsTemplate = document.getElementById("gridWithTwoRowsTempla te");
71 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP ropertyValue('grid-template-areas')", '"first" "second"') 83 shouldBeEqualToString("window.getComputedStyle(gridWithTwoRowsTemplate).getP ropertyValue('grid-template-areas')", '"first" "second"')
72 84
73 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann ingColumnsTemplate"); 85 var gridWithSpanningColumnsTemplate = document.getElementById("gridWithSpann ingColumnsTemplate");
74 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTempla te).getPropertyValue('grid-template-areas')", '"span span"') 86 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningColumnsTempla te).getPropertyValue('grid-template-areas')", '"span span"')
75 87
76 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann ingRowsDotTemplate"); 88 var gridWithSpanningRowsDotTemplate = document.getElementById("gridWithSpann ingRowsDotTemplate");
77 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTempla te).getPropertyValue('grid-template-areas')", '"span" "."') 89 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotTempla te).getPropertyValue('grid-template-areas')", '"span" "."')
78 90
91 var gridWithSpanningRowsDotsTemplate = document.getElementById("gridWithSpan ningRowsDotsTemplate");
92 shouldBeEqualToString("window.getComputedStyle(gridWithSpanningRowsDotsTempl ate).getPropertyValue('grid-template-areas')", '"span" "."')
93
79 var gridWithDotColumn = document.getElementById("gridWithDotColumn"); 94 var gridWithDotColumn = document.getElementById("gridWithDotColumn");
80 shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropert yValue('grid-template-areas')", '"header ." "footer ."') 95 shouldBeEqualToString("window.getComputedStyle(gridWithDotColumn).getPropert yValue('grid-template-areas')", '"header ." "footer ."')
81 96
97 var gridWithDotsColumn = document.getElementById("gridWithDotsColumn");
98 shouldBeEqualToString("window.getComputedStyle(gridWithDotsColumn).getProper tyValue('grid-template-areas')", '"header ." "footer ."')
99
svillar 2015/06/05 10:38:09 Also if you feel like, I think we could create a t
Manuel Rego 2015/06/05 11:20:09 Good idea, but for a follow-up patch. :-)
82 var gridWithHorizontalRectangle = document.getElementById("gridWithHorizonta lRectangle"); 100 var gridWithHorizontalRectangle = document.getElementById("gridWithHorizonta lRectangle");
83 shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle). getPropertyValue('grid-template-areas')", '"a a a" "a a a"'); 101 shouldBeEqualToString("window.getComputedStyle(gridWithHorizontalRectangle). getPropertyValue('grid-template-areas')", '"a a a" "a a a"');
84 102
85 var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRec tangle"); 103 var gridWithVerticalRectangle = document.getElementById("gridWithVerticalRec tangle");
86 shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).ge tPropertyValue('grid-template-areas')", '"a a" "a a" "a a"'); 104 shouldBeEqualToString("window.getComputedStyle(gridWithVerticalRectangle).ge tPropertyValue('grid-template-areas')", '"a a" "a a" "a a"');
87 105
88 debug("Test grid-template-areas: initial"); 106 debug("Test grid-template-areas: initial");
89 var element = document.createElement("div"); 107 var element = document.createElement("div");
90 document.body.appendChild(element); 108 document.body.appendChild(element);
91 element.style.gridTemplateAreas = "'foobar'"; 109 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") 153 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
136 154
137 debug(""); 155 debug("");
138 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;."); 156 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;.");
139 // <ident> only allows a leading '-'. 157 // <ident> only allows a leading '-'.
140 element.style.gridTemplateAreas = '"nav-up"'; 158 element.style.gridTemplateAreas = '"nav-up"';
141 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 159 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
142 </script> 160 </script>
143 </body> 161 </body>
144 </html> 162 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-template-areas-get-set-expected.txt » ('j') | Source/core/css/parser/CSSPropertyParser.cpp » ('J')

Powered by Google App Engine
This is Rietveld 408576698