CSS-supports-CSSStyleDeclaration.html (17927B)
1 <!doctype html> 2 <meta charset="utf-8"> 3 <title>CSS.supports v. CSSStyleDeclaration</title> 4 <link rel="help" href="https://drafts.csswg.org/css-conditional/#dom-css-supports"> 5 <link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface"> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <div id="testElement"></div> 9 <script> 10 // This gigantic list of properties is derived from the union of pretty much everything ever 11 // exposed via CSSStyleDeclaration since 2010 in a major browser; this deliberately includes all 12 // the vendor-prefixed properties _because_ they're often where bugs lie 13 14 const properties = [ 15 "-apple-color-filter", 16 "-apple-pay-button-style", 17 "-apple-pay-button-type", 18 "-apple-trailing-word", 19 "-epub-caption-side", 20 "-epub-text-combine", 21 "-epub-text-emphasis", 22 "-epub-text-emphasis-color", 23 "-epub-text-emphasis-style", 24 "-epub-text-orientation", 25 "-epub-text-transform", 26 "-epub-word-break", 27 "-epub-writing-mode", 28 "-moz-animation", 29 "-moz-animation-delay", 30 "-moz-animation-direction", 31 "-moz-animation-duration", 32 "-moz-animation-fill-mode", 33 "-moz-animation-iteration-count", 34 "-moz-animation-name", 35 "-moz-animation-play-state", 36 "-moz-animation-timing-function", 37 // -moz-appearance may be disabled from CSSStyleProperties. 38 // See also https://bugzilla.mozilla.org/show_bug.cgi?id=1977489 39 // "-moz-appearance", 40 "-moz-backface-visibility", 41 "-moz-binding", 42 "-moz-border-bottom-colors", 43 "-moz-border-end", 44 "-moz-border-end-color", 45 "-moz-border-end-style", 46 "-moz-border-end-width", 47 "-moz-border-image", 48 "-moz-border-left-colors", 49 "-moz-border-right-colors", 50 "-moz-border-start", 51 "-moz-border-start-color", 52 "-moz-border-start-style", 53 "-moz-border-start-width", 54 "-moz-border-top-colors", 55 "-moz-box-align", 56 "-moz-box-direction", 57 "-moz-box-flex", 58 "-moz-box-ordinal-group", 59 "-moz-box-orient", 60 "-moz-box-pack", 61 "-moz-box-sizing", 62 "-moz-column-count", 63 "-moz-column-fill", 64 "-moz-column-gap", 65 "-moz-column-rule", 66 "-moz-column-rule-color", 67 "-moz-column-rule-style", 68 "-moz-column-rule-width", 69 "-moz-column-span", 70 "-moz-column-width", 71 "-moz-columns", 72 "-moz-float-edge", 73 "-moz-font-feature-settings", 74 "-moz-font-language-override", 75 "-moz-force-broken-image-icon", 76 "-moz-hyphens", 77 "-moz-image-region", 78 "-moz-margin-end", 79 "-moz-margin-start", 80 "-moz-orient", 81 "-moz-osx-font-smoothing", 82 "-moz-padding-end", 83 "-moz-padding-start", 84 "-moz-perspective", 85 "-moz-perspective-origin", 86 "-moz-stack-sizing", 87 "-moz-tab-size", 88 "-moz-text-align-last", 89 "-moz-text-size-adjust", 90 // No -moz-transform/origin here, because it might intentionally break the 91 // expectations of this test for compat reasons, see: 92 // https://bugzilla.mozilla.org/show_bug.cgi?id=1865332 93 "-moz-transform-style", 94 "-moz-transition", 95 "-moz-transition-delay", 96 "-moz-transition-duration", 97 "-moz-transition-property", 98 "-moz-transition-timing-function", 99 "-moz-user-focus", 100 "-moz-user-modify", 101 "-moz-user-select", 102 "-moz-window-dragging", 103 "-ms-content-zoom-chaining", 104 "-ms-content-zoom-limit", 105 "-ms-content-zoom-limit-max", 106 "-ms-content-zoom-limit-min", 107 "-ms-content-zoom-snap", 108 "-ms-content-zoom-snap-points", 109 "-ms-content-zoom-snap-type", 110 "-ms-content-zooming", 111 "-ms-flow-from", 112 "-ms-flow-into", 113 "-ms-font-feature-settings", 114 "-ms-grid-column", 115 "-ms-grid-column-align", 116 "-ms-grid-column-span", 117 "-ms-grid-columns", 118 "-ms-grid-row", 119 "-ms-grid-row-align", 120 "-ms-grid-row-span", 121 "-ms-grid-rows", 122 "-ms-high-contrast-adjust", 123 "-ms-hyphenate-limit-chars", 124 "-ms-hyphenate-limit-lines", 125 "-ms-hyphenate-limit-zone", 126 "-ms-hyphens", 127 "-ms-ime-align", 128 "-ms-overflow-style", 129 "-ms-scroll-chaining", 130 "-ms-scroll-limit", 131 "-ms-scroll-limit-x-max", 132 "-ms-scroll-limit-x-min", 133 "-ms-scroll-limit-y-max", 134 "-ms-scroll-limit-y-min", 135 "-ms-scroll-rails", 136 "-ms-scroll-snap-points-x", 137 "-ms-scroll-snap-points-y", 138 "-ms-scroll-snap-type", 139 "-ms-scroll-snap-x", 140 "-ms-scroll-snap-y", 141 "-ms-scroll-translation", 142 "-ms-text-combine-horizontal", 143 "-ms-text-size-adjust", 144 "-ms-touch-select", 145 "-ms-user-select", 146 "-ms-wrap-flow", 147 "-ms-wrap-margin", 148 "-ms-wrap-through", 149 "-webkit-align-content", 150 "-webkit-align-items", 151 "-webkit-align-self", 152 "-webkit-animation", 153 "-webkit-animation-delay", 154 "-webkit-animation-direction", 155 "-webkit-animation-duration", 156 "-webkit-animation-fill-mode", 157 "-webkit-animation-iteration-count", 158 "-webkit-animation-name", 159 "-webkit-animation-play-state", 160 "-webkit-animation-timing-function", 161 "-webkit-appearance", 162 "-webkit-backface-visibility", 163 "-webkit-background-clip", 164 "-webkit-background-origin", 165 "-webkit-background-size", 166 "-webkit-border-bottom-left-radius", 167 "-webkit-border-bottom-right-radius", 168 "-webkit-border-image", 169 "-webkit-border-radius", 170 "-webkit-border-top-left-radius", 171 "-webkit-border-top-right-radius", 172 "-webkit-box-align", 173 "-webkit-box-direction", 174 "-webkit-box-flex", 175 "-webkit-box-ordinal-group", 176 "-webkit-box-orient", 177 "-webkit-box-pack", 178 "-webkit-box-shadow", 179 "-webkit-box-sizing", 180 "-webkit-filter", 181 "-webkit-flex", 182 "-webkit-flex-basis", 183 "-webkit-flex-direction", 184 "-webkit-flex-flow", 185 "-webkit-flex-grow", 186 "-webkit-flex-shrink", 187 "-webkit-flex-wrap", 188 "-webkit-justify-content", 189 "-webkit-line-clamp", 190 "-webkit-mask", 191 "-webkit-mask-clip", 192 "-webkit-mask-composite", 193 "-webkit-mask-image", 194 "-webkit-mask-origin", 195 "-webkit-mask-position", 196 "-webkit-mask-position-x", 197 "-webkit-mask-position-y", 198 "-webkit-mask-repeat", 199 "-webkit-mask-size", 200 "-webkit-order", 201 "-webkit-perspective", 202 "-webkit-perspective-origin", 203 "-webkit-text-fill-color", 204 "-webkit-text-size-adjust", 205 "-webkit-text-stroke", 206 "-webkit-text-stroke-color", 207 "-webkit-text-stroke-width", 208 "-webkit-transform", 209 "-webkit-transform-origin", 210 "-webkit-transform-style", 211 "-webkit-transition", 212 "-webkit-transition-delay", 213 "-webkit-transition-duration", 214 "-webkit-transition-property", 215 "-webkit-transition-timing-function", 216 "-webkit-user-select", 217 "align-content", 218 "align-items", 219 "align-self", 220 "alignment-baseline", 221 "all", 222 "alt", 223 "animation", 224 "animation-delay", 225 "animation-direction", 226 "animation-duration", 227 "animation-fill-mode", 228 "animation-iteration-count", 229 "animation-name", 230 "animation-play-state", 231 "animation-timing-function", 232 "appearance", 233 "backdrop-filter", 234 "backface-visibility", 235 "background", 236 "background-attachment", 237 "background-blend-mode", 238 "background-clip", 239 "background-color", 240 "background-image", 241 "background-origin", 242 "background-position", 243 "background-position-x", 244 "background-position-y", 245 "background-repeat", 246 "background-repeat-x", 247 "background-repeat-y", 248 "background-size", 249 "baseline-shift", 250 "block-size", 251 "border", 252 "border-block", 253 "border-block-color", 254 "border-block-end", 255 "border-block-end-color", 256 "border-block-end-style", 257 "border-block-end-width", 258 "border-block-start", 259 "border-block-start-color", 260 "border-block-start-style", 261 "border-block-start-width", 262 "border-block-style", 263 "border-block-width", 264 "border-bottom", 265 "border-bottom-color", 266 "border-bottom-left-radius", 267 "border-bottom-right-radius", 268 "border-bottom-style", 269 "border-bottom-width", 270 "border-collapse", 271 "border-color", 272 "border-end-end-radius", 273 "border-end-start-radius", 274 "border-image", 275 "border-image-outset", 276 "border-image-repeat", 277 "border-image-slice", 278 "border-image-source", 279 "border-image-width", 280 "border-inline", 281 "border-inline-color", 282 "border-inline-end", 283 "border-inline-end-color", 284 "border-inline-end-style", 285 "border-inline-end-width", 286 "border-inline-start", 287 "border-inline-start-color", 288 "border-inline-start-style", 289 "border-inline-start-width", 290 "border-inline-style", 291 "border-inline-width", 292 "border-left", 293 "border-left-color", 294 "border-left-style", 295 "border-left-width", 296 "border-radius", 297 "border-right", 298 "border-right-color", 299 "border-right-style", 300 "border-right-width", 301 "border-spacing", 302 "border-start-end-radius", 303 "border-start-start-radius", 304 "border-style", 305 "border-top", 306 "border-top-color", 307 "border-top-left-radius", 308 "border-top-right-radius", 309 "border-top-style", 310 "border-top-width", 311 "border-width", 312 "bottom", 313 "box-decoration-break", 314 "box-shadow", 315 "box-sizing", 316 "break-after", 317 "break-before", 318 "break-inside", 319 "buffered-rendering", 320 "caption-side", 321 "caret-color", 322 "clear", 323 "clip", 324 "clip-path", 325 "clip-rule", 326 "color", 327 "color-adjust", 328 "color-interpolation", 329 "color-interpolation-filters", 330 "color-profile", 331 "color-rendering", 332 "color-scheme", 333 "column-count", 334 "column-fill", 335 "column-gap", 336 "column-progression", 337 "column-rule", 338 "column-rule-color", 339 "column-rule-style", 340 "column-rule-width", 341 "column-span", 342 "column-width", 343 "columns", 344 "contain", 345 "contain-intrinsic-size", 346 "content", 347 "content-visibility", 348 "counter-increment", 349 "counter-reset", 350 "counter-set", 351 "cursor", 352 "cx", 353 "cy", 354 "d", 355 "direction", 356 "display", 357 "dominant-baseline", 358 "empty-cells", 359 "enable-background", 360 "fill", 361 "fill-opacity", 362 "fill-rule", 363 "filter", 364 "flex", 365 "flex-basis", 366 "flex-direction", 367 "flex-flow", 368 "flex-grow", 369 "flex-shrink", 370 "flex-wrap", 371 "float", 372 "flood-color", 373 "flood-opacity", 374 "font", 375 "font-display", 376 "font-family", 377 "font-feature-settings", 378 "font-kerning", 379 "font-language-override", 380 "font-optical-sizing", 381 "font-size", 382 "font-size-adjust", 383 "font-stretch", 384 "font-style", 385 "font-synthesis", 386 "font-variant", 387 "font-variant-alternates", 388 "font-variant-caps", 389 "font-variant-east-asian", 390 "font-variant-ligatures", 391 "font-variant-numeric", 392 "font-variant-position", 393 "font-variation-settings", 394 "font-weight", 395 "gap", 396 "glyph-orientation-horizontal", 397 "glyph-orientation-vertical", 398 "grid", 399 "grid-area", 400 "grid-auto-columns", 401 "grid-auto-flow", 402 "grid-auto-rows", 403 "grid-column", 404 "grid-column-end", 405 "grid-column-gap", 406 "grid-column-start", 407 "grid-gap", 408 "grid-row", 409 "grid-row-end", 410 "grid-row-gap", 411 "grid-row-start", 412 "grid-template", 413 "grid-template-areas", 414 "grid-template-columns", 415 "grid-template-rows", 416 "hanging-punctuation", 417 "height", 418 "hyphens", 419 "image-orientation", 420 "image-rendering", 421 "ime-mode", 422 "inherits", 423 "initial-value", 424 "inline-size", 425 "inset", 426 "inset-block", 427 "inset-block-end", 428 "inset-block-start", 429 "inset-inline", 430 "inset-inline-end", 431 "inset-inline-start", 432 "internal-text-autosizing-status", 433 "isolation", 434 "justify-content", 435 "justify-items", 436 "justify-self", 437 "kerning", 438 "layout-grid", 439 "layout-grid-char", 440 "layout-grid-line", 441 "layout-grid-mode", 442 "layout-grid-type", 443 "left", 444 "letter-spacing", 445 "lighting-color", 446 "line-break", 447 "line-height", 448 "list-style", 449 "list-style-image", 450 "list-style-position", 451 "list-style-type", 452 "margin", 453 "margin-block", 454 "margin-block-end", 455 "margin-block-start", 456 "margin-bottom", 457 "margin-inline", 458 "margin-inline-end", 459 "margin-inline-start", 460 "margin-left", 461 "margin-right", 462 "margin-top", 463 "marker", 464 "marker-end", 465 "marker-mid", 466 "marker-offset", 467 "marker-start", 468 "mask", 469 "mask-clip", 470 "mask-composite", 471 "mask-image", 472 "mask-mode", 473 "mask-origin", 474 "mask-position", 475 "mask-position-x", 476 "mask-position-y", 477 "mask-repeat", 478 "mask-size", 479 "mask-type", 480 "max-block-size", 481 "max-height", 482 "max-inline-size", 483 "max-width", 484 "max-zoom", 485 "min-block-size", 486 "min-height", 487 "min-inline-size", 488 "min-width", 489 "min-zoom", 490 "mix-blend-mode", 491 "motion", 492 "motion-offset", 493 "motion-path", 494 "motion-rotation", 495 "object-fit", 496 "object-position", 497 "offset", 498 "offset-anchor", 499 "offset-block-end", 500 "offset-block-start", 501 "offset-distance", 502 "offset-inline-end", 503 "offset-inline-start", 504 "offset-path", 505 "offset-rotate", 506 "offset-rotation", 507 "opacity", 508 "order", 509 "orientation", 510 "orphans", 511 "outline", 512 "outline-color", 513 "outline-offset", 514 "outline-style", 515 "outline-width", 516 "overflow", 517 "overflow-anchor", 518 "overflow-block", 519 "overflow-inline", 520 "overflow-wrap", 521 "overflow-x", 522 "overflow-y", 523 "overscroll-behavior", 524 "overscroll-behavior-block", 525 "overscroll-behavior-inline", 526 "overscroll-behavior-x", 527 "overscroll-behavior-y", 528 "padding", 529 "padding-block", 530 "padding-block-end", 531 "padding-block-start", 532 "padding-bottom", 533 "padding-inline", 534 "padding-inline-end", 535 "padding-inline-start", 536 "padding-left", 537 "padding-right", 538 "padding-top", 539 "page", 540 "page-break-after", 541 "page-break-before", 542 "page-break-inside", 543 "page-orientation", 544 "paint-order", 545 "pen-action", 546 "perspective", 547 "perspective-origin", 548 "perspective-origin-x", 549 "perspective-origin-y", 550 "place-content", 551 "place-items", 552 "place-self", 553 "pointer-events", 554 "position", 555 "quotes", 556 "r", 557 "resize", 558 "right", 559 "rotate", 560 "row-gap", 561 "ruby-align", 562 "ruby-overhang", 563 "ruby-position", 564 "rx", 565 "ry", 566 "scale", 567 "scroll-behavior", 568 "scroll-margin", 569 "scroll-margin-block", 570 "scroll-margin-block-end", 571 "scroll-margin-block-start", 572 "scroll-margin-bottom", 573 "scroll-margin-inline", 574 "scroll-margin-inline-end", 575 "scroll-margin-inline-start", 576 "scroll-margin-left", 577 "scroll-margin-right", 578 "scroll-margin-top", 579 "scroll-padding", 580 "scroll-padding-block", 581 "scroll-padding-block-end", 582 "scroll-padding-block-start", 583 "scroll-padding-bottom", 584 "scroll-padding-inline", 585 "scroll-padding-inline-end", 586 "scroll-padding-inline-start", 587 "scroll-padding-left", 588 "scroll-padding-right", 589 "scroll-padding-top", 590 "scroll-snap-align", 591 "scroll-snap-coordinate", 592 "scroll-snap-destination", 593 "scroll-snap-margin", 594 "scroll-snap-margin-bottom", 595 "scroll-snap-margin-left", 596 "scroll-snap-margin-right", 597 "scroll-snap-margin-top", 598 "scroll-snap-points-x", 599 "scroll-snap-points-y", 600 "scroll-snap-stop", 601 "scroll-snap-type", 602 "scroll-snap-type-x", 603 "scroll-snap-type-y", 604 "scrollbar-color", 605 "scrollbar-width", 606 "shape-image-threshold", 607 "shape-margin", 608 "shape-outside", 609 "shape-rendering", 610 "size", 611 "speak", 612 "speak-as", 613 "src", 614 "stop-color", 615 "stop-opacity", 616 "stroke", 617 "stroke-color", 618 "stroke-dasharray", 619 "stroke-dashoffset", 620 "stroke-linecap", 621 "stroke-linejoin", 622 "stroke-miterlimit", 623 "stroke-opacity", 624 "stroke-width", 625 "supported-color-schemes", 626 "syntax", 627 "tab-size", 628 "table-layout", 629 "text-align", 630 "text-align-last", 631 "text-anchor", 632 "text-combine-upright", 633 "text-decoration", 634 "text-decoration-color", 635 "text-decoration-line", 636 "text-decoration-skip", 637 "text-decoration-skip-ink", 638 "text-decoration-style", 639 "text-decoration-thickness", 640 "text-emphasis", 641 "text-emphasis-color", 642 "text-emphasis-position", 643 "text-emphasis-style", 644 "text-indent", 645 "text-justify", 646 "text-kashida", 647 "text-kashida-space", 648 "text-line-through", 649 "text-line-through-color", 650 "text-line-through-mode", 651 "text-line-through-style", 652 "text-line-through-width", 653 "text-orientation", 654 "text-overflow", 655 "text-overline", 656 "text-overline-color", 657 "text-overline-mode", 658 "text-overline-style", 659 "text-overline-width", 660 "text-rendering", 661 "text-shadow", 662 "text-size-adjust", 663 "text-transform", 664 "text-underline", 665 "text-underline-color", 666 "text-underline-mode", 667 "text-underline-offset", 668 "text-underline-position", 669 "text-underline-style", 670 "text-underline-width", 671 "top", 672 "touch-action", 673 "transform", 674 "transform-box", 675 "transform-origin", 676 "transform-origin-x", 677 "transform-origin-y", 678 "transform-origin-z", 679 "transform-style", 680 "transition", 681 "transition-delay", 682 "transition-duration", 683 "transition-property", 684 "transition-timing-function", 685 "translate", 686 "unicode-bidi", 687 "unicode-range", 688 "user-select", 689 "user-zoom", 690 "vector-effect", 691 "vertical-align", 692 "viewport-fit", 693 "visibility", 694 "white-space", 695 "widows", 696 "width", 697 "will-change", 698 "word-break", 699 "word-spacing", 700 "word-wrap", 701 "writing-mode", 702 "x", 703 "y", 704 "z-index", 705 "zoom" 706 ]; 707 708 function CSSPropertyToIDLAttribute(property, lowercaseFirstFlag=false) { 709 let output = ""; 710 let uppercaseNext = false; 711 if (lowercaseFirstFlag) { 712 property = property.substring(1); 713 } 714 for (let c of property) { 715 if (c === "-") { 716 uppercaseNext = true; 717 } else if (uppercaseNext) { 718 uppercaseNext = false; 719 if (c >= "a" && c <= "z") { 720 output += c.toUpperCase(); 721 } else { 722 output += c; 723 } 724 } else { 725 output += c; 726 } 727 } 728 return output; 729 } 730 731 const styledecl = document.getElementById("testElement").style; 732 733 for (let prop of properties) { 734 test(() => { 735 const camelCase = CSSPropertyToIDLAttribute(prop); 736 const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value 737 assert_equals(supports, camelCase in styledecl); 738 }, `${prop}: _camel_cased_attribute v. CSS.supports`); 739 740 if (prop[0] == "-") { 741 if (prop.startsWith("-webkit-")) { 742 test(() => { 743 const webkitCased = CSSPropertyToIDLAttribute(prop, true); 744 const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value 745 assert_equals(supports, webkitCased in styledecl); 746 }, `${prop}: _webkit_cased_attribute v. CSS.supports`); 747 } else { 748 test(() => { 749 const webkitCased = CSSPropertyToIDLAttribute(prop, true); 750 assert_false(webkitCased in styledecl); 751 }, `${prop}: _webkit_cased_attribute must only exist for -webkit-`); 752 } 753 } 754 755 if (prop.indexOf("-") >= 0) { 756 test(() => { 757 const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value 758 assert_equals(supports, prop in styledecl); 759 }, `${prop}: _dashed_attribute v. CSS.supports`); 760 } 761 } 762 763 </script>