use-descendant-combinator-003.html (896B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <title>CSS Test: use element doesn't cross shadow tree boundaries in selector-matching, and is invalidated properly</title> 4 <link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io"> 5 <link rel="help" href="https://svgwg.org/svg2-draft/struct.html#UseElement"> 6 <link rel="match" href="/svg/linking/reftests/use-descendant-combinator-ref.html"> 7 <style> 8 #test rect { 9 stroke: red; 10 stroke-width: 10px; 11 } 12 .inside-use rect { 13 fill: red; 14 } 15 defs .inside-use rect { 16 fill: red; 17 } 18 </style> 19 <p> 20 You should see a green square, and no red. 21 </p> 22 <svg> 23 <defs> 24 <g id="square"> 25 <g class="inside-use"> 26 <rect width="100" height="100"/> 27 </g> 28 </g> 29 </defs> 30 <g id="test"> 31 <use href="#square" /> 32 </g> 33 </svg> 34 <script> 35 document.body.offsetTop; 36 document.styleSheets[0].cssRules[1].style.fill = 'green'; 37 </script>