| <!doctype html> |
| <head> |
| <meta charset="utf-8"> |
| <title>Image Comparison Viewer</title> |
| <style> |
| #testrundetails { |
| height: 200px; |
| } |
| |
| #thumbnails { |
| top: 250px; |
| left: 10px; |
| width: 260px; |
| margin: 0px; |
| padding: 0px; |
| position: absolute; |
| } |
| |
| .thumb { |
| width: 200px; |
| height: auto; |
| cursor: pointer; |
| border: 3px solid black; |
| } |
| |
| .thumb:hover { |
| border: 3px solid blue; |
| } |
| |
| #content { |
| margin-left: 260px; |
| } |
| |
| .tagname { |
| font-weight: bold; |
| } |
| </style> |
| <script type="text/javascript"> |
| function setup() { |
| var golden = document.getElementById("golden").src; |
| updateFullImageSrc(golden); |
| } |
| function updateFullImageSrc(src) { |
| document.getElementById("fullsizeimage").src = src; |
| } |
| </script> |
| </head> |
| <body onload="setup()"> |
| <div id="testrundetails"> |
| <h1> Test Run Details </h1> |
| <ul> |
| <li><span class="tagname"> Test Name: </span>$testname</li> |
| <li><span class="tagname"> ChromeOS Build Number: </span>$chromeos_version</li> |
| <li><span class="tagname"> Chrome Build Number: </span>$chrome_version</li> |
| <li><span class="tagname"> Device: </span>$board</li> |
| <li><span class="tagname"> Date of run: </span>$date</li> |
| <li><span class="tagname"> Differing pixels: </span>$diff_pixels</li> |
| </ul> |
| </div> |
| <hr /> |
| <div id="thumbnails"> |
| <p>Golden</p> |
| <img id="golden" class="thumb"onclick=updateFullImageSrc(this.src) |
| src="data:image/png;base64, $golden"><br> |
| <p>Test</p> |
| <img id="test" class="thumb" onclick=updateFullImageSrc(this.src) |
| src="data:image/png;base64, $test"><br> |
| <p>Diff</p> |
| <img id="diff" class="thumb" onclick=updateFullImageSrc(this.src) |
| src="data:image/png;base64, $diff"> |
| </div> |
| <div id="content"> |
| <img id="fullsizeimage" src="golden.png" /> |
| </div> |
| </body> |
| </html> |
