contain-style-counters-004.html (1161B)
1 <!DOCTYPE html> 2 <meta charset="UTF-8"> 3 <title>CSS Containment Test: 'contain: style' for counters (span descendants of <body>)</title> 4 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 5 <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style"> 6 <link rel="match" href="reference/contain-style-counters-004-ref.html"> 7 <style> 8 body { 9 counter-reset: counter-of-span 13; 10 contain: style; 11 } 12 body span { 13 counter-increment: counter-of-span 5; 14 } 15 div { 16 font-size: 3em; 17 } 18 div::after { 19 content: counter(counter-of-span); 20 } 21 </style> 22 <body> 23 <p><span></span> <span></span> <span></span> <span></span></p> 24 25 <!-- The <span>s aren't allowed to modify the counter instantiated on the <body>, 26 so a new instance of the counter is created. 27 Since the <div> isn't a sibling of the <span>, it will not inherit this new instance, 28 and instead it will read the original counter from the <body>, with value 13. 29 This is per example at: https://drafts.csswg.org/css-contain/#containment-style --> 30 <p>Test passes if there is the number 13.</p> 31 <div></div> 32 </body>