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

Issues Search
    My Issues | Starred     Open | Closed | All

Side by Side Diff: LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js

Issue 16404015: Unprefix -webkit-min-content and -webkit-max-content for grid layout (Closed) Base URL: svn://svn.chromium.org/blink/trunk
Patch Set: Created 7 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 | Annotate | Revision Log
« no previous file with comments | « LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js » ('j') | Source/core/css/CSSValueKeywords.in » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
OLDNEW
1 description('Test that setting and getting grid-columns and grid-rows works as e xpected'); 1 description('Test that setting and getting grid-columns and grid-rows works as e xpected');
2 2
3 debug("Test getting grid-columns and grid-rows set through CSS"); 3 debug("Test getting grid-columns and grid-rows set through CSS");
4 var gridWithNoneElement = document.getElementById("gridWithNoneElement"); 4 var gridWithNoneElement = document.getElementById("gridWithNoneElement");
5 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-colum ns')", "'none'"); 5 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-colum ns')", "'none'");
6 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-rows' )", "'none'"); 6 shouldBe("getComputedStyle(gridWithNoneElement, '').getPropertyValue('grid-rows' )", "'none'");
7 7
8 var gridWithFixedElement = document.getElementById("gridWithFixedElement"); 8 var gridWithFixedElement = document.getElementById("gridWithFixedElement");
9 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-colu mns')", "'10px'"); 9 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-colu mns')", "'10px'");
10 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows ')", "'15px'"); 10 shouldBe("getComputedStyle(gridWithFixedElement, '').getPropertyValue('grid-rows ')", "'15px'");
(...skipping 12 matching lines...) Expand all
23 23
24 var gridWithViewPortPercentageElement = document.getElementById("gridWithViewPor tPercentageElement"); 24 var gridWithViewPortPercentageElement = document.getElementById("gridWithViewPor tPercentageElement");
25 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyVal ue('grid-columns')", "'64px'"); 25 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyVal ue('grid-columns')", "'64px'");
26 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyVal ue('grid-rows')", "'60px'"); 26 shouldBe("getComputedStyle(gridWithViewPortPercentageElement, '').getPropertyVal ue('grid-rows')", "'60px'");
27 27
28 var gridWithMinMax = document.getElementById("gridWithMinMax"); 28 var gridWithMinMax = document.getElementById("gridWithMinMax");
29 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-columns')" , "'minmax(10%, 15px)'"); 29 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-columns')" , "'minmax(10%, 15px)'");
30 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-rows')", " 'minmax(20px, 50%)'"); 30 shouldBe("getComputedStyle(gridWithMinMax, '').getPropertyValue('grid-rows')", " 'minmax(20px, 50%)'");
31 31
32 var gridWithMinContent = document.getElementById("gridWithMinContent"); 32 var gridWithMinContent = document.getElementById("gridWithMinContent");
33 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-column s')", "'-webkit-min-content'"); 33 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-column s')", "'min-content'");
34 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-rows') ", "'-webkit-min-content'"); 34 shouldBe("getComputedStyle(gridWithMinContent, '').getPropertyValue('grid-rows') ", "'min-content'");
35 35
36 var gridWithMaxContent = document.getElementById("gridWithMaxContent"); 36 var gridWithMaxContent = document.getElementById("gridWithMaxContent");
37 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-column s')", "'-webkit-max-content'"); 37 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-column s')", "'max-content'");
38 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-rows') ", "'-webkit-max-content'"); 38 shouldBe("getComputedStyle(gridWithMaxContent, '').getPropertyValue('grid-rows') ", "'max-content'");
39 39
40 var gridWithFraction = document.getElementById("gridWithFraction"); 40 var gridWithFraction = document.getElementById("gridWithFraction");
41 shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-columns' )", "'1fr'"); 41 shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-columns' )", "'1fr'");
42 shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-rows')", "'2fr'"); 42 shouldBe("getComputedStyle(gridWithFraction, '').getPropertyValue('grid-rows')", "'2fr'");
43 43
44 debug(""); 44 debug("");
45 debug("Test getting wrong values for grid-columns and grid-rows through CSS (the y should resolve to the default: 'none')"); 45 debug("Test getting wrong values for grid-columns and grid-rows through CSS (the y should resolve to the default: 'none')");
46 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme nt"); 46 var gridWithFitContentElement = document.getElementById("gridWithFitContentEleme nt");
47 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid -columns')", "'none'"); 47 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid -columns')", "'none'");
48 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid -rows')", "'none'"); 48 shouldBe("getComputedStyle(gridWithFitContentElement, '').getPropertyValue('grid -rows')", "'none'");
(...skipping 32 matching lines...) Expand 10 before | Expand all | Expand 10 after
81 81
82 element = document.createElement("div"); 82 element = document.createElement("div");
83 document.body.appendChild(element); 83 document.body.appendChild(element);
84 element.style.gridColumns = "10vw"; 84 element.style.gridColumns = "10vw";
85 element.style.gridRows = "25vh"; 85 element.style.gridRows = "25vh";
86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'80p x'"); 86 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'80p x'");
87 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'150px' "); 87 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'150px' ");
88 88
89 element = document.createElement("div"); 89 element = document.createElement("div");
90 document.body.appendChild(element); 90 document.body.appendChild(element);
91 element.style.gridColumns = "-webkit-min-content"; 91 element.style.gridColumns = "min-content";
92 element.style.gridRows = "-webkit-min-content"; 92 element.style.gridRows = "min-content";
93 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'-we bkit-min-content'"); 93 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min -content'");
94 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'-webki t-min-content'"); 94 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'min-co ntent'");
95 95
96 element = document.createElement("div"); 96 element = document.createElement("div");
97 document.body.appendChild(element); 97 document.body.appendChild(element);
98 element.style.gridColumns = "-webkit-max-content"; 98 element.style.gridColumns = "max-content";
99 element.style.gridRows = "-webkit-max-content"; 99 element.style.gridRows = "max-content";
100 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'-we bkit-max-content'"); 100 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'max -content'");
101 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'-webki t-max-content'"); 101 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'max-co ntent'");
102 102
103 debug(""); 103 debug("");
104 debug("Test getting and setting grid-columns and grid-rows to minmax() values th rough JS"); 104 debug("Test getting and setting grid-columns and grid-rows to minmax() values th rough JS");
105 element = document.createElement("div"); 105 element = document.createElement("div");
106 document.body.appendChild(element); 106 document.body.appendChild(element);
107 element.style.gridColumns = "minmax(55%, 45px)"; 107 element.style.gridColumns = "minmax(55%, 45px)";
108 element.style.gridRows = "minmax(30px, 40%)"; 108 element.style.gridRows = "minmax(30px, 40%)";
109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(55%, 45px)'"); 109 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(55%, 45px)'");
110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (30px, 40%)'"); 110 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (30px, 40%)'");
111 111
112 element = document.createElement("div"); 112 element = document.createElement("div");
113 document.body.appendChild(element); 113 document.body.appendChild(element);
114 element.style.font = "10px Ahem"; 114 element.style.font = "10px Ahem";
115 element.style.gridColumns = "minmax(22em, 8vh)"; 115 element.style.gridColumns = "minmax(22em, 8vh)";
116 element.style.gridRows = "minmax(10vw, 5em)"; 116 element.style.gridRows = "minmax(10vw, 5em)";
117 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, 48px)'"); 117 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, 48px)'");
118 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (80px, 50px)'"); 118 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (80px, 50px)'");
119 119
120 element = document.createElement("div"); 120 element = document.createElement("div");
121 document.body.appendChild(element); 121 document.body.appendChild(element);
122 element.style.gridColumns = "minmax(-webkit-min-content, 8vh)"; 122 element.style.gridColumns = "minmax(min-content, 8vh)";
123 element.style.gridRows = "minmax(10vw, -webkit-min-content)"; 123 element.style.gridRows = "minmax(10vw, min-content)";
124 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(-webkit-min-content, 48px)'"); 124 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(min-content, 48px)'");
125 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (80px, -webkit-min-content)'"); 125 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (80px, min-content)'");
126 126
127 element = document.createElement("div"); 127 element = document.createElement("div");
128 document.body.appendChild(element); 128 document.body.appendChild(element);
129 element.style.font = "10px Ahem"; 129 element.style.font = "10px Ahem";
130 element.style.gridColumns = "minmax(22em, -webkit-max-content)"; 130 element.style.gridColumns = "minmax(22em, max-content)";
131 element.style.gridRows = "minmax(-webkit-max-content, 5em)"; 131 element.style.gridRows = "minmax(max-content, 5em)";
132 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, -webkit-max-content)'"); 132 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, max-content)'");
133 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (-webkit-max-content, 50px)'"); 133 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (max-content, 50px)'");
134 134
135 element = document.createElement("div"); 135 element = document.createElement("div");
136 document.body.appendChild(element); 136 document.body.appendChild(element);
137 element.style.font = "10px Ahem"; 137 element.style.font = "10px Ahem";
138 element.style.gridColumns = "minmax(22em, -webkit-max-content)"; 138 element.style.gridColumns = "minmax(22em, max-content)";
139 element.style.gridRows = "minmax(-webkit-max-content, 5em)"; 139 element.style.gridRows = "minmax(max-content, 5em)";
140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, -webkit-max-content)'"); 140 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(220px, max-content)'");
141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (-webkit-max-content, 50px)'"); 141 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (max-content, 50px)'");
142 142
143 element = document.createElement("div"); 143 element = document.createElement("div");
144 document.body.appendChild(element); 144 document.body.appendChild(element);
145 element.style.gridColumns = "minmax(-webkit-min-content, -webkit-max-content)"; 145 element.style.gridColumns = "minmax(min-content, max-content)";
146 element.style.gridRows = "minmax(-webkit-max-content, -webkit-min-content)"; 146 element.style.gridRows = "minmax(max-content, min-content)";
147 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(-webkit-min-content, -webkit-max-content)'"); 147 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'min max(min-content, max-content)'");
148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (-webkit-max-content, -webkit-min-content)'"); 148 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'minmax (max-content, min-content)'");
149 149
150 // Unit comparison should be case-insensitive. 150 // Unit comparison should be case-insensitive.
151 element = document.createElement("div"); 151 element = document.createElement("div");
152 document.body.appendChild(element); 152 document.body.appendChild(element);
153 element.style.gridColumns = "3600Fr"; 153 element.style.gridColumns = "3600Fr";
154 element.style.gridRows = "154fR"; 154 element.style.gridRows = "154fR";
155 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'360 0fr'"); 155 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", "'360 0fr'");
156 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'154fr' "); 156 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'154fr' ");
157 157
158 // Float values are allowed. 158 // Float values are allowed.
(...skipping 125 matching lines...) Expand 10 before | Expand all | Expand 10 after
284 element.style.gridColumns = "initial"; 284 element.style.gridColumns = "initial";
285 element.style.gridRows = "initial"; 285 element.style.gridRows = "initial";
286 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", " 'none'"); 286 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-columns')", " 'none'");
287 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'no ne'"); 287 shouldBe("getComputedStyle(element, '').getPropertyValue('grid-rows')", "'no ne'");
288 288
289 document.body.removeChild(element); 289 document.body.removeChild(element);
290 } 290 }
291 debug(""); 291 debug("");
292 debug("Test setting grid-columns and grid-rows to 'initial' through JS"); 292 debug("Test setting grid-columns and grid-rows to 'initial' through JS");
293 testInitial(); 293 testInitial();
OLDNEW
« no previous file with comments | « LayoutTests/fast/css-grid-layout/named-grid-line-get-set-expected.txt ('k') | LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js » ('j') | Source/core/css/CSSValueKeywords.in » ('J')

Powered by Google App Engine
This is Rietveld 408576698