position-anchor-002.html (1414B)
1 <!DOCTYPE html> 2 <title>Tests that 'position-anchor' property value is tree-scoped</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#position-anchor"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <link rel="match" href="position-anchor-ref.html"> 6 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 7 <style> 8 .anchor { 9 width: 100px; 10 height: 100px; 11 background: orange; 12 font: 20px/1 Ahem; 13 } 14 15 .target { 16 position: fixed; 17 background: lime; 18 position-try-fallbacks: --pf; 19 left: 999999px; /* force fallback */ 20 font: 20px/1 Ahem; 21 } 22 23 @position-try --pf { 24 top: anchor(bottom, 0px); 25 left: anchor(left, 0px); 26 width: anchor-size(width, 0px); 27 height: anchor-size(height, 0px); 28 } 29 30 body { 31 margin: 0; 32 } 33 34 #fake-anchor { 35 anchor-name: --a; 36 } 37 38 #anchor1 { 39 margin-left: 100px; 40 } 41 42 #anchor2 { 43 margin-left: 300px; 44 margin-top: 100px; 45 } 46 47 </style> 48 49 <div id="fake-anchor"></div> 50 51 <div id="anchor1" class="anchor"> 52 anchor1 53 <div id="target1" class="target">target1</div> 54 </div> 55 56 <div id="anchor2" class="anchor"> 57 anchor2 58 <div id="target2" class="target">target2</div> 59 </div> 60 61 <script> 62 for (let host of document.querySelectorAll('.anchor')) { 63 let shadow = host.attachShadow({mode: 'open'}); 64 shadow.innerHTML = ` 65 <style> 66 :host { anchor-name: --a; } 67 ::slotted(.target) { position-anchor: --a; } 68 </style> 69 <slot></slot> 70 `; 71 } 72 </script>