templates/test_result.mako

   1 <!DOCTYPE html>
   2 <html lang="en">
   3   <head>
   4     <meta charset="UTF-8">
   5     <title>${testname} - Details</title>
   6     <link rel="stylesheet" href="${css}">
   7   % if value.images:
   8     <script>module = {}</script>
   9     <script src="https://unpkg.com/pixelmatch"></script>
  10     <script>
  11       var diff_complete = false;
  12
  13       function readImageData(imageID) {
  14         var image = document.getElementById(imageID);
  15         var canvas = document.createElement("canvas");
  16         canvas.width = image.naturalWidth;
  17         canvas.height = image.naturalHeight;
  18         canvas.getContext("2d").drawImage(image, 0, 0);
  19         return canvas.getContext("2d").getImageData(0, 0, image.naturalWidth, image.naturalHeight);
  20       }
  21
  22       function show_image(src) {
  23         document.getElementById("diffOutput").innerHTML = '<img src="' + src + '">'
  24       }
  25
  26       function compare_images() {
  27         var diff = document.createElement("canvas");
  28         var ref = document.getElementById("refimg");
  29         var rend = document.getElementById("rendimg");
  30
  31         if(!ref.complete || !rend.complete || diff_complete) {
  32           return;
  33         }
  34
  35         var width = ref.naturalWidth
  36         var height = ref.naturalHeight
  37         diff.width = width
  38         diff.height = height
  39
  40         const ref_data = readImageData("refimg")
  41
  42         const rend_data = readImageData("rendimg")
  43
  44         diff_ctx = diff.getContext('2d');
  45         const diff_data = diff_ctx.createImageData(width, height)
  46
  47         const diff_count_rel = pixelmatch(ref_data.data, rend_data.data, diff_data.data, width, height, {threshold: 0.1})
  48         const diff_count_abs = pixelmatch(ref_data.data, rend_data.data, diff_data.data, width, height, {threshold: 0.0, includeAA: true})
  49         document.getElementById("diffPixelCount").innerHTML = "Different pixels: " + diff_count_abs + " <small>(no tolerance)</small>, <strong>" + diff_count_rel + "</strong> <small>(1% tol.)</small>"
  50
  51         diff_ctx.putImageData(diff_data, 0, 0)
  52         diff_complete = true
  53
  54         document.getElementById("diffimg").src = diff.toDataURL();
  55       }
  56     </script>
  57   % endif
  58   </head>
  59   <body>
  60     <h1>Results for ${testname}</h1>
  61     <h2>Overview</h2>
  62     <div>
  63       <p><b>Result:</b> ${value.result}</p>
  64     </div>
  65     <p><a href="${index}">Back to summary</a></p>
  66     <h2>Details</h2>
  67     <table>
  68       <tr>
  69         <th>Detail</th>
  70         <th>Value</th>
  71       </tr>
  72       <tr>
  73         <td>Returncode</td>
  74         <td>${value.returncode}</td>
  75       </tr>
  76       <tr>
  77         <td>Time</td>
  78         <td>${value.time.delta}</td>
  79       </tr>
  80     % if value.images:
  81       <tr>
  82         <td>Images</td>
  83         <td>
  84           <table>
  85             <tr>
  86               <td id="diffPixelCount">Calculating the difference...</td>
  87               <td>reference</td>
  88               <td>rendered</td>
  89             </tr>
  90           % for image in value.images:
  91             <tr>
  92               <td><img width="380px" id="diffimg" onclick="show_image(this.src)"/></td>
  93               <td><img src="file://${image['image_ref'] if 'image_ref' in image else None}" id="refimg" width="380px" onload="compare_images()" onclick="show_image(this.src)" crossorigin="Anonymous"/></td>
  94               <td><img src="file://${image['image_render'] if 'image_render' in image else None}" id="rendimg" width="380px" onload="compare_images()" onclick="show_image(this.src)" crossorigin="Anonymous"/></td>
  95             </tr>
  96             <tr><td colspan="3" id="diffOutput"></td></tr>
  97           % endfor
  98           </table>
  99         </td>
 100       </tr>
 101     % endif
 102       <tr>
 103         <td>Stdout</td>
 104         <td>
 105           <pre>${value.out | h}</pre>
 106         </td>
 107       </tr>
 108       <tr>
 109         <td>Stderr</td>
 110         <td>
 111           <pre>${value.err | h}</pre>
 112         </td>
 113       </tr>
 114     % if value.environment:
 115       <tr>
 116         <td>Environment</td>
 117         <td>
 118           <pre>${value.environment | h}</pre>
 119         </td>
 120       </tr>
 121     % endif
 122       <tr>
 123         <td>Command</td>
 124         <td>
 125           <pre>${value.command}</pre>
 126         </td>
 127       </tr>
 128     % if value.exception:
 129       <tr>
 130         <td>Exception</td>
 131         <td>
 132           <pre>${value.exception | h}</pre>
 133         </td>
 134       </tr>
 135     % endif
 136     % if value.traceback:
 137       <tr>
 138         <td>Traceback</td>
 139         <td>
 140           <pre>${value.traceback | h}</pre>
 141         </td>
 142       </tr>
 143     % endif
 144       <tr>
 145         <td>dmesg</td>
 146         <td>
 147           <pre>${value.dmesg | h}</pre>
 148         </td>
 149       </tr>
 150     </table>
 151     <p><a href="${index}">Back to summary</a></p>
 152   </body>
 153 </html>