| <!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-outline-radius", |
| "-moz-outline-radius-bottomleft", |
| "-moz-outline-radius-bottomright", |
| "-moz-outline-radius-topleft", |
| "-moz-outline-radius-topright", |
| "-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", |
| "-moz-transform", |
| "-moz-transform-origin", |
| "-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> |
