<!DOCTYPE html> <meta charset="utf-8"> <title>CSS Cascade: "all: revert"</title> <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> <link rel="help" href="https://www.w3.org/TR/css-cascade-4/#default"> <meta name="assert" content="Checks that adding 'all: revert' 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> .revert-all { all: revert; } </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>