Inline CSS

Check that inline CSS functionality is working as expected.

Inline CSS with ID selector

Test that an inline css filter using an ID 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###inline-css-id {background-color: #0dc74b;}

Inline CSS with ID selector with double curly braces

Test that an inline css filter using an ID selector with two curly braces 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[id='{{inline-css-id}}'] {background-color: #0dc74b;}

Inline CSS with class selector

Test that an inline css filter using a class 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##.inline-css-class {background-color: #0dc74b;}

Inline CSS with descendant selector

Test that an inline css filter using a descendant 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##.testcase-area > .inline-css-descendant {background-color: #0dc74b;}

Inline CSS with sibling selector

Test that an inline css filter using a sibling selector changes target background from red to green.

Example Content

Target

Steps

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

Filters

localhost##.testcase-examplecontent + .inline-css-sibling {background-color: #0dc74b;}

Inline CSS with attribute selector 1

Test that an inline css filter using an attribute 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[height="50"][width="50"] {background-color: #0dc74b;}

Inline CSS with attribute selector 2

Test that an inline css filter using an attribute 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[href="http://testcase-attribute-inline-css.com/"] {background-color: #0dc74b;}

Inline CSS with attribute selector 3

Test that an inline css filter using an attribute 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[style="width: 52px;"] {background-color: #0dc74b;}

Inline CSS starts with selector 1

Test that an inline css filter using a starts with 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[href^="http://testcase-startswith-inline-css.com/"] {background-color: #0dc74b;}

Inline CSS starts with selector 2

Test that an inline css filter using a starts with 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[style^="width: 53px;"] {background-color: #0dc74b;}

Inline CSS ends with selector 1

Test that an inline css filter using a ends with 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[style$="width: 54px;"] {background-color: #0dc74b;}

Inline CSS contains

Test that an inline css filter using a contains 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[style*="width: 55px;"] {background-color: #0dc74b;}