devtools/server/tests/chrome/inactive-property-helper/cue-pseudo-element.mjs

   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 ];