<!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>
Codebase Browser
chromium