mirror of
https://github.com/gorhill/uBlock.git
synced 2024-08-31 08:09:38 +02:00
Addtionally, a dedicated test page has been added: https://gorhill.github.io/uBlock/tests/scriptlet-injection-filters-1.html
195 lines
4.6 KiB
HTML
195 lines
4.6 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Scriptlet injection filters / setTimeout-if</title>
|
|
<style>
|
|
.filters {
|
|
font-family: monospace;
|
|
white-space: pre;
|
|
}
|
|
.filters td > b {
|
|
display: inline-block;
|
|
height: 1em;
|
|
margin-left: 2px;
|
|
width: 2em;
|
|
}
|
|
.filters td > b.G {
|
|
background-color: green;
|
|
}
|
|
.filters td > b.R {
|
|
background-color: red;
|
|
}
|
|
.tests {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
}
|
|
.tile {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
margin: 0 20px 10px 0;
|
|
min-width: 200px;
|
|
}
|
|
.tile div {
|
|
align-items: center;
|
|
color: white;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.tile > div {
|
|
height: 50px;
|
|
position: relative;
|
|
}
|
|
.tile > div > div {
|
|
height: 100%;
|
|
left: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.tile > code {
|
|
align-self: center;
|
|
}
|
|
.cell.bad {
|
|
background-color: red;
|
|
}
|
|
.cell.bad.notexecuted {
|
|
background-color: green;
|
|
}
|
|
.cell.good {
|
|
background-color: green;
|
|
}
|
|
.cell.good.notexecuted {
|
|
background-color: red;
|
|
}
|
|
.cell::before {
|
|
content: 'executed';
|
|
}
|
|
.cell.notexecuted::before {
|
|
content: 'not executed';
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Scriptlet injection filters / setTimeout-if</h1>
|
|
<p><a href="./.">Back</a>
|
|
<br><br></p>
|
|
<h3>Filters</h3>
|
|
<p>The filters below must be tried one by one, not all at the same
|
|
time. When you try a filter, ensure the result is what is expected.</p>
|
|
<noscript>Enable JavaScript to see needed filter</noscript>
|
|
<table class="filters">
|
|
<tr><th>Filter<th>Expected
|
|
<tr><td>None<td><b class="R"> </b><b class="R"> </b><b class="G"> </b><b class="G"> </b>
|
|
</table>
|
|
|
|
<h3>Results</h3>
|
|
<div id="sif" class="tests">
|
|
|
|
<script>
|
|
function createSetTimeout(fn, delay) {
|
|
self.addEventListener('load', ( ) => {
|
|
self.setTimeout(fn, delay)
|
|
});
|
|
}
|
|
function removeClass(sel, cls) {
|
|
document.querySelector(sel).classList.remove(cls);
|
|
}
|
|
</script>
|
|
|
|
|
|
<div id="a1" class="tile">
|
|
<div class="cell bad notexecuted"></div>
|
|
<code>bad, 33</code>
|
|
<script>
|
|
createSetTimeout(
|
|
function() {
|
|
'bad';
|
|
removeClass('#a1 .cell', 'notexecuted');
|
|
},
|
|
33
|
|
);
|
|
</script>
|
|
</div>
|
|
|
|
<div id="a2" class="tile">
|
|
<div class="cell bad notexecuted"></div>
|
|
<code>bad, 66</code>
|
|
<script>
|
|
createSetTimeout(
|
|
function() {
|
|
'bad';
|
|
removeClass('#a2 .cell', 'notexecuted');
|
|
},
|
|
66
|
|
);
|
|
</script>
|
|
</div>
|
|
|
|
<div id="a3" class="tile">
|
|
<div class="cell good notexecuted"></div>
|
|
<code>good, 33</code>
|
|
<script>
|
|
createSetTimeout(
|
|
function() {
|
|
'good';
|
|
removeClass('#a3 .cell', 'notexecuted');
|
|
},
|
|
33
|
|
);
|
|
</script>
|
|
</div>
|
|
|
|
<div id="a4" class="tile">
|
|
<div class="cell good notexecuted"></div>
|
|
<code>good, 66</code>
|
|
<script>
|
|
createSetTimeout(
|
|
function() {
|
|
'good';
|
|
removeClass('#a4 .cell', 'notexecuted');
|
|
},
|
|
66
|
|
);
|
|
</script>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script>
|
|
const hostname = self.location.hostname;
|
|
const fragment = document.createDocumentFragment();
|
|
const filters = [
|
|
[ [ '!bad' ], 'GGGG' ],
|
|
[ [ 'good' ], 'GGGG' ],
|
|
[ [ '', '!33' ], 'GRRG' ],
|
|
[ [ '', '66' ], 'GRRG' ],
|
|
[ [ '!bad', '!33' ], 'GGRG' ],
|
|
[ [ 'good', '66' ], 'GGRG' ],
|
|
[ [ '!bad', '33' ], 'GGGR' ],
|
|
[ [ 'good', '!66' ], 'GGGR' ],
|
|
[ [ 'bad', '!33' ], 'GRRR' ],
|
|
[ [ '!good', '66' ], 'GRRR' ],
|
|
];
|
|
for ( const [ args, result ] of filters ) {
|
|
const tr = document.createElement('tr');
|
|
let td = document.createElement('td');
|
|
td.textContent = `${hostname}##+js(stif, ${args.join(', ')})`;
|
|
tr.appendChild(td);
|
|
td = document.createElement('td');
|
|
for ( let i = 0; i < result.length; i++ ) {
|
|
const b = document.createElement('b');
|
|
b.className = result.charAt(i);
|
|
b.textContent = '\xA0';
|
|
td.appendChild(b);
|
|
}
|
|
tr.appendChild(td);
|
|
fragment.appendChild(tr);
|
|
}
|
|
document.querySelector('.filters').appendChild(fragment);
|
|
</script>
|
|
</body>
|
|
</html>
|