max-min-width-height.mjs (10208B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 // InactivePropertyHelper `width`, `min-width`, `max-width`, `height`, `min-height`, 6 // `max-height` test cases. 7 export default [ 8 { 9 info: "width is inactive on a non-replaced inline element", 10 property: "width", 11 tagName: "span", 12 rules: ["span { width: 500px; }"], 13 isActive: false, 14 }, 15 { 16 info: "min-width is inactive on a non-replaced inline element", 17 property: "min-width", 18 tagName: "span", 19 rules: ["span { min-width: 500px; }"], 20 isActive: false, 21 }, 22 { 23 info: "max-width is inactive on a non-replaced inline element", 24 property: "max-width", 25 tagName: "span", 26 rules: ["span { max-width: 500px; }"], 27 isActive: false, 28 }, 29 { 30 info: "width is inactive on an tr element", 31 property: "width", 32 tagName: "tr", 33 rules: ["tr { width: 500px; }"], 34 isActive: false, 35 }, 36 { 37 info: "min-width is inactive on an tr element", 38 property: "min-width", 39 tagName: "tr", 40 rules: ["tr { min-width: 500px; }"], 41 isActive: false, 42 }, 43 { 44 info: "max-width is inactive on an tr element", 45 property: "max-width", 46 tagName: "tr", 47 rules: ["tr { max-width: 500px; }"], 48 isActive: false, 49 }, 50 { 51 info: "width is inactive on an thead element", 52 property: "width", 53 tagName: "thead", 54 rules: ["thead { width: 500px; }"], 55 isActive: false, 56 }, 57 { 58 info: "min-width is inactive on an thead element", 59 property: "min-width", 60 tagName: "thead", 61 rules: ["thead { min-width: 500px; }"], 62 isActive: false, 63 }, 64 { 65 info: "max-width is inactive on an thead element", 66 property: "max-width", 67 tagName: "thead", 68 rules: ["thead { max-width: 500px; }"], 69 isActive: false, 70 }, 71 { 72 info: "width is inactive on an tfoot element", 73 property: "width", 74 tagName: "tfoot", 75 rules: ["tfoot { width: 500px; }"], 76 isActive: false, 77 }, 78 { 79 info: "min-width is inactive on an tfoot element", 80 property: "min-width", 81 tagName: "tfoot", 82 rules: ["tfoot { min-width: 500px; }"], 83 isActive: false, 84 }, 85 { 86 info: "max-width is inactive on an tfoot element", 87 property: "max-width", 88 tagName: "tfoot", 89 rules: ["tfoot { max-width: 500px; }"], 90 isActive: false, 91 }, 92 { 93 info: "width is active on a replaced inline element", 94 property: "width", 95 tagName: "img", 96 rules: ["img { width: 500px; }"], 97 isActive: true, 98 }, 99 { 100 info: "width is active on an inline input element", 101 property: "width", 102 tagName: "input", 103 rules: ["input { display: inline; width: 500px; }"], 104 isActive: true, 105 }, 106 { 107 info: "width is active on an inline select element", 108 property: "width", 109 tagName: "select", 110 rules: ["select { display: inline; width: 500px; }"], 111 isActive: true, 112 }, 113 { 114 info: "width is active on a textarea element", 115 property: "width", 116 tagName: "textarea", 117 rules: ["textarea { width: 500px; }"], 118 isActive: true, 119 }, 120 { 121 info: "min-width is active on a replaced inline element", 122 property: "min-width", 123 tagName: "img", 124 rules: ["img { min-width: 500px; }"], 125 isActive: true, 126 }, 127 { 128 info: "max-width is active on a replaced inline element", 129 property: "max-width", 130 tagName: "img", 131 rules: ["img { max-width: 500px; }"], 132 isActive: true, 133 }, 134 { 135 info: "width is active on a block element", 136 property: "width", 137 tagName: "div", 138 rules: ["div { width: 500px; }"], 139 isActive: true, 140 }, 141 { 142 info: "min-width is active on a block element", 143 property: "min-width", 144 tagName: "div", 145 rules: ["div { min-width: 500px; }"], 146 isActive: true, 147 }, 148 { 149 info: "max-width is active on a block element", 150 property: "max-width", 151 tagName: "div", 152 rules: ["div { max-width: 500px; }"], 153 isActive: true, 154 }, 155 { 156 info: "height is inactive on a non-replaced inline element", 157 property: "height", 158 tagName: "span", 159 rules: ["span { height: 500px; }"], 160 isActive: false, 161 }, 162 { 163 info: "min-height is inactive on a non-replaced inline element", 164 property: "min-height", 165 tagName: "span", 166 rules: ["span { min-height: 500px; }"], 167 isActive: false, 168 }, 169 { 170 info: "max-height is inactive on a non-replaced inline element", 171 property: "max-height", 172 tagName: "span", 173 rules: ["span { max-height: 500px; }"], 174 isActive: false, 175 }, 176 { 177 info: "height is inactive on colgroup element", 178 property: "height", 179 tagName: "colgroup", 180 rules: ["colgroup { height: 500px; }"], 181 isActive: false, 182 }, 183 { 184 info: "min-height is inactive on colgroup element", 185 property: "min-height", 186 tagName: "colgroup", 187 rules: ["colgroup { min-height: 500px; }"], 188 isActive: false, 189 }, 190 { 191 info: "max-height is inactive on colgroup element", 192 property: "max-height", 193 tagName: "colgroup", 194 rules: ["colgroup { max-height: 500px; }"], 195 isActive: false, 196 }, 197 { 198 info: "height is inactive on col element", 199 property: "height", 200 tagName: "col", 201 rules: ["col { height: 500px; }"], 202 isActive: false, 203 }, 204 { 205 info: "min-height is inactive on col element", 206 property: "min-height", 207 tagName: "col", 208 rules: ["col { min-height: 500px; }"], 209 isActive: false, 210 }, 211 { 212 info: "max-height is inactive on col element", 213 property: "max-height", 214 tagName: "col", 215 rules: ["col { max-height: 500px; }"], 216 isActive: false, 217 }, 218 { 219 info: "height is active on a replaced inline element", 220 property: "height", 221 tagName: "img", 222 rules: ["img { height: 500px; }"], 223 isActive: true, 224 }, 225 { 226 info: "height is active on an inline input element", 227 property: "height", 228 tagName: "input", 229 rules: ["input { display: inline; height: 500px; }"], 230 isActive: true, 231 }, 232 { 233 info: "height is active on an inline select element", 234 property: "height", 235 tagName: "select", 236 rules: ["select { display: inline; height: 500px; }"], 237 isActive: true, 238 }, 239 { 240 info: "height is active on a textarea element", 241 property: "height", 242 tagName: "textarea", 243 rules: ["textarea { height: 500px; }"], 244 isActive: true, 245 }, 246 { 247 info: "min-height is active on a replaced inline element", 248 property: "min-height", 249 tagName: "img", 250 rules: ["img { min-height: 500px; }"], 251 isActive: true, 252 }, 253 { 254 info: "max-height is active on a replaced inline element", 255 property: "max-height", 256 tagName: "img", 257 rules: ["img { max-height: 500px; }"], 258 isActive: true, 259 }, 260 { 261 info: "height is active on a block element", 262 property: "height", 263 tagName: "div", 264 rules: ["div { height: 500px; }"], 265 isActive: true, 266 }, 267 { 268 info: "min-height is active on a block element", 269 property: "min-height", 270 tagName: "div", 271 rules: ["div { min-height: 500px; }"], 272 isActive: true, 273 }, 274 { 275 info: "max-height is active on a block element", 276 property: "max-height", 277 tagName: "div", 278 rules: ["div { max-height: 500px; }"], 279 isActive: true, 280 }, 281 { 282 info: "height is active on an svg <rect> element.", 283 property: "height", 284 createTestElement: main => { 285 main.innerHTML = ` 286 <svg width=100 height=100> 287 <rect width=100 fill=green></rect> 288 </svg> 289 `; 290 return main.querySelector("rect"); 291 }, 292 rules: ["rect { height: 100px; }"], 293 isActive: true, 294 }, 295 createTableElementTestCase("width", false, "table-row"), 296 createTableElementTestCase("width", false, "table-row-group"), 297 createTableElementTestCase("width", true, "table-column"), 298 createTableElementTestCase("width", true, "table-column-group"), 299 createTableElementTestCase("height", false, "table-column"), 300 createTableElementTestCase("height", false, "table-column-group"), 301 createTableElementTestCase("height", true, "table-row"), 302 createTableElementTestCase("height", true, "table-row-group"), 303 createVerticalTableElementTestCase("width", true, "table-row"), 304 createVerticalTableElementTestCase("width", true, "table-row-group"), 305 createVerticalTableElementTestCase("width", false, "table-column"), 306 createVerticalTableElementTestCase("width", false, "table-column-group"), 307 createVerticalTableElementTestCase("height", true, "table-column"), 308 createVerticalTableElementTestCase("height", true, "table-column-group"), 309 createVerticalTableElementTestCase("height", false, "table-row"), 310 createVerticalTableElementTestCase("height", false, "table-row-group"), 311 { 312 info: "width's inactivity status for a row takes the table's writing mode into account", 313 property: "width", 314 createTestElement: rootNode => { 315 const table = document.createElement("table"); 316 table.style.writingMode = "vertical-lr"; 317 rootNode.appendChild(table); 318 319 const tbody = document.createElement("tbody"); 320 table.appendChild(tbody); 321 322 const tr = document.createElement("tr"); 323 tbody.appendChild(tr); 324 325 const td = document.createElement("td"); 326 tr.appendChild(td); 327 328 return tr; 329 }, 330 rules: ["tr { writing-mode: horizontal-tb; width: 360px; }"], 331 isActive: true, 332 }, 333 ]; 334 335 function createTableElementTestCase(property, isActive, displayType) { 336 return { 337 info: `${property} is ${ 338 isActive ? "active" : "inactive" 339 } on a ${displayType}`, 340 property, 341 tagName: "div", 342 rules: [`div { display: ${displayType}; ${property}: 100px; }`], 343 isActive, 344 }; 345 } 346 347 function createVerticalTableElementTestCase(property, isActive, displayType) { 348 return { 349 info: `${property} is ${ 350 isActive ? "active" : "inactive" 351 } on a vertical ${displayType}`, 352 property, 353 createTestElement: rootNode => { 354 const container = document.createElement("div"); 355 container.style.writingMode = "vertical-lr"; 356 rootNode.append(container); 357 358 const element = document.createElement("span"); 359 container.append(element); 360 361 return element; 362 }, 363 rules: [`span { display: ${displayType}; ${property}: 100px; }`], 364 isActive, 365 }; 366 }