DXR is a code search and navigation tool aimed at making sense of large projects. It supports full-text and regex searches as well as structural queries.

Mercurial (409f3966645a)

VCS Links

Line Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
<!DOCTYPE html>
<html>
<style type="text/css">
  div {
    width: 100px;
    height:100px;
    position: fixed;
  }

  /* #outer is in main DOM, circle instance in use-element shadow DOM,
     should not match this rule for cloned circle instance. */
  #outer circle {
	  stroke: red;
	  fill: red;
	  stroke-width: 4px;
  }

  /* div is in main DOM, rect instance in use-element shadow DOM.
     should not match this rule for cloned rect instance. */
  div rect {
	  stroke: red;
	  fill: red;
	  stroke-width: 4px;
  }

  /* use element is host of shadow tree, not part of it. This rule should
     not match any elements in the use-element shadow tree. */
  use > rect, use > circle {
    stroke: red;
    fill: red;
    stroke-width: 4px;
  }

  /* A cloned symbol instance inside an use-element shadow tree should match
     rules of symbol tag, instead of svg tag. */
  svg {
    fill: red;
  }
  symbol {
    fill: lime;
  }
</style>

<body style="background-color: lime;">

<svg>
  <defs>
    <circle id="circle" cx="25" cy="25" r="25" />
    <rect id="rect" width="100" height="100"/>
    <symbol id="symbol">
      <circle cx="25" cy="25" r="25" />
    </symbol>
  </defs>

  <g id="outer">
    <use xlink:href="#circle" fill="lime" width="50" height="50" />
  </g>
</svg>

<div style="left: 0px; top: 10px;">
  <svg>
    <use xlink:href="#rect" fill="lime" width="50" height="50" />
  </svg>
</div>

<div style="left: 110px; top: 10px;">
  <svg>
    <use xlink:href="#symbol" fill="lime" width="50" height="50" />
  </svg>
</div>

<div style="left: 220px; top: 10px;">
  <svg>
    <use xlink:href="#symbol" width="50" height="50" />
  </svg>
</div>

</body>
</html>