chrome/test/data/third_party/kraken/hosted/explanations/darkroom.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4
   5 <meta charset=utf8>
   6 <link type="text/css" href="jquery-ui-1.8.2.custom.css" rel="stylesheet"/>
   7 <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
   8 <script type="text/javascript" src="jquery-ui-1.8.2.custom.min.js"></script>
   9
  10 <!--
  11  Copyright (C) 2007 Apple Inc.  All rights reserved.
  12  Copyright (C) 2010 Mozilla Foundation
  13
  14  Redistribution and use in source and binary forms, with or without
  15  modification, are permitted provided that the following conditions
  16  are met:
  17  1. Redistributions of source code must retain the above copyright
  18     notice, this list of conditions and the following disclaimer.
  19  2. Redistributions in binary form must reproduce the above copyright
  20     notice, this list of conditions and the following disclaimer in the
  21     documentation and/or other materials provided with the distribution.
  22
  23  THIS SOFTWARE IS PROVIDED BY APPLE COMPUTER, INC. ``AS IS'' AND ANY
  24  EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
  25  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
  26  PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE COMPUTER, INC. OR
  27  CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
  28  EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
  29  PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
  30  PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
  31  OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
  32  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
  33  OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
  34 -->
  35
  36 <title>Kraken JavaScript Benchmark: Gaussian Blur</title>
  37 <link rel="stylesheet" href="../kraken.css">
  38
  39 <script type="text/javascript" src="darkroom.js"></script>
  40 <style>
  41 #imagedisplay {
  42     width: 70%;
  43     /*background: blue;*/
  44     padding-top: 15px;
  45     padding-bottom: 15px;
  46     float: left;
  47 }
  48
  49 #imagedisplay-inner {
  50     width: 100%;
  51     height: 100%;
  52     -moz-border-radius: 30px;
  53     border: 30px dashed #eeeeee;
  54 }
  55
  56 #controls {
  57     background: rgba(0, 0, 0, .5);
  58     width: 30%;
  59     min-width: 100px;
  60     float: right;
  61 }
  62
  63 .blackbg #controls {
  64     color: white;
  65 }
  66
  67 .graybg #controls {
  68     color: #aaaaaa;
  69 }
  70
  71 #controls h4 {
  72 }
  73
  74 .slidergroup {
  75     margin: 5px;
  76 }
  77
  78 .slidergroup tr {
  79     font-size: 11px;
  80 }
  81
  82 .slider {
  83     margin-left: 15px;
  84     margin-right: 15px;
  85 }
  86
  87 body {
  88     font-family: sans-serif;
  89 }
  90
  91 #log {
  92     font-size: 70%;
  93     margin-left: 10px;
  94     margin-right: 10px;
  95 }
  96
  97 .indrag {
  98     background: rgba(0,128,128,.25);
  99     cursor: default;
 100 }
 101
 102 .options {
 103     margin: 10px;
 104 }
 105
 106 .canzoomin {
 107     cursor: -moz-zoom-in;
 108 }
 109
 110 .canzoomout {
 111     cursor: -moz-zoom-out ! important;
 112 }
 113
 114 .cangrab {
 115     cursor: -moz-grab;
 116 }
 117
 118 .isgrabbing {
 119     cursor: -moz-grabbing ! important;
 120 }
 121
 122 .blackbg {
 123     background: black;
 124 }
 125
 126 .whitebg {
 127     background: white;
 128 }
 129
 130 .graybg {
 131     background: gray;
 132 }
 133
 134 span {
 135     font-size: 11px;
 136 }
 137
 138   </style>
 139
 140 </style>
 141 </head>
 142
 143 <body>
 144 <div id="content">
 145 <h2>Kraken JavaScript Benchmark: Darkroom</h2>
 146 <div id="results">
 147     <p>This benchmark performs a variety of photo manipulations. You can try these manipulations out in the interface below.</p>
 148     <p>&nbsp;</p>
 149     <div id="imagedisplay">
 150       <center><canvas id="canvas"></canvas></center>
 151     </div>
 152
 153     <div id="controls">
 154       <div class="slidergroup">
 155         <h4>Exposure</h4>
 156         <table border="0">
 157           <tr>
 158         <td>Black Point</td>
 159         <td width="100%"><div class="slider" id="blackPoint"></div></td>
 160           </tr>
 161
 162           <tr>
 163         <td>Fill</td>
 164         <td><div class="slider" id="fill"></div></td>
 165           </tr>
 166           <tr>
 167         <td>Brightness</td>
 168         <td><div class="slider" id="brightness"></div></td>
 169           </tr>
 170
 171           <tr>
 172         <td>Contrast</td>
 173         <td><div class="slider" id="contrast"></div></td>
 174           </tr>
 175           <tr>
 176         <td>Saturation</td>
 177         <td><div class="slider" id="saturation"></div></td>
 178           </tr>
 179
 180           <tr>
 181         <td>Temperature</td>
 182         <td><div class="slider" id="temperature"></div></td>
 183           </tr>
 184         </table>
 185       </div>
 186       <div class="slidergroup">
 187         <h4>Tone Control</h4>
 188
 189         <table border="0">
 190           <tr>
 191         <td>Split Point</td>
 192         <td><div class="slider" id="splitPoint"></div></td>
 193           </tr>
 194           <tr><td><b>Shadows</b></td></tr>
 195           <tr>
 196         <td>Hue</td>
 197
 198         <td width="100%"><div class="slider" id="shadowsHue"></div></td>
 199           </tr>
 200           <tr>
 201         <td>Saturation</td>
 202         <td><div class="slider" id="shadowsSaturation"></div></td>
 203           </tr>
 204           <tr><td><b>Highlights</b></td></tr>
 205           <tr>
 206
 207         <td>Hue</td>
 208         <td><div class="slider" id="highlightsHue"></div></td>
 209           </tr>
 210           <tr>
 211         <td>Saturation</td>
 212         <td><div class="slider" id="highlightsSaturation"></div></td>
 213           </tr>
 214         </table>
 215
 216       </div>
 217
 218       <div class="slidergroup">
 219         <h4>Geometry</h4>
 220         <table border="0" width="100%">
 221           <tr><td>Angle (+/- 90.0)</td></tr>
 222           <tr>
 223         <td width="100%"><div class="slider" id="angle"></div></td>
 224
 225           </tr>
 226           <tr><td>Fine Angle (+/- 2.0)</td></tr>
 227           <tr>
 228         <td><div class="slider" id="fineangle"></div></td>
 229           </tr>
 230         </table>
 231       </div>
 232
 233       <div class="options">
 234
 235         <span>Background: <div style="display: inline-block; width: 15px; height: 15px; border: 1px solid white; background: black;" onclick="SetBackground(0);"></div>
 236           <div style="display: inline-block; width: 15px; height: 15px; border: 1px solid white; background: gray;" onclick="SetBackground(1);"></div>
 237           <div style="display: inline-block; width: 15px; height: 15px; border: 1px solid white; background: white;" onclick="SetBackground(2);"></div>
 238         </span><br>
 239
 240         <span style="font-weight: bold;">Drag and drop a new image onto the canvas to load.</span><br>
 241
 242         <button onclick="ZoomReset()">Reset Zoom</button>
 243
 244         <button onclick="DoReset()">Reset All</button>
 245         <button onclick="DoRedisplay()">Repaint</button><br><br>
 246         <input type="checkbox" id="correct_before" onchange="CheckboxToggled()">Color correct before scaling for display<br><br>
 247       </div>
 248
 249       <div id="log"></div>
 250
 251     </div>
 252
 253 </div>
 254 </div>
 255 </body>
 256 </html>