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

RESOLVED DUPLICATE of bug 265894

Status

()

Core
SVG
RESOLVED DUPLICATE of bug 265894
3 months ago
3 months ago

People

(Reporter: karlcow, Assigned: cjku)

Tracking

55 Branch
Points:
---
Bug Flags:
webcompat ?

Firefox Tracking Flags

(Not tracked)

Details

(Whiteboard: [webcompat])

(Reporter)

Description

3 months ago
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.
(Reporter)

Updated

3 months ago
Flags: webcompat?
Whiteboard: [webcompat]
(Assignee)

Updated

3 months ago
Assignee: nobody → cku
(Assignee)

Comment 1

3 months ago
I will start from the test case in Bug 265894. The test case in that bug failed even if enable stylo
(Assignee)

Comment 2

3 months ago
Example:
https://codepen.io/cku/pen/BZyMxZ
(Assignee)

Comment 3

3 months ago
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.
(Assignee)

Updated

3 months ago
Depends on: 1370508
(Assignee)

Updated

3 months ago
Status: NEW → RESOLVED
Last Resolved: 3 months ago
Resolution: --- → DUPLICATE
Duplicate of bug: 265894
You need to log in before you can comment on or make changes to this bug.