contain-style-counters-002.html (1563B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: style' and counter (with 'display: contents')</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-002-ref.html"> 9 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7392"> 10 <meta content="This test checks that when an element has 'contain: style', then counters which may be affecting its subtree are not reset if they don't generate a box, e.g. due to display: contents" 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 display: contents; 28 font-size: 3em; 29 } 30 31 div#test span 32 { 33 counter-increment: counter-of-span 5; 34 } 35 36 /* 37 This increments the counter identified as "counter-of-span" 38 of the step value of 5 (an entirely arbitrary number) each 39 and every time there is a <span> descendant within the subtree 40 of div#test 41 */ 42 43 div#test span::after 44 { 45 content: counter(counter-of-span); 46 } 47 /* 48 Now, the generated content after the span is set to the 49 current value of the counter identified as "counter-of-span" 50 */ 51 52 </style> 53 54 55 <p>Test passes if there is the number 14. 56 57 <div id="create-counter"></div> 58 59 <div id="test"><span></span></div>