tree-scoped-sibling-function.html (1455B)
1 <!DOCTYPE html> 2 <title>CSS Values and Units Test: Tree-scoped sibling-index()</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values-5/#tree-counting"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <style> 7 #host1::part(--p) { 8 z-index: sibling-index(); 9 /* Add 1 since widows does not accept 0 */ 10 widows: calc(1 + sibling-count()); 11 } 12 </style> 13 <div id="host1"> 14 <template shadowrootmode="open"> 15 <div></div> 16 <div></div> 17 <div id="t1" part="--p"></div> 18 </template> 19 </div> 20 <script> 21 test(() => { 22 const style = getComputedStyle(host1.shadowRoot.querySelector("#t1")); 23 assert_equals(style.zIndex, "0", "z-index should be 0"); 24 assert_equals(style.widows, "1", "widows should be 1"); 25 }, "sibling-index() and sibling-count() evaluates to 0 from outer tree with ::part"); 26 </script> 27 28 <div> 29 <div></div> 30 <div></div> 31 <div id="t2"> 32 <template shadowrootmode="open"> 33 <style> 34 :host { 35 z-index: sibling-index(); 36 widows: sibling-count(); 37 } 38 </style> 39 </template> 40 </div> 41 <div></div> 42 <div></div> 43 </div> 44 <script> 45 test(() => { 46 const style = getComputedStyle(t2); 47 assert_equals(style.zIndex, "3", ":host is the third sibling"); 48 assert_equals(style.widows, "5", ":host total sibling count is 5"); 49 }, "sibling-index() and sibling-count() evaluate as normal from inner tree"); 50 </script>