LEFT | RIGHT |
1 title = Element Hiding | 1 title = Element Hiding |
2 template = testcase | 2 template = testcase |
3 | 3 |
4 {% set testcase_moreinfo = [ | 4 {% set testcase_moreinfo = [ |
5 ("Filter Cheatsheet - Element Hiding", "https://adblockplus.org/filter-cheatsh
eet#elementhiding"), | 5 ("Filter Cheatsheet - Element Hiding", "https://adblockplus.org/filter-cheatsh
eet#elementhiding"), |
6 ] %} | 6 ] %} |
7 | 7 |
8 <section class="site-panel"> | 8 <section class="site-panel"> |
9 <h2>Element Hiding</h2> | 9 <h2>Element Hiding</h2> |
10 <p>Check that basic element hiding functionality is working as expected.</p> | 10 <p>Check that basic element hiding functionality is working as expected.</p> |
11 <p>With the filter displayed below each test case added to ABP (or with the te
stcase subscription installed and active), the red target elements in each test
case panel should be hidden.</p> | 11 <p>With the filter displayed below each test case added to ABP (or with the te
stcase subscription installed and active), the red target elements in each test
case panel should be hidden.</p> |
12 </section> | 12 </section> |
13 | 13 |
14 <section class="site-panel"> | 14 <section class="site-panel"> |
15 <h2>ID Selector</h2> | 15 <h2>ID Selector</h2> |
16 <div class="testcase-container"> | 16 <div class="testcase-container"> |
17 <div id="testcase-eh-id" class="testcase-contentaside stripes-red">Target</d
iv> | 17 <div id="testcase-eh-id" class="testcase-contentaside stripes-red">Target</d
iv> |
18 <div class="testcase-content stripes-grey">Content</div> | 18 <div class="testcase-content stripes-grey">Content</div> |
19 </div> | 19 </div> |
20 <h3>Filters</h3> | 20 <h3>Filters</h3> |
21 <pre>{{ site_url|strip_proto }}###testcase-eh-id</pre> | 21 <pre>{{ site_url|domain }}###testcase-eh-id</pre> |
22 </section> | 22 </section> |
23 | 23 |
24 <section class="site-panel"> | 24 <section class="site-panel"> |
25 <h2>Class Selector</h2> | 25 <h2>Class Selector</h2> |
26 <div class="testcase-container"> | 26 <div class="testcase-container"> |
27 <div class="testcase-contentaside stripes-red testcase-eh-class">Target</div
> | 27 <div class="testcase-contentaside stripes-red testcase-eh-class">Target</div
> |
28 <div class="testcase-content stripes-grey">Content</div> | 28 <div class="testcase-content stripes-grey">Content</div> |
29 </div> | 29 </div> |
30 <h3>Filters</h3> | 30 <h3>Filters</h3> |
31 <pre>{{ site_url|strip_proto }}##.testcase-eh-class</pre> | 31 <pre>{{ site_url|domain }}##.testcase-eh-class</pre> |
32 </section> | 32 </section> |
33 | 33 |
34 <section class="site-panel"> | 34 <section class="site-panel"> |
35 <h2>Descendant Selector</h2> | 35 <h2>Descendant Selector</h2> |
36 <div class="testcase-container"> | 36 <div class="testcase-container"> |
37 <div class="testcase-contentaside stripes-red testcase-eh-descendant">Target
</div> | 37 <div class="testcase-contentaside stripes-red testcase-eh-descendant">Target
</div> |
38 <div class="testcase-content stripes-grey">Content</div> | 38 <div class="testcase-content stripes-grey">Content</div> |
39 </div> | 39 </div> |
40 <h3>Filters</h3> | 40 <h3>Filters</h3> |
41 <pre>{{ site_url|strip_proto }}##.testcase-container > .testcase-eh-descendant
</pre> | 41 <pre>{{ site_url|domain }}##.testcase-container > .testcase-eh-descendant</pre
> |
42 </section> | 42 </section> |
43 | 43 |
44 <section class="site-panel"> | 44 <section class="site-panel"> |
45 <h2>Sibling Selector</h2> | 45 <h2>Sibling Selector</h2> |
46 <div class="testcase-container"> | 46 <div class="testcase-container"> |
47 <div class="testcase-eh-sibling"></div> | 47 <div class="testcase-eh-sibling"></div> |
48 <div class="testcase-contentaside stripes-red testcase-eh-sibling-target">Ta
rget</div> | 48 <div class="testcase-contentaside stripes-red testcase-eh-sibling-target">Ta
rget</div> |
49 <div class="testcase-content stripes-grey">Content</div> | 49 <div class="testcase-content stripes-grey">Content</div> |
50 </div> | 50 </div> |
51 <h3>Filters</h3> | 51 <h3>Filters</h3> |
52 <pre>{{ site_url|strip_proto }}##.testcase-eh-sibling + .testcase-eh-sibling-t
arget</pre> | 52 <pre>{{ site_url|domain }}##.testcase-eh-sibling + .testcase-eh-sibling-target
</pre> |
53 </section> | 53 </section> |
54 | 54 |
55 <section class="site-panel"> | 55 <section class="site-panel"> |
56 <h2>Attribute Selector 1</h2> | 56 <h2>Attribute Selector 1</h2> |
57 <div class="testcase-container"> | 57 <div class="testcase-container"> |
58 <table height="100" width="100" class="testcase-contentaside stripes-red tes
tcase-eh"> | 58 <table height="100" width="100" class="testcase-contentaside stripes-red tes
tcase-eh"> |
59 <tr><td>Target</td></tr> | 59 <tr><td>Target</td></tr> |
60 </table> | 60 </table> |
61 <div class="testcase-content stripes-grey">Content</div> | 61 <div class="testcase-content stripes-grey">Content</div> |
62 </div> | 62 </div> |
63 <h3>Filters</h3> | 63 <h3>Filters</h3> |
64 <pre>{{ site_url|strip_proto }}##table[height="100"][width="100"]</pre> | 64 <pre>{{ site_url|domain }}##table[height="100"][width="100"]</pre> |
65 </section> | 65 </section> |
66 | 66 |
67 <section class="site-panel"> | 67 <section class="site-panel"> |
68 <h2>Attribute Selector 2</h2> | 68 <h2>Attribute Selector 2</h2> |
69 <div class="testcase-container"> | 69 <div class="testcase-container"> |
70 <a href="http://testcase-attribute.com/" class="testcase-contentaside stripe
s-red">Target</a> | 70 <a href="http://testcase-attribute.com/" class="testcase-contentaside stripe
s-red">Target</a> |
71 <div class="testcase-content stripes-grey">Content</div> | 71 <div class="testcase-content stripes-grey">Content</div> |
72 </div> | 72 </div> |
73 <h3>Filters</h3> | 73 <h3>Filters</h3> |
74 <pre>{{ site_url|strip_proto }}##a[href="http://testcase-attribute.com/"]</pre
> | 74 <pre>{{ site_url|domain }}##a[href="http://testcase-attribute.com/"]</pre> |
75 </section> | 75 </section> |
76 | 76 |
77 | 77 |
78 <section class="site-panel"> | 78 <section class="site-panel"> |
79 <h2>Attribute Selector 3</h2> | 79 <h2>Attribute Selector 3</h2> |
80 <div class="testcase-container"> | 80 <div class="testcase-container"> |
81 <div class="testcase-contentaside stripes-red" style="width:199px;height:51p
x;">Target</div> | 81 <div class="testcase-contentaside stripes-red" style="width:199px;height:51p
x;">Target</div> |
82 <div class="testcase-content stripes-grey">Content</div> | 82 <div class="testcase-content stripes-grey">Content</div> |
83 </div> | 83 </div> |
84 <h3>Filters</h3> | 84 <h3>Filters</h3> |
85 <pre>{{ site_url|strip_proto }}##div[style="width:199px;height:51px;"]</pre> | 85 <pre>{{ site_url|domain }}##div[style="width:199px;height:51px;"]</pre> |
86 </section> | 86 </section> |
87 | 87 |
88 <section class="site-panel"> | 88 <section class="site-panel"> |
89 <h2>Starts with Selector 1</h2> | 89 <h2>Starts with Selector 1</h2> |
90 <div class="testcase-container"> | 90 <div class="testcase-container"> |
91 <a href="http://testcase-attributestartswith.com/test" class="testcase-conte
ntaside stripes-red">Target</a> | 91 <a href="http://testcase-attributestartswith.com/test" class="testcase-conte
ntaside stripes-red">Target</a> |
92 <div class="testcase-content stripes-grey">Content</div> | 92 <div class="testcase-content stripes-grey">Content</div> |
93 </div> | 93 </div> |
94 <h3>Filters</h3> | 94 <h3>Filters</h3> |
95 <pre>{{ site_url|strip_proto }}##a[href^="http://testcase-attributestartswith.
com/"]</pre> | 95 <pre>{{ site_url|domain }}##a[href^="http://testcase-attributestartswith.com/"
]</pre> |
96 </section> | 96 </section> |
97 | 97 |
98 | 98 |
99 <section class="site-panel"> | 99 <section class="site-panel"> |
100 <h2>Starts with Selector 2</h2> | 100 <h2>Starts with Selector 2</h2> |
101 <div class="testcase-container"> | 101 <div class="testcase-container"> |
102 <div class="testcase-contentaside stripes-red" style="width:201px;height:51p
x; color: white;">Target</div> | 102 <div class="testcase-contentaside stripes-red" style="width:201px;height:51p
x; color: white;">Target</div> |
103 <div class="testcase-content stripes-grey">Content</div> | 103 <div class="testcase-content stripes-grey">Content</div> |
104 </div> | 104 </div> |
105 <h3>Filters</h3> | 105 <h3>Filters</h3> |
106 <pre>{{ site_url|strip_proto }}##div[style^="width:201px;height:51px;"]</pre> | 106 <pre>{{ site_url|domain }}##div[style^="width:201px;height:51px;"]</pre> |
107 </section> | 107 </section> |
108 | 108 |
109 <section class="site-panel"> | 109 <section class="site-panel"> |
110 <h2>Ends with Selector</h2> | 110 <h2>Ends with Selector</h2> |
111 <div class="testcase-container"> | 111 <div class="testcase-container"> |
112 <div class="testcase-contentaside stripes-red" style="color:white;width:202p
x;height:51px;">Target</div> | 112 <div class="testcase-contentaside stripes-red" style="color:white;width:202p
x;height:51px;">Target</div> |
113 <div class="testcase-content stripes-grey">Content</div> | 113 <div class="testcase-content stripes-grey">Content</div> |
114 </div> | 114 </div> |
115 <h3>Filters</h3> | 115 <h3>Filters</h3> |
116 <pre>{{ site_url|strip_proto }}##div[style$="width:202px;height:51px;"]</pre> | 116 <pre>{{ site_url|domain }}##div[style$="width:202px;height:51px;"]</pre> |
117 </section> | 117 </section> |
118 | 118 |
119 <section class="site-panel"> | 119 <section class="site-panel"> |
120 <h2>Contains Selector</h2> | 120 <h2>Contains Selector</h2> |
121 <div class="testcase-container"> | 121 <div class="testcase-container"> |
122 <div class="testcase-contentaside stripes-red" style="width:203px;height:51p
x;color:white;">Target</div> | 122 <div class="testcase-contentaside stripes-red" style="width:203px;height:51p
x;color:white;">Target</div> |
123 <div class="testcase-content stripes-grey">Content</div> | 123 <div class="testcase-content stripes-grey">Content</div> |
124 </div> | 124 </div> |
125 <h3>Filters</h3> | 125 <h3>Filters</h3> |
126 <pre>{{ site_url|strip_proto }}##div[style*="width:203px;height:51px;"]</pre> | 126 <pre>{{ site_url|domain }}##div[style*="width:203px;height:51px;"]</pre> |
127 </section> | 127 </section> |
LEFT | RIGHT |