all-prop-revert-layer.html

mozilla-central/testing/web-platform/tests/css/css-cascade/all-prop-revert-layer.html

Enable keyboard shortcuts

Source code

File a bug in Core :: CSS Parsing and Computation

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /css/css-cascade/all-prop-revert-layer.html - WPT Dashboard Interop Dashboard

<!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;

  alignment-baseline: central;

  alt: "a";

  animation-composition: add;

  animation-delay: 123s;

  animation-direction: reverse;

  animation-duration: 123s;

  animation-fill-mode: both;

  animation-iteration-count: 123;

  animation-name: \.;

  animation-play-state: paused;

  animation-range: 10% 20%;

  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;

  baseline-source: first;

  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";

  content-visibility: auto;

  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-emoji: emoji;

  font-variant-ligatures: none;

  font-variant-numeric: tabular-nums;

  font-variant-position: super;

  font-variation-settings: "smcp" 1;

  font-weight: 123;

  forced-color-adjust: none;

  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";

  hyphenate-limit-chars: 5;

  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;

  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;

  margin-trim: block;

  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;

  page: page;

  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;

  scroll-timeline: --foo inline;

  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;

  text-wrap-style: balance;

  timeline-scope: --foo;

  top: 123px;

  touch-action: none;

  transform: scale(-1);

  transform-box: fill-box;

  transform-origin: 123px 123px 123px;

  transform-style: preserve-3d;

  transition-behavior: allow-discrete;

  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;

  view-timeline: --foo inline 10px;

  view-transition-name: --foo;

  visibility: collapse;

  white-space: pre;

  white-space-trim: discard-inner;

  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>