Extended selector to access shadow DOM elements

Check that the CSS selector's extended syntax is working as expected.

Simple svg-use pattern with hide-if-contains

Test that usage of hide-if-contains works as expected against a shadow DOM created with SVG.

Example Content

Add filter #1.
Refresh page.
The red elements in the test case above should be hidden and the green one not hidden.

localhost#$#hide-if-contains 'svg-test' 'div[id] div' 'div[id] div svg use ^^svg^^'

Test that usage of hide-if-contains works as expected against nested SVGs

Example Content

Add filter #1.
Refresh page.
The red elements in the test case above should be hidden and the green one not hidden.

localhost#$#hide-if-contains 'svg-test' 'div[id] p' 'div[id] p svg use ^^svg^^ ^^svg^^'

Test that usage of hide-if-contains works as expected against subtree within svg-use

Example Content

Add filter #1.
Refresh page.
The red elements in the test case above should be hidden and the green one not hidden.

localhost#$#hide-if-contains 'svg-test' 'div[id] p' 'div[id] p svg use ^^svg^^ tspan'

Test that basic usage of hide-if-contains-and-matches-style works as expected against a shadow DOM created with SVG.

Example Content

Should not be hidden.hicamss

Add filter #1.
Refresh page.
The red element in the test case above should be hidden and the green one not hidden.

localhost#$#hide-if-contains-and-matches-style hicamss p[id] 'p[id] svg use ^^svg^^' /./ 'font-size: 16px;'

Test that basic usage of hide-if-has-and-matches-style works as expected against a shadow DOM created with SVG.

Example Content

Should not be hidden. hicamss

Add filter #1.
Refresh page.
The red element in the test case above should be hidden and the green one not hidden.

localhost#$#hide-if-has-and-matches-style a[href="#hihamss"] p[id] 'p[id] svg use ^^svg^^' /./ 'font-size: 16px;'