marker-reverted-styles.html (1873B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>CSS Pseudo-Elements Test: Reverted styles for ::marker</title> 4 <link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo"> 5 <link rel="help" href="https://drafts.csswg.org/css-cascade-4/#default"> 6 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 7 <meta name="assert" content="This test checks that ::marker styles can be reverted to UA origin." /> 8 <style> 9 .revert::marker { all: revert } 10 .outside { list-style-position: outside } 11 .inside { list-style-position: inside } 12 .symbol { list-style-type: symbol } 13 .decimal { list-style-type: decimal } 14 .string { list-style-type: "string" } 15 .marker::marker { content: "marker" } 16 </style> 17 <div id="log"></div> 18 <ul> 19 <li class="outside symbol">outside symbol</li> 20 <li class="outside decimal">outside decimal</li> 21 <li class="outside string">outside string</li> 22 <li class="outside marker">outside marker</li> 23 <li class="inside symbol">inside symbol</li> 24 <li class="inside decimal">inside decimal</li> 25 <li class="inside string">inside string</li> 26 <li class="inside marker">inside marker</li> 27 </ul> 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script src="/css/support/computed-testcommon.js"></script> 31 <script> 32 function getStyles(style) { 33 const obj = {}; 34 for (let i = 0; i < style.length; ++i) { 35 const prop = style.item(i); 36 obj[prop] = style.getPropertyValue(prop); 37 } 38 return obj; 39 } 40 for (const target of document.querySelectorAll("li")) { 41 test(function() { 42 const cs = getComputedStyle(target, "::marker"); 43 const defaultStyles = getStyles(cs); 44 target.classList.add("revert"); 45 const revertedStyles = getStyles(cs); 46 assert_object_equals(revertedStyles, defaultStyles); 47 }, `Reverted computed values for ${target.className}`); 48 } 49 </script>