contain-style-counters-001.html (1392B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: style' and counter</title> 6 7 <link rel="help" href="https://www.w3.org/TR/css-contain-1/#containment-style"> 8 <link rel="match" href="reference/contain-style-counters-001-ref.html"> 9 10 <meta content="This test checks that when an element has 'contain: style', then counters which may be affecting its subtree are reset to 0 for such scope." name="assert"> 11 12 <style> 13 div#create-counter 14 { 15 counter-reset: counter-of-span 9; 16 } 17 18 /* 19 This creates a new counter identified as "counter-of-span" 20 and initially sets such counter to 9 (an entirely 21 arbitrary number). 22 */ 23 24 div#test 25 { 26 contain: style; 27 font-size: 3em; 28 } 29 30 div#test span 31 { 32 counter-increment: counter-of-span 5; 33 } 34 35 /* 36 This increments the counter identified as "counter-of-span" 37 of the step value of 5 (an entirely arbitrary number) each 38 and every time there is a <span> descendant within the subtree 39 of div#test 40 */ 41 42 div#test span::after 43 { 44 content: counter(counter-of-span); 45 } 46 /* 47 Now, the generated content after the span is set to the 48 current value of the counter identified as "counter-of-span" 49 */ 50 51 </style> 52 53 54 <p>Test passes if there is the digit 5. 55 56 <div id="create-counter"></div> 57 58 <div id="test"><span></span></div>