css/css-conditional/js/CSS-supports-CSSStyleDeclaration.html

<!doctype html>
<meta charset="utf-8">
<title>CSS.supports v. CSSStyleDeclaration</title>
<link rel="help" href="https://drafts.csswg.org/css-conditional/#dom-css-supports">
<link rel="help" href="https://drafts.csswg.org/cssom/#the-cssstyledeclaration-interface">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div id="testElement"></div>
<script>
// This gigantic list of properties is derived from the union of pretty much everything ever
// exposed via CSSStyleDeclaration since 2010 in a major browser; this deliberately includes all
// the vendor-prefixed properties _because_ they're often where bugs lie

const properties = [
  "-apple-color-filter",
  "-apple-pay-button-style",
  "-apple-pay-button-type",
  "-apple-trailing-word",
  "-epub-caption-side",
  "-epub-text-combine",
  "-epub-text-emphasis",
  "-epub-text-emphasis-color",
  "-epub-text-emphasis-style",
  "-epub-text-orientation",
  "-epub-text-transform",
  "-epub-word-break",
  "-epub-writing-mode",
  "-moz-animation",
  "-moz-animation-delay",
  "-moz-animation-direction",
  "-moz-animation-duration",
  "-moz-animation-fill-mode",
  "-moz-animation-iteration-count",
  "-moz-animation-name",
  "-moz-animation-play-state",
  "-moz-animation-timing-function",
  "-moz-appearance",
  "-moz-backface-visibility",
  "-moz-binding",
  "-moz-border-bottom-colors",
  "-moz-border-end",
  "-moz-border-end-color",
  "-moz-border-end-style",
  "-moz-border-end-width",
  "-moz-border-image",
  "-moz-border-left-colors",
  "-moz-border-right-colors",
  "-moz-border-start",
  "-moz-border-start-color",
  "-moz-border-start-style",
  "-moz-border-start-width",
  "-moz-border-top-colors",
  "-moz-box-align",
  "-moz-box-direction",
  "-moz-box-flex",
  "-moz-box-ordinal-group",
  "-moz-box-orient",
  "-moz-box-pack",
  "-moz-box-sizing",
  "-moz-column-count",
  "-moz-column-fill",
  "-moz-column-gap",
  "-moz-column-rule",
  "-moz-column-rule-color",
  "-moz-column-rule-style",
  "-moz-column-rule-width",
  "-moz-column-span",
  "-moz-column-width",
  "-moz-columns",
  "-moz-float-edge",
  "-moz-font-feature-settings",
  "-moz-font-language-override",
  "-moz-force-broken-image-icon",
  "-moz-hyphens",
  "-moz-image-region",
  "-moz-margin-end",
  "-moz-margin-start",
  "-moz-orient",
  "-moz-osx-font-smoothing",
  "-moz-padding-end",
  "-moz-padding-start",
  "-moz-perspective",
  "-moz-perspective-origin",
  "-moz-stack-sizing",
  "-moz-tab-size",
  "-moz-text-align-last",
  "-moz-text-size-adjust",
  // No -moz-transform/origin here, because it might intentionally break the
  // expectations of this test for compat reasons, see:
  // https://bugzilla.mozilla.org/show_bug.cgi?id=1865332
  "-moz-transform-style",
  "-moz-transition",
  "-moz-transition-delay",
  "-moz-transition-duration",
  "-moz-transition-property",
  "-moz-transition-timing-function",
  "-moz-user-focus",
  "-moz-user-input",
  "-moz-user-modify",
  "-moz-user-select",
  "-moz-window-dragging",
  "-ms-content-zoom-chaining",
  "-ms-content-zoom-limit",
  "-ms-content-zoom-limit-max",
  "-ms-content-zoom-limit-min",
  "-ms-content-zoom-snap",
  "-ms-content-zoom-snap-points",
  "-ms-content-zoom-snap-type",
  "-ms-content-zooming",
  "-ms-flow-from",
  "-ms-flow-into",
  "-ms-font-feature-settings",
  "-ms-grid-column",
  "-ms-grid-column-align",
  "-ms-grid-column-span",
  "-ms-grid-columns",
  "-ms-grid-row",
  "-ms-grid-row-align",
  "-ms-grid-row-span",
  "-ms-grid-rows",
  "-ms-high-contrast-adjust",
  "-ms-hyphenate-limit-chars",
  "-ms-hyphenate-limit-lines",
  "-ms-hyphenate-limit-zone",
  "-ms-hyphens",
  "-ms-ime-align",
  "-ms-overflow-style",
  "-ms-scroll-chaining",
  "-ms-scroll-limit",
  "-ms-scroll-limit-x-max",
  "-ms-scroll-limit-x-min",
  "-ms-scroll-limit-y-max",
  "-ms-scroll-limit-y-min",
  "-ms-scroll-rails",
  "-ms-scroll-snap-points-x",
  "-ms-scroll-snap-points-y",
  "-ms-scroll-snap-type",
  "-ms-scroll-snap-x",
  "-ms-scroll-snap-y",
  "-ms-scroll-translation",
  "-ms-text-combine-horizontal",
  "-ms-text-size-adjust",
  "-ms-touch-select",
  "-ms-user-select",
  "-ms-wrap-flow",
  "-ms-wrap-margin",
  "-ms-wrap-through",
  "-webkit-align-content",
  "-webkit-align-items",
  "-webkit-align-self",
  "-webkit-animation",
  "-webkit-animation-delay",
  "-webkit-animation-direction",
  "-webkit-animation-duration",
  "-webkit-animation-fill-mode",
  "-webkit-animation-iteration-count",
  "-webkit-animation-name",
  "-webkit-animation-play-state",
  "-webkit-animation-timing-function",
  "-webkit-appearance",
  "-webkit-backface-visibility",
  "-webkit-background-clip",
  "-webkit-background-origin",
  "-webkit-background-size",
  "-webkit-border-bottom-left-radius",
  "-webkit-border-bottom-right-radius",
  "-webkit-border-image",
  "-webkit-border-radius",
  "-webkit-border-top-left-radius",
  "-webkit-border-top-right-radius",
  "-webkit-box-align",
  "-webkit-box-direction",
  "-webkit-box-flex",
  "-webkit-box-ordinal-group",
  "-webkit-box-orient",
  "-webkit-box-pack",
  "-webkit-box-shadow",
  "-webkit-box-sizing",
  "-webkit-filter",
  "-webkit-flex",
  "-webkit-flex-basis",
  "-webkit-flex-direction",
  "-webkit-flex-flow",
  "-webkit-flex-grow",
  "-webkit-flex-shrink",
  "-webkit-flex-wrap",
  "-webkit-justify-content",
  "-webkit-line-clamp",
  "-webkit-mask",
  "-webkit-mask-clip",
  "-webkit-mask-composite",
  "-webkit-mask-image",
  "-webkit-mask-origin",
  "-webkit-mask-position",
  "-webkit-mask-position-x",
  "-webkit-mask-position-y",
  "-webkit-mask-repeat",
  "-webkit-mask-size",
  "-webkit-order",
  "-webkit-perspective",
  "-webkit-perspective-origin",
  "-webkit-text-fill-color",
  "-webkit-text-size-adjust",
  "-webkit-text-stroke",
  "-webkit-text-stroke-color",
  "-webkit-text-stroke-width",
  "-webkit-transform",
  "-webkit-transform-origin",
  "-webkit-transform-style",
  "-webkit-transition",
  "-webkit-transition-delay",
  "-webkit-transition-duration",
  "-webkit-transition-property",
  "-webkit-transition-timing-function",
  "-webkit-user-select",
  "align-content",
  "align-items",
  "align-self",
  "alignment-baseline",
  "all",
  "alt",
  "animation",
  "animation-delay",
  "animation-direction",
  "animation-duration",
  "animation-fill-mode",
  "animation-iteration-count",
  "animation-name",
  "animation-play-state",
  "animation-timing-function",
  "appearance",
  "backdrop-filter",
  "backface-visibility",
  "background",
  "background-attachment",
  "background-blend-mode",
  "background-clip",
  "background-color",
  "background-image",
  "background-origin",
  "background-position",
  "background-position-x",
  "background-position-y",
  "background-repeat",
  "background-repeat-x",
  "background-repeat-y",
  "background-size",
  "baseline-shift",
  "block-size",
  "border",
  "border-block",
  "border-block-color",
  "border-block-end",
  "border-block-end-color",
  "border-block-end-style",
  "border-block-end-width",
  "border-block-start",
  "border-block-start-color",
  "border-block-start-style",
  "border-block-start-width",
  "border-block-style",
  "border-block-width",
  "border-bottom",
  "border-bottom-color",
  "border-bottom-left-radius",
  "border-bottom-right-radius",
  "border-bottom-style",
  "border-bottom-width",
  "border-collapse",
  "border-color",
  "border-end-end-radius",
  "border-end-start-radius",
  "border-image",
  "border-image-outset",
  "border-image-repeat",
  "border-image-slice",
  "border-image-source",
  "border-image-width",
  "border-inline",
  "border-inline-color",
  "border-inline-end",
  "border-inline-end-color",
  "border-inline-end-style",
  "border-inline-end-width",
  "border-inline-start",
  "border-inline-start-color",
  "border-inline-start-style",
  "border-inline-start-width",
  "border-inline-style",
  "border-inline-width",
  "border-left",
  "border-left-color",
  "border-left-style",
  "border-left-width",
  "border-radius",
  "border-right",
  "border-right-color",
  "border-right-style",
  "border-right-width",
  "border-spacing",
  "border-start-end-radius",
  "border-start-start-radius",
  "border-style",
  "border-top",
  "border-top-color",
  "border-top-left-radius",
  "border-top-right-radius",
  "border-top-style",
  "border-top-width",
  "border-width",
  "bottom",
  "box-decoration-break",
  "box-shadow",
  "box-sizing",
  "break-after",
  "break-before",
  "break-inside",
  "buffered-rendering",
  "caption-side",
  "caret-color",
  "clear",
  "clip",
  "clip-path",
  "clip-rule",
  "color",
  "color-adjust",
  "color-interpolation",
  "color-interpolation-filters",
  "color-profile",
  "color-rendering",
  "color-scheme",
  "column-count",
  "column-fill",
  "column-gap",
  "column-progression",
  "column-rule",
  "column-rule-color",
  "column-rule-style",
  "column-rule-width",
  "column-span",
  "column-width",
  "columns",
  "contain",
  "contain-intrinsic-size",
  "content",
  "content-visibility",
  "counter-increment",
  "counter-reset",
  "counter-set",
  "cursor",
  "cx",
  "cy",
  "d",
  "direction",
  "display",
  "dominant-baseline",
  "empty-cells",
  "enable-background",
  "fill",
  "fill-opacity",
  "fill-rule",
  "filter",
  "flex",
  "flex-basis",
  "flex-direction",
  "flex-flow",
  "flex-grow",
  "flex-shrink",
  "flex-wrap",
  "float",
  "flood-color",
  "flood-opacity",
  "font",
  "font-display",
  "font-family",
  "font-feature-settings",
  "font-kerning",
  "font-language-override",
  "font-optical-sizing",
  "font-size",
  "font-size-adjust",
  "font-stretch",
  "font-style",
  "font-synthesis",
  "font-variant",
  "font-variant-alternates",
  "font-variant-caps",
  "font-variant-east-asian",
  "font-variant-ligatures",
  "font-variant-numeric",
  "font-variant-position",
  "font-variation-settings",
  "font-weight",
  "gap",
  "glyph-orientation-horizontal",
  "glyph-orientation-vertical",
  "grid",
  "grid-area",
  "grid-auto-columns",
  "grid-auto-flow",
  "grid-auto-rows",
  "grid-column",
  "grid-column-end",
  "grid-column-gap",
  "grid-column-start",
  "grid-gap",
  "grid-row",
  "grid-row-end",
  "grid-row-gap",
  "grid-row-start",
  "grid-template",
  "grid-template-areas",
  "grid-template-columns",
  "grid-template-rows",
  "hanging-punctuation",
  "height",
  "hyphens",
  "image-orientation",
  "image-rendering",
  "ime-mode",
  "inherits",
  "initial-value",
  "inline-size",
  "inset",
  "inset-block",
  "inset-block-end",
  "inset-block-start",
  "inset-inline",
  "inset-inline-end",
  "inset-inline-start",
  "internal-text-autosizing-status",
  "isolation",
  "justify-content",
  "justify-items",
  "justify-self",
  "kerning",
  "layout-grid",
  "layout-grid-char",
  "layout-grid-line",
  "layout-grid-mode",
  "layout-grid-type",
  "left",
  "letter-spacing",
  "lighting-color",
  "line-break",
  "line-height",
  "list-style",
  "list-style-image",
  "list-style-position",
  "list-style-type",
  "margin",
  "margin-block",
  "margin-block-end",
  "margin-block-start",
  "margin-bottom",
  "margin-inline",
  "margin-inline-end",
  "margin-inline-start",
  "margin-left",
  "margin-right",
  "margin-top",
  "marker",
  "marker-end",
  "marker-mid",
  "marker-offset",
  "marker-start",
  "mask",
  "mask-clip",
  "mask-composite",
  "mask-image",
  "mask-mode",
  "mask-origin",
  "mask-position",
  "mask-position-x",
  "mask-position-y",
  "mask-repeat",
  "mask-size",
  "mask-type",
  "max-block-size",
  "max-height",
  "max-inline-size",
  "max-width",
  "max-zoom",
  "min-block-size",
  "min-height",
  "min-inline-size",
  "min-width",
  "min-zoom",
  "mix-blend-mode",
  "motion",
  "motion-offset",
  "motion-path",
  "motion-rotation",
  "object-fit",
  "object-position",
  "offset",
  "offset-anchor",
  "offset-block-end",
  "offset-block-start",
  "offset-distance",
  "offset-inline-end",
  "offset-inline-start",
  "offset-path",
  "offset-rotate",
  "offset-rotation",
  "opacity",
  "order",
  "orientation",
  "orphans",
  "outline",
  "outline-color",
  "outline-offset",
  "outline-style",
  "outline-width",
  "overflow",
  "overflow-anchor",
  "overflow-block",
  "overflow-inline",
  "overflow-wrap",
  "overflow-x",
  "overflow-y",
  "overscroll-behavior",
  "overscroll-behavior-block",
  "overscroll-behavior-inline",
  "overscroll-behavior-x",
  "overscroll-behavior-y",
  "padding",
  "padding-block",
  "padding-block-end",
  "padding-block-start",
  "padding-bottom",
  "padding-inline",
  "padding-inline-end",
  "padding-inline-start",
  "padding-left",
  "padding-right",
  "padding-top",
  "page",
  "page-break-after",
  "page-break-before",
  "page-break-inside",
  "page-orientation",
  "paint-order",
  "pen-action",
  "perspective",
  "perspective-origin",
  "perspective-origin-x",
  "perspective-origin-y",
  "place-content",
  "place-items",
  "place-self",
  "pointer-events",
  "position",
  "quotes",
  "r",
  "resize",
  "right",
  "rotate",
  "row-gap",
  "ruby-align",
  "ruby-overhang",
  "ruby-position",
  "rx",
  "ry",
  "scale",
  "scroll-behavior",
  "scroll-margin",
  "scroll-margin-block",
  "scroll-margin-block-end",
  "scroll-margin-block-start",
  "scroll-margin-bottom",
  "scroll-margin-inline",
  "scroll-margin-inline-end",
  "scroll-margin-inline-start",
  "scroll-margin-left",
  "scroll-margin-right",
  "scroll-margin-top",
  "scroll-padding",
  "scroll-padding-block",
  "scroll-padding-block-end",
  "scroll-padding-block-start",
  "scroll-padding-bottom",
  "scroll-padding-inline",
  "scroll-padding-inline-end",
  "scroll-padding-inline-start",
  "scroll-padding-left",
  "scroll-padding-right",
  "scroll-padding-top",
  "scroll-snap-align",
  "scroll-snap-coordinate",
  "scroll-snap-destination",
  "scroll-snap-margin",
  "scroll-snap-margin-bottom",
  "scroll-snap-margin-left",
  "scroll-snap-margin-right",
  "scroll-snap-margin-top",
  "scroll-snap-points-x",
  "scroll-snap-points-y",
  "scroll-snap-stop",
  "scroll-snap-type",
  "scroll-snap-type-x",
  "scroll-snap-type-y",
  "scrollbar-color",
  "scrollbar-width",
  "shape-image-threshold",
  "shape-margin",
  "shape-outside",
  "shape-rendering",
  "size",
  "speak",
  "speak-as",
  "src",
  "stop-color",
  "stop-opacity",
  "stroke",
  "stroke-color",
  "stroke-dasharray",
  "stroke-dashoffset",
  "stroke-linecap",
  "stroke-linejoin",
  "stroke-miterlimit",
  "stroke-opacity",
  "stroke-width",
  "supported-color-schemes",
  "syntax",
  "tab-size",
  "table-layout",
  "text-align",
  "text-align-last",
  "text-anchor",
  "text-combine-upright",
  "text-decoration",
  "text-decoration-color",
  "text-decoration-line",
  "text-decoration-skip",
  "text-decoration-skip-ink",
  "text-decoration-style",
  "text-decoration-thickness",
  "text-emphasis",
  "text-emphasis-color",
  "text-emphasis-position",
  "text-emphasis-style",
  "text-indent",
  "text-justify",
  "text-kashida",
  "text-kashida-space",
  "text-line-through",
  "text-line-through-color",
  "text-line-through-mode",
  "text-line-through-style",
  "text-line-through-width",
  "text-orientation",
  "text-overflow",
  "text-overline",
  "text-overline-color",
  "text-overline-mode",
  "text-overline-style",
  "text-overline-width",
  "text-rendering",
  "text-shadow",
  "text-size-adjust",
  "text-transform",
  "text-underline",
  "text-underline-color",
  "text-underline-mode",
  "text-underline-offset",
  "text-underline-position",
  "text-underline-style",
  "text-underline-width",
  "top",
  "touch-action",
  "transform",
  "transform-box",
  "transform-origin",
  "transform-origin-x",
  "transform-origin-y",
  "transform-origin-z",
  "transform-style",
  "transition",
  "transition-delay",
  "transition-duration",
  "transition-property",
  "transition-timing-function",
  "translate",
  "unicode-bidi",
  "unicode-range",
  "user-select",
  "user-zoom",
  "vector-effect",
  "vertical-align",
  "viewport-fit",
  "visibility",
  "white-space",
  "widows",
  "width",
  "will-change",
  "word-break",
  "word-spacing",
  "word-wrap",
  "writing-mode",
  "x",
  "y",
  "z-index",
  "zoom"
];

function CSSPropertyToIDLAttribute(property, lowercaseFirstFlag=false) {
  let output = "";
  let uppercaseNext = false;
  if (lowercaseFirstFlag) {
    property = property.substring(1);
  }
  for (let c of property) {
    if (c === "-") {
      uppercaseNext = true;
    } else if (uppercaseNext) {
      uppercaseNext = false;
      if (c >= "a" && c <= "z") {
        output += c.toUpperCase();
      } else {
        output += c;
      }
    } else {
      output += c;
    }
  }
  return output;
}

const styledecl = document.getElementById("testElement").style;

for (let prop of properties) {
  test(() => {
    const camelCase = CSSPropertyToIDLAttribute(prop);
    const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value
    assert_equals(supports, camelCase in styledecl);
  }, `${prop}: _camel_cased_attribute v. CSS.supports`);

  if (prop[0] == "-") {
    if (prop.startsWith("-webkit-")) {
      test(() => {
        const webkitCased = CSSPropertyToIDLAttribute(prop, true);
        const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value
        assert_equals(supports, webkitCased in styledecl);
      }, `${prop}: _webkit_cased_attribute v. CSS.supports`);
    } else {
      test(() => {
        const webkitCased = CSSPropertyToIDLAttribute(prop, true);
        assert_false(webkitCased in styledecl);
      }, `${prop}: _webkit_cased_attribute must only exist for -webkit-`);
    }
  }

  if (prop.indexOf("-") >= 0) {
    test(() => {
      const supports = CSS.supports(prop, "inherit"); // inherit is always a valid value
      assert_equals(supports, prop in styledecl);
    }, `${prop}: _dashed_attribute v. CSS.supports`);
  }
}

</script>