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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 149373004: [CSS Grid Layout] Implementation of the grid-template shorthand. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@grid-template-working
Patch Set: Adding checks and layout tests to verify misplaced 'none' arguments. Created 6 years, 10 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-shorthand-areas-get-set-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/grid-template-shorthand-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 <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 #gridWithSingleStringTemplate { 10 #gridWithSingleStringTemplate {
11 grid-template-areas: "area"; 11 grid-template: "area";
12 } 12 }
13 13
14 #gridWithTwoColumnsTemplate { 14 #gridWithTwoColumnsTemplate {
15 grid-template-areas: "first second"; 15 grid-template: "first second";
16 } 16 }
17 17
18 #gridWithTwoRowsTemplate { 18 #gridWithTwoRowsTemplate {
19 grid-template-areas: "first" 19 grid-template: "first"
20 "second"; 20 "second";
21 } 21 }
22 22
23 #gridWithSpanningColumnsTemplate { 23 #gridWithSpanningColumnsTemplate {
24 grid-template-areas: "span span"; 24 grid-template: "span span";
25 } 25 }
26 26
27 #gridWithSpanningRowsDotTemplate { 27 #gridWithSpanningRowsDotTemplate {
28 grid-template-areas: "span" 28 grid-template: "span"
29 "."; 29 ".";
30 } 30 }
31 31
32 #gridWithDotColumn { 32 #gridWithDotColumn {
33 grid-template-areas: "header ." 33 grid-template: "header ."
34 "footer ."; 34 "footer .";
35 } 35 }
36 </style> 36 </style>
37 <script src="../../resources/js-test.js"></script> 37 <script src="../../resources/js-test.js"></script>
38 </head> 38 </head>
39 <body> 39 <body>
40 <div class="grid" id="gridWithDefaultTemplate"></div> 40 <div class="grid" id="gridWithDefaultTemplate"></div>
41 <div class="grid" id="gridWithSingleStringTemplate"></div> 41 <div class="grid" id="gridWithSingleStringTemplate"></div>
42 <div class="grid" id="gridWithTwoColumnsTemplate"></div> 42 <div class="grid" id="gridWithTwoColumnsTemplate"></div>
43 <div class="grid" id="gridWithTwoRowsTemplate"></div> 43 <div class="grid" id="gridWithTwoRowsTemplate"></div>
44 <div class="grid" id="gridWithSpanningColumnsTemplate"></div> 44 <div class="grid" id="gridWithSpanningColumnsTemplate"></div>
(...skipping 28 matching lines...) Expand all
73 var element = document.createElement("div"); 73 var element = document.createElement("div");
74 document.body.appendChild(element); 74 document.body.appendChild(element);
75 element.style.gridTemplateAreas = "'foobar'"; 75 element.style.gridTemplateAreas = "'foobar'";
76 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"') 76 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foobar"')
77 element.style.gridTemplateAreas = "initial"; 77 element.style.gridTemplateAreas = "initial";
78 document.body.removeChild(element); 78 document.body.removeChild(element);
79 79
80 debug("Test grid-template-areas: inherit"); 80 debug("Test grid-template-areas: inherit");
81 var parentElement = document.createElement("div"); 81 var parentElement = document.createElement("div");
82 document.body.appendChild(parentElement); 82 document.body.appendChild(parentElement);
83 parentElement.style.gridTemplateAreas = "'foo bar'"; 83 parentElement.style.gridTemplate = "'foo bar'";
84 shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyVal ue('grid-template-areas')", '"foo bar"') 84 shouldBeEqualToString("window.getComputedStyle(parentElement).getPropertyVal ue('grid-template-areas')", '"foo bar"')
85 85
86 var element = document.createElement("div"); 86 var element = document.createElement("div");
87 parentElement.appendChild(element); 87 parentElement.appendChild(element);
88 element.style.gridTemplateAreas = "inherit"; 88 element.style.gridTemplate = "inherit";
89 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foo bar"') 89 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", '"foo bar"')
90 document.body.removeChild(parentElement); 90 document.body.removeChild(parentElement);
91 91
92 debug("Test invalid grid-template-areas values."); 92 debug("Test invalid grid-template-areas values.");
93 var element = document.createElement("div"); 93 var element = document.createElement("div");
94 document.body.appendChild(element); 94 document.body.appendChild(element);
95 95
96 // 'nav' is not a rectangular definition. 96 // 'nav' is not a rectangular definition.
97 element.style.gridTemplateAreas = "'nav head' 'nav nav'"; 97 element.style.gridTemplate = "'nav head' 'nav nav'";
98 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 98 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
99 99
100 // 'nav' is not contiguous in the column direction. 100 // 'nav' is not contiguous in the column direction.
101 element.style.gridTemplateAreas = "'nav head nav'"; 101 element.style.gridTemplate = "'nav head nav'";
102 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 102 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
103 103
104 // 'nav' is not contiguous in the row direction. 104 // 'nav' is not contiguous in the row direction.
105 element.style.gridTemplateAreas = "'nav head' 'middle middle' 'nav footer'"; 105 element.style.gridTemplate = "'nav head' 'middle middle' 'nav footer'";
106 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 106 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
107 107
108 // The rows don't have the same number of columns. 108 // The rows don't have the same number of columns.
109 element.style.gridTemplateAreas = "'nav head' 'foot'"; 109 element.style.gridTemplate = "'nav head' 'foot'";
110 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 110 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
111 111
112 // Empty rows. 112 // Empty rows.
113 element.style.gridTemplateAreas = "'' ''"; 113 element.style.gridTemplate = "'' ''";
114 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 114 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
115 115
116 debug(""); 116 debug("");
117 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;."); 117 debug("FIXME: We currently don't validate that the named grid areas are &lt; indent&gt;.");
118 // <ident> only allows a leading '-'. 118 // <ident> only allows a leading '-'.
119 element.style.gridTemplateAreas = '"nav-up"'; 119 element.style.gridTemplate = '"nav-up"';
120 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none") 120 shouldBeEqualToString("window.getComputedStyle(element).getPropertyValue('gr id-template-areas')", "none")
121 </script> 121 </script>
122 </body> 122 </body>
123 </html> 123 </html>
OLDNEW
« no previous file with comments | « no previous file | LayoutTests/fast/css-grid-layout/grid-template-shorthand-areas-get-set-expected.txt » ('j') | LayoutTests/fast/css-grid-layout/grid-template-shorthand-named-grid-line-get-set.html » ('J')

Powered by Google App Engine
This is Rietveld 408576698