You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
175 lines
7.4 KiB
175 lines
7.4 KiB
<!DOCTYPE html> |
|
<!-- |
|
Copyright 2012 Mozilla Foundation |
|
|
|
Version: MPL 1.1/GPL 2.0/LGPL 2.1 |
|
|
|
The contents of this file are subject to the Mozilla Public License Version |
|
1.1 (the "License"); you may not use this file except in compliance with |
|
the License. You may obtain a copy of the License at |
|
|
|
http://www.mozilla.org/MPL |
|
|
|
Software distributed under the License is distributed on an "AS IS" basis, |
|
WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License |
|
for the specific language governing rights and limitations under the |
|
License. |
|
|
|
Alternatively, the contents of this file may be used under the terms of |
|
either the GNU General Public License Version 2 or later (the "GPL"), or |
|
the GNU Lesser General Public License Version 2.1 or later (the "LGPL"), |
|
in which case the provisions of the GPL or the LGPL are applicable instead |
|
of those above. If you wish to allow use of your version of this file only |
|
under the terms of either the GPL or the LGPL, and not to allow others to |
|
use your version of this file under the terms of the MPL, indicate your |
|
decision by deleting the provisions above and replace them with the notice |
|
and other provisions required by the LGPL or the GPL. If you do not delete |
|
the provisions above, a recipient may use your version of this file under |
|
the terms of any one of the MPL, the GPL or the LGPL. |
|
|
|
Original author: L. David Baron <dbaron@dbaron.org> |
|
--> |
|
<html> |
|
<head> |
|
<title>Reftest analyzer</title> |
|
<meta charset="utf-8"> |
|
<link rel="stylesheet" href="reftest-analyzer.css"> |
|
<script src="reftest-analyzer.js"></script> |
|
</head> |
|
<body> |
|
<div id="entry"> |
|
<h1>Reftest analyzer</h1> |
|
<p> |
|
Paste your log into this textarea:<br> |
|
<textarea cols="80" rows="10" id="logEntry"></textarea><br> |
|
<input type="button" value="Process pasted log" id="logPasted"> |
|
</p> |
|
<p> |
|
<br>...or load it from a file:<br> |
|
<input type="file" id="fileEntry"> |
|
</p> |
|
</div> |
|
<div id="loading">Loading log...</div> |
|
<div id="viewer"> |
|
<div id="pixelarea"> |
|
<div id="pixelinfo"> |
|
<table> |
|
<tbody> |
|
<tr> |
|
<th>Pixel at:</th> |
|
<td colspan="2" id="coords"></td> |
|
</tr> |
|
<tr> |
|
<th>Test:</th> |
|
<td id="pix1rgb"></td> |
|
<td id="pix1hex"></td> |
|
</tr> |
|
<tr> |
|
<th>Reference:</th> |
|
<td id="pix2rgb"></td> |
|
<td id="pix2hex"></td> |
|
</tr> |
|
</tbody> |
|
</table> |
|
<div> |
|
<div id="pixelhint">? |
|
<div> |
|
<p>Move the mouse over the reftest image on the right to show |
|
magnified pixels on the left. The color information above is for |
|
the pixel centered in the magnified view.</p> |
|
<p>The test is shown in the upper triangle of each pixel and |
|
the reference is shown in the lower triangle.</p> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div id="magnification"> |
|
<svg xmlns="http://www.w3.org/2000/svg" width="84" height="84" shape-rendering="optimizeSpeed"> |
|
<g id="mag" /> |
|
</svg> |
|
</div> |
|
</div> |
|
<div id="itemlist"> |
|
<table id="itemtable"></table> |
|
</div> |
|
<div id="images"> |
|
<form id="imgcontrols"> |
|
<label> |
|
<input type="radio" name="which" id="testImage" value="0" checked="checked"> Test |
|
</label> |
|
<label> |
|
<input type="radio" name="which" id="referenceImage" value="1"> Reference |
|
</label> |
|
<label> |
|
<input type="checkbox" id="differences"> Circle differences |
|
</label> |
|
</form> |
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="800px" height="1130px" viewbox="0 0 800 1130" id="svg"> |
|
<defs> |
|
<!-- use sRGB to avoid loss of data --> |
|
<filter id="showDifferences" x="0%" y="0%" width="100%" height="100%" |
|
style="color-interpolation-filters: sRGB"> |
|
<feImage id="feimage1" result="img1" xlink:href="#image1" /> |
|
<feImage id="feimage2" result="img2" xlink:href="#image2" /> |
|
<!-- inv1 and inv2 are the images with RGB inverted --> |
|
<feComponentTransfer result="inv1" in="img1"> |
|
<feFuncR type="linear" slope="-1" intercept="1" /> |
|
<feFuncG type="linear" slope="-1" intercept="1" /> |
|
<feFuncB type="linear" slope="-1" intercept="1" /> |
|
</feComponentTransfer> |
|
<feComponentTransfer result="inv2" in="img2"> |
|
<feFuncR type="linear" slope="-1" intercept="1" /> |
|
<feFuncG type="linear" slope="-1" intercept="1" /> |
|
<feFuncB type="linear" slope="-1" intercept="1" /> |
|
</feComponentTransfer> |
|
<!-- w1 will have non-white pixels anywhere that img2 |
|
is brighter than img1, and w2 for the reverse. |
|
It would be nice not to have to go through these |
|
intermediate states, but feComposite |
|
type="arithmetic" can't transform the RGB channels |
|
and leave the alpha channel untouched. --> |
|
<feComposite result="w1" in="img1" in2="inv2" operator="arithmetic" k2="1" k3="1" /> |
|
<feComposite result="w2" in="img2" in2="inv1" operator="arithmetic" k2="1" k3="1" /> |
|
<!-- c1 will have non-black pixels anywhere that img2 |
|
is brighter than img1, and c2 for the reverse --> |
|
<feComponentTransfer result="c1" in="w1"> |
|
<feFuncR type="linear" slope="-1" intercept="1" /> |
|
<feFuncG type="linear" slope="-1" intercept="1" /> |
|
<feFuncB type="linear" slope="-1" intercept="1" /> |
|
</feComponentTransfer> |
|
<feComponentTransfer result="c2" in="w2"> |
|
<feFuncR type="linear" slope="-1" intercept="1" /> |
|
<feFuncG type="linear" slope="-1" intercept="1" /> |
|
<feFuncB type="linear" slope="-1" intercept="1" /> |
|
</feComponentTransfer> |
|
<!-- c will be nonblack (and fully on) for every pixel+component where there are differences --> |
|
<feComposite result="c" in="c1" in2="c2" operator="arithmetic" k2="255" k3="255" /> |
|
<!-- 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 --> |
|
<feMorphology result="dila4" in="a" operator="dilate" radius="4" /> |
|
<!-- a, dilated by 1 pixel --> |
|
<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 --> |
|
<feComposite result="highlight" in="dila4" in2="dila1" operator="out" /> |
|
|
|
<feFlood result="red" flood-color="red" /> |
|
<feComposite result="redhighlight" in="red" in2="highlight" operator="in" /> |
|
<feFlood result="black" flood-color="black" flood-opacity="0.5" /> |
|
<feMerge> |
|
<feMergeNode in="black" /> |
|
<feMergeNode in="redhighlight" /> |
|
</feMerge> |
|
</filter> |
|
</defs> |
|
<g id="magnify"> |
|
<image x="0" y="0" width="100%" height="100%" id="image1" /> |
|
<image x="0" y="0" width="100%" height="100%" id="image2" /> |
|
</g> |
|
<rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" /> |
|
</svg> |
|
</div> |
|
</body> |
|
</html>
|
|
|