1 <!doctype html> 2 <head> 3 <meta charset="utf-8"> 4 <title>Image Comparison Viewer</title> 5 <style> 6 #testrundetails { 7 height: 200px; 8 } 9 10 #thumbnails { 11 top: 250px; 12 left: 10px; 13 width: 260px; 14 margin: 0px; 15 padding: 0px; 16 position: absolute; 17 } 18 19 .thumb { 20 width: 200px; 21 height: auto; 22 cursor: pointer; 23 border: 3px solid black; 24 } 25 26 .thumb:hover { 27 border: 3px solid blue; 28 } 29 30 #content { 31 margin-left: 260px; 32 } 33 34 .tagname { 35 font-weight: bold; 36 } 37 </style> 38 <script type="text/javascript"> 39 function setup() { 40 var golden = document.getElementById("golden").src; 41 updateFullImageSrc(golden); 42 } 43 function updateFullImageSrc(src) { 44 document.getElementById("fullsizeimage").src = src; 45 } 46 </script> 47 </head> 48 <body onload="setup()"> 49 <div id="testrundetails"> 50 <h1> Test Run Details </h1> 51 <ul> 52 <li><span class="tagname"> Test Name: </span>$testname</li> 53 <li><span class="tagname"> ChromeOS Build Number: </span>$chromeos_version</li> 54 <li><span class="tagname"> Chrome Build Number: </span>$chrome_version</li> 55 <li><span class="tagname"> Device: </span>$board</li> 56 <li><span class="tagname"> Date of run: </span>$date</li> 57 <li><span class="tagname"> Differing pixels: </span>$diff_pixels</li> 58 </ul> 59 </div> 60 <hr /> 61 <div id="thumbnails"> 62 <p>Golden</p> 63 <img id="golden" class="thumb"onclick=updateFullImageSrc(this.src) 64 src="data:image/png;base64, $golden"><br> 65 <p>Test</p> 66 <img id="test" class="thumb" onclick=updateFullImageSrc(this.src) 67 src="data:image/png;base64, $test"><br> 68 <p>Diff</p> 69 <img id="diff" class="thumb" onclick=updateFullImageSrc(this.src) 70 src="data:image/png;base64, $diff"> 71 </div> 72 <div id="content"> 73 <img id="fullsizeimage" src="golden.png" /> 74 </div> 75 </body> 76 </html> 77
