CocoRoboLabs
/
CocoRoboDesktop


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178
							<!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="imagepane">
    <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>
      <span id="shortcuts">Shortcuts: n=next p=previous t=toggle d=differences</span>
    </form>
    <div id="images">
      <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>
  </div>
</body>
</html>