contain-strict-011.html (1587B)
1 <!DOCTYPE html> 2 3 <meta charset="UTF-8"> 4 5 <title>CSS Containment Test: 'contain: strict' does not turn on style containment</title> 6 7 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 8 <link rel="help" href="https://drafts.csswg.org/css-contain/#contain-property"> 9 <link rel="match" href="reference/contain-strict-011-ref.html"> 10 11 <meta name="assert" content="'contain: strict' turns on style containment. So, in this test, the counter of spans should not be reset and must not be reset."> 12 13 <style> 14 body 15 { 16 counter-reset: counter-of-span 17; 17 } 18 19 /* 20 This creates a new counter identified as "counter-of-span" 21 and initially sets such counter to 17 (an entirely 22 arbitrary number) 23 */ 24 25 div 26 { 27 contain: strict; 28 } 29 30 div > span 31 { 32 background-color: yellow; 33 color: red; 34 counter-increment: counter-of-span 3; 35 } 36 37 /* 38 This increments the counter identified as "counter-of-span" 39 of the step value of 3 (an entirely arbitrary number) each 40 and every time there is a <span> child within the subtree 41 of div 42 */ 43 44 p#test::after 45 { 46 content: counter(counter-of-span); 47 font-size: 3em; 48 } 49 50 /* 51 Now, the generated content is set to the current 52 value of the counter identified as "counter-of-span": 53 17 + 3 * 3 == 26 54 */ 55 </style> 56 57 <body> 58 59 <div><span>FAIL1</span> <span>FAIL2</span> <span>FAIL3</span></div> 60 61 <p id="pass-fail-conditions-sentence">Test passes if there is the number 17. 62 63 <p id="test">