all-prop-revert-layer-noop.html (2299B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Cascade: "all: revert-layer"</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://www.w3.org/TR/css-cascade-5/#revert-layer"> 6 <meta name="assert" content="Checks that adding 'all: revert-layer' inside @layer has no effect on elements with no other author rules."> 7 <!-- Split into chunks to avoid timeouts. --> 8 <meta name="variant" content="?include=0"> 9 <meta name="variant" content="?include=1"> 10 <meta name="variant" content="?include=2"> 11 <meta name="variant" content="?include=3"> 12 <meta name="variant" content="?include=4"> 13 <meta name="variant" content="?include=5"> 14 <meta name="variant" content="?include=6"> 15 <meta name="variant" content="?include=7"> 16 <script> 17 const CHUNKS = 8; 18 </script> 19 20 <style> 21 @layer { 22 .revert-all { 23 all: revert-layer; 24 } 25 } 26 </style> 27 28 <div id="log"></div> 29 <div id="wrapper"></div> 30 31 <script src="/common/subset-tests-by-key.js"></script> 32 <script src="/html/resources/common.js"></script> 33 <script src="/resources/testharness.js"></script> 34 <script src="/resources/testharnessreport.js"></script> 35 <script> 36 function cloneStyle(style) { 37 const clone = Object.create(null); 38 for (let property of style) { 39 clone[property] = style.getPropertyValue(property); 40 } 41 return clone; 42 } 43 44 function assertSameClones(clone1, clone2, callback) { 45 for (let property in clone1) { 46 const value1 = clone1[property]; 47 const value2 = clone2[property]; 48 // assert_equals is slow, so only call it if it's going to fail. 49 if (value1 !== value2) { 50 assert_equals(value1, value2, property); 51 } 52 } 53 } 54 55 const wrapper = document.getElementById("wrapper"); 56 const elementNames = [...HTML5_ELEMENTS, "math", "svg", "z-custom"].sort(); 57 for (let i = 0; i < elementNames.length; ++i) { 58 let elementName = elementNames[i]; 59 let chunk = i % CHUNKS; 60 subsetTestByKey(chunk.toString(), test, function() { 61 const element = document.createElement(elementName); 62 wrapper.appendChild(element); 63 const style = getComputedStyle(element); 64 const clonedBaseStyle = cloneStyle(style); 65 element.classList.add("revert-all"); 66 const clonedRevertedStyle = cloneStyle(style); 67 assertSameClones(clonedRevertedStyle, clonedBaseStyle); 68 }, elementName); 69 } 70 </script>