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

Issues Search
    My Issues | Starred     Open | Closed | All

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

Issue 826893002: [CSS Grid Layout] Remove stack from grid-auto-flow syntax (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Rebased patch Created 5 years, 11 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-item-z-index-stacking-context.html ('k') | LayoutTests/fast/css-grid-layout/grid-shorthand-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 <link href="resources/grid.css" rel="stylesheet"> 4 <link href="resources/grid.css" rel="stylesheet">
5 <style> 5 <style>
6 #gridWithNone { 6 #gridWithNone {
7 grid: none; 7 grid: none;
8 } 8 }
9 .gridWithTemplate { 9 .gridWithTemplate {
10 grid: 15px / 10px; 10 grid: 15px / 10px;
11 } 11 }
12 .gridWithInherit { 12 .gridWithInherit {
13 grid: inherit; 13 grid: inherit;
14 } 14 }
15 #gridWithAutoFlowAndColumns { 15 #gridWithAutoFlowAndColumns {
16 grid: column 10px; 16 grid: column 10px;
17 } 17 }
18 #gridWithAutoFlowNone { 18 #gridWithAutoFlowNone {
19 grid: none 10px; 19 grid: none 10px;
20 } 20 }
21 #gridWithAutoFlowColumnDense { 21 #gridWithAutoFlowColumnDense {
22 grid: column dense 10px; 22 grid: column dense 10px;
23 } 23 }
24 #gridWithAutoFlowDenseRow { 24 #gridWithAutoFlowDenseRow {
25 grid: dense row 10px; 25 grid: dense row 10px;
26 } 26 }
27 #gridWithAutoFlowStackColumn {
28 grid: stack column 10px;
29 }
30 #gridWithAutoFlowRowStack {
31 grid: row stack 10px;
32 }
33 #gridWithAutoFlowAndColumnsAndRows { 27 #gridWithAutoFlowAndColumnsAndRows {
34 grid: column 10px / 20px; 28 grid: column 10px / 20px;
35 } 29 }
36 30
37 /* Bad values. */ 31 /* Bad values. */
38 32
39 #gridWithExplicitAndImplicit { 33 #gridWithExplicitAndImplicit {
40 grid: 10px / 20px column; 34 grid: 10px / 20px column;
41 } 35 }
42 #gridWithMisplacedNone1 { 36 #gridWithMisplacedNone1 {
43 grid: column 10px / none 20px; 37 grid: column 10px / none 20px;
44 } 38 }
45 #gridWithMisplacedNone2 { 39 #gridWithMisplacedNone2 {
46 grid: 10px / 20px none; 40 grid: 10px / 20px none;
47 } 41 }
48 #gridWithMisplacedDense { 42 #gridWithMisplacedDense {
49 grid: dense column dense; 43 grid: dense column dense;
50 } 44 }
51 #gridWithMisplacedStack {
52 grid: stack row stack;
53 }
54 </style> 45 </style>
55 <script src="../../resources/js-test.js"></script> 46 <script src="../../resources/js-test.js"></script>
56 </head> 47 </head>
57 <body> 48 <body>
58 <div class="grid" id="gridWithNone"></div> 49 <div class="grid" id="gridWithNone"></div>
59 <div class="grid gridWithTemplate" id="gridWithTemplate"></div> 50 <div class="grid gridWithTemplate" id="gridWithTemplate"></div>
60 <div class="grid gridWithTemplate"> 51 <div class="grid gridWithTemplate">
61 <div class="grid gridWithInherit" id="gridInherit"></div> 52 <div class="grid gridWithInherit" id="gridInherit"></div>
62 </div> 53 </div>
63 <div class="grid" class="gridWithTemplate"> 54 <div class="grid" class="gridWithTemplate">
64 <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div> 55 <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div>
65 </div--> 56 </div-->
66 <div class="grid" id="gridWithAutoFlowAndColumns"></div> 57 <div class="grid" id="gridWithAutoFlowAndColumns"></div>
67 <div class="grid" id="gridWithAutoFlowNone"></div> 58 <div class="grid" id="gridWithAutoFlowNone"></div>
68 <div class="grid" id="gridWithAutoFlowColumnDense"></div> 59 <div class="grid" id="gridWithAutoFlowColumnDense"></div>
69 <div class="grid" id="gridWithAutoFlowDenseRow"></div> 60 <div class="grid" id="gridWithAutoFlowDenseRow"></div>
70 <div class="grid" id="gridWithAutoFlowStackColumn"></div>
71 <div class="grid" id="gridWithAutoFlowRowStack"></div>
72 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div> 61 <div class="grid" id="gridWithAutoFlowAndColumnsAndRows"></div>
73 <div class="grid" id="gridWithExplicitAndImplicit"></div> 62 <div class="grid" id="gridWithExplicitAndImplicit"></div>
74 <div class="grid" id="gridWithMisplacedNone1"></div> 63 <div class="grid" id="gridWithMisplacedNone1"></div>
75 <div class="grid" id="gridWithMisplacedNone2"></div> 64 <div class="grid" id="gridWithMisplacedNone2"></div>
76 <div class="grid" id="gridWithMisplacedDense"></div> 65 <div class="grid" id="gridWithMisplacedDense"></div>
77 <div class="grid" id="gridWithMisplacedStack"></div>
78 <script src="resources/grid-shorthand-parsing-utils.js"></script> 66 <script src="resources/grid-shorthand-parsing-utils.js"></script>
79 <script> 67 <script>
80 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned."); 68 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned.");
81 69
82 debug("Test getting the longhand values when shorthand is set through CSS.") ; 70 debug("Test getting the longhand values when shorthand is set through CSS.") ;
83 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "row", "auto", "auto"); 71 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "row", "auto", "auto");
84 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "row", "auto", "auto"); 72 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "row", "auto", "auto");
85 testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "1 0px", "none", "row", "auto", "auto"); 73 testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "1 0px", "none", "row", "auto", "auto");
86 testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto"); 74 testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto");
87 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn s"), "none", "none", "none", "column", "10px", "10px"); 75 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn s"), "none", "none", "none", "column", "10px", "10px");
88 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), " none", "none", "none", "row", "auto", "auto"); 76 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), " none", "none", "none", "row", "auto", "auto");
89 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen se"), "none", "none", "none", "column dense", "10px", "10px"); 77 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen se"), "none", "none", "none", "column dense", "10px", "10px");
90 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow" ), "none", "none", "none", "row dense", "10px", "10px"); 78 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow" ), "none", "none", "none", "row dense", "10px", "10px");
91 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowStackColu mn"), "none", "none", "none", "stack column", "10px", "10px");
92 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowRowStack" ), "none", "none", "none", "stack row", "10px", "10px");
93 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn sAndRows"), "none", "none", "none", "column", "10px", "20px"); 79 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndColumn sAndRows"), "none", "none", "none", "column", "10px", "20px");
94 80
95 debug(""); 81 debug("");
96 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')"); 82 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')");
97 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic it"), "none", "none", "none", "row", "auto", "auto"); 83 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic it"), "none", "none", "none", "row", "auto", "auto");
98 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto"); 84 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto");
99 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto"); 85 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto");
100 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto"); 86 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto");
101 testGridDefinitionsValues(document.getElementById("gridWithMisplacedStack"), "none", "none", "none", "row", "auto", "auto");
102 87
103 debug(""); 88 debug("");
104 debug("Test getting and setting 'grid' shorthand through JS"); 89 debug("Test getting and setting 'grid' shorthand through JS");
105 testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial"); 90 testGridDefinitionsSetJSValues("10px / 20px", "10px", "20px", "none", "row", "auto", "auto", "10px", "20px", "none", "initial", "initial", "initial");
106 testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20p x", "\"a\"", "row", "auto", "auto", "10px", "(line) 20px", "\"a\"", "initial", " initial", "initial"); 91 testGridDefinitionsSetJSValues("10px / (line) 'a' 20px", "10px", "(line) 20p x", "\"a\"", "row", "auto", "auto", "10px", "(line) 20px", "\"a\"", "initial", " initial", "initial");
107 testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "ro w dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px"); 92 testGridDefinitionsSetJSValues("row dense 20px", "none", "none", "none", "ro w dense", "20px", "20px", "initial", "initial", "initial", "row dense", "20px", "20px");
108 testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "1 0px"); 93 testGridDefinitionsSetJSValues("column 20px / 10px", "none", "none", "none", "column", "20px", "10px", "initial", "initial", "initial", "column", "20px", "1 0px");
109 94
110 debug(""); 95 debug("");
111 debug("Test the initial value"); 96 debug("Test the initial value");
112 var element = document.createElement("div"); 97 var element = document.createElement("div");
113 document.body.appendChild(element); 98 document.body.appendChild(element);
114 testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "a uto"); 99 testGridDefinitionsValues(element, "none", "none", "none", "row", "auto", "a uto");
115 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'"); 100 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-colu mns')", "'none'");
116 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'"); 101 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-rows ')", "'none'");
117 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'"); 102 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-template-area s')", "'none'");
118 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'"); 103 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-flow')", "'row'");
119 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns' )", "'auto'"); 104 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-columns' )", "'auto'");
120 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'"); 105 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-auto-rows')", "'auto'");
121 106
122 debug(""); 107 debug("");
123 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS"); 108 debug("Test setting grid-template-columns and grid-template-rows back to 'no ne' through JS");
124 testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "2 0px"); 109 testGridDefinitionsSetJSValues("column 10px / 20px", "none", "none", "none", "column", "10px", "20px", "initial", "initial", "initial", "column", "10px", "2 0px");
125 testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto" , "auto", "none", "none", "none", "initial", "initial", "initial"); 110 testGridDefinitionsSetJSValues("none", "none", "none", "none", "row", "auto" , "auto", "none", "none", "none", "initial", "initial", "initial");
126 111
127 </script> 112 </script>
128 </body> 113 </body>
129 </html> 114 </html>
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/grid-item-z-index-stacking-context.html ('k') | LayoutTests/fast/css-grid-layout/grid-shorthand-get-set-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698