Inline CSS with Extended Selectors

Check that inline CSS functionality with extended selectors is working as expected.

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

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

Target

Steps

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

Filters

localhost#?#div:-abp-properties(width: 56px) {background-color: #0dc74b;}

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

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

Target

Steps

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

Filters

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

Basic :has() usage with inline CSS

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

Target

Steps

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

Filters

localhost#?#div:has(>div>span.inline-css-has) {background-color: #0dc74b;}

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

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

.inline-css-contains-target

Steps

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

Filters

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

Basic :xpath() usage with inline CSS

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

Target

Steps

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

Filters

localhost#?#span:xpath(//*[@id="basic-xpath-usage-with-inline-css-fail"]) {background-color: #0dc74b;}

Basic :has-text() usage with inline CSS

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

inline-css-has-text

Steps

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

Filters

localhost#?#span:has-text(inline-css-has-text) {background-color: #0dc74b;}

Chained extended selectors with inline CSS

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

Target

Steps

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

Filters

localhost#?#div:-abp-has(> div:-abp-properties(width: 57px)) {background-color: #0dc74b;}

Case insensitive extended selectors with inline CSS

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

Target

Steps

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

Filters

localhost#?#div:-abp-properties(WiDtH: 58px) {background-color: #0dc74b;}

Wildcard in extended selector with inline CSS

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

Target

Steps

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

Filters

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

Regular expression in :-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

Steps

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

Filters

localhost#?#div:-abp-properties(/width: 14[1-5]px;/) {background-color: #0dc74b;}

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

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

inline-css-containsregex1

inline-css-containsregex2

inline-css-containsregex1

inline-css-containsregex2

Steps

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

Filters

localhost#?#div > div:-abp-contains(/inline-css-containsregex\d/) {background-color: #0dc74b;}