Inline CSS Inversion - ABP Test Pages

Basic :not(:-abp-properties()) usage with inline CSS

Test that an inline CSS filter using a :not(:-abp-properties()) selector changes target background from red to green.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The DOM element should change background from red to green.

Filters

localhost#?#.inline-css-inv-properties:not(:-abp-properties(width: 147px)) {background-color: #0dc74b;}

Basic :not(:-abp-has()) usage with inline CSS

Test that an inline CSS filter using a :not(:-abp-has()) selector changes target background from red to green.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The DOM element should change background from red to green.

Filters

localhost#?#.inline-css-inv-has:not(:-abp-has(span.inline-css-inv-has-not-hide)) {background-color: #0dc74b;}

Basic :not(:-abp-contains()) usage with inline CSS

Test that an inline CSS filter using a not(:-abp-contains()) selector changes target background from red to green.

Target

example-content

Steps

Add filter #1.
Refresh page.
The DOM element should change background from red to green.

Filters

localhost#?#.inline-css-inv-contains:not(span:-abp-contains(example-content)) {background-color: #0dc74b;}

Chained extended selectors with not() selector with inline CSS

Test that an inline CSS filter using several of the extended selectors and not() selector changes target background from red to green.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The DOM element should change background from red to green.

Filters

localhost#?#.inline-css-inv-chained-parent:not(:-abp-has(> div:-abp-properties(width: 148px))) {background-color: #0dc74b;}

Case insensitive extended selectors with not() selector with inline CSS

Test that an inline CSS filter is case insensitive and still changes target background from red to green.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The DOM element should change background from red to green.

Filters

localhost#?#.inline-css-inv-case:not(:-abp-properties(WiDtH: 149px)) {background-color: #0dc74b;}

Wildcard in extended selector combined with :not() selector with inline CSS

Test that an inline CSS filter using wildcards still not changes target background from red to green.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The DOM element should change background from red to green.

Filters

localhost#?#.inline-css-inv-wildcard:not(:-abp-properties(cursor:*)) {background-color: #0dc74b;}

Regular expression in :not(:-abp-properties()) with inline CSS

Test that an inline CSS filter using regular expressions still changes target background from red to green.

Target

Not a target

Example Content

Steps

Add filter #1.
Refresh page.
Both red target elements should change background from red to green.

Filters

localhost#?#.inline-css-inv-regex:not(:-abp-properties(/width: 15[1-5]px;/)) {background-color: #0dc74b;}

Regular expression in :not(:-abp-contains()) with inline CSS

Test that an inline CSS filter using regular expressions still changes target background from red to green.

inline-css-inv-containsregextarget inline-css-inv-containsregextarget2

inline-css-inv-containsregextarget

inline-css-inv-containsregextarget2

example-contentregex1 example-contentregex2

Steps

Add filter #1.
Refresh page.
Both red target elements should change background from red to green.

Filters

localhost#?#.inline-css-inv-contains-regex:not(span:-abp-contains(/example-contentregex\d/)) {background-color: #0dc74b;}