calc-sibling-function.html (1816B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>CSS sibling-index() and sibling-count()</title> 5 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting" /> 6 <script src="/resources/testharness.js"></script> 7 <script src="/resources/testharnessreport.js"></script> 8 <style> 9 html { 10 z-index: calc(sibling-index() * 2); 11 widows: calc(sibling-count() * 2); 12 } 13 #test { 14 z-index: calc(sibling-index()); 15 counter-increment: foo calc(sibling-count()); 16 left: calc(10% + 100px * sibling-index()); 17 } 18 #test::before { 19 content: ""; 20 z-index: calc(sibling-index() * 2); 21 widows: calc(sibling-count() * 2); 22 } 23 </style> 24 </head> 25 <body> 26 <div> 27 <div></div> 28 <div id="test"></div> 29 <div></div> 30 <div></div> 31 <ul></ul> 32 </div> 33 <script> 34 test(() => { 35 let style = getComputedStyle(document.getElementById('test')); 36 assert_equals(style.zIndex, '2'); 37 }, 'basic sibling-index() test'); 38 39 test(() => { 40 let style = getComputedStyle(document.getElementById('test')); 41 assert_equals(style.counterIncrement, 'foo 5'); 42 }, 'basic sibling-count() test'); 43 44 test(() => { 45 let style = getComputedStyle(document.getElementById('test')); 46 assert_equals(style.left, 'calc(10% + 200px)'); 47 }, 'sibling-index() in calc() with percentage'); 48 49 test(() => { 50 let style = getComputedStyle(document.getElementById('test'), '::before'); 51 assert_equals(style.zIndex, '4'); 52 assert_equals(style.widows, '10'); 53 }, 'sibling-count() on pseudo-element'); 54 55 test(() => { 56 let style = getComputedStyle(document.documentElement); 57 assert_equals(style.zIndex, '2'); 58 }, 'sibling-index() on root'); 59 60 test(() => { 61 let style = getComputedStyle(document.documentElement); 62 assert_equals(style.widows, '2'); 63 }, 'sibling-count() on root'); 64 </script> 65 </body> 66 </html>