Extended selector to access shadow DOM elements

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

Simple closed shadow root with hide-if-contains

Test that basic usage of hide-if-contains works as expected against a closed shadow root.

Example Content

Steps

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

Filters

abptestpages.org#$#hide-if-contains 'hic-simple-sh' 'div[id]' 'div[id] ^^sh^^ span'

Wrapping shadow root with hide-if-contains

Test that basic usage of hide-if-contains works as expected against a nested closed shadow root.

Example Content

Steps

Add filter #1.
Refresh page.
The red element added to the test case above should be hidden.

Filters

abptestpages.org#$#hide-if-contains 'hic-nested-sh' 'div[id]' 'div[id] ^^sh^^ div ^^sh^^ span'

Closed shadow root wraps several elements with hide-if-contains

Test that usage of hide-if-contains works as expected when transpassing a shadow root boundary, hiding one element within but not the whole shadow root.

Steps

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

Filters

abptestpages.org#$#hide-if-contains 'hic-wrapping-sh' 'div[id] ^^sh^^ div'

Closed shadow root with hide-if-contains-visible-text

Test that basic usage of hide-if-contains-visible-text works as expected against a closed shadow root.

Example Content

Failed. Element not hidden.

Steps

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

Filters

abptestpages.org#$#hide-if-contains-visible-text 'hicvt-test' '#parent-basic' '#label ^^sh^^ div'

Simple closed shadow root with hide-if-contains-and-matches-style

Test that basic usage of hide-if-contains-and-matches-style works as expected against a closed shadow root.

Example Content

Should not be hidden.hicamss

Steps

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

Filters

abptestpages.org#$#hide-if-contains-and-matches-style hicamss p[id] 'p[id] ^^sh^^ span.label' /./ 'font-size: 16px;'

Simple closed shadow root with hide-if-has-and-matches-style

Test that basic usage of hide-if-has-and-matches-style works as expected against a closed shadow root.

Example Content

Should not be hidden. hicamss

Steps

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

Filters

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