f5c3abb8f7
This will default to generating test images at the device pixel ratio of the machine the tests are created on unless the test explicitly defines and output scale using the `outputScale` setting. This makes the test look visually like they would on the machine they are running on. It also allows us to test different output scales.
176 lines
7.3 KiB
HTML
176 lines
7.3 KiB
HTML
<!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="800" height="1000" 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" id="image1" />
|
|
<image x="0" y="0" id="image2" />
|
|
</g>
|
|
<rect id="diffrect" filter="url(#showDifferences)" pointer-events="none" x="0" y="0" width="100%" height="100%" />
|
|
</svg>
|
|
</div>
|
|
</body>
|
|
</html>
|