use-element-shadow-tree-rule-matching.html (1678B)
1 <!DOCTYPE html> 2 <html> 3 <style type="text/css"> 4 div { 5 width: 100px; 6 height:100px; 7 position: fixed; 8 } 9 10 /* #outer is in main DOM, circle instance in use-element shadow DOM, 11 should not match this rule for cloned circle instance. */ 12 #outer circle { 13 stroke: red; 14 fill: red; 15 stroke-width: 4px; 16 } 17 18 /* div is in main DOM, rect instance in use-element shadow DOM. 19 should not match this rule for cloned rect instance. */ 20 div rect { 21 stroke: red; 22 fill: red; 23 stroke-width: 4px; 24 } 25 26 /* use element is host of shadow tree, not part of it. This rule should 27 not match any elements in the use-element shadow tree. */ 28 use > rect, use > circle { 29 stroke: red; 30 fill: red; 31 stroke-width: 4px; 32 } 33 34 /* A cloned symbol instance inside an use-element shadow tree should match 35 rules of symbol tag, instead of svg tag. */ 36 svg { 37 fill: red; 38 } 39 symbol { 40 fill: lime; 41 } 42 </style> 43 44 <body style="background-color: lime;"> 45 46 <svg> 47 <defs> 48 <circle id="circle" cx="25" cy="25" r="25" /> 49 <rect id="rect" width="100" height="100"/> 50 <symbol id="symbol"> 51 <circle cx="25" cy="25" r="25" /> 52 </symbol> 53 </defs> 54 55 <g id="outer"> 56 <use xlink:href="#circle" fill="lime" width="50" height="50" /> 57 </g> 58 </svg> 59 60 <div style="left: 0px; top: 10px;"> 61 <svg> 62 <use xlink:href="#rect" fill="lime" width="50" height="50" /> 63 </svg> 64 </div> 65 66 <div style="left: 110px; top: 10px;"> 67 <svg> 68 <use xlink:href="#symbol" fill="lime" width="50" height="50" /> 69 </svg> 70 </div> 71 72 <div style="left: 220px; top: 10px;"> 73 <svg> 74 <use xlink:href="#symbol" width="50" height="50" /> 75 </svg> 76 </div> 77 78 </body> 79 </html>