Improvements to the reftest analyzer.
- Scroll the selected reference into view (makes it easier to tell which pdf you're looking at) - Show the keyboard shortcuts (easier for new people) - Keep the test/ref controls visible (if you scroll you can now tell if you're looking at a test or ref)
This commit is contained in:
Brendan Dahl
parent
b753271ca6
commit
c5404bee0e
@ -75,8 +75,7 @@ a {
|
|||||||
width: 320px;
|
width: 320px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#images {
|
#imagepane {
|
||||||
overflow: auto;
|
|
||||||
position: fixed;
|
position: fixed;
|
||||||
left: 340px;
|
left: 340px;
|
||||||
right: 0;
|
right: 0;
|
||||||
@ -84,6 +83,15 @@ a {
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#images {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 22px;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
#imgcontrols {
|
#imgcontrols {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
display: block;
|
display: block;
|
||||||
@ -179,3 +187,8 @@ a {
|
|||||||
#differences {
|
#differences {
|
||||||
margin: 0 0 10px 20px;
|
margin: 0 0 10px 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#shortcuts {
|
||||||
|
float: right;
|
||||||
|
font-size: 10px;
|
||||||
|
}
|
||||||
|
|||||||
@ -92,7 +92,7 @@ Original author: L. David Baron <dbaron@dbaron.org>
|
|||||||
<div id="itemlist">
|
<div id="itemlist">
|
||||||
<table id="itemtable"></table>
|
<table id="itemtable"></table>
|
||||||
</div>
|
</div>
|
||||||
<div id="images">
|
<div id="imagepane">
|
||||||
<form id="imgcontrols">
|
<form id="imgcontrols">
|
||||||
<label>
|
<label>
|
||||||
<input type="radio" name="which" id="testImage" value="0" checked="checked"> Test
|
<input type="radio" name="which" id="testImage" value="0" checked="checked"> Test
|
||||||
@ -103,73 +103,76 @@ Original author: L. David Baron <dbaron@dbaron.org>
|
|||||||
<label>
|
<label>
|
||||||
<input type="checkbox" id="differences"> Circle differences
|
<input type="checkbox" id="differences"> Circle differences
|
||||||
</label>
|
</label>
|
||||||
|
<span id="shortcuts">Shortcuts: n=next p=previous t=toggle d=differences</span>
|
||||||
</form>
|
</form>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="1000" id="svg">
|
<div id="images">
|
||||||
<defs>
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800" height="1000" id="svg">
|
||||||
<!-- use sRGB to avoid loss of data -->
|
<defs>
|
||||||
<filter id="showDifferences" x="0%" y="0%" width="100%" height="100%"
|
<!-- use sRGB to avoid loss of data -->
|
||||||
style="color-interpolation-filters: sRGB">
|
<filter id="showDifferences" x="0%" y="0%" width="100%" height="100%"
|
||||||
<feImage id="feimage1" result="img1" xlink:href="#image1" />
|
style="color-interpolation-filters: sRGB">
|
||||||
<feImage id="feimage2" result="img2" xlink:href="#image2" />
|
<feImage id="feimage1" result="img1" xlink:href="#image1" />
|
||||||
<!-- inv1 and inv2 are the images with RGB inverted -->
|
<feImage id="feimage2" result="img2" xlink:href="#image2" />
|
||||||
<feComponentTransfer result="inv1" in="img1">
|
<!-- inv1 and inv2 are the images with RGB inverted -->
|
||||||
<feFuncR type="linear" slope="-1" intercept="1" />
|
<feComponentTransfer result="inv1" in="img1">
|
||||||
<feFuncG type="linear" slope="-1" intercept="1" />
|
<feFuncR type="linear" slope="-1" intercept="1" />
|
||||||
<feFuncB type="linear" slope="-1" intercept="1" />
|
<feFuncG type="linear" slope="-1" intercept="1" />
|
||||||
</feComponentTransfer>
|
<feFuncB type="linear" slope="-1" intercept="1" />
|
||||||
<feComponentTransfer result="inv2" in="img2">
|
</feComponentTransfer>
|
||||||
<feFuncR type="linear" slope="-1" intercept="1" />
|
<feComponentTransfer result="inv2" in="img2">
|
||||||
<feFuncG type="linear" slope="-1" intercept="1" />
|
<feFuncR type="linear" slope="-1" intercept="1" />
|
||||||
<feFuncB type="linear" slope="-1" intercept="1" />
|
<feFuncG type="linear" slope="-1" intercept="1" />
|
||||||
</feComponentTransfer>
|
<feFuncB type="linear" slope="-1" intercept="1" />
|
||||||
<!-- w1 will have non-white pixels anywhere that img2
|
</feComponentTransfer>
|
||||||
is brighter than img1, and w2 for the reverse.
|
<!-- w1 will have non-white pixels anywhere that img2
|
||||||
It would be nice not to have to go through these
|
is brighter than img1, and w2 for the reverse.
|
||||||
intermediate states, but feComposite
|
It would be nice not to have to go through these
|
||||||
type="arithmetic" can't transform the RGB channels
|
intermediate states, but feComposite
|
||||||
and leave the alpha channel untouched. -->
|
type="arithmetic" can't transform the RGB channels
|
||||||
<feComposite result="w1" in="img1" in2="inv2" operator="arithmetic" k2="1" k3="1" />
|
and leave the alpha channel untouched. -->
|
||||||
<feComposite result="w2" in="img2" in2="inv1" operator="arithmetic" k2="1" k3="1" />
|
<feComposite result="w1" in="img1" in2="inv2" operator="arithmetic" k2="1" k3="1" />
|
||||||
<!-- c1 will have non-black pixels anywhere that img2
|
<feComposite result="w2" in="img2" in2="inv1" operator="arithmetic" k2="1" k3="1" />
|
||||||
is brighter than img1, and c2 for the reverse -->
|
<!-- c1 will have non-black pixels anywhere that img2
|
||||||
<feComponentTransfer result="c1" in="w1">
|
is brighter than img1, and c2 for the reverse -->
|
||||||
<feFuncR type="linear" slope="-1" intercept="1" />
|
<feComponentTransfer result="c1" in="w1">
|
||||||
<feFuncG type="linear" slope="-1" intercept="1" />
|
<feFuncR type="linear" slope="-1" intercept="1" />
|
||||||
<feFuncB type="linear" slope="-1" intercept="1" />
|
<feFuncG type="linear" slope="-1" intercept="1" />
|
||||||
</feComponentTransfer>
|
<feFuncB type="linear" slope="-1" intercept="1" />
|
||||||
<feComponentTransfer result="c2" in="w2">
|
</feComponentTransfer>
|
||||||
<feFuncR type="linear" slope="-1" intercept="1" />
|
<feComponentTransfer result="c2" in="w2">
|
||||||
<feFuncG type="linear" slope="-1" intercept="1" />
|
<feFuncR type="linear" slope="-1" intercept="1" />
|
||||||
<feFuncB type="linear" slope="-1" intercept="1" />
|
<feFuncG type="linear" slope="-1" intercept="1" />
|
||||||
</feComponentTransfer>
|
<feFuncB type="linear" slope="-1" intercept="1" />
|
||||||
<!-- c will be nonblack (and fully on) for every pixel+component where there are differences -->
|
</feComponentTransfer>
|
||||||
<feComposite result="c" in="c1" in2="c2" operator="arithmetic" k2="255" k3="255" />
|
<!-- c will be nonblack (and fully on) for every pixel+component where there are differences -->
|
||||||
<!-- a will be opaque for every pixel with differences and transparent for all others -->
|
<feComposite result="c" in="c1" in2="c2" operator="arithmetic" k2="255" k3="255" />
|
||||||
<feColorMatrix result="a" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 0 0" />
|
<!-- a will be opaque for every pixel with differences and transparent for all others -->
|
||||||
|
<feColorMatrix result="a" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 0 0" />
|
||||||
|
|
||||||
<!-- a, dilated by 4 pixels -->
|
<!-- a, dilated by 4 pixels -->
|
||||||
<feMorphology result="dila4" in="a" operator="dilate" radius="4" />
|
<feMorphology result="dila4" in="a" operator="dilate" radius="4" />
|
||||||
<!-- a, dilated by 1 pixel -->
|
<!-- a, dilated by 1 pixel -->
|
||||||
<feMorphology result="dila1" in="a" operator="dilate" radius="1" />
|
<feMorphology result="dila1" in="a" operator="dilate" radius="1" />
|
||||||
|
|
||||||
<!-- all the pixels in the 3-pixel dilation of a but not in the 1-pixel dilation of a, to highlight the diffs -->
|
<!-- all the pixels in the 3-pixel dilation of a but not in the 1-pixel dilation of a, to highlight the diffs -->
|
||||||
<feComposite result="highlight" in="dila4" in2="dila1" operator="out" />
|
<feComposite result="highlight" in="dila4" in2="dila1" operator="out" />
|
||||||
|
|
||||||
<feFlood result="red" flood-color="red" />
|
<feFlood result="red" flood-color="red" />
|
||||||
<feComposite result="redhighlight" in="red" in2="highlight" operator="in" />
|
<feComposite result="redhighlight" in="red" in2="highlight" operator="in" />
|
||||||
<feFlood result="black" flood-color="black" flood-opacity="0.5" />
|
<feFlood result="black" flood-color="black" flood-opacity="0.5" />
|
||||||
<feMerge>
|
<feMerge>
|
||||||
<feMergeNode in="black" />
|
<feMergeNode in="black" />
|
||||||
<feMergeNode in="redhighlight" />
|
<feMergeNode in="redhighlight" />
|
||||||
</feMerge>
|
</feMerge>
|
||||||
</filter>
|
</filter>
|
||||||
</defs>
|
</defs>
|
||||||
<g id="magnify">
|
<g id="magnify">
|
||||||
<image x="0" y="0" id="image1" />
|
<image x="0" y="0" id="image1" />
|
||||||
<image x="0" y="0" id="image2" />
|
<image x="0" y="0" id="image2" />
|
||||||
</g>
|
</g>
|
||||||
<rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" />
|
<rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" />
|
||||||
</svg>
|
</svg>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
@ -336,6 +336,7 @@ window.onload = function () {
|
|||||||
}
|
}
|
||||||
gSelected = i;
|
gSelected = i;
|
||||||
ID("url" + gSelected).classList.add("selected");
|
ID("url" + gSelected).classList.add("selected");
|
||||||
|
ID("url" + gSelected).scrollIntoView();
|
||||||
const item = gTestItems[i];
|
const item = gTestItems[i];
|
||||||
const cell = ID("images");
|
const cell = ID("images");
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user