1367657 - CSS selector is matching twice. <svg> and <use> elements in SVG

Status: RESOLVED DUPLICATE of bug 265894

(Core :: SVG, defect)

Description

[Karl Dubost💡 :karlcow]

This is a spin off of a Webcompat issue.
https://webcompat.com/issues/6829

I also wonder if it's a duplicate of Bug 265894

This is happening on the site
http://m.nouvelobs.com/en-direct/a-chaud.html

There is an arrow widget under the tag to expose more tags. The orientation of the arrow is wrong. The markup is:

```html
<div class="tags activ">
    <h2>#Temps forts</h2>
    <span>
        <a href="?highlight=1" title="Essentiels">#Essentiels</a>
        <a href="?hashtag=manchester" title="manchester">#manchester</a>
        <!-- etc. -->
    </span>
    <button class="js-expand">
        <svg>
            <use xlink:href="/themes/svg/nobstr-common.svg#svg-picto-arrow-top"></use>
        </svg>
    </button>
</div>
```

The minimized state doesn't have the `activ` value.
```html
<div class="tags">
</div>
```

Somehow the `transform` is not happening on the SVG.

```css
#mobs-home-live .tags button svg {
	width: 10px;
	height: 10px;
	-webkit-transform: rotate(180deg);
	transform: rotate(180deg);
	pointer-events: none;
	-webkit-transform-origin: center center;
	transform-origin: center center;
}
```

```css
#mobs-home-live .tags.activ button svg {
	-webkit-transform: rotate(0deg);
	transform: rotate(0deg);
}
```


On the webcompat issue it is being said that the CSS rule is matching twice and applies a rotation of rotate(180deg) + rotate(180deg) so it comes back to its original state.

Comment 1

[u459114]

I will start from the test case in Bug 265894. The test case in that bug failed even if enable stylo

Comment 2

[u459114]

Example:
https://codepen.io/cku/pen/BZyMxZ

Comment 3

[u459114]

1. Implement is_in_svg_shadow_tree of element in stylo 
2. In matches_complex_selector_internal, create a special Combinator::Child & Combinator::Descendant rule for element in use shadow tree. If the element we want to match is in use shadow tree, parent lookup path should upto use element only.