| <!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."> |
| |
| <style> |
| @layer { |
| .revert-all { |
| all: revert-layer; |
| } |
| } |
| </style> |
| |
| <div id="log"></div> |
| <div id="wrapper"></div> |
| |
| <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 elementName of elementNames) { |
| 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> |