contain-style-counters-003.html (1450B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: style' for counters (span children of <body>)</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style"> 9 <link rel="match" href="reference/contain-style-counters-003-ref.html"> 10 11 12 <style> 13 body 14 { 15 counter-reset: counter-of-span 17; 16 } 17 18 /* 19 This creates a new counter identified as "counter-of-span" 20 and initially sets such counter to 17 (an entirely 21 arbitrary number) 22 */ 23 24 body 25 { 26 contain: style; 27 } 28 29 /* 30 This will reset the counter to 0. 31 */ 32 33 body span 34 { 35 counter-increment: counter-of-span 4; 36 } 37 38 /* 39 This increments the counter identified as "counter-of-span" 40 of the step value of 4 (an entirely arbitrary number) each 41 and every time there is a <span> descendant within the subtree 42 of body 43 */ 44 45 div 46 { 47 font-size: 3em; 48 } 49 50 div::after 51 { 52 content: counter(counter-of-span); 53 } 54 55 /* 56 Now, the generated content after the span is set to the 57 current value of the counter identified as "counter-of-span" 58 */ 59 </style> 60 61 <body> 62 63 <span></span> <span></span> <span></span> <span></span> <span></span> 64 65 <!-- 5 span above --> 66 67 <p>Test passes if there is the number 20. 68 69 <div></div>