all-prop-revert-noop.html (2245B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Cascade: "all: revert"</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-4/#default"> 6 <meta name="assert" content="Checks that adding 'all: revert' 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 .revert-all { 22 all: revert; 23 } 24 </style> 25 26 <div id="log"></div> 27 <div id="wrapper"></div> 28 29 <script src="/common/subset-tests-by-key.js"></script> 30 <script src="/html/resources/common.js"></script> 31 <script src="/resources/testharness.js"></script> 32 <script src="/resources/testharnessreport.js"></script> 33 <script> 34 function cloneStyle(style) { 35 const clone = Object.create(null); 36 for (let property of style) { 37 clone[property] = style.getPropertyValue(property); 38 } 39 return clone; 40 } 41 42 function assertSameClones(clone1, clone2, callback) { 43 for (let property in clone1) { 44 const value1 = clone1[property]; 45 const value2 = clone2[property]; 46 // assert_equals is slow, so only call it if it's going to fail. 47 if (value1 !== value2) { 48 assert_equals(value1, value2, property); 49 } 50 } 51 } 52 53 const wrapper = document.getElementById("wrapper"); 54 const elementNames = [...HTML5_ELEMENTS, "math", "svg", "z-custom"].sort(); 55 for (let i = 0; i < elementNames.length; ++i) { 56 let elementName = elementNames[i]; 57 let chunk = i % CHUNKS; 58 subsetTestByKey(chunk.toString(), test, function() { 59 const element = document.createElement(elementName); 60 wrapper.appendChild(element); 61 const style = getComputedStyle(element); 62 const clonedBaseStyle = cloneStyle(style); 63 element.classList.add("revert-all"); 64 const clonedRevertedStyle = cloneStyle(style); 65 assertSameClones(clonedRevertedStyle, clonedBaseStyle); 66 }, elementName); 67 } 68 </script>