at-position-try-rules.mjs (9922B)
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 /* 6 InactivePropertyHelper `@position-try` 7 - position-anchor 8 - position-area 9 - Inset property descriptors 10 - top 11 - left 12 - bottom 13 - right 14 - inset-block-start 15 - inset-block-end 16 - inset-inline-start 17 - inset-inline-end 18 - inset-block 19 - inset-inline 20 - inset 21 - Margin property descriptors: 22 - margin-top 23 - margin-left 24 - margin-bottom 25 - margin-right 26 - margin-block-start 27 - margin-block-end 28 - margin-inline-start 29 - margin-inline-end 30 - margin 31 - margin-block 32 - margin-inline 33 - Sizing property descriptors: 34 - width 35 - height 36 - min-width 37 - min-height 38 - max-width 39 - max-height 40 - block-size 41 - inline-size 42 - min-block-size 43 - min-inline-size 44 - max-block-size 45 - max-inline-size 46 - Self-alignment property descriptors: 47 - align-self 48 - justify-self 49 - place-self 50 */ 51 52 export default [ 53 { 54 info: "color is inactive in @position-try", 55 property: "color", 56 tagName: "div", 57 rules: ["@position-try --pt { color: tomato; }"], 58 isActive: false, 59 expectedMsgId: "inactive-css-at-position-try-not-supported", 60 }, 61 { 62 info: "background is inactive in @position-try", 63 property: "background", 64 tagName: "div", 65 rules: ["@position-try --pt { background: gold; }"], 66 isActive: false, 67 expectedMsgId: "inactive-css-at-position-try-not-supported", 68 }, 69 { 70 info: "top is still inactive on non-fixed element", 71 property: "top", 72 tagName: "div", 73 rules: ["@position-try --pt { top: 0; }"], 74 isActive: false, 75 }, 76 { 77 info: "custom property are inactive in @position-try", 78 property: "--my-var", 79 tagName: "div", 80 rules: ["@position-try --pt { --my-var: red; }"], 81 isActive: false, 82 }, 83 { 84 info: "position-anchor is active in @position-try", 85 property: "position-anchor", 86 tagName: "div", 87 rules: ["@position-try --pt { position-anchor: auto; }"], 88 isActive: true, 89 }, 90 { 91 info: "position-area is active in @position-try", 92 property: "position-area", 93 tagName: "div", 94 rules: ["@position-try --pt { position-area: top left; }"], 95 isActive: true, 96 }, 97 { 98 info: "top is active in @position-try", 99 property: "top", 100 tagName: "div", 101 rules: ["@position-try --pt { top: 0; }", "div { position: fixed; }"], 102 isActive: true, 103 }, 104 { 105 info: "left is active in @position-try", 106 property: "left", 107 tagName: "div", 108 rules: ["@position-try --pt { left: 0; }", "div { position: fixed; }"], 109 isActive: true, 110 }, 111 { 112 info: "bottom is active in @position-try", 113 property: "bottom", 114 tagName: "div", 115 rules: ["@position-try --pt { bottom: 0; }", "div { position: fixed; }"], 116 isActive: true, 117 }, 118 { 119 info: "right is active in @position-try", 120 property: "right", 121 tagName: "div", 122 rules: ["@position-try --pt { right: 0; }", "div { position: fixed; }"], 123 isActive: true, 124 }, 125 { 126 info: "inset-block-start is active in @position-try", 127 property: "inset-block-start", 128 tagName: "div", 129 rules: [ 130 "@position-try --pt { inset-block-start: 0; }", 131 "div { position: fixed; }", 132 ], 133 isActive: true, 134 }, 135 { 136 info: "inset-block-end is active in @position-try", 137 property: "inset-block-end", 138 tagName: "div", 139 rules: [ 140 "@position-try --pt { inset-block-end: 0; }", 141 "div { position: fixed; }", 142 ], 143 isActive: true, 144 }, 145 { 146 info: "inset-inline-start is active in @position-try", 147 property: "inset-inline-start", 148 tagName: "div", 149 rules: [ 150 "@position-try --pt { inset-inline-start: 0; }", 151 "div { position: fixed; }", 152 ], 153 isActive: true, 154 }, 155 { 156 info: "inset-inline-end is active in @position-try", 157 property: "inset-inline-end", 158 tagName: "div", 159 rules: [ 160 "@position-try --pt { inset-inline-end: 0; }", 161 "div { position: fixed; }", 162 ], 163 isActive: true, 164 }, 165 { 166 info: "inset-block is active in @position-try", 167 property: "inset-block", 168 tagName: "div", 169 rules: [ 170 "@position-try --pt { inset-block: 0; }", 171 "div { position: fixed; }", 172 ], 173 isActive: true, 174 }, 175 { 176 info: "inset-inline is active in @position-try", 177 property: "inset-inline", 178 tagName: "div", 179 rules: [ 180 "@position-try --pt { inset-inline: 0; }", 181 "div { position: fixed; }", 182 ], 183 isActive: true, 184 }, 185 { 186 info: "inset is active in @position-try", 187 property: "inset", 188 tagName: "div", 189 rules: ["@position-try --pt { inset: 0; }", "div { position: fixed; }"], 190 isActive: true, 191 }, 192 { 193 info: "margin-top is active in @position-try", 194 property: "margin-top", 195 tagName: "div", 196 rules: ["@position-try --pt { margin-top: 10px; }"], 197 isActive: true, 198 }, 199 { 200 info: "margin-left is active in @position-try", 201 property: "margin-left", 202 tagName: "div", 203 rules: ["@position-try --pt { margin-left: 10px; }"], 204 isActive: true, 205 }, 206 { 207 info: "margin-bottom is active in @position-try", 208 property: "margin-bottom", 209 tagName: "div", 210 rules: ["@position-try --pt { margin-bottom: 10px; }"], 211 isActive: true, 212 }, 213 { 214 info: "margin-right is active in @position-try", 215 property: "margin-right", 216 tagName: "div", 217 rules: ["@position-try --pt { margin-right: 10px; }"], 218 isActive: true, 219 }, 220 { 221 info: "margin-block-start is active in @position-try", 222 property: "margin-block-start", 223 tagName: "div", 224 rules: ["@position-try --pt { margin-block-start: 10px; }"], 225 isActive: true, 226 }, 227 { 228 info: "margin-block-end is active in @position-try", 229 property: "margin-block-end", 230 tagName: "div", 231 rules: ["@position-try --pt { margin-block-end: 10px; }"], 232 isActive: true, 233 }, 234 { 235 info: "margin-inline-start is active in @position-try", 236 property: "margin-inline-start", 237 tagName: "div", 238 rules: ["@position-try --pt { margin-inline-start: 10px; }"], 239 isActive: true, 240 }, 241 { 242 info: "margin-inline-end is active in @position-try", 243 property: "margin-inline-end", 244 tagName: "div", 245 rules: ["@position-try --pt { margin-inline-end: 10px; }"], 246 isActive: true, 247 }, 248 { 249 info: "margin is active in @position-try", 250 property: "margin", 251 tagName: "div", 252 rules: ["@position-try --pt { margin: 10px; }"], 253 isActive: true, 254 }, 255 { 256 info: "margin-block is active in @position-try", 257 property: "margin-block", 258 tagName: "div", 259 rules: ["@position-try --pt { margin-block: 10px; }"], 260 isActive: true, 261 }, 262 { 263 info: "margin-inline is active in @position-try", 264 property: "margin-inline", 265 tagName: "div", 266 rules: ["@position-try --pt { margin-inline: 10px; }"], 267 isActive: true, 268 }, 269 { 270 info: "width is active in @position-try", 271 property: "width", 272 tagName: "div", 273 rules: ["@position-try --pt { width: 200px; }"], 274 isActive: true, 275 }, 276 { 277 info: "height is active in @position-try", 278 property: "height", 279 tagName: "div", 280 rules: ["@position-try --pt { height: 200px; }"], 281 isActive: true, 282 }, 283 { 284 info: "min-width is active in @position-try", 285 property: "min-width", 286 tagName: "div", 287 rules: ["@position-try --pt { min-width: 200px; }"], 288 isActive: true, 289 }, 290 { 291 info: "min-height is active in @position-try", 292 property: "min-height", 293 tagName: "div", 294 rules: ["@position-try --pt { min-height: 200px; }"], 295 isActive: true, 296 }, 297 { 298 info: "max-width is active in @position-try", 299 property: "max-width", 300 tagName: "div", 301 rules: ["@position-try --pt { max-width: 200px; }"], 302 isActive: true, 303 }, 304 { 305 info: "max-height is active in @position-try", 306 property: "max-height", 307 tagName: "div", 308 rules: ["@position-try --pt { max-height: 200px; }"], 309 isActive: true, 310 }, 311 { 312 info: "block-size is active in @position-try", 313 property: "block-size", 314 tagName: "div", 315 rules: ["@position-try --pt { block-size: 200px; }"], 316 isActive: true, 317 }, 318 { 319 info: "inline-size is active in @position-try", 320 property: "inline-size", 321 tagName: "div", 322 rules: ["@position-try --pt { inline-size: 200px; }"], 323 isActive: true, 324 }, 325 { 326 info: "min-block-size is active in @position-try", 327 property: "min-block-size", 328 tagName: "div", 329 rules: ["@position-try --pt { min-block-size: 200px; }"], 330 isActive: true, 331 }, 332 { 333 info: "min-inline-size is active in @position-try", 334 property: "min-inline-size", 335 tagName: "div", 336 rules: ["@position-try --pt { min-inline-size: 200px; }"], 337 isActive: true, 338 }, 339 { 340 info: "max-block-size is active in @position-try", 341 property: "max-block-size", 342 tagName: "div", 343 rules: ["@position-try --pt { max-block-size: 200px; }"], 344 isActive: true, 345 }, 346 { 347 info: "max-inline-size is active in @position-try", 348 property: "max-inline-size", 349 tagName: "div", 350 rules: ["@position-try --pt { max-inline-size: 200px; }"], 351 isActive: true, 352 }, 353 { 354 info: "align-self is active in @position-try", 355 property: "align-self", 356 tagName: "div", 357 rules: [ 358 "@position-try --pt { align-self: center; }", 359 "div { position: fixed; }", 360 ], 361 isActive: true, 362 }, 363 { 364 info: "justify-self is active in @position-try", 365 property: "justify-self", 366 tagName: "div", 367 rules: [ 368 "@position-try --pt { justify-self: center; }", 369 "div { position: fixed; }", 370 ], 371 isActive: true, 372 }, 373 { 374 info: "place-self is active in @position-try", 375 property: "place-self", 376 tagName: "div", 377 rules: [ 378 "@position-try --pt { place-self: center; }", 379 "div { position: fixed; }", 380 ], 381 isActive: true, 382 }, 383 ];