calc-sibling-function-in-shadow-dom.html (1288B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Values Test: sibling-index() and sibling-count() in flat tree</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 </head> 9 <body> 10 <style> 11 #host > * { 12 orphans: sibling-index(); 13 widows: sibling-count(); 14 } 15 </style> 16 <div id="host"> 17 <div>Some element.</div> 18 <div>Some other element.</div> 19 <div slot="unknown">This should be ignored.</div> 20 <div id="target">Some third element.</div> 21 </div> 22 <script> 23 test(() => { 24 host.attachShadow({mode: 'open'}).innerHTML = ` 25 <style> 26 slot::slotted(*) { 27 z-index: sibling-index(); 28 order: sibling-count(); 29 } 30 </style> 31 <div> 32 <div>Some text before the slot.</div> 33 <slot></slot> 34 </div> 35 `; 36 assert_equals(getComputedStyle(target).zIndex, '4'); 37 assert_equals(getComputedStyle(target).order, '4'); 38 assert_equals(getComputedStyle(target).orphans, '4'); 39 assert_equals(getComputedStyle(target).widows, '4'); 40 }, 'Host children have sibling-index() and sibling-count() based on the DOM tree order'); 41 </script>