Element Hiding

Check that basic element hiding functionality is working as expected.

ID Selector

Test that an element hiding filter using an ID selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

```
localhost###eh-id
```

ID Selector with double curly braces

Test that an element hiding filter using an ID selector with two curly braces hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

```
localhost##div[id='{{eh-id}}']
```

Class Selector

Test that an element hiding filter using a class selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

```
localhost##.eh-class
```

Descendant Selector

Test that an element hiding filter using a descendant selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

localhost##.testcase-area > .eh-descendant

Sibling Selector

Test that an element hiding filter using a sibling selector hides its target.

Example Content

Target

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

localhost##.testcase-examplecontent + .eh-sibling

Attribute Selector 1

Test that an element hiding filter using an attribute selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

localhost##div[height="100"][width="100"]

Attribute Selector 2

Test that an element hiding filter using an attribute selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

localhost##div[href="http://testcase-attribute.com/"]

Attribute Selector 3

Test that an element hiding filter using an attribute selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

```
localhost##div[style="width: 200px;"]
```

Starts with Selector 1

Test that an element hiding filter using a starts with selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

localhost##div[href^="http://testcase-startswith.com/"]

Starts with Selector 2

Test that an element hiding filter using a starts with selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

```
localhost##div[style^="width: 201px;"]
```

Ends with Selector 1

Test that an element hiding filter using a ends with selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

```
localhost##div[style$="width: 202px;"]
```

Contains

Test that an element hiding filter using a contains selector hides its target.

Target

Example Content

Steps

Add filter #1.
Refresh page.
The red element should be hidden and the space collapsed.

Filters

```
localhost##div[style*="width: 203px;"]
```