<!DOCTYPE html> <meta charset="utf-8"> <title>CSS Cascade: "all: revert-layer"</title> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#revert-layer"> <meta name="assert" content="Checks that adding 'all: revert-layer' on the last layer has no effect."> <style> /* Set properties to a value different than the initial one. */ #nothing { accent-color: #123; align-content: baseline; align-items: baseline; align-self: baseline; align-tracks: baseline; alignment-baseline: central; alt: "a"; animation-composition: add; animation-delay: 123s; animation-delay-start: 123s; animation-delay-end: 456s; animation-direction: reverse; animation-duration: 123s; animation-fill-mode: both; animation-iteration-count: 123; animation-name: \.; animation-play-state: paused; animation-timeline: none; animation-timing-function: linear; app-region: drag; appearance: auto; aspect-ratio: 3 / 4; backdrop-filter: invert(1); backface-visibility: hidden; background-attachment: fixed; background-blend-mode: overlay; background-clip: content-box; background-color: #123; background-image: url("#ref"); background-origin: border-box; background-position: 123px; background-repeat: round; background-size: 123px; baseline-shift: 123px; block-size: 123px; border-block-end: 123px dashed #123; border-block-start: 123px dashed #123; border-bottom: 123px dashed #123; border-collapse: collapse; border-end-end-radius: 123px; border-end-start-radius: 123px; border-image-outset: 123; border-image-repeat: round; border-image-slice: 123; border-image-source: url("#ref"); border-image-width: 123px; border-inline-end: 123px dashed #123; border-inline-start: 123px dashed #123; border-left: 123px dashed #123; border-radius: 123px; border-right: 123px dashed #123; border-start-end-radius: 123px; border-start-start-radius: 123px; border-spacing: 123px; border-top: 123px dashed #123; bottom: 123px; box-decoration-break: clone; box-shadow: #123 123px 123px 123px 123px; box-sizing: border-box; break-after: avoid; break-before: avoid; break-inside: avoid; buffered-rendering: static; caption-side: bottom; caret-color: #123; clear: both; clip: rect(123px, 123px, 123px, 123px); clip-path: url("#ref"); clip-rule: evenodd; color: #123; color-interpolation: auto; color-interpolation-filters: auto; color-rendering: optimizespeed; color-scheme: dark; column-count: 123; column-fill: auto; column-gap: 123px; column-rule-color: #123; column-rule-style: dashed; column-rule-width: 123px; column-span: all; column-width: 123px; contain: size; contain-intrinsic-block-size: 123px; contain-intrinsic-inline-size: 123px; contain-intrinsic-size: 123px 123px; container-name: foo; container-type: size; content: "b"; counter-increment: add 123; counter-reset: add 123; counter-set: add 123; cursor: none; cx: 123px; cy: 123px; d: path("M 1 1"); direction: rtl; display: flow-root; dominant-baseline: middle; empty-cells: hide; fill: #123; fill-opacity: 0.123; fill-rule: evenodd; filter: url("#ref"); flex-basis: 123px; flex-direction: column; flex-grow: 123; flex-shrink: 123; flex-wrap: wrap; float: right; flood-color: #123; flood-opacity: 0.123; font-family: "c"; font-feature-settings: "smcp"; font-kerning: none; font-language-override: "d"; font-optical-sizing: none; font-palette: dark; font-size: 123px; font-size-adjust: 123; font-stretch: 123%; font-style: italic; font-synthesis: none; font-variant-alternates: historical-forms; font-variant-caps: small-caps; font-variant-east-asian: full-width; font-variant-ligatures: none; font-variant-numeric: tabular-nums; font-variant-position: super; font-variation-settings: "smcp" 1; font-weight: 123; glyph-orientation-horizontal: 123deg; glyph-orientation-vertical: 123deg; grid-auto-columns: 123px; grid-auto-flow: column; grid-auto-rows: 123px; grid-column-end: 123; grid-column-start: 123; grid-row-end: 123; grid-row-start: 123; grid-template-areas: "."; grid-template-columns: 123fr; grid-template-rows: 123fr; hanging-punctuation: first; height: 123px; hyphenate-character: "e"; hyphens: auto; image-orientation: none; image-rendering: pixelated; ime-mode: normal; initial-letter: 123; inline-size: 123px; input-security: none; inset-block-end: 123px; inset-block-start: 123px; inset-inline-end: 123px; inset-inline-start: 123px; isolation: isolate; justify-content: center; justify-items: baseline; justify-self: baseline; justify-tracks: center; kerning: 123px; left: 123px; letter-spacing: 123px; lighting-color: #123; line-break: anywhere; line-height: 123px; line-height-step: 123px; list-style-image: url("#ref"); list-style-position: inside; list-style-type: square; margin-block-end: 123px; margin-block-start: 123px; margin-bottom: 123px; margin-inline-end: 123px; margin-inline-start: 123px; margin-left: 123px; margin-right: 123px; margin-top: 123px; marker-end: url("#ref"); marker-mid: url("#ref"); marker-start: url("#ref"); mask-clip: content-box; mask-composite: exclude; mask-image: url("#ref"); mask-mode: alpha; mask-origin: content-box; mask-position-x: 123px; mask-position-y: 123px; mask-repeat: round; mask-size: 123px; mask-type: alpha; masonry-auto-flow: ordered; math-depth: 123; math-shift: compact; math-style: compact; max-block-size: 123px; max-height: 123px; max-inline-size: 123px; max-width: 123px; min-block-size: 123px; min-height: 123px; min-inline-size: 123px; min-width: 123px; mix-blend-mode: overlay; object-fit: contain; object-overflow: visible; object-position: 123px 123%; object-view-box: inset(123px); offset-anchor: 123px 123%; offset-distance: 123px; offset-path: path("M 1 1"); offset-position: 123px; offset-rotate: 123deg; opacity: 0.123; order: 123; orphans: 123; outline-color: #123; outline-offset: 123px; outline-style: auto; outline-width: 123px; overflow-anchor: none; overflow-block: auto; overflow-clip-margin: 123px; overflow-inline: hidden; overflow-wrap: anywhere; overflow-x: auto; overflow-y: hidden; overscroll-behavior-block: contain; overscroll-behavior-inline: contain; overscroll-behavior-x: contain; overscroll-behavior-y: contain; padding-block-end: 123px; padding-block-start: 123px; padding-bottom: 123px; padding-inline-end: 123px; padding-inline-start: 123px; padding-left: 123px; padding-right: 123px; padding-top: 123px; paint-order: fill; perspective: 123px; perspective-origin: 123px 123%; pointer-events: all; position: relative; print-color-adjust: exact; quotes: none; r: 123px; resize: both; right: 123px; rotate: 123deg; row-gap: 123px; ruby-align: center; ruby-position: under; rx: 123px; ry: 123px; scale: 123; scroll-behavior: smooth; scroll-margin-block-end: 123px; scroll-margin-block-start: 123px; scroll-margin-bottom: 123px; scroll-margin-inline-end: 123px; scroll-margin-inline-start: 123px; scroll-margin-left: 123px; scroll-margin-right: 123px; scroll-margin-top: 123px; scroll-padding-block-end: 123px; scroll-padding-block-start: 123px; scroll-padding-bottom: 123px; scroll-padding-inline-end: 123px; scroll-padding-inline-start: 123px; scroll-padding-left: 123px; scroll-padding-right: 123px; scroll-padding-top: 123px; scroll-snap-align: center; scroll-snap-stop: always; scroll-snap-type: both; scrollbar-color: #123 #123; scrollbar-gutter: stable; scrollbar-width: none; shape-image-threshold: 123; shape-margin: 123px; shape-outside: border-box; shape-rendering: optimizespeed; speak: spell-out; speak-as: spell-out; stop-color: #123; stop-opacity: 0.123; stroke: #123; stroke-color: #123; stroke-dasharray: 123px; stroke-dashoffset: 123px; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 123; stroke-opacity: 0.123; stroke-width: 123px; tab-size: 123; table-layout: fixed; text-align: center; text-align-last: center; text-anchor: middle; text-combine-upright: all; text-decoration-color: #123; text-decoration-line: underline; text-decoration-skip-ink: none; text-decoration-style: dashed; text-decoration-thickness: 123px; text-emphasis-color: #123; text-emphasis-position: under right; text-emphasis-style: dot; text-indent: 123px; text-justify: none; text-orientation: sideways; text-overflow: ellipsis; text-rendering: optimizespeed; text-shadow: #123 123px 123px 123px; text-size-adjust: none; text-transform: lowercase; text-underline-offset: 123px; text-underline-position: under; top: 123px; touch-action: none; transform: scale(-1); transform-box: fill-box; transform-origin: 123px 123px 123px; transform-style: preserve-3d; transition-delay: 123s; transition-duration: 123s; transition-property: add; transition-timing-function: linear; translate: 123px; unicode-bidi: plaintext; user-select: all; vector-effect: non-scaling-stroke; vertical-align: 123px; visibility: collapse; white-space: pre; widows: 123; width: 123px; will-change: height; word-break: break-word; word-spacing: 123px; word-wrap: break-word; writing-mode: vertical-lr; x: 123px; y: 123px; z-index: 123; zoom: 123; } @layer layer1 { /* Reset properties to their initial value */ #target { all: initial; } } @layer layer2 { /* This will be populated with properties set to a non-initial value */ #target {} } @layer layer3 { /* This should roll back to the values from the previous layer */ #target.rollback { all: revert-layer; } } </style> <div id="log"></div> <!-- This custom element is unlikely to get important UA styles --> <foo-bar id="target"></foo-bar> <script src="/resources/testharness.js"></script> <script src="/resources/testharnessreport.js"></script> <script> const { sheet } = document.querySelector("style"); const nonInitialStyle = sheet.cssRules[0].style; const layer2Style = sheet.cssRules[2].cssRules[0].style; const target = document.getElementById("target"); const cs = getComputedStyle(target); // Some properties can be forced to compute to their initial value // unless another property is set to a certain value. function prerequisites(property) { switch (property) { case "border-block-end-width": case "border-block-start-width": case "border-bottom-width": case "border-inline-end-width": case "border-inline-start-width": case "border-left-width": case "border-right-width": case "border-top-width": return "border-style: solid"; case "column-rule-width": return "column-rule-style: solid"; case "outline-width": return "outline-style: solid"; case "rotate": case "scale": case "transform": case "transform-style": case "translate": return "display: block"; default: return ""; } } const initialValues = Object.create(null); for (let property of cs) { if (!property.startsWith("-")) { initialValues[property] = cs.getPropertyValue(property); } } for (let property in initialValues) { // Skip property if the stylesheet above doesn't provide a non-initial value. // This is to avoid having to update the test every time a new CSS property is added. const nonInitialValue = nonInitialStyle.getPropertyValue(property); if (nonInitialValue === "") { continue; } test(function() { const initialValue = initialValues[property]; assert_not_equals(initialValue, "", "Should have the initial value."); this.add_cleanup(() => { layer2Style.cssText = ""; target.classList.remove("rollback"); }); layer2Style.cssText = prerequisites(property); layer2Style.setProperty(property, nonInitialValue); const changedValue = cs.getPropertyValue(property); assert_not_equals(changedValue, initialValue, "Should get a different computed value."); target.classList.add("rollback"); const revertedValue = cs.getPropertyValue(property); assert_equals(revertedValue, changedValue, "Layer 3 should rollback to layer 2."); }, property); } </script>