cue-pseudo-element.mjs (10102B)
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 `cue-pseudo-element` test cases. 6 7 // "background", 8 // "background-attachment", 9 // "background-blend-mode", 10 // "background-clip", 11 // "background-color", 12 // "background-image", 13 // "background-origin", 14 // "background-position", 15 // "background-position-x", 16 // "background-position-y", 17 // "background-repeat", 18 // "background-size", 19 // "color", 20 // "font", 21 // "font-family", 22 // "font-size", 23 // "font-stretch", 24 // "font-style", 25 // "font-variant", 26 // "font-variant-alternates", 27 // "font-variant-caps", 28 // "font-variant-east-asian", 29 // "font-variant-ligatures", 30 // "font-variant-numeric", 31 // "font-variant-position", 32 // "font-weight", 33 // "line-height", 34 // "opacity", 35 // "outline", 36 // "outline-color", 37 // "outline-offset", 38 // "outline-style", 39 // "outline-width", 40 // "ruby-position", 41 // "text-combine-upright", 42 // "text-decoration", 43 // "text-decoration-color", 44 // "text-decoration-line", 45 // "text-decoration-style", 46 // "text-decoration-thickness", 47 // "text-shadow", 48 // "visibility", 49 // "white-space", 50 51 export default [ 52 { 53 info: "background is active on ::cue", 54 property: "background", 55 tagName: "video", 56 rules: ["video::cue { background: linear-gradient(white, black); }"], 57 isActive: true, 58 }, 59 { 60 info: "background-attachment is active on ::cue", 61 property: "background-attachment", 62 tagName: "video", 63 rules: ["video::cue { background-attachment: fixed; }"], 64 isActive: true, 65 }, 66 { 67 info: "background-blend-mode is active on ::cue", 68 property: "background-blend-mode", 69 tagName: "video", 70 rules: ["video::cue { background-blend-mode: difference; }"], 71 isActive: true, 72 }, 73 { 74 info: "background-clip is active on ::cue", 75 property: "background-clip", 76 tagName: "video", 77 rules: ["video::cue { background-clip: padding-box; }"], 78 isActive: true, 79 }, 80 { 81 info: "background-color is active on ::cue", 82 property: "background-color", 83 tagName: "video", 84 rules: ["video::cue { background-color: red; }"], 85 isActive: true, 86 }, 87 { 88 info: "background-image is active on ::cue", 89 property: "background-image", 90 tagName: "video", 91 rules: [ 92 "video::cue { background-image: url('https://example.com/image.png'); }", 93 ], 94 isActive: true, 95 }, 96 { 97 info: "background-origin is active on ::cue", 98 property: "background-origin", 99 tagName: "video", 100 rules: ["video::cue { background-origin: padding-box; }"], 101 isActive: true, 102 }, 103 { 104 info: "background-position is active on ::cue", 105 property: "background-position", 106 tagName: "video", 107 rules: ["video::cue { background-position: 0 0; }"], 108 isActive: true, 109 }, 110 { 111 info: "background-position-x is active on ::cue", 112 property: "background-position-x", 113 tagName: "video", 114 rules: ["video::cue { background-position-x: 0; }"], 115 isActive: true, 116 }, 117 { 118 info: "background-position-y is active on ::cue", 119 property: "background-position-y", 120 tagName: "video", 121 rules: ["video::cue { background-position-y: 0; }"], 122 isActive: true, 123 }, 124 { 125 info: "background-repeat is active on ::cue", 126 property: "background-repeat", 127 tagName: "video", 128 rules: ["video::cue { background-repeat: repeat-y; }"], 129 isActive: true, 130 }, 131 { 132 info: "background-size is active on ::cue", 133 property: "background-size", 134 tagName: "video", 135 rules: ["video::cue { background-size: 100% 100%; }"], 136 isActive: true, 137 }, 138 { 139 info: "color is active on ::cue", 140 property: "color", 141 tagName: "video", 142 rules: ["video::cue { color: red; }"], 143 isActive: true, 144 }, 145 { 146 info: "font is active on ::cue", 147 property: "font", 148 tagName: "video", 149 rules: ["video::cue { font: 1em sans-serif; }"], 150 isActive: true, 151 }, 152 { 153 info: "font-family is active on ::cue", 154 property: "font-family", 155 tagName: "video", 156 rules: ["video::cue { font-family: sans-serif; }"], 157 isActive: true, 158 }, 159 { 160 info: "font-size is active on ::cue", 161 property: "font-size", 162 tagName: "video", 163 rules: ["video::cue { font-size: 1em; }"], 164 isActive: true, 165 }, 166 { 167 info: "font-stretch is active on ::cue", 168 property: "font-stretch", 169 tagName: "video", 170 rules: ["video::cue { font-stretch: ultra-condensed; }"], 171 isActive: true, 172 }, 173 { 174 info: "font-style is active on ::cue", 175 property: "font-style", 176 tagName: "video", 177 rules: ["video::cue { font-style: italic; }"], 178 isActive: true, 179 }, 180 { 181 info: "font-variant is active on ::cue", 182 property: "font-variant", 183 tagName: "video", 184 rules: ["video::cue { font-variant: small-caps; }"], 185 isActive: true, 186 }, 187 { 188 info: "font-variant-alternates is active on ::cue", 189 property: "font-variant-alternates", 190 tagName: "video", 191 rules: ["video::cue { font-variant-alternates: slashed-zero; }"], 192 isActive: true, 193 }, 194 { 195 info: "font-variant-caps is active on ::cue", 196 property: "font-variant-caps", 197 tagName: "video", 198 rules: ["video::cue { font-variant-caps: all-small-caps; }"], 199 isActive: true, 200 }, 201 { 202 info: "font-variant-east-asian is active on ::cue", 203 property: "font-variant-east-asian", 204 tagName: "video", 205 rules: ["video::cue { font-variant-east-asian: ruby; }"], 206 isActive: true, 207 }, 208 { 209 info: "font-variant-ligatures is active on ::cue", 210 property: "font-variant-ligatures", 211 tagName: "video", 212 rules: ["video::cue { font-variant-ligatures: common-ligatures; }"], 213 isActive: true, 214 }, 215 { 216 info: "font-variant-numeric is active on ::cue", 217 property: "font-variant-numeric", 218 tagName: "video", 219 rules: ["video::cue { font-variant-numeric: ordinal; }"], 220 isActive: true, 221 }, 222 { 223 info: "font-variant-position is active on ::cue", 224 property: "font-variant-position", 225 tagName: "video", 226 rules: ["video::cue { font-variant-position: sub; }"], 227 isActive: true, 228 }, 229 { 230 info: "font-weight is active on ::cue", 231 property: "font-weight", 232 tagName: "video", 233 rules: ["video::cue { font-weight: bold; }"], 234 isActive: true, 235 }, 236 { 237 info: "line-height is active on ::cue", 238 property: "line-height", 239 tagName: "video", 240 rules: ["video::cue { line-height: 1.2; }"], 241 isActive: true, 242 }, 243 { 244 info: "opacity is active on ::cue", 245 property: "opacity", 246 tagName: "video", 247 rules: ["video::cue { opacity: 0.8; }"], 248 isActive: true, 249 }, 250 { 251 info: "outline is active on ::cue", 252 property: "outline", 253 tagName: "video", 254 rules: ["video::cue { outline: 1px solid red; }"], 255 isActive: true, 256 }, 257 { 258 info: "outline-color is active on ::cue", 259 property: "outline-color", 260 tagName: "video", 261 rules: ["video::cue { outline-color: red; }"], 262 isActive: true, 263 }, 264 { 265 info: "outline-offset is active on ::cue", 266 property: "outline-offset", 267 tagName: "video", 268 rules: ["video::cue { outline-offset: 1px; }"], 269 isActive: true, 270 }, 271 { 272 info: "outline-style is active on ::cue", 273 property: "outline-style", 274 tagName: "video", 275 rules: ["video::cue { outline-style: solid; }"], 276 isActive: true, 277 }, 278 { 279 info: "outline-width is active on ::cue", 280 property: "outline-width", 281 tagName: "video", 282 rules: ["video::cue { outline-width: 1px; }"], 283 isActive: true, 284 }, 285 { 286 info: "ruby-position is active on ::cue", 287 property: "ruby-position", 288 tagName: "video", 289 rules: ["video::cue { ruby-position: over; }"], 290 isActive: true, 291 }, 292 { 293 info: "text-combine-upright is active on ::cue", 294 property: "text-combine-upright", 295 tagName: "video", 296 rules: ["video::cue { text-combine-upright: all; }"], 297 isActive: true, 298 }, 299 { 300 info: "text-decoration is active on ::cue", 301 property: "text-decoration", 302 tagName: "video", 303 rules: ["video::cue { text-decoration: 1px underline red; }"], 304 isActive: true, 305 }, 306 { 307 info: "text-decoration-color is active on ::cue", 308 property: "text-decoration-color", 309 tagName: "video", 310 rules: ["video::cue { text-decoration-color: red; }"], 311 isActive: true, 312 }, 313 { 314 info: "text-decoration-line is active on ::cue", 315 property: "text-decoration-line", 316 tagName: "video", 317 rules: ["video::cue { text-decoration-line: underline; }"], 318 isActive: true, 319 }, 320 { 321 info: "text-decoration-style is active on ::cue", 322 property: "text-decoration-style", 323 tagName: "video", 324 rules: ["video::cue { text-decoration-style: wavy; }"], 325 isActive: true, 326 }, 327 { 328 info: "text-decoration-thickness is active on ::cue", 329 property: "text-decoration-thickness", 330 tagName: "video", 331 rules: ["video::cue { text-decoration-thickness: 1px; }"], 332 isActive: true, 333 }, 334 { 335 info: "text-shadow is active on ::cue", 336 property: "text-shadow", 337 tagName: "video", 338 rules: ["video::cue { text-shadow: 1px 1px 1px red; }"], 339 isActive: true, 340 }, 341 { 342 info: "visibility is active on ::cue", 343 property: "visibility", 344 tagName: "video", 345 rules: ["video::cue { visibility: hidden; }"], 346 isActive: true, 347 }, 348 { 349 info: "white-space is active on ::cue", 350 property: "white-space", 351 tagName: "video", 352 rules: ["video::cue { white-space: nowrap; }"], 353 isActive: true, 354 }, 355 { 356 info: "border is inactive on ::cue", 357 property: "border", 358 tagName: "video", 359 rules: ["video::cue { border: 1px solid red; }"], 360 isActive: false, 361 expectedMsgId: "inactive-css-cue-pseudo-element-not-supported", 362 }, 363 { 364 info: "display is inactive on ::cue", 365 property: "display", 366 tagName: "video", 367 rules: ["video::cue { display: grid; }"], 368 isActive: false, 369 expectedMsgId: "inactive-css-cue-pseudo-element-not-supported", 370 }, 371 { 372 info: "custom property is active on ::cue", 373 property: "--my-var", 374 tagName: "video", 375 rules: ["video::cue { --my-var: red; }"], 376 isActive: true, 377 }, 378 ];