fallbacks-in-shadow-dom.html (1210B)
1 <!DOCTYPE html> 2 <title>Counter style references are tree-scoped, the same name may dereference to different rules</title> 3 <link rel="help" href="https://drafts.csswg.org/css-counter-styles-3/#the-counter-style-rule"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping/#shadow-names"> 5 <link rel="author" href="mailto:xiaochengh@chromium.org"> 6 <link rel="match" href="fallbacks-in-shadow-dom-ref.html"> 7 8 <style> 9 @counter-style foo { 10 system: cyclic; 11 symbols: A B C; 12 } 13 14 @counter-style bar { 15 system: fixed 4; 16 symbols: D E F; 17 fallback: foo; 18 } 19 </style> 20 21 <div id="host"> 22 </div> 23 24 <script> 25 document.getElementById("host").attachShadow({mode: 'open'}).innerHTML = ` 26 <style> 27 @counter-style foo { 28 system: cyclic; 29 symbols: X Y Z; 30 } 31 32 @counter-style baz { 33 system: fixed 4; 34 symbols: G H I; 35 fallback: foo; 36 } 37 </style> 38 39 <ol style="list-style-type: bar; list-style-position: inside"> 40 <div>This list style should fallback to 'foo' in the parent tree scope</div> 41 <li></li> 42 <li></li> 43 <li></li> 44 </ol> 45 46 <ol style="list-style-type: baz; list-style-position: inside"> 47 <div>This list style should fallback to 'foo' in the shadow tree scope</div> 48 <li></li> 49 <li></li> 50 <li></li> 51 </ol> 52 ` 53 </script>