all-prop-revert-layer-noop.html

Enable keyboard shortcuts

<!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' inside @layer has no effect on elements with no other author rules.">

<!-- Split into chunks to avoid timeouts. -->

<meta name="variant" content="?include=0">

<meta name="variant" content="?include=1">

<meta name="variant" content="?include=2">

<meta name="variant" content="?include=3">

<meta name="variant" content="?include=4">

<meta name="variant" content="?include=5">

<meta name="variant" content="?include=6">

<meta name="variant" content="?include=7">

<script>

  const CHUNKS = 8;

</script>

<style>

@layer {

  .revert-all {

    all: revert-layer;

</style>

<div id="log"></div>

<div id="wrapper"></div>

<script src="/common/subset-tests-by-key.js"></script>

<script src="/html/resources/common.js"></script>

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<script>

function cloneStyle(style) {

  const clone = Object.create(null);

  for (let property of style) {

    clone[property] = style.getPropertyValue(property);

  return clone;

function assertSameClones(clone1, clone2, callback) {

  for (let property in clone1) {

    const value1 = clone1[property];

    const value2 = clone2[property];

    // assert_equals is slow, so only call it if it's going to fail.

    if (value1 !== value2) {

      assert_equals(value1, value2, property);

const wrapper = document.getElementById("wrapper");

const elementNames = [...HTML5_ELEMENTS, "math", "svg", "z-custom"].sort();

for (let i = 0; i < elementNames.length; ++i) {

  let elementName = elementNames[i];

  let chunk = i % CHUNKS;

  subsetTestByKey(chunk.toString(), test, function() {

    const element = document.createElement(elementName);

    wrapper.appendChild(element);

    const style = getComputedStyle(element);

    const clonedBaseStyle = cloneStyle(style);

    element.classList.add("revert-all");

    const clonedRevertedStyle = cloneStyle(style);

    assertSameClones(clonedRevertedStyle, clonedBaseStyle);

  }, elementName);

</script>