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

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

Issue 2166393002: [css-grid] grid-auto-flow|row should take a <track-size>+ (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Patch for landing v2 Created 4 years, 5 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
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 #gridWithNone { 6 #gridWithNone {
7 grid: none; 7 grid: none;
8 } 8 }
9 .gridWithTemplate { 9 .gridWithTemplate {
10 grid: 10px / 15px; 10 grid: 10px / 15px;
11 } 11 }
12 .gridWithInherit { 12 .gridWithInherit {
13 grid: inherit; 13 grid: inherit;
14 } 14 }
15 #gridWithAutoFlowAndRows { 15 #gridWithAutoFlowAndRows {
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 #gridWithAutoFlowAndRowsAndColumns { 27 #gridWithAutoFlowAndRowsAndColumns {
28 grid: column 10px / 20px; 28 grid: column 10px / 20px;
29 } 29 }
30 #gridWithAutoFlowAndMultipleAutoTracks {
31 grid: row 20px 10px / 100px 10%;
32 }
30 33
31 /* Bad values. */ 34 /* Bad values. */
32 35
33 #gridWithExplicitAndImplicit { 36 #gridWithExplicitAndImplicit {
34 grid: 10px / 20px column; 37 grid: 10px / 20px column;
35 } 38 }
36 #gridWithMisplacedNone1 { 39 #gridWithMisplacedNone1 {
37 grid: column 10px / none 20px; 40 grid: column 10px / none 20px;
38 } 41 }
39 #gridWithMisplacedNone2 { 42 #gridWithMisplacedNone2 {
(...skipping 12 matching lines...) Expand all
52 <div class="grid gridWithInherit" id="gridInherit"></div> 55 <div class="grid gridWithInherit" id="gridInherit"></div>
53 </div> 56 </div>
54 <div class="grid" class="gridWithTemplate"> 57 <div class="grid" class="gridWithTemplate">
55 <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div> 58 <div><div class="grid gridWithInherit" id="gridNoInherit"></div></div>
56 </div--> 59 </div-->
57 <div class="grid" id="gridWithAutoFlowAndRows"></div> 60 <div class="grid" id="gridWithAutoFlowAndRows"></div>
58 <div class="grid" id="gridWithAutoFlowNone"></div> 61 <div class="grid" id="gridWithAutoFlowNone"></div>
59 <div class="grid" id="gridWithAutoFlowColumnDense"></div> 62 <div class="grid" id="gridWithAutoFlowColumnDense"></div>
60 <div class="grid" id="gridWithAutoFlowDenseRow"></div> 63 <div class="grid" id="gridWithAutoFlowDenseRow"></div>
61 <div class="grid" id="gridWithAutoFlowAndRowsAndColumns"></div> 64 <div class="grid" id="gridWithAutoFlowAndRowsAndColumns"></div>
65 <div class="grid" id="gridWithAutoFlowAndMultipleAutoTracks"></div>
62 <div class="grid" id="gridWithExplicitAndImplicit"></div> 66 <div class="grid" id="gridWithExplicitAndImplicit"></div>
63 <div class="grid" id="gridWithMisplacedNone1"></div> 67 <div class="grid" id="gridWithMisplacedNone1"></div>
64 <div class="grid" id="gridWithMisplacedNone2"></div> 68 <div class="grid" id="gridWithMisplacedNone2"></div>
65 <div class="grid" id="gridWithMisplacedDense"></div> 69 <div class="grid" id="gridWithMisplacedDense"></div>
66 <script src="resources/grid-shorthand-parsing-utils.js"></script> 70 <script src="resources/grid-shorthand-parsing-utils.js"></script>
67 <script> 71 <script>
68 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned."); 72 description("This test checks that the 'grid' shorthand is properly parsed a nd the longhand properties correctly assigned.");
69 73
70 debug("Test getting the longhand values when shorthand is set through CSS.") ; 74 debug("Test getting the longhand values when shorthand is set through CSS.") ;
71 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "row", "auto", "auto"); 75 testGridDefinitionsValues(document.getElementById("gridWithNone"), "none", " none", "none", "row", "auto", "auto");
72 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "row", "auto", "auto"); 76 testGridDefinitionsValues(document.getElementById("gridWithTemplate"), "15px ", "10px", "none", "row", "auto", "auto");
73 testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "1 0px", "none", "row", "auto", "auto"); 77 testGridDefinitionsValues(document.getElementById("gridInherit"), "15px", "1 0px", "none", "row", "auto", "auto");
74 testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto"); 78 testGridDefinitionsValues(document.getElementById("gridNoInherit"), "none", "none", "none", "row", "auto", "auto");
75 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRows") , "none", "none", "none", "column", "10px", "10px"); 79 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRows") , "none", "none", "none", "column", "10px", "10px");
76 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), " none", "none", "none", "row", "auto", "auto"); 80 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowNone"), " none", "none", "none", "row", "auto", "auto");
77 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen se"), "none", "none", "none", "column dense", "10px", "10px"); 81 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowColumnDen se"), "none", "none", "none", "column dense", "10px", "10px");
78 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow" ), "none", "none", "none", "row dense", "10px", "10px"); 82 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowDenseRow" ), "none", "none", "none", "row dense", "10px", "10px");
79 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRowsAn dColumns"), "none", "none", "none", "column", "20px", "10px"); 83 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndRowsAn dColumns"), "none", "none", "none", "column", "20px", "10px");
84 testGridDefinitionsValues(document.getElementById("gridWithAutoFlowAndMultip leAutoTracks"), "none", "none", "none", "row", "100px 10%", "20px 10px");
80 85
81 debug(""); 86 debug("");
82 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')"); 87 debug("Test getting wrong values for 'grid' shorthand through CSS (they shou ld resolve to the default: 'none')");
83 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic it"), "none", "none", "none", "row", "auto", "auto"); 88 testGridDefinitionsValues(document.getElementById("gridWithExplicitAndImplic it"), "none", "none", "none", "row", "auto", "auto");
84 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto"); 89 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone1"), "none", "none", "none", "row", "auto", "auto");
85 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto"); 90 testGridDefinitionsValues(document.getElementById("gridWithMisplacedNone2"), "none", "none", "none", "row", "auto", "auto");
86 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto"); 91 testGridDefinitionsValues(document.getElementById("gridWithMisplacedDense"), "none", "none", "none", "row", "auto", "auto");
87 92
88 debug(""); 93 debug("");
89 debug("Test getting and setting 'grid' shorthand through JS"); 94 debug("Test getting and setting 'grid' shorthand through JS");
(...skipping 26 matching lines...) Expand all
116 var anotherElement = document.createElement("div"); 121 var anotherElement = document.createElement("div");
117 document.body.appendChild(anotherElement); 122 document.body.appendChild(anotherElement);
118 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-column-gap')", "0px"); 123 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-column-gap')", "0px");
119 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-row-gap')", "0px"); 124 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-row-gap')", "0px");
120 anotherElement.style.grid = "inherit"; 125 anotherElement.style.grid = "inherit";
121 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-column-gap')", "20px"); 126 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-column-gap')", "20px");
122 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-row-gap')", "100px"); 127 shouldBeEqualToString("getComputedStyle(anotherElement, '').getPropertyValue ('grid-row-gap')", "100px");
123 </script> 128 </script>
124 </body> 129 </body>
125 </html> 130 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698