svg-id-ref-001.html (1185B)
1 <!DOCTYPE html> 2 <title>Same clip-path id's in different tree scopes</title> 3 <link rel="help" href="https://drafts.csswg.org/css-values/#local-urls"> 4 <link rel="help" href="https://drafts.csswg.org/css-scoping-1/#css-tree-scoped-reference"> 5 <link rel="match" href="reference/green-box.html"> 6 <style> 7 div.container { 8 position: absolute; 9 width: 100px; 10 height: 100px; 11 } 12 div.one { 13 background-color: red; 14 } 15 </style> 16 <p>Test passes if you see a single 100px by 100px green box below.</p> 17 <div class="container one"> 18 <svg style="display: block; width: 100%; height: 100%"> 19 <rect width="100" height="100" fill="green" clip-path="url(#clip)"/> 20 <clipPath id="clip"> 21 <rect width="50" height="100"/> 22 </clipPath> 23 </svg> 24 </div> 25 <div class="container two"></div> 26 <script> 27 const scoped = document.querySelector('div.two'); 28 scoped.attachShadow({ mode: 'open' }); 29 scoped.shadowRoot.innerHTML = ` 30 <svg style="display: block; width: 100%; height: 100%"> 31 <rect width="100" height="100" fill="green" clip-path="url(#clip)"/> 32 <clipPath id="clip"> 33 <rect x="50" width="50" height="100"/> 34 </clipPath> 35 </svg>`; 36 </script>