LEFT | RIGHT |
1 title = Element Hiding Emulation / Extended Selectors | 1 title = Element Hiding Emulation / Extended Selectors |
2 template = testcase | 2 template = testcase |
3 | 3 |
4 {% set testcase_moreinfo = [ | 4 {% set testcase_moreinfo = [ |
5 ("Filter Cheatsheet - Extended Selectors", "https://adblockplus.org/filter-che
atsheet#elementhideemulation"), | 5 ("Filter Cheatsheet - Extended Selectors", "https://adblockplus.org/filter-che
atsheet#elementhideemulation"), |
6 ] %} | 6 ] %} |
7 | 7 |
8 <section class="site-panel"> | 8 <section class="site-panel"> |
9 <h2>Element Hiding Emulation / Extended Selectors </h2> | 9 <h2>Element Hiding Emulation / Extended Selectors </h2> |
10 <p>Check that element hiding emulation functionality is working as expected.</
p> | 10 <p>Check that element hiding emulation 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 while any green elements should not 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 while any green elements should not be hidden.</p> |
12 </section> | 12 </section> |
13 | 13 |
14 <section class="site-panel"> | 14 <section class="site-panel"> |
15 <h2>Basic :-abp-properties() usage</h2> | 15 <h2>Basic :-abp-properties() usage</h2> |
16 <div class="testcase-container"> | 16 <div class="testcase-container"> |
17 <div class="testcase-contentaside stripes-red testcase-es-prop">Target</div> | 17 <div class="testcase-contentaside stripes-red testcase-es-prop">Target</div> |
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 }}#?#div:-abp-properties(width: 213px)</pre> | 21 <pre>{{ site_url|domain }}#?#div:-abp-properties(width: 213px)</pre> |
22 </section> | 22 </section> |
23 | 23 |
24 <section class="site-panel"> | 24 <section class="site-panel"> |
25 <h2>Basic :-abp-has() usage</h2> | 25 <h2>Basic :-abp-has() usage</h2> |
26 <div class="testcase-container"> | 26 <div class="testcase-container"> |
27 <div class="testcase-contentaside stripes-red"> | 27 <div class="testcase-contentaside stripes-red"> |
28 Target | 28 Target |
29 <div> | 29 <div> |
30 <img class="testcase-es-has"> | 30 <img class="testcase-es-has"> |
31 </div> | 31 </div> |
32 </div> | 32 </div> |
33 <div class="testcase-content stripes-grey">Content</div> | 33 <div class="testcase-content stripes-grey">Content</div> |
34 </div> | 34 </div> |
35 <h3>Filters</h3> | 35 <h3>Filters</h3> |
36 <pre>{{ site_url|strip_proto }}#?#div:-abp-has(>div>img.testcase-es-has)</pre> | 36 <pre>{{ site_url|domain }}#?#div:-abp-has(>div>img.testcase-es-has)</pre> |
37 </section> | 37 </section> |
38 | 38 |
39 | 39 |
40 <section class="site-panel"> | 40 <section class="site-panel"> |
41 <h2>Basic :-abp-contains() usage</h2> | 41 <h2>Basic :-abp-contains() usage</h2> |
42 <div class="testcase-container"> | 42 <div class="testcase-container"> |
43 <span class="testcase-contentaside stripes-red">ESContainsTarget</span> | 43 <span class="testcase-contentaside stripes-red">ESContainsTarget</span> |
44 <div class="testcase-content stripes-grey">Content</div> | 44 <div class="testcase-content stripes-grey">Content</div> |
45 </div> | 45 </div> |
46 <h3>Filters</h3> | 46 <h3>Filters</h3> |
47 <pre>{{ site_url|strip_proto }}#?#span:-abp-contains(ESContainsTarget)</pre> | 47 <pre>{{ site_url|domain }}#?#span:-abp-contains(ESContainsTarget)</pre> |
48 </section> | 48 </section> |
49 | 49 |
50 <section class="site-panel"> | 50 <section class="site-panel"> |
51 <h2>Chained extended selectors</h2> | 51 <h2>Chained extended selectors</h2> |
52 <div class="testcase-container"> | 52 <div class="testcase-container"> |
53 <div class="testcase-contentaside stripes-red"> | 53 <div class="testcase-contentaside stripes-red"> |
54 <div class="testcase-es-chained">Target</div> | 54 <div class="testcase-es-chained">Target</div> |
55 </div> | 55 </div> |
56 <div class="testcase-content stripes-grey">Content</div> | 56 <div class="testcase-content stripes-grey">Content</div> |
57 </div> | 57 </div> |
58 <h3>Filters</h3> | 58 <h3>Filters</h3> |
59 <pre>{{ site_url|strip_proto }}#?#div:-abp-has(> div:-abp-properties(width: 21
4px))</pre> | 59 <pre>{{ site_url|domain }}#?#div:-abp-has(> div:-abp-properties(width: 214px))
</pre> |
60 </section> | 60 </section> |
61 | 61 |
62 | 62 |
63 <section class="site-panel"> | 63 <section class="site-panel"> |
64 <h2>Case insensative extended selectors</h2> | 64 <h2>Case insensative extended selectors</h2> |
65 <div class="testcase-container"> | 65 <div class="testcase-container"> |
66 <div class="testcase-contentaside stripes-red testcase-es-case">Target</div> | 66 <div class="testcase-contentaside stripes-red testcase-es-case">Target</div> |
67 <div class="testcase-content stripes-grey">Content</div> | 67 <div class="testcase-content stripes-grey">Content</div> |
68 </div> | 68 </div> |
69 <h3>Filters</h3> | 69 <h3>Filters</h3> |
70 <pre>{{ site_url|strip_proto }}#?#div:-abp-properties(WiDtH: 215px)</pre> | 70 <pre>{{ site_url|domain }}#?#div:-abp-properties(WiDtH: 215px)</pre> |
71 </section> | 71 </section> |
72 | 72 |
73 <section class="site-panel"> | 73 <section class="site-panel"> |
74 <h2>Wildcard in extended selector</h2> | 74 <h2>Wildcard in extended selector</h2> |
75 <div class="testcase-container"> | 75 <div class="testcase-container"> |
76 <div class="testcase-contentaside stripes-red testcase-es-wildcard">Target</
div> | 76 <div class="testcase-contentaside stripes-red testcase-es-wildcard">Target</
div> |
77 <div class="testcase-content stripes-grey">Content</div> | 77 <div class="testcase-content stripes-grey">Content</div> |
78 </div> | 78 </div> |
79 <h3>Filters</h3> | 79 <h3>Filters</h3> |
80 <pre>{{ site_url|strip_proto }}#?#div:-abp-properties(cursor:*)</pre> | 80 <pre>{{ site_url|domain }}#?#div:-abp-properties(cursor:*)</pre> |
81 </section> | 81 </section> |
82 | 82 |
83 <section class="site-panel"> | 83 <section class="site-panel"> |
84 <h2>Regular expression in :-abp-properties()</h2> | 84 <h2>Regular expression in :-abp-properties()</h2> |
85 <div class="testcase-container"> | 85 <div class="testcase-container"> |
86 <div class="testcase-contentaside stripes-red testcase-es-regex-1">Target</d
iv> | 86 <div class="testcase-contentaside stripes-red testcase-es-regex-1">Target</d
iv> |
87 <div class="testcase-contentaside stripes-red testcase-es-regex-2">Target</d
iv> | 87 <div class="testcase-contentaside stripes-red testcase-es-regex-2">Target</d
iv> |
88 <div class="testcase-contentaside stripes-green testcase-es-regex-3">Not a T
arget</div> | 88 <div class="testcase-contentaside stripes-green testcase-es-regex-3">Not a T
arget</div> |
89 <div class="testcase-content stripes-grey">Content</div> | 89 <div class="testcase-content stripes-grey">Content</div> |
90 </div> | 90 </div> |
91 <h3>Filters</h3> | 91 <h3>Filters</h3> |
92 <pre>{{ site_url|strip_proto }}#?#div:-abp-properties(/width: 12[1-5]px;/)</pr
e> | 92 <pre>{{ site_url|domain }}#?#div:-abp-properties(/width: 12[1-5]px;/)</pre> |
93 </section> | 93 </section> |
94 | 94 |
95 | 95 |
96 <section class="site-panel"> | 96 <section class="site-panel"> |
97 <h2>Regular expression in :-abp-contains()</h2> | 97 <h2>Regular expression in :-abp-contains()</h2> |
98 <div class="testcase-container"> | 98 <div class="testcase-container"> |
99 <div class="testcase-contentaside stripes-red">ESContainsRegEx1</div> | 99 <div class="testcase-contentaside stripes-red">ESContainsRegEx1</div> |
100 <div class="testcase-contentaside stripes-red">ESContainsRegEx2</div> | 100 <div class="testcase-contentaside stripes-red">ESContainsRegEx2</div> |
101 <div class="testcase-contentaside stripes-red">ESContainsRegEx3</div> | 101 <div class="testcase-contentaside stripes-red">ESContainsRegEx3</div> |
102 <div class="testcase-content stripes-grey">Content</div> | 102 <div class="testcase-content stripes-grey">Content</div> |
103 </div> | 103 </div> |
104 <h3>Filters</h3> | 104 <h3>Filters</h3> |
105 <pre>{{ site_url|strip_proto }}#?#div > div:-abp-contains(/ESContainsRegEx\d/)
</pre> | 105 <pre>{{ site_url|domain }}#?#div > div:-abp-contains(/ESContainsRegEx\d/)</pre
> |
106 </section> | 106 </section> |
LEFT | RIGHT |