QuickBenchmark

tsmallfield

2011-02-10 20:25:28

License: GPLv3 License

Fork: 2

Fav: 16

View: 4949

Play
Stop
Reload

Fullscreen

Smart Phone

Fork tree

Readme
JavaScript 744 lines
HTML 76 lines
CSS 1290 lines

QuickBenchmark

//<![CDATA[
/**
 *  @charset       utf-8
 *  @modified      February 10, 2011
 *  @description   QuickBenchmark
 *  @author        Tohl SMALLFIELD
 */
(function(Data, Graph, Table, Sandbox){/////////////////////////////////////////////////////////////
  
  var doc      = this.document,
      bdy      = doc.body,
      
      $        = function(xpr){ return doc.querySelector(xpr); },
      $$       = function(xpr){ return doc.querySelectorAll(xpr); },
      
      //エラー時ハイライト用
      codeA    = $("code.a"),
      codeB    = $("code.b"),
      
      //入力フィールド
      interval = $("#interval"),
      loopA    = $("#loopA"),
      loopB    = $("#loopB"),
      initA    = $("#initA"),
      initB    = $("#initB"),
      endA     = $("#endA"),
      endB     = $("#endB"),
      loopNum  = $("#iMax"),
      loopNum2 = $("#iMax2"),
      testNum  = $("#testNum"),
      
      //実行ボタン
      btn      = $("#btnRun button"),
      
      //テストコード作成用
      sbA      = new Sandbox("#secSandbox section.a article", "A").reset(),
      sbB      = new Sandbox("#secSandbox section.b article", "B").reset();
  
  /**
   *  Textarea 自動リサイズ 設定
   *  
   *  @see http://jsdo.it/tsmallfield/auto_resize_textarea
   */
  Array.prototype.forEach.call($$("#secCodes textarea"), function(elm){
    var sty = elm.style,
        cch;
    elm.onkeydown = elm.onkeypress = elm.onkeyup = elm.onfocus = function me(){
      var val = elm.value,
          rgx = /\r?\n/g,
          lns = 0;
          
      if(val !== cch){
        cch = val;
        
        //まずは改行の数でチェック(ES5:正規表現リテラルで直接書くと無限ループ)
        while( rgx.exec(val) ) ++lns;
        elm.rows = lns || 1;//0だとエラー@IE
        
        //折り返している場合を考慮しscrollHeightで調整
        sty.height = "auto";
        sty.height = elm.scrollHeight + "px";
        
        //レンダリングが追いつかない?とき用(主にIE)
        setTimeout(function(){
          sty.height = elm.scrollHeight + "px";
        }, 0);
      }
      return me;
    }();
  });
  
  /**
   *  iframe 表示／非表示
   */
  (function(){
    var chk = $("#toggleIframes"),
        elm = $("#secSandbox"),
        prn = chk.parentNode;
    (chk.onchange = function(){
      prn.className = elm.className = chk.checked ? "" : "hidden";
    })();
  })();
  
  /**
   *  テキスト情報表示用
   */
  var log = function(){
    var elm = $("#secSettings > div");
    return {
      show : function(){
        elm.innerHTML += Array.prototype.slice.call(arguments).join(", ") + "<br />";
      },
      reset : function(){
        elm.innerHTML = "";
      }
    };
  }();
  
  /**
   *  生成コード表示用
   */
  var generatedCodes = function(){
    var elmA = $("#secTestCodes section.a textarea"),
        elmB = $("#secTestCodes section.b textarea"),
        show = function(a, b){
          elmA.value = a;
          elmB.value = b;
        },
        reset = function(){
          elmA.value = elmB.value = "";
        };
    reset();
    return {
      show  : show,
      reset : reset
    };
  }();
  
  /**
   *  プログレスバー
   */
  var progress = function(){
    var sty = $("#bar").style;
    return {
      show : function(per){
        sty.width = 100 - per + "%";
      },
      reset : function(){
        sty.width = 0;
      }
    };
  }();
  
  /**
   *  AとBでforループ回数を同期
   */
  (function(){
    var elms = $$("input.num"),
        len  = elms.length,
        i    = len,
        e;
    while(i--){
      e = elms[i];
      e.onchange = e.onkeypress = e.onkeyup = e.onkeydown = function(){
        var v = this.value,
            i = len,
            e;
        while(i--){
          e = elms[i];
          if(e !== this) e.value = v;
        }
      };
    }
  })();
  
  /**
   *  ページ上部へ
   */
  $("footer a").addEventListener("mouseup", function me(){
    var y = bdy.scrollTop || doc.documentElement.scrollTop;
    scrollTo(0, y = (y << 3) - y >> 3);
    y && setTimeout(me, 16);
  }, false);
  
  /**
   *  Run
   */
  var run = function(evt){
    var dataA = new Data("A", "#3cf"),
        dataB = new Data("B", "#0f0"),
        iMax  = +( /\D/.test( loopNum.value) ? ( loopNum.value = loopNum2.value = 0) :  loopNum.value ),
        jMax  = +( /\D/.test( testNum.value) ? ( testNum.value = 0)                  :  testNum.value ),
        itv   = +( /\D/.test(interval.value) ? (interval.value = 0)                  : interval.value ),
        j     = jMax,
        testA, testB, tmr, graph, table;
    
    var stop = function(){
      clearTimeout(tmr);
      tmr = null;
      btn.className = "";
      btn.removeEventListener("click", stop, false);
      btn.addEventListener("click", run, false);
    };
    
    /**
     *  エラーチェック用関数作成
     */
    testA = sbA.reset().createTest( loopA.value, initA.value, endA.value, iMax );
    testB = sbB.reset().createTest( loopB.value, initB.value, endB.value, iMax );
    
    /**
     *  エラーチェック:A
     */
    try{
      testA();
    }catch(err){
      codeA.className += " invalid";//classList使えるなら使いたいところだが…
      throw err;
    }
    codeA.className = "a";
    
    /**
     *  エラーチェック:B
     */
    try{
      testB();
    }catch(err){
      codeB.className += " invalid";
      throw err;
    }
    codeB.className = "b";
    
    /**
     *  本番用関数作成
     */
    testA = sbA.reset().createTest( loopA.value, initA.value, endA.value, iMax );
    testB = sbB.reset().createTest( loopB.value, initB.value, endB.value, iMax );
    
    /**
     *  テスト準備
     *  
     *  TODO: TableとGraphのインスタンスを毎回生成しないようにする
     */
    graph = new Graph("#secGraph > div", "auto", 200);//画面リサイズの関係でとりあえず毎回作成することにした
    graph.titleX = "Cycle of Test [ops]";
    graph.titleY = "Time [ms]";
    graph.reset();
    
    table = new Table("#secTable > div");//graphに合わせてとりあえず毎回作成することにした
    table.reset();
    
    generatedCodes.reset();
    log.reset();
    
    /**
     *  テスト開始
     */
    if(j){
      btn.className = "running";
      btn.removeEventListener("click", run, false);
      btn.addEventListener("click", stop, false);
      (function me(){
        if(j--){
          dataA.add( testA() );
          dataB.add( testB() );
          progress.show(j * 100 / jMax);
          tmr = setTimeout(me, itv);
        }else{
          
          btn.className = "";
          btn.removeEventListener("click", stop, false);
          btn.addEventListener("click", run, false);
          
          graph.drawDatas( dataA, dataB );
          table.drawDatas( dataA, dataB );
          log.show( location.href );
          log.show( navigator.userAgent );
          log.show( new Date );
          log.show( "Cycle of Test : " + jMax + " ops" );
          log.show( "Interval : " + itv + " ms" );
          generatedCodes.show(
            sbA.getCodeString(),
            sbB.getCodeString()
          );
          progress.reset();
        }
      })();
    }
  };
  btn.addEventListener("click", run, false);
  
})(function(){//////////////////////////////////////////////////////////////////////////////////////

/**
   *  Dataクラス
   */
  var Data = function(n, c){
    this.name  = n;
    this.color = c;
    this.reset();
  };
  Data.INFINITY = "Infinity";
  Data.prototype.reset = function(){
    this.data = [];
  };
  Data.prototype.add = function(n){
    this.data.push(n);
  };
  Data.prototype.getMax = function(){
    var d = this.data,
        i = d.length,
        n, max = 0;
    while(i--){
      if( (n = d[i]) > max ) max = n;
    }
    return max;
  };
  Data.prototype.getMin = function(){
    var d = this.data,
        i = d.length,
        n, min;
    if(i){
      min = d[--i];
    }else{
      return;
    }
    while(i--){
      if( (n = d[i]) < min ) min = n;
    }
    return min;
  };
  Data.prototype.getTotal = function(){
    var d   = this.data,
        i   = d.length,
        sum = 0;
    while(i--){
      sum += d[i];
    }
    return sum;
  };
  Data.prototype.getAverage = function(){
    var data = this.data,
        len  = data.length,
        i    = len,
        sum  = 0;
    while(i--){
      sum += data[i];
    }
    return len ? (sum / len) : Data.INFINITY;
  };
  Data.prototype.getError = function(){
    var max = this.getMax(),
        min = this.getMin(),
        avg = this.getAverage();
    return ( (max - avg) + (avg - min) ) / 2;
  };
  Data.prototype.getLength = function(){
    return this.data.length;
  };
  
  return Data;
  
}(),function(){/////////////////////////////////////////////////////////////////////////////////////
  
  var win = this,
      doc = win.document;
  
  /**
   *  Graphクラス
   */
  var Graph = function(xpr, w, h){
    var wpr = this.wpr = doc.querySelector(xpr),
        cvs = this.cvs = doc.createElement("canvas"),
        ctx = this.ctx = cvs.getContext("2d");
    
    if(w === "auto"){
      w = wpr.offsetWidth - Graph.PADDING_RIGHT - Graph.PADDING_LEFT;
    }
    
    this.width  = w;
    this.height = h;
    this.outerWidth  = cvs.width  = w + Graph.PADDING_RIGHT + Graph.PADDING_LEFT;
    this.outerHeight = cvs.height = h + Graph.PADDING_TOP + Graph.PADDING_BOTTOM;
    
    ctx.strokeStyle = "#cff";
    ctx.translate(
      Graph.PADDING_LEFT,
      Graph.PADDING_TOP
    );
    /*
    //座標チェック用
    for(var x=0; x<=w; x+=50){
      for(var y=0; y<=h; y+=50){
        ctx.fillStyle = "#f00";
        ctx.fillRect(x, y, 1, 1);
        ctx.fillStyle = "#666";
        ctx.fillText("("+x+", "+(h-y)+")", x+2, y-2);
      }
    }*/
  };
  
  Graph.PADDING_TOP    = 20;
  Graph.PADDING_RIGHT  = 30;
  Graph.PADDING_BOTTOM = 60;
  Graph.PADDING_LEFT   = 60;
  
  Graph.STEP_X = 10;//x軸の目盛分割数
  Graph.STEP_Y = 5; //y軸の目盛分割数
  
  Graph.FONT_FAMILY = ' "ＭＳ ゴシック","ヒラギノ角ゴ Pro W3", verdana, Osaka, sans-serif';
  
  Graph.prototype.reset = function(){
    var wpr = this.wpr,
        ctx = this.ctx,
        e;
    
    while( (e = wpr.firstChild) ) wpr.removeChild(e);
    
    ctx.save();
    ctx.translate(
      -Graph.PADDING_LEFT,
      -Graph.PADDING_TOP
    );
    ctx.clearRect(0, 0, this.outerWidth, this.outerHeight);
    ctx.restore();
  };
  
  Graph.prototype.drawDatas = function(/* data0, data1, data2,...dataN */){
    var w   = this.width,
        h   = this.height,
        c   = this.ctx,
        arg = arguments,
        len = arg.length,
        
        xMin = 0,
        xMax = 0,
        
        yMin = [],
        yMax = [],
        
        d, i, j, x, y;
        
    i = len;
    while(i--){
      d = arg[i];
      yMax.push( d.getMax() );
      yMin.push( d.getMin() );
    }
    yMax = Math.max.apply(null, yMax) * 1.1 >> 0;
    yMin = Math.min.apply(null, yMin);
    
    xMax = d.data.length;
    this.reset();
    
    //0で割らないように
    xMax = xMax || 1;
    yMax = yMax || 1;
    
    this.drawAxises(xMin, xMax, yMin, yMax);
    c.save();
    c.lineWidth = 2;
    c.textAlign = "left";
    c.font = "normal bold 16px" + Graph.FONT_FAMILY;
    for(i=0; i<len; ++i){
      d = arg[i].data;
      
      c.strokeStyle = c.fillStyle = arg[i].color;
      c.beginPath();
      c.globalAlpha = 1;
      
      x = 0;
      y = h - h * d[0] / yMax;
      c.moveTo(x, y); 
      
      for(j=0; j<xMax; ++j){
        x = w * j / xMax;
        y = h - h * d[j] / yMax;
        c.lineTo(x, y);
        c.fillRect(x-1.5, y-1.5, 3, 3);
      }
      c.fillText( arg[i].name, x+10, y+5 );
      c.globalAlpha = 0.5;
      c.stroke();
    }
    c.restore();
    
    this.wpr.appendChild( new Image ).src = this.cvs.toDataURL();
  };
  Graph.prototype.drawAxises = function(xMin, xMax, yMin, yMax){
    var w = this.width,
        h = this.height,
        c = this.ctx,
        rng, x, y, i, stp;
    
    c.fillStyle = "#666";
    // 縦線＆横線
    c.strokeStyle = "#999";
    c.beginPath();
    c.moveTo(0, 0);
    c.lineTo(0, h);
    c.lineTo(w, h);
    c.stroke();
    
    c.font = "normal normal 12px" + Graph.FONT_FAMILY;
    
    // 横線の目盛
    c.textAlign = "center";
    c.strokeStyle = "#222";
    
    //目盛間隔調節
    rng = xMax - xMin;
    stp = rng <= 20 ? 1 :
          rng <= 40 ? 5 :
        ( rng / (Graph.STEP_X * 10) >> 0 ) * 10 || 10;
    
    for(i=0; i <= xMax; i+=stp){
      x = w * i / xMax;
      c.beginPath();
      c.moveTo(x, 0); 
      c.lineTo(x, h); 
      c.stroke();
    }
    c.strokeStyle = "#999";
    for(i=0; i <= xMax; i+=stp){
      x = w * i / xMax;
      c.beginPath();
      c.moveTo(x, h); 
      c.lineTo(x, h+5); 
      c.stroke();
      c.fillText(i+"", x, h+20);
    }
    
    //縦線の目盛
    c.textAlign = "right";
    c.strokeStyle = "#222";
    
    //目盛間隔調節
    rng = yMax - yMin;
    stp = rng <= 5  ? 1 :
          rng <= 10 ? 5 :
        ( rng / (Graph.STEP_Y * 10) >> 0 ) * 10 || 10;
    
    for(i=0; i <= yMax; i+=stp){
      y = h - h * i / yMax;
      c.beginPath();
      c.moveTo(0, y);
      c.lineTo(w, y); 
      c.stroke();
    }
    c.strokeStyle = "#999";
    for(i=0; i <= yMax; i+=stp){
      y = h - h * i / yMax;
      c.beginPath();
      c.moveTo( 0, y); 
      c.lineTo(-5, y); 
      c.stroke();
      c.fillText(i, -10, y+5);
    }
    
    // TODO: investigate @font-face 
    c.save();
    c.fillStyle = "#ccc";
    c.textAlign = "center";
    c.font = "normal normal 16px" + Graph.FONT_FAMILY;
    c.fillText(this.titleX, w >> 1, h+45);
    c.translate(-35, h >> 1);
    c.rotate(-Math.PI/2);
    c.fillText(this.titleY, 0, 0);
    c.restore();
  };
  
  return Graph;

}(),function(){/////////////////////////////////////////////////////////////////////////////////////
  
  var win = this,
      doc = win.document;
  
  /**
   *  Tableクラス
   */
  var Table = function(xpr){
    this.elm = doc.querySelector(xpr);
  };
  Table.prototype.reset = function(){
    this.elm.innerHTML = "";
  };
  Table.prototype.drawDatas = function(a, b){
    
    var INFINITY = "Infinity",
        rgx = /^(\d+)([\.]\d*)$/,
    
        lenA   = a.getLength(),
        lenB   = b.getLength(),
        
        sumA   = a.getTotal(),
        sumB   = b.getTotal(),
        
        scoreA = sumA ? (lenA * 1000 / sumA) : INFINITY,
        scoreB = sumB ? (lenB * 1000 / sumB) : INFINITY;
    
    //とりあえずのInfinity対策
    var toFixed = function(n){
      return n.toFixed ? n.toFixed(2) : n;
    };
    
    this.elm.innerHTML = [
      '<table cellspacing="0" cellpadding="0" summary="benchmark results">',
        '<thead>',
          '<tr>',
            '<td><\/td>',
            '<th scope="col" class="a"><em><span>TEST<\/span>&nbsp;', a.name, '<\/em><\/th>',
            '<th scope="col" class="b"><em><span>TEST<\/span>&nbsp;', b.name, '<\/em><\/th>',
          '<\/tr>',
        '<\/thead>',
        '<tbody>',
          '<tr>',
            '<th scope="row">TOTAL :<\/th>',
            '<td class="a">', sumA.toString().replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ms<\/span><\/td>',
            '<td class="b">', sumB.toString().replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ms<\/span><\/td>',
          '<\/tr>',
          '<tr>',
            '<th scope="row">MAX :<\/th>',
            '<td class="a">', a.getMax().toString().replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ms<\/span><\/td>',
            '<td class="b">', b.getMax().toString().replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ms<\/span><\/td>',
          '<\/tr>',
          '<tr>',
            '<th scope="row">MIN :<\/th>',
            '<td class="a">', a.getMin().toString().replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ms<\/span><\/td>',
            '<td class="b">', b.getMin().toString().replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ms<\/span><\/td>',
          '<\/tr>',
          '<tr>',
            '<th scope="row">AVERAGE :<\/th>',
            '<td class="a">', toFixed( a.getAverage() ).replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ms<\/span><\/td>',
            '<td class="b">', toFixed( b.getAverage() ).replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ms<\/span><\/td>',
          '<\/tr>',
          '<tr>',
            '<th scope="row">SCORE :<\/th>',
            '<td class="a">', toFixed( scoreA ).replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ops/sec<\/span><\/td>',
            '<td class="b">', toFixed( scoreB ).replace(rgx, "$1<span>$2<\/span>"), '&nbsp;<span>ops/sec<\/span><\/td>',
          '<\/tr>',
          '<tr>',
            '<th scope="row"><\/th><td class="a">'
    ].join("") + (
        ( scoreA === scoreB                      ) ? '<strong class="draw">draw<\/strong><\/td><td class="b"><strong class="draw">draw<\/strong>' :
        ( scoreA === INFINITY || scoreA > scoreB ) ? '<strong class="win">win<\/strong><\/td><td class="b"><strong class="lose">lose<\/strong>'   :
        ( scoreB === INFINITY || scoreB > scoreA ) ? '<strong class="lose">lose<\/strong><\/td><td class="b"><strong class="win">win<\/strong>'   :
                                                     '<\/td><td class="b">'//無いはずだが念のため
    ) + '<\/td><\/tr><\/tbody><\/table>';
  };
  
  return Table;

}(),function(){/////////////////////////////////////////////////////////////////////////////////////
  
  /**
   *  Sandboxクラス
   */
  var Sandbox = function(xpr, name){
    this.parent = document.querySelector(xpr);
    this.name = name;
  };
  Sandbox.parse = function(code){
    return code.replace(/^\s+/g, "").replace(/\s+$/g, "");
  };
  
  /**
   *  子windowのFunctionで生成した関数の実行スコープが
   *  親windowのグロバールスコープとなる場合がある（Safari）
   *  のでチェックしておく
   *  
   *  @see http://jsdo.it/tsmallfield/function_scope_test
   */
  Sandbox.NEEDS_FIX = function(){
    var ifr = document.createElement("iframe"),
        iwin;
        
    ifr.style.display = "none";
    iwin = document.body.appendChild( ifr ).contentWindow;
    iwin.execScript && iwin.execScript("null");
    try{
      return iwin.Function("return window;")() === window;
    }finally{
      ifr.parentNode.removeChild( ifr );
    }
  }();
  Sandbox.prototype.reset = function(){
    var ifr = this.ifr,
        iwin, idoc;
        
    if(ifr){
      ifr.parentNode.removeChild(ifr);
      this.ifr = this.iwin = null;
    }
    
    ifr  = this.ifr = document.createElement("iframe");
    iwin = this.parent.appendChild( ifr ).contentWindow;
    idoc = iwin.document;
    
    if( Sandbox.NEEDS_FIX ){
      var fnc = "_" + (+new Date);
      idoc.open().write(
        '<!doctype html>' +
        '<html>' +
          '<head>' +
            '<title><\/title>' +
            
            // MessageChannelで通信とか考えたが複雑になるので止めた。
            '<script>' +
              'var ' + fnc + ' = function(code){' +
                'setTimeout(function(){'
                  + 'delete window.' + fnc + ';' +
                '}, 0);' +
                'return Function(code);' +
              '};' +
            '<\/scr' + 'ipt>' +
            
          '<\/head>' +
          '<body><\/body>' +
        '<\/html>'
      );
      idoc.close();
      iwin.execScript && iwin.execScript("null");
      this.Function = iwin[fnc];
    }else{
      idoc.open().write(
        '<!doctype html>' +
        '<html>' +
          '<head>' +
            '<title><\/title>' +
          '<\/head>' +
          '<body><\/body>' +
        '<\/html>'
      );
      idoc.close();
      iwin.execScript && iwin.execScript("null");
      this.Function = iwin.Function;
    }
    return this;
  };
  Sandbox.prototype.createTest = function(loop, init, end, iMax){
    var code = 
      Sandbox.parse(init) +
      "\nvar t = +new Date;\n" +
      "for(var i=0; i<" + iMax + "; ++i){\n" +
        Sandbox.parse(loop).replace(/^/gm, "\t") + 
      "\n}\n" + 
      "t = +new Date - t;\n" + 
      Sandbox.parse(end) + 
      "\nreturn t;";
      
    this.reset();
    code = code.replace(/^\s+/, "").replace(/\n\t*\n/g, "\n");
    this.codeString = "var " + this.name + " = function(){\n" + code.replace(/^/gm, "\t") + "\n};";
    return this.Function.call(null, code);
  };
  Sandbox.prototype.getCodeString = function(){
    return this.codeString;
  };
  
  return Sandbox;
  
}());////////////////////////////////////////////////////////////////////////////////////////////
//]]>

<header><div>
  <h1>QuickBenchmark</h1>
  <p><a href="http://www.w3.org/html/logo/" target="_blank">HTML5 Powered with CSS3 / Styling, Graphics, 3D &amp; Effects, and Semantics</a></p>
</div></header>
<section id="secCodes"><div>
  <code class="a">
    <span class="reserved">var</span>&nbsp;<var class="funcName">A</var>&nbsp;=&nbsp;<span class="reserved">function</span>(){<br />
      <span class="indent">
        <textarea id="initA" name="initA" class="init"></textarea>
        <span class="reserved">var</span>&nbsp;<var>t</var> = +<span class="reserved">new</span>&nbsp;<span class="global">Date</span>;<br />
        <span class="reserved">for</span>(<span class="reserved">var</span>&nbsp;<var>i</var>=<span class="number">0</span>; <var>i</var>&lt;<input type="Number" id="iMax" name="iMax" class="num" value="100" />; ++<var>i</var>){<br />
        <span class="indent">
          <textarea id="loopA" name="loopA" class="loop">document.body.appendChild( document.createTextNode("A") );</textarea>
        </span>
        }<br />
        <var>t</var>&nbsp;= +<span class="reserved">new</span>&nbsp;<span class="global">Date</span>&nbsp;-&nbsp;<var>t</var>;<br />
        <textarea id="endA" name="endA" class="end"></textarea>
        <span class="reserved">return</span>&nbsp;<var>t</var>;<br />
      </span>
    };<br />
  </code>
  <code class="b">
    <span class="reserved">var</span>&nbsp;<var class="funcName">B</var>&nbsp;=&nbsp;<span class="reserved">function</span>(){<br />
      <span class="indent">
        <textarea id="initB" name="initB" class="init"></textarea>
        <span class="reserved">var</span>&nbsp;<var>t</var> = +<span class="reserved">new</span>&nbsp;<span class="global">Date</span>;<br />
        <span class="reserved">for</span>(<span class="reserved">var</span>&nbsp;<var>i</var>=<span class="number">0</span>; <var>i</var>&lt;<input type="Number" id="iMax2" name="iMax2" class="num" value="100" />; ++<var>i</var>){<br />
        <span class="indent">
          <textarea id="loopB" name="loopB" class="loop">document.body.innerHTML += "B";</textarea>
        </span>
        }<br />
        <var>t</var>&nbsp;= +<span class="reserved">new</span>&nbsp;<span class="global">Date</span>&nbsp;-&nbsp;<var>t</var>;<br />
        <textarea id="endB" name="endB" class="end"></textarea>
        <span class="reserved">return</span>&nbsp;<var>t</var>;<br />
      </span>
    };<br />
  </code>
</div></section>
<section id="secSandbox"><div>
  <section class="a">
    <h2>Iframe for A</h2>
    <article></article>
  </section>
  <section class="b">
    <h2>Iframe for B</h2>
    <article></article>
  </section>
</div></section>
<nav id="navControls"><div>
  <p id="controlConfig">Run<input type="Number" id="testNum" name="testNum" value="50" />tests every<input type="Number" id="interval" name="interval" value="50" />ms</p>
  <p id="btnRun"><button>Run</button></p>
  <p><input type="checkbox" id="toggleIframes" name="toggleIframes" checked="checked" /><label for="toggleIframes">hide iframes</label></p>
</div></nav>
<div id="progress"><div id="bar"></div></div>
<section id="secResults">
  <section id="secGraph">
    <h2><span>Graph :</span></h2>
    <div></div>
  </section>
  <section id="secTable">
    <h2><span>Table of Results :</span></h2>
    <div></div>
  </section>
  <section id="secTestCodes">
    <h2><span>Tested codes :</span></h2>
    <div>
      <section class="a"><textarea readonly="readonly"></textarea></section>
      <section class="b"><textarea readonly="readonly"></textarea></section>
    </div>
  </section>
  <section id="secSettings">
    <h2><span>Settings :</span></h2>
    <div></div>
  </section>
</section>
<footer><p><a href="javascript:;">Back to Top</a></p></footer>

QuickBenchmark

/**
 *  @charset       utf-8
 *  @modified      February 10, 2011
 *  @description   QuickBenchmark
 *  @author        Tohl SMALLFIELD
 */
/*------------------------------------------------------------------------------

reset
                
------------------------------------------------------------------------------*/
body,
h1,h2,
header,section,article,footer,hgroup,
div,p,span,em,a,code,var,
input,button,textarea{
  margin: 0;
  padding: 0;
  background: no-repeat scroll left top;
  border-style: none;
  font-style: normal;
  outline: none;
  font-size: 100%;
}

header,section,article,footer,hgroup{
  display: block;
}

/*------------------------------------------------------------------------------

clearFix
                
------------------------------------------------------------------------------*/
header > div:after,
section#secResults h2:after
{
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  line-height: 0;
  font-size: 0;
  content: ".";
}

/*------------------------------------------------------------------------------

テキスト画像代替
              
------------------------------------------------------------------------------*/
h1,
header a,
button,
section#secSandbox h2,
nav#navControls label,
p#controlConfig,
td strong,
footer a
{
  display: block;
  margin: 0;
  padding: 0;
  border-style: none;
  text-indent: -10000px;
  text-decoration: none;
  text-align: left;
}

/*------------------------------------------------------------------------------

非表示部
                
------------------------------------------------------------------------------*/
input#toggleIframes
{
  position: absolute;
  top: -9999px;
  left: -9999px;
  z-index: -9999;
  width: 0;
  height: 0;
  overflow: hidden;
}

/*------------------------------------------------------------------------------

------------------------------------------------------------------------------*/
body{
  min-width: 900px;
  height: 100%;
  background-color: #000;
  color: #fff;
  font-family: "ＭＳ ゴシック","ヒラギノ角ゴ Pro W3", verdana, Osaka, sans-serif;
  font-size: 100%;
  text-align: center;
  letter-spacing: 1px;
  line-height: 1.25;
}

input,textarea{
  outline: 0 none #000;;
}

section > div,
header > div,
nav > div,
section#secResults h2{
  max-width: 1250px;
  margin: 0 auto;
  text-align: left;
}

/*------------------------------------------------------------------------------

------------------------------------------------------------------------------*/
header{
  display: block;
  margin-top: 1px;
  background-color: #333;
  background: -moz-linear-gradient(top, #555, #222);
  background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222));
  border-top:    1px solid #888;
  border-bottom: 1px solid #000;
}

h1{
  float: left;
  width: 221px;
  height: 36px;
  margin-left: 10px;
  background-position: left 7px;
}

header a{
  float: right;
  width: 78px;
  height: 36px;
  margin-right: 10px;
  background-position: left center;
}

header a:hover{ opacity: 0.75; }
header a:active{ opacity: 0.5; }

/*------------------------------------------------------------------------------

------------------------------------------------------------------------------*/
footer p{
  background-color: #300;
  background: -moz-linear-gradient(top, #005b88, #002e46);
  background: -webkit-gradient(linear, left top, left bottom, from(#005b88), to(#002e46));
  border-top: 1px solid #0089c4;
}

footer a{
  display: block;
  height: 36px;
  background-position: center 7px;
}

footer p:hover{
  opacity: 0.75;
}

footer p:active{
  opacity: 0.5;
}

/*------------------------------------------------------------------------------

section#secCodes
                
------------------------------------------------------------------------------*/
section#secCodes{
  margin-bottom: 1px;
  background-color: #300;
  background: -moz-linear-gradient(top, #005b88, #002e46);
  background: -webkit-gradient(linear, left top, left bottom, from(#005b88), to(#002e46));
  border-top: 1px solid #0089c4;
  border-bottom: 1px solid #004062;
  border-bottom: 1px solid #0089c4;
  /*font-size: 90%;*/
  font-family: verdana;
  letter-spacing: 1px;
  color: #ccf;
}

/*----- boxレイアウト -----*/
section#secCodes > div{
  display: -webkit-box;
  display: -moz-box;
  display: box;
  width: 100%;
  border-right: 1px solid #001a26;
  border-left:  1px solid #0089c4;
}
code{
  display: block;
  /*
  -webkit-box-sizing: content-box;
  -moz-box-sizing:    content-box;
  box-sizing:         content-box;
  */
  /*
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  */
  -webkit-box-flex: 1;
  -moz-box-flex:    1;
  box-flex:         1;
  
  padding: 10px 30px 10px 15px;
  
  border-left:  1px solid #001a26;
  border-right: 1px solid #0089c4;
}

/*----- indent用ブロック -----*/
span.indent{
  display: block;
  padding: 5px 0;
  padding-left: 20px;
}

/*----- 入力フィールド -----*/
code input,
code textarea{
  padding: 3px;
  background-color: #002436;
  border-right:  1px solid #0089c4;
  border-bottom: 1px solid #0089c4;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  color: #ccc;
  letter-spacing: 1px;
}
code.invalid input,
code.invalid textarea{
  background-color: #300!important;
  color: #f00!important;
  border-right:  1px solid #900!important;
  border-bottom: 1px solid #900!important;
}

/*----- 効かない？？ -----*/
textarea::selection,
textarea::-moz-selection,
textarea::-webkit-selection{
  background: #00f;
  color: #fff;
}

code input{
  width: 4em;
  margin: 0 3px;
  text-align: right;
}
code textarea{
  display: block;
  width: 100%;
  overflow: hidden;
}

code textarea:hover,
code input:hover{
  background-color: #111;
  color: #ddd;
}
code textarea:focus,
code input:focus{
  background-color: #111;
  color: #fff;
}

textarea.init,
textarea.end{
  height: 2.5em;
  min-height: 2.5em;
}
textarea.loop{
  height: 5em;
  min-height: 5em;
}

/*----- コードハイライト -----*/
span.reserved{
  color: #f0f;
}
span.native,
span.global{
  color: #f00;
}
span.number,
span.tring{
  color: #0cf!important;
}
var{
  color: #ff0;
}
var.funcName{
  font-size: 140%;
  font-weight: bold;
}

/*------------------------------------------------------------------------------

------------------------------------------------------------------------------*/
section#secSandbox{
  padding-bottom: 5px;
  background: #666 repeat-x scroll left bottom;
  border-top: 1px solid #fff;
}

/*----- boxレイアウト -----*/
section#secSandbox > div{
  position: relative;
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: box;
  
  border-right:  1px solid #ccc;
  border-left: 1px solid #666;
}
section#secSandbox section{
  /*
  -webkit-box-sizing: content-box;
  -moz-box-sizing:    content-box;
  box-sizing:         content-box;
  */
  /*
  -webkit-box-sizing: border-box;
  -moz-box-sizing:    border-box;
  box-sizing:         border-box;
  */
  
  -webkit-box-flex: 1;
  -moz-box-flex:    1;
  box-flex:         1;
  
  padding: 5px 10px 4px 10px;
  border-left:  1px solid #ccc;
  border-right: 1px solid #666;
}

/*----- 見出し -----*/
section#secSandbox h2{
  height: 16px;
  margin-bottom: 5px;
  margin-left: 1px;
}

/*----- iframe -----*/
section#secSandbox article{
  height: 80px;
  padding: 5px;
  background-color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  border: 1px solid #999;
}
section#secSandbox iframe{
  width: 100%;
  height: 80px;
  margin: 0;
  padding: 0;
  border-style: none;
  background-color: #fff;
  color: #000;
}

/*----- 表示／非表示 -----*/
section#secSandbox.hidden{
  height: 8px;
  margin-bottom: 0;
  padding: 0;
  overflow: hidden;
}
section#secSandbox.hidden section{
  display: none;
}

/*------------------------------------------------------------------------------

コントロール
                
------------------------------------------------------------------------------*/
nav#navControls{
  display: block;
  height: 38px;
  margin-top: 2px;
  background-color: #444;
  background: -moz-linear-gradient(top, #505050, #212121);
  background: -webkit-gradient(linear, left top, left bottom, from(#505050), to(#212121));
  border-top: 1px solid #777;
  border-bottom: 1px solid #333;
  text-align: center;
}

nav#navControls > div{
  position: relative;
}

/*----- 実行ボタン -----*/
p#btnRun{
  position: relative;
  width: 281px;
  height: 40px;
  margin: 0 auto;
  margin-top: -1px;
}
p#btnRun button{
  position: absolute;
  top: 5px;
  left: 72px;
  width: 140px;
  height: 30px;
  border-style: none;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  cursor: pointer;
}
p#btnRun button:hover{ opacity: 0.9; }
p#btnRun button:active{ opacity: 0.75; }

p#btnRun button.running{
  background-position: left bottom;
}

/*----- テスト回数・間隔設定 -----*/
p#controlConfig{
  position: relative;
  float: left;
  width: 290px;
  height: 38px;
  margin-left: 8px;
  background: no-repeat scroll left center;
}
p#controlConfig input{
  position: absolute;
  top: 5px;
  width: 53px;
  padding: 4px;
  background-color: #eee;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  border: 1px solid #333;
  color: #333;
  text-align: right;
}
p#controlConfig input.invalid{
  background-color: #fcc;
  color: #f00;
}
p#controlConfig input:hover{
  background-color: #fff;
  color: #333;
}
p#controlConfig input.invalid:hover{
  background-color: #fdd;
  color: #f00;
}
p#controlConfig input:focus{
  background-color: #ffc!important;
  color: #333!important;
}
input#testNum { left: 61px; }
input#interval{ left: 204px; }

/*----- 表示／非表示ボタン(諸事情により#secSandbox内ではなく#navControls内に置いた) -----*/
nav#navControls label{
  position: absolute;
  top: -4px;
  right: 1px;
  width: 126px;
  height: 32px;
  border-style: none;
  cursor: pointer;
  z-index: 100;
}
nav#navControls .hidden label{
  bottom: -28px;
  background-position: right top;
}

/*------------------------------------------------------------------------------

結果
                
------------------------------------------------------------------------------*/
section#secResults section{
  padding: 15px 10px;
  border-bottom: 1px solid #222;
  background-color: #000;
  color: #ccc;
}

/*----- 見出し -----*/
section#secResults h2{
  line-height: 1;
  margin-bottom: 10px;
  border-bottom: 3px solid #333;
  font-size: 100%;
  font-family: myriad, helvetica, verdana, osaka, sans-serif;
}

section#secResults h2 span{
  line-height: 1;
  float: left;
  margin-bottom: -3px;
  padding-bottom: 3px;
  border-bottom: 3px solid #666;
  font-size: 110%;
  font-family: myriad, helvetica, verdana, osaka, sans-serif;
  color: #bbb;
  letter-spacing: 0;
}

/*----- boxレイアウト -----*/
section#secTestCodes > div{
  display: -webkit-box;
  display:    -moz-box;
  display:         box;
  width: 100%;
}
section#secTestCodes section{
  -webkit-box-flex: 1;
  -moz-box-flex:    1;
  box-flex:         1;
  padding: 10px;
  background-color: #222;
  border: 1px solid #000;
  -webkit-border-radius: 5px;
  -moz-border-radius:    5px;
  border-radius:         5px;
  border-right: 1px solid #666;
  border-bottom: 1px solid #666;
}
section#secTestCodes section.a{
  margin-right: 5px;
}
section#secTestCodes section.b{
  margin-left: 5px;
}

/*-----  -----*/
section#secTestCodes textarea{
  display: block;
  width: 100%;
  height: 150px;
  background-color: transparent;
  border-style: none;
  color: #fff;
}

/*------------------------------------------------------------------------------

table
                  
------------------------------------------------------------------------------*/
table,
th,
td{
  border-collapse: collapse;
  vertical-align: middle;
}

table{
  width: 100%;
  margin-bottom: 20px;
}

td,
th{
  border-bottom: 1px dotted #333;
}

/*-----  -----*/
th em{
  display: block;
  margin-bottom: 3px;
  margin-left: -1px;
  padding: 8px 0 7px 0;
  background-color: #222;
  border-top: 1px solid #404040;
  border-left: 1px solid #404040;
  font-weight: bold;
  font-style: normal;
  text-align: center;
}
th.a em{
  margin-right: 3px;
  -moz-border-radius-topleft:     5px;
  -webkit-border-top-left-radius: 5px;
  border-bottom: 2px solid #3cf;
  color: #3cf;
}
th.b em{
  margin-right: -1px;
  -moz-border-radius-topright:     5px;
  -webkit-border-top-right-radius: 5px;
  border-bottom: 2px solid #3c3;
  color: #0f0;
}

/*-----  -----*/
tbody th,
tbody td{
  padding: 8px 15px;
  border-right: 1px solid #666;
  text-align: right;
}
tbody th{
  width: 89px;
  padding-right: 7px;
  padding-left: 0;
  font-size: 75%;
  font-weight: normal;
}
tbody tr:nth-child(even) td{
  background-color: #141414;
}

/*----- 小数部＆単位 -----*/
table span{
  font-size: 80%;
}

tbody tr:last-child td{
  background-color: #222;
  border-top: 1px solid #666;
  border-bottom: 1px solid #666;
}

tbody tr:last-child th{
  border-bottom-style: none;
}

td strong{
  height: 17px;
  margin: 0 auto;
}
strong.win { width: 71px; }
strong.lose{ width: 50px; }
strong.draw{ width: 65px; }

/*------------------------------------------------------------------------------

------------------------------------------------------------------------------*/
div#progress{
  position: relative;
  width: 100%;
  height: 5px;
  margin: 0;
  margin-top: 1px;
  background-color: #200;
  border-top: 1px solid #000;
  border-bottom: 1px solid #700;
}
div#bar{
  position: absolute;
  width: 0;
  height: 3px;
  background: #c00 repeat-x scroll right top;
}

/*------------------------------------------------------------------------------

DATA URIs @see http://jsdo.it/tsmallfield/datauriplayground2
  
------------------------------------------------------------------------------*/
h1{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN0A\
AAAVCAMAAAD1oRvxAAACXlBMVEX////////fwcXoprrpssLx6u\
znprrSsLz33Obhy9Px5ur2lLv7tND7ttHgy9P26e71jrn6rcz3\
rMr6utT0ytv2zd751uT23ef33uj06+/x6e36+Pnu7O3dfLCXjJ\
Lsfbz55vHx6u76hsz7j9D4js32lc/2mtH2rNjzq9b4x+T54/Dy\
7/Ezmcw4m81CodBstttutttvt9twt9xyuNx0ut12u914vN57vd\
59vt+AwOCCweCBwN+FwuGHw+GJxOKLxeKMxeKOx+MzZ4CQyOMx\
PkIqUl0AzP8DwvEHuOQKrtYOo8kRmbsVj64YhaAce5MfcYUjZ3\
gmXWotSE/C3MLB28HG4MbF38XC28LB2sHL4cvP5c/Q5NDX6tfU\
5tTa7NrZ69nY6tjX6dfW6NbV59Xc7dzb7Nva69rZ6tnY6djX6N\
fV5tXd7d3c7NzZ6dnf7t/e697d6t3b6NvZ5tnY5djX5NfW49bV\
4tWFi4WIjoiGjIbq8+rp8unj7OPs8+yMkIzG1sLb5tjY39JhZ0\
aJeESJeUSOe0mPe0qQfEtPQiZLQChuURZiSx2UfU+VflCWf1GY\
gVNCOy2ShGmWfU+YgFOWe0+Xc03Jw72YZEfd2NbMuLPg1NHgyc\
n9/f38/Pz7+/v6+vr5+fn4+Pj39/f29vb19fX09PTz8/Py8vLx\
8fHw8PDv7+/u7u7t7e3s7Ozq6urp6enn5+fm5ubk5OTW1tbJyc\
m7u7uurq6goKCYmJiXl5eWlpaVlZWUlJSTk5OSkpKRkZGQkJCP\
j4+Ojo6NjY2FhYV4eHhqampdXV1PT09CQkJb7CMcAAAAAXRSTl\
MAQObYZgAABTdJREFUeNrNmId720QUwGX23nvvGfbeUOTzUhTL\
oWxo2YWGUaDsDYWqjkvYM3ESk0RJIQ5eaSmXkCBL1n/F3bs7SW\
cbYgPfl77vO0u693S6n967905WtmbbyVblX0pvMqr8J4kQcf63\
m7OXXX7lVVdfc+11199w48233Hr7HXde0dPTk22+L2MYaifjJ5\
GxR9PddEkLXUaLISJxXe2KLsLEqmBvT6G77VIC17PNNId8E52Q\
JZLJOEKxvubx1EQsugIdkbK3WnTDRH4MZHiEygdr1pjCQkMxPU\
NPohpCzXgGQvrKdJHaatK9SdobpL09PJx/Pn9yPh+i60UJ3zvp\
GEo3p5GU+k90JVyFw2rR5fMjIw8Tdz1O2nMjY2MvnHH2RWMBnY\
FimcA6jWJqV+uuoiiYHleLbpTIutHR/EA+n984XigceNaFhcKn\
O3dyupQcjJociJ3QOTSzsJ5GHdvs6Q4RT3ExtsWSdG1c98QEha\
JBzFzFszF2wQbjOrP2yEgNrma/ioMdQefR4WlfduyRB9evX/fe\
k08MDGy8f+3a/U8/bNOmiS927WJ0KopJs4+iBPlh1QEO/FxN63\
rUp4sahk/XqIh151RYDsVcV4dry6a6egl0LlNANFsu83ulbsFI\
nlfxMxRmXfPwBDBySQ/mdF5ZGGYLRDYcd8ih34+PF+6++Pxzvp\
0i8s1pv5k8MDXZOXHkOwgO7FyHkpHIsMs+BIk0SCpWg1zaQQpl\
OitQCp0jKTyYOL+KVMv8qCi1UMJidCVqxelcy38L2Z+I/HDk4S\
fsc/Tx1rvnnnfmi9NEvtq92+TVQG8NvRY6jdRCIy1UHC5EVyMv\
tMFObDpHHM6n5MqJSHSBAjOAUrg3otQjLXTMHoZgcFWI+Ozk5O\
Sxe584MfHUAQcfceoFp+x4aQeRT177vQs6HSUgPPtAJeCkidbg\
fdOYVEp0GUIidRTHAmdUIEI9D7PItHyFiLUKnzA4zQEnzjssgD\
mdhZ06ULOg5SUoO/XQXvu9/+jTG569r/+7r/v7+18m8st2jE2e\
JDV5KxZHmRY62ufDawKOVwRcg8c50vsHZ9EFByvHE1f8JvoSav\
7Ey3RZ0u4GDwBb2CjVgM6R3qeor9npY4466TFrauqB2dnZu0jb\
TNpsbmGB0WX8rKKBg+C6iQ4yjU+H/JLIcyaLu3kpuGwxIcgITq\
hmSAr+y4fw1b65E6w7KVrKfkWYOWjf6Wemrel7isXivaRtJq2Y\
W1w0xXT7wnga9WUTnYGSEl1ClenYCbxSzMVppfO6owPzumTUzn\
dklc28NTNTfGVubk60uY9f/yOo5tEAj2w5My10GRQP0aVTAk/y\
XaUSRF8LhB9qndPR+UPmb6arhfGyP9MsMlP8VZLBpSXTZ4oHeG\
xXqbHgSwjSuCjhsCTVBF+rfN2xKodhCYnk35AhID3U6vWa0xEd\
mJfxfCnShs6xQ3jk63Vb7svPc1ty23MfDQ4OfkjalsHPAjqyW+\
G7aIOEHXipD6WgsMe5A9PcvxpLpwIvvNCshgdzKZfZo2WIhiVV\
hJXo3NaKEKJTbCk4zcXFxYV3FhaWXl1eXhZt2Qw2yv4XUDwF81\
bjKKn3xsCPEJ7EIqX3xkWxiDJVGI7sO9xS6INIhlBsqxs6v/iX\
29LJeJSO8C39KYnZ8vWaIF+vzC1RmjxierCxTCdoR68qdmIxmo\
sETKnKPl89XGLB2rK8SKqHukEityM6tqkr2bg9ncCDpw6Z7WSo\
7T8PKj9mjKZ/GFSjkz9UGnTv/DfiOl18wpONsruy0V9E7fXu54\
vtvgAAAABJRU5ErkJggg==");
}
header a{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4A\
AAAbCAMAAADlN0lrAAAC+lBMVEX////////r7e7r8PLx+fzs9f\
jr9Pfr8fPr7u/w9/nr8vTq8fPr+v7r8/Xr7/Dr9/nw9vfr8fLq\
8PHr8/Tr7Ozr6+r+9/P97eX+9O//+fbr5+XwXh7wYSLwZCbxZi\
jwZSjxZynxaCrxbzbxcDbyfUnzgE31lGn70sDvXB3vXh/wXyHv\
XyLwYSTwYiXuXyXxZSjwZCjvYyjwZCnwZSnvYinuYinuYynxai\
/xazLxcTrxcz3ydD7ydUDzf03zhFT0jmL2oX32o4D3qYf6xa76\
yrX83tL849n95tz96N/96uL+9/TtXifsXCftXyjrWyj+8Ov+8e\
z+8+/+9vPpWCfqWijpVyjoVSfuz8Xv4t44NTTr5ePmSRzmTyPm\
UCTkTybnVCfmUSfmUifnXDTnYTnobUljOzDrl39JNzLttqbpzc\
Xq1c/jPhXjQxvjRBziQx3jRh7iRR/jSCHjSSLiSCLjSSPjSiPi\
SSPiSiXkTSbjSybjTCbjTSbiSibiSybhTCbgSybcSyfbSifjTi\
nXSifSSifjUCvQSSjISCjARym/RynjVTK4RinkVzS1RiqyRSrk\
WzilRCuiQyvkYD6fQyucQiyaQizkZkblaEmNQC2JQC3kbE+CPy\
7lb1LlcFN8Pi7ldVl2PS/lel5xPC/mfWRsPDBqOzDmhW3njnfn\
kXtbOTFXOTHnl4Pnn4znoI7orp/os6bpuKzpvLDpwbfpycHp0M\
rq083p1tH/+/pSODI+NTPq3Nnq4d/w5+Xr4uDr6en//v7w7+/r\
6+uampqZmZmYmJiXl5eVlZWUlJSTk5OSkpKRkZGQkJCPj4+Ojo\
6NjY2MjIyLi4uIiIiHh4eGhoaFhYWEhISCgoKAgIB+fn58fHx7\
e3t4eHh2dnZ0dHRycnJxcXFubm5tbW1sbGxoaGhmZmZkZGRiYm\
JgYGBfX19cXFxaWlpZWVlXV1dUVFRSUlJRUVFOTk5MTExLS0tI\
SEhGRkZFRUVERERDQ0NAQEA+Pj47Ozs6Ojo4ODg2NjYTiqjWAA\
AAAXRSTlMAQObYZgAAA39JREFUeNqllUtsG1UUhr87cz12/Izr\
V+y0TdMIhaa0SLCpBKgCVVBVBVVZVBUsu+iKFWILG3asEBvEs6\
qQKiSkZIFgg1qhAIsGNRSikBJSUJynScb2+BGP7ZlhMTNJoBII\
+2zmztxzP/3/PfeeEe/sCh4O+Ro9hWwb+y97YEejR1xgb6gWFx\
xveOKRfnAdC0B0d91v2gGd/xengpNxJVbirrqNwYLaB672RLYL\
2Kdefhr49sktS1X6MWu9VNMGEHZ1CsC2RpxAHzhhy0Padfi4BU\
C9+x+VbTaMTiwePrghtU0xFAWkBDp17aPZAOFZByCrOPv1Xtrx\
RyN5AEwruFPSKZFYi8d82NYcrD/IRpG38m26QUesK8J0NdWV0J\
7Z9h3bx7mTy3OdZHJ0tLGzU60GPbHrc6SO2Curqw/ycnK2rbSn\
Lyon4W53CKCrCqTPqHnn+hczDEC5LXRdpGLZQrPYded+q6SGo4\
aYMNZW6/L6aZTOh63Ym3w28QrAc2dXxsWMh6vX3BNotUOuYFVM\
mIa+bSbziYWymxM9HK8t6qQLJ6oVefNxRPvq58+rvGi7pXAY4N\
wHbuqfRd9r0hPshFK0rAjgX6Hj5UWdo05xO10YkwQINo2rF4BP\
dQh8hZMQSsJLjR1zF1UrYZ9rQ+hvhV7+mSM5jczW2vayREO0vo\
98Y6tCW0zUxvny1aAtpvA8Rt2lv+4j5D8bRmO4ENgqqodHhjYa\
Cho0zjSfPdUSqiLy93g3pxbkpJvZ+mG+C9DaZsCnVEz3cKzXPd\
74SPXucoCln+rHxiUBsMSNG+/bjkAPCwIbUUW+4GbuOs35lXi7\
+mNX03yrS4HFZLhcmdvzXP2jNXA852yt348clUjANqPhx/Q1e1\
T75IKZSeNfioH8jmEAMpvxPI4Z1XKpBARSsbhXLmUsowFmabMk\
mclAJzx9qfpF8dH5zdvYG2nH7wARzEp5N56IBX2rg1AxKq1EPL\
m3mSe9ZxCQnLuH2ohcNMWVpgXcessWB3pq8OErO/hvLYCE7Ebu\
v56OfP2ewqWFwhu1lEKv7Q6VSNxC1Yu/567karZZK5ntI+nsdK\
8Nisk7QChETW+o9YaSE4Wo9V2v6gS87d09dfX2oWEtVlCs4Jnz\
PavjdKVi1DtgWWedYVWEo8mZ832oA7j2lN6so8pYJDl1k95j/w\
947Zm6Fr1Mf/EXARNOQ6focRcAAAAASUVORK5CYII=");
}
section#secSandbox{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA\
AACCCAMAAAC5BPK3AAAAyVBMVEWMjIydnZ3V1dWGhobT09ONjY\
3ExMSVlZWWlpbNzc3Hx8eSkpKtra2lpaXCwsLS0tKLi4vR0dGw\
sLCkpKSoqKjIyMjKysqJiYnAwMCEhITY2NiAgICOjo64uLiamp\
p9fX2CgoK+vr6KioqqqqqTk5POzs7d3d2fn5+0tLSioqKsrKyv\
r6+rq6uYmJimpqbFxcWnp6eurq6cnJy3t7fBwcGHh4exsbGUlJ\
SRkZG/v7/JycnW1taenp6FhYWpqam2trbDw8PQ0NCDg4PdDDdw\
AAAA4ElEQVR42k3R11ICURRE0cYIIoiIiCioGAmCETCH//8oat\
P9wHq4dapP34Gp0Qe0D/1BN5DzDaiNzHvI1n3fdb4GNaFDJHHz\
HbpGkhKS/yLJC5J4u4PkEyTZQpotZPavv0Ed5K6TKnL6CT/QMz\
K7eYfkF8hcR5pT6BsaIskIaiD91eYltAsNkOYj9IA0K0jzAEk+\
oVuk6aQAjaE+kvv0E7pI8wmZt6F7aIYkRagMzZHTnU2kcwWZ++\
4cQTVk+4/MX0jizjqSe/b2FTpDtqt3T6Bz6Bjp+/T/7EGnyFss\
v+MCh0Rc5ZdvlJIAAAAASUVORK5CYII=");
}
section#secSandbox section.a h2{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA\
AAAQCAMAAADXjyqxAAABsFBMVEX////////09/vs8vlkl8lmmM\
tlmMppmstqm8xwn813pNB/qdKAqtOJsNaIr9WTt9qSttmdvd2n\
xOGyy+S80ujH2ezR4O/b5/Pk7fbs8vjz9/twoM54pdCcvdynxO\
CyzOW90+jH2uz6/P3+/v79/f38/Pz7+/v6+vr5+fn4+Pj39/f2\
9vb19fX09PTz8/Py8vLw8PDu7u7t7e3s7Ozr6+vq6urp6enn5+\
fm5ubk5OTj4+Ph4eHg4ODe3t7d3d3b29va2trY2NjX19fV1dXU\
1NTPz8/Ozs7Nzc3MzMzLy8vKysrJycnHx8fGxsbFxcXDw8PCws\
LBwcG/v7+9vb27u7u6urq5ubm4uLi3t7e2tra1tbW0tLSysrKw\
sLCurq6srKypqamoqKihoaGfn5+dnZ2UlJSTk5OSkpKRkZGPj4\
+Ojo6NjY2MjIyLi4uJiYmIiIiGhoaBgYGAgIB9fX18fHx7e3t5\
eXl4eHh3d3d1dXVzc3NwcHBvb29qampoaGhkZGRjY2NiYmJgYG\
BfX19dXV1XV1dWVlZVVVVTU1NLS0tKSkpJSUlISEg/Pz8+Pj4z\
MzNO4OVKAAAAAXRSTlMAQObYZgAAAopJREFUeNqtlOlbElEUxi\
/t+77vCTbgBmZekGB0lCwTV9JRo8hyxCydClOjksoBN4b3X+7c\
mYlKeB6/8H6Y53Duy/zmvPfOsEdVxGqt3oMV6q055PGR6zdOnD\
x99tztO3cvXb6yf1/docc1h/QdPnrs+KkzN2+dv3CRIFev1R3o\
qzmkX5LukerrPR6Pm+RySf32ig6dsfSmuO6p+FoJld2Ers/Yyz\
6v1ytA9YIjKL64bcliSU4CH1R5b8gaCrO8oqsD212iGGxsaPAR\
SLKnIUjjoONJ8oiOHI8qe0MAtUOugs5hWBRDzc1NgiOmIQpBmo\
dsi4GFaZCmkc2AZYsoZeP0cBkDRjKD4jQ9xSaKadsKLLDkWsm2\
6IZhhYSCBq2bqhE/qaWxwRpGjOLyj/yBaAPr2NJUmADPrqTzWI\
lRAhsmzJ1tmEqitDOXx0uypoEldaCE5R8o9Ovk/xmm7gz0EeTF\
gKMBS/4mn9cexRUYLUPkReRCL4A3nLPE21WYlF+evwI6u4CJDG\
Yn57Gk2HFFPuEzj2xjZhHmEA9bm5qKlvBEnIBWR4EmaxS3uzXx\
F0J7EqbMeGfcwM4GEKRGh2jE6LbrIkzkIjZEIX9E/OkdckGRES\
tZ61oPY2NtZd1vkQSkbawSQoEU+CQV5Qbd9gs0VVUHww5EnEZW\
RGqeLNa5oai1HL5SXuPt/+iBX/K428erQsy54i5ICubqwvfhbg\
eSMLFiUJrvHUgGekh+BtAkE/x/BSQ+UQXCPppb87sgyusc8Otp\
jwNhU99gLssdugOhoaIis1SMTQUrNOUc8zCXmUxbqHDxnkWDIZ\
mKcoNzhXWFOQ8LiPWLdT/kwUjMsgiFuHgTg3R9XkW1/nT9BtPH\
ICOUdnT+AAAAAElFTkSuQmCC");
}
section#secSandbox section.b h2{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMA\
AAAQCAMAAAA1UzHIAAABrVBMVEX////////09/vs8vlkl8lmmM\
tlmMppmstqm8xwn813pNB/qdKAqtOJsNaIr9WTt9qSttmdvd2n\
xOGyy+S80ujH2ezR4O/b5/Pk7fbs8vjz9/twoM54pdCcvdynxO\
CyzOW90+jH2uz6/P3+/v79/f38/Pz7+/v6+vr5+fn4+Pj39/f2\
9vb19fX09PTz8/Py8vLw8PDu7u7t7e3s7Ozr6+vq6urp6enn5+\
fm5ubk5OTj4+Ph4eHg4ODe3t7d3d3b29va2trY2NjX19fV1dXU\
1NTPz8/Ozs7Nzc3MzMzLy8vJycnHx8fFxcXDw8PCwsLBwcG/v7\
+9vb26urq5ubm4uLi3t7e1tbW0tLSysrKsrKyrq6uoqKinp6ef\
n5+dnZ2ampqZmZmXl5eWlpaUlJSTk5OSkpKRkZGPj4+Ojo6Li4\
uJiYmIiIiHh4eGhoaFhYWEhISDg4OBgYF/f399fX18fHx5eXl1\
dXVzc3NwcHBvb29tbW1sbGxqampoaGhkZGRjY2NiYmJgYGBfX1\
9dXV1XV1dWVlZVVVVUVFRTU1NLS0tKSkpISEg/Pz8+Pj4zMzME\
qECgAAAAAXRSTlMAQObYZgAAAoxJREFUeNqtlOlX2kAUxYfu+7\
7vFWzADax1WNRAxGoVraJRQatdkBab2sUutrXSImiDJPdv7psE\
bQXOsR+45yRnuDNnfu/dlwN7WEOszuo/WKX+ejMGjly/ceLk6b\
Pnbt+5e+nylf37Gg4N1JsxePjoseOnzty8df7CRWJcvdZwYLDe\
jCFJukdqbHS5XE6SwyEN2Ttr5iyLrZn4n1vSOrRKL6FpWjohVj\
GP2+0WnEaBERBPzD5Twpyyho0FvjciASypcoWZh9AXWg03NzV5\
iCPZvRCjedg+E3vMw4AalPdmaMjyHqWKkeIqEGdspLW1RWBELw\
QhRuuIfQaYEaUsatDy+TiFVtKEmTZNbbaEFZFQCboIY1YUTCQd\
+ry4e16cFAw5Rn4vG/WS2pqbrFZEIw7v6DZDfQF8UjMw8Cukv1\
sw8IxMYxMw14FXbB65tGE8Yiy+jmKKf8TWkoHndLeBtCwYxZxp\
JnmUjfkseVs8brsRh29sh6HQ070IY4SH2FQmh68UXtK/Ac3/Fl\
lZR3J6FXN9jL1GNkDnWeApiuE8CmFuM34a+BahGtrL8rVYjTid\
7fFdDIXC9vcmSvi9hWwXGREKoYfMkDVTpMLWPEIUGI/SK0DbwT\
47q0BvEU8YG+/Y0f02STA6xqsYIbaCN/ylda+qiKCFWUJSVVUm\
24y4GEkaBS62yzOXmY5UhE10/qMHXsnl7JyoySi8NysYGoofFn\
8oUZvBllFcNpEM/mVkMzQbqmGS75ZP4pM1GLHv2MhUMFimAHO1\
i5UZLFPE5gyPbDNWKMjNz8wfZVP+Kk2VP3DOFeuRaeKsr4sHxU\
IYIRqpZcpB7hcM+xeTAzxIIxbbQt1UcrCb2pyuoTr/Xf0BOFAh\
ZPX9or4AAAAASUVORK5CYII=");
}
p#btnRun{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARkA\
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\
owAAAABJRU5ErkJggg==");
}
p#btnRun button{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwA\
AAA8CAMAAACD1KJ5AAAC/VBMVEUAAAD///+0AAB5AAB3AABzAA\
BvAABqAABpAABKAAD+AAD8AAD6AAD4AAD3AAD0AADzAADwAADu\
AADsAADqAADoAADmAADkAADiAADhAADfAADdAADbAADYAADWAA\
DUAADSAADPAADMAADLAADIAADGAADFAADCAADAAAC9AAC6AAC5\
AAC3AAC1AACzAACwAACuAACsAACqAACpAACmAACkAACiAACgAA\
CeAACcAACaAACXAACUAACSAACRAACOAACMAACKAACIAACGAACF\
AACCAACAAAB+AAB9AAB7AAB2AAB1AAByAABwAABuAABtAABrAA\
BkAABjAABdAABaAABVAABRAABOAAA1AAAmAAAUAAD/AgJDAQH/\
CAjNCwv/Dw/AERH/GBiyERGeERGUERGHERHwICB0ERHGIiJbER\
HUKir/MzP6MjLzMjKmIiL/NjbrMjL/ODjjMjKZIiLbMjJ+Hh6F\
ISH/QUGyLi59IiJzIiL/TEzDOjr/T09tIiKfMzPRRETkUFDARE\
SJMzO1RETbU1OrRETPVVWkRET/bGz/dHTfZmY/HR3/dnb8dnaS\
RET/eXmURkb/enqNRET+fHz9fX38fn7/gYHJZmb8gID8goL8hI\
T8hob8iIjbd3f9i4vkfX39jIx+Rkb9jo7Ud3e5aGigWlr9kJD/\
k5P9kpL9lJQ/JSX9lpbId3f9mJjFd3f9mpr9nJzBd3emZmb9n5\
++d3f/oaG9d3fHfn79oqK6d3f9pKT9pqa1d3etcnL9qKj9qqrj\
mZnJiIiwd3f9rKy4fn79rq6sd3f9sLC1fn61gYGld3f/ubnSmZ\
mjd3e5iIivgYGqfn6hd3f/xMTbqqrFmZnwu7v/yMj/ysr8yMjr\
u7v9y8u/mZn/z8/8zc3/0dH9z8/lu7v90ND/09Piu7vOqqr90t\
Lhu7v91NT91tbdvLz92Nj92trYu7v93Nzpy8vWu7v+39/93t7+\
4eH+4uLQu7vw3d3dzMzt3d3r3t7o3d347u748PD27u7z7u4ZhF\
qIAAAJuklEQVR42s2Za4xV1RXHf2utfe+dBwwKKEhRG6zVqoMV\
8NW0VSlzLg/fpg9MP9UYY5M28VGbxlatRtuk2Cb6wfqB2qih2r\
EKRIV7Z3yAUmNswaZEIMbGB0nRFkUE5nn36odzzsydYUauZKyu\
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\
QmCC");
}
p#controlConfig{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASIA\
AAAWCAMAAABT/GGLAAABrVBMVEX///8lJSUmJiYnJycoKCgpKS\
kqKiorKyssLCwtLS0uLi4vLy8wMDAxMTEyMjI0NDQ1NTU2NjY3\
Nzc4ODg5OTk6Ojo7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0\
NERERFRUVGRkZHR0dISEhJSUlKSkpLS0tMTExNTU1OTk5PT09Q\
UFBRUVFSUlJTU1NUVFRVVVVWVlZXV1dYWFhZWVlaWlpbW1tcXF\
xdXV1eXl5fX19gYGBhYWFiYmJjY2NkZGRlZWVmZmZnZ2doaGhp\
aWlqampra2tsbGxtbW1ubm5vb29wcHBxcXFycnJzc3N0dHR1dX\
V2dnZ3d3d4eHh5eXl6enp7e3t8fHx9fX1/f3+AgICBgYGCgoKE\
hISJiYmLi4uMjIyNjY2Ojo6QkJCRkZGSkpKUlJSWlpaZmZmamp\
qbm5udnZ2enp6fn5+hoaGioqKlpaWmpqaoqKipqamrq6usrKyt\
ra2urq60tLS1tbW2tra4uLi6urq7u7u8vLy+vr7Dw8PFxcXGxs\
bHx8fIyMjT09PU1NTV1dXW1tbi4uLj4+Pk5OTw8PDx8fH////p\
ZK2TAAAAAXRSTlMAQObYZgAABEVJREFUeNrtmP1b2lYUx294KY\
Fo0KoRxVfoBFTAaokW5D1q4ztaS9vBUqzpsKvd5jq2Md2Giy8I\
OX/zbgK01G79Keypz8P5AZ5zw73nez98zyUBoUYsxKJ21I7PRY\
LjRtoU/iOYWSt+jScTDvzmmmgD+ST6l5cDjD/Jrywn2aF7j2L3\
2khuho9LJpY2d56k91JrS4nF8MO7bSY3ossbi2+n9x7vpra31u\
PBgK3pmoUkSaqNCN2NbO7t7Gzw/Poaz4cdTVcoKy8IwmIrIZlN\
n6zeQZq+NETuldTWZtzncC1wy1zCb21CFAQlrtnWFSfSP99cnR\
zOHX1hiOb5jfXIqJWm+/yxWJQd+BgR3VeCgpEgEUkYEUUYTTqd\
WbvaRgIgjL2kJwzYTZSRMJAUIUCJQmYDYawZjDIQejMy4fJIR1\
jqKZ5p0ZMWgkDoDqGZ65T9EXqK1OnIuho8OMWyIZ5f8tBK2Nlw\
KOCf9TcjMusEODWWQCQFkPBA6XW1mtGuz0rYpZKFeHYNFwGkmz\
6Dy4Ow4tw48fQSJE7pO533EsoZKo/LEzJs11KEJfHX4iqAXVcE\
rVyn7O8QyqEX1erLmhoRoen7M+zyUmRURdRzf+HNu0WPqxlRMC\
0D14QI5AsA7TovDVDIGniQclXZZq3CUSHrLEFFdAZBFk+VOqZh\
+Xr/HDgfADkNlUaKJclYVBkymBurHSKolEFW9vigpgahSZ93Nh\
EPjakmygSib/M7E9vJj8+iA7oZkd14DqJ2ZxEARxPnwAeLkJ0B\
EBhaKUR35qC6qjaaMQ9CUIACeQ5rAhw1Uizpyo46BHiHuSENEd\
mtACllj6oaPNjT2ze1uBjy9GBEu2/yxT9Piq8OxbEPM7hDkO0K\
IlMdkWJxjRHp1W8CRPoImzSrIqLtUv13wlRSL0qYxuEZsI20rs\
IBsqCdHHV/iiRl9ZoadXx07uH87MRQj23m4Ne//vit+Mu3QWvT\
DFMZsmQJXhP5ViAyAERp3C4b0QjnMpA9eZAtApxR5jvkWAlOFR\
HHsB+NJFg0Dufy1fu0rgKnZXC3AtFBTU3tvsgVmJvze9we3/cn\
PzyaT7/9LtI8w3wMBbQP8De0AhF1AddHePnyYe6UGr8QfgcJbe\
BKs8+KLy5rdeJQPc6duNWjXXyfNlSE8IdRKxC9rKtRwuacmPF5\
vZPpzI/H0aH+vufi01h9CodnoCzudXsBH6H48+qApCEixFYUr4\
hXIJ8iVpJl5YjGDmezElQKtb9nUrjnJLciRPVLPa2pIPFhndVO\
jbo/jEhZvaEGE/pqZNg5NeVxPdnOv5q0DfSvZlLR2/JkYMI3UZ\
WWV+kdHOrvYkbGHRPeb3KhIWZqa2u+97YgIn8CmW19mW4VCMMw\
nfGvd7nEylJ08PY8YIoS+7/VsvX2Oh6E11bi0QX3qLX9cP8v0d\
fdNejsHpj2jVgZpo3jMzHIdNJ0R5vDh/gH4clxyBZyV3cAAAAA\
SUVORK5CYII=");
}
nav#navControls label{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwA\
AAAgCAMAAAABieUBAAAC0FBMVEX///////8zZpn+/v77+/v4+P\
j29vb09PTw8PDs7Ozi4uKxsbGoqKienp6bm5uampqYmJiWlpYh\
QnUiRHYjRnk1U4EqQWJ/kq6ClbF6iqIkSXwmTYA1V4bP0tbe4e\
UoUYQcOVwqVYh5h5ksWYwfPmIuXZAgQWWVorCdqriir72qt8Wn\
tMKwvcu1wtCzwM6yv824xdOmsLvFy9LS2N8xYpUjRmolSm4+bp\
49bJw+bZ0+bp0/b55Gcp9FcZ1JdaJKd6NJdaFMeKRQeaFSe6NW\
f6hVfqZYgapXgKhZf6RbgKZdg6hcgadeg6lehKlfhKphh6xgha\
pjia5iiK1kia9liq9jhadqjK5sjrBukLJti6p1lLN0krF7mrlx\
jKd2ka17lrF5lK+En7uDnrqCnbiDnrmGobx6kqp+lq6Ko72Dm7\
OHn7eFnbWKorqJobmNpb2btc+Pp7+as82SqsKWrsaVrcWUq8OD\
l6yTpLWXqLmnuMmmt8itvs+qu8ypusuisL6otsStu8m7yde7xc\
+ss7qmrbTCydC/xs3M09rJ0NfIz9bGzdTFyMvh5Ofv8PE1ap04\
b6IoUHQnTXE6c6ZpiKZvjqx3lrSAmK+eutOduNGRqcCQqL+Jnr\
KVqr6XrMCdssahr7ymtMGvvcqruca2xNGxv8y6yNW5x9S3xdKx\
vMY8d6o+e64rVXhAf7IuWn6fvNWwt71DhrlCg7ZAgLJFir1Dhr\
c7dqI6c58xYYUyYoZPjLs5ZIQ+aIl5mLBogpVnf5K5vcCvs7bJ\
zdDGys2cnp78/Pz5+fn19fXy8vLx8fHv7+/t7e3q6urp6eno6O\
jn5+fm5ubk5OTj4+Pg4ODf39/e3t7c3Nza2trZ2dnY2NjX19fW\
1tbV1dXU1NTR0dHPz8/Nzc3Ly8vKysrJycnHx8fExMTDw8PAwM\
C+vr66urq4uLiysrKpqamfn5+IiIiAgIApKSnTB3I1AAAAAXRS\
TlMAQObYZgAABWJJREFUeNrlk/tfU2Ucxx8/lrlp9+xOWWZSkW\
hkmwwd18Q7QsrFRYm5vOAUlTIzRSs1LTVKEFHMS16ysNLKMi95\
y8MYZ7Cz4RgTWp4F5uVf6Hm2s8G28CX0aucH3q/XM77P9/t8v+\
/zcDZydzeG3NmNIXd1Y8jt3RhyRzeGXJE4ffzokQCOHj99JWzI\
Yyd9JY799MPhQwEc/vXvvuHi2BE57P7L//Ljt8H87A7b5f/Ffu\
j/t5M+Et98/10Ijj7hQh572+W/DuVC+C4vi51cljjwVSj1l8OF\
315ZGUY7aZU4sJ9S2UOiku32W33F1kH6t+inXv/ByREjTnoywK\
DWNvTQt7a+OiIg1xk27vdS2qNnqRT67OV6fWTrIOAG3V21kxaJ\
jcWMUu/dSz2bYsFXbNFjrKulBXjmfeBDTwaIEv3lls+w6Q89hu\
evbZfrDF578WYm31zczn4yEYDaTS8vdNxN7S491IbO2olb4tMN\
Hrx6b7yhzld0v4mJdrcbiHYdXFN3iWVY7G5jeV1jKuYLFy+5u4\
TXPs/7r5/Xzp6LlOgl84VIoO4G7V20E1HipfVe6APMk8L1Sl9R\
LMHEelEEBi8D/hTfTkQ2jZvFXDUmn2D1VMwpoa9oTCSycyFmx0\
GdfYImS+KQfTAVqQdFsTwOiUPpn0SkRooheOwFvh9dQZs9FZnW\
5iYnvfwWtbpcFE/Q2ZOHitkoEXNRLk6mix2a1SU7cUkMg0RBgS\
+C2Vd0zYIqbfRo4PkvaHY7kJdOY+fryJmGtGZaH42ynfFIr4iC\
ih74PGdLMnKa6fnxQGySCplNizFui0q1bjuGz89a6XQF47e3w2\
NfDIyc63JRpTYF2OdKQtomxBYtRnpDEnSNcbA2dsauDrCTJolh\
L4bC+4pNc6QH2vUswL8GHR9B498wcteOkfiI1sdiQf04LLDsBC\
p4vmmlIQca61jM4PMwyvwO/cEmYenuKaiYA8179YKzKZiO7cu0\
QMq6oXRErRYLtkPLWzZBdwoaO5K1a5Fuvnhz9mhqnx1kJ06Jpw\
dSevhhu4EmX9E5G5NMJhMwhM43jUGhxemNGUManU6asrL1HC3b\
To1BPH1NPE0ItLGWJb1HCyPS6Jvc5wzhBvb6vRpULKcjGuk8Ay\
bx7GEs47AUM+gqVDo7ad/RZiUOiacGUNr0bDfA6Cs65iLD7HAA\
e4oA41RkWFbR+AUk7KE8ZnU4xmORhS36xTA6tiLZuJcGLMEaWT\
Ie79KjMZaG1RnIqncE06F9FV0pWBTF5tJ5C5FgdkzFTDOdG7sG\
WYixOLpuJ3aJ/k+EovAV7fnI4O124MsdgIK+8VGxNLamYZRhus\
F6wW6fgEV1bNGSwr4VmsJ4GrAEa2TJfCS8YZhi3TYln17FbA+m\
Q/v02Akp0MREs7lsXgom5UAVoxwMja46FlqFzX5z9jxDZoid2C\
T6Px5Kla9oM+AVk80GrNgNVNmWJGhmZmCFJUKXAG1ZLa2nYWEt\
W0WsbJumSSijAUuwRk+y7GWosvhtE6HVfVxrC6ZDuyEZyFqtiG\
Ij2LwInYbtrTYtlpgzMdNoC7HntbdnBNjTA+1EkOj/SCic4Ifn\
jPST45RKjmbNiqoaI6cULCYFp+BZ3cjxnuUpCzVVCp4GLMEaPU\
lewVVVC7yRU5gsQjAd22kbZ1J6R7B5FlMV2wuCgm6quRrhP9iJ\
UuL+h0N49LwyXMhjJzUST957XzAP/l4TLuSxk2oJ80P97gmg3w\
OfcNXhQh47Ufg5f65XAOfOK8KIHHbSuxtDuNtkhJPXThp6yUiD\
vHZy9eytsnH2qrx2cv2vM7fIxBn3dXnthFy/5uzdUwZ6O6/Jbf\
8HYoAolFC9hLYAAAAASUVORK5CYII=");
}
strong.win{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcA\
AAARCAMAAAC4uUHHAAABHVBMVEX////GxgnBwQre2Anc1gna1A\
nc1QrQzAs/PjdOTEE/OR3/zADwwQLTqgfEnwm1kwuniA6YfRCJ\
cRJ6ZhRsWxdORBv/32Dw0lzErU+Yh0OJej/Eu5W1rYsxLyaJg2\
t6dWExMCzitQVdTxnTuVSnk0dsYTddVDMwLSL/8r/i1qrw5LXT\
yKCnn4CYkXbxwTDnuS7dsSzFnie7mCyvjipuXCRoVyJiUiFORC\
NLQSJQRiVHPiFIPyMxLSAvLCJsZ1ZdWUytiiL/zDP5xzLRpyq5\
lCWggCKriSXGoC/BnC6dfyaUeCSNciSEayJnVSJaTSZYSyZNQi\
JLQSRGPSNDOiIuKyLx8fHn5+fd3d3R0dG7u7u0tLSmpqZVVVVT\
U1NOTk7DFlVmAAAAAXRSTlMAQObYZgAAAahJREFUeNqtk9dWwk\
AQhgcsBIJRAkQUlIAtNBV7gQQiKvbey/s/hjM7m5Bw4w1zTvbf\
nfzz7exCALyIRGAkEYuNhtM/H87YixgOTkhRHFLb4axJUsSs4r\
k4vt3u7RBn0cJAgE2K6wppvE6jAw6JZQIUSYsQGX8SRR9uty8m\
j2PeRTmSk2eOWNahRqLwJvRWTOIQnehcHgP8vLhd9w7g4aI3GZ\
UchZ1CkFNnAI1VubIq/i6w1+k1v34/ibN1uH3S7O36B2MOVygK\
txMnyctyy7LFaWtoPkLO+9srcdY3NpFz73PIWzC5wKH+qyZfVo\
P3EEQaC2h+Hua0fU6DjFhfJU4lcB3eYalPeU0Ap2HO2eAHmzcM\
I7dkGMuoNJ9dAMihGquwQkL5OV5jXIc5VwNOWVXVEj4ZqTrmSF\
UAnSSbVDkS5L4Jc3YGnBa7SiC1hTlOwLTA6ZIj3Adhzn7gnyg2\
xzZY07JFVQOYErgEYzRhboc5awGORq5ki7VEGZ3BIMtnBCf13z\
enS5fmtQMpmmW4LcRlZcMiwv0EOWl5iZrfvCBm+UXGW5dhZPEH\
RZdhkCgUgTYAAAAASUVORK5CYII=");
}
strong.lose{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA\
AAARCAMAAACo2Q8bAAAAbFBMVEX////l5eXY2NjLy8u/v7++vr\
6xsbGkpKSgoKCZmZmXl5eVlZWRkZGKioqJiYmBgYF9fX15eXlx\
cXFwcHBra2tpaWljY2NhYWFaWlpWVlZSUlJMTExKSkpJSUlCQk\
I8PDw6OjoyMjIvLy8qKioruLKsAAAAAXRSTlMAQObYZgAAARhJ\
REFUeNq9Utt2gzAMU2hJF0pJgMEIXYGS///H2bmUbKfP00tkx5\
IcDsA/wRrCI1UPI6U0ayrXVO4mgboXQbBRIEXAbedyr2I5wkYm\
TtQ/MfET6MULkhVlGtth8gs+i78KIXqgesdpMZukWH2rkGV083\
UJjBe69Bv31to1WvObglG5J8cYKsOnCQnGUCBuMRko0qNCHMa0\
S5VageN6JtyJ3JlckbGPc8Qn7EGBWhF4cGGimXXMJsBNWnl0mF\
TEQm0+m4WhwqQL109srBpCs4vjL29G62qVgcZbpafJNzf4ON22\
7TeOxAFfmWLIzGgvqGyxIbPt8gzXHPmZ3HH6Icfs85vhySvPwU\
HPzNNU/ea/XhZ3FNuvKuIHUPgWP6L6jOIAAAAASUVORK5CYII=");
}
strong.draw{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEA\
AAARCAMAAAC1pzGAAAAAflBMVEX///9jUmdWSFnlsvLYqOTLn9\
a+lcixjLukgq2XeJ+Kb5F9ZYNwXHVJP0w8NT4vLDC1hdKLaaBh\
TG5MPlS/jN+VcK2AYpN2W4drU3pBN0haQnFSPWZCNE+ZZsyRYc\
GJXbWBWKp5VJ9xT5NpS4hhRn1KOVs6MEQyKzkqJy0sKS/yhJVt\
AAAAAXRSTlMAQObYZgAAAVxJREFUeNrNU2F3gjAMDA6GCIjb1G\
2lBVRU/P9/cMklZfh9H5bH43JNcr32AdG/iFWJSLZPtFzFeg3K\
1QaJtUg58uLFIsfQOtKsVoUcrOIMCeMrA09WQtfGLRKm2czSBp\
6UlFHLVkqj26j8O7Og8GSKeXRrUNJWoJBjYjRPzSs2WK9eo0IV\
xeXcUMAkjxbRQiLJhppMlSsFlGuzEHuhXm/UU5Pa2VS4nBH1Aj\
OZWUgTM9QAeZKfvJpv6rDn+CD6FHxXith9Ez12nBwfQr+4V5j0\
Hff7w5utEfWBg2gC3qkLFuOdi06yG8n7zPTEyH2DA4RugoJUe7\
oOgieawqzAtWnW4zHmo6atU3QQ8GERN6WuUz/klkVubpF0hr1+\
ccum1mh7kfflyUIIPm7nDFtVGOeOnlsIs/6KhTvI6L0f4gDWJ1\
UwC7gcOeVZFQf1i83P1m/bjHbtF/Pi/+rX/gEGPi74uhNU4gAA\
AABJRU5ErkJggg==");
}
div#bar{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgA\
AAADAQMAAACUBtwLAAAABlBMVEXMAACyAAAFl01+AAAADklEQV\
R42mOwYahg+AAAA4oBpWJ11qgAAAAASUVORK5CYII=");
}
footer a{
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4A\
AAASCAMAAADllplLAAABcVBMVEX////////z9ffu8fO7ydHM2N\
/P2uDM193d5uvd5Ojk6ewARGYAQ2UAQ2QAQmMAQWEAP18APl4A\
PVwAPFoAO1kAO1gAOlcAOVUAOFQAN1MANlIANlEANVAANU8ANE\
4AM00AM0wDRmgDNU4MTW0RUHARTmwRSGMbWHYiXXoiWnYiVW4i\
TmQwZ4MzaYUwWW5Edo9IeZFEbIFEbIBEan1EaXxVgplVgphjjK\
FVd4hmjJ93m613map3l6d+n7B3lKN3k6KIqLh3k6F3kqCIpLOI\
pLKIoq+Ioa6ZtMKZs8CZsLyZr7qZrbeqv8qqvce0yNK7zda7y9\
O7ytK7ydDM2N7M1tvk6u3u8vQAQmIMPVQRUG4RQVgbSV8zaYMz\
XHBEdItIb4JVgZZVfpJVfI9Veoxmj6NjgpFmhZR3mKh3lqV+mK\
SIo7CIoa2IoKuZrriqwcyqv8mqvcaqu8O7ytG7yc/M2uDP2d3d\
5Ofu8/Xz9vfu8vP8/f1LeUWTAAAAAXRSTlMAQObYZgAAAlVJRE\
FUeNq1lGt70kAQhXPECzUiCSsgiOmqqLWKaAuKsUIbW2OLNCoY\
FK1XpFoLWsFE++vdDSQ0D/AN5sM+bPbMG+bMbASBhyQJs4wLH+\
7MkB65/OfkpZnRz1z8CtyfGf7c69PAqyuDXUgmhEihERWlExsk\
ESciYw/PKt/B4pGrbRQ0TVu+OoIHsq4k6ieRnMaj2ByHj709xv\
F/rw9yc3wHMzMZn8it+0j1h04KjDH08Hy5f/h0iBevHaAjJShN\
yuyJHKdKhOPfU8r3hHahscS4osT6Ji5kWZKazZCkk0FoNE5T/Q\
rP3z7s4w9vefgk3YMeXnoO1D4KMi1UYDYZfmkHyDNFicvryk7F\
DGy9GdYmRmmpitongWjYq8B64JxsYxDbHv54Dc/S4rsTKz+AhW\
QB0NUsA+SqcEy5a8FQozdN6C9RTXv4EN1H8HEATYZHZ9Mzk3K4\
NwYMb1TxLxtRGl/WLKi0BlUURSbqYrXvfZc9SexDFxNW/4UOXm\
qwPyO1EGT4nkjK0CfgRZkJUi0TvwNQU7xuBw/8HOJjfEmxxcPX\
eWaELQxviDHNbfUIPqoUYKcsfGZNVImFb0Tm+JUA7nFJtIuiWG\
9jM0HneDPcuVoEFpUWegx/KkbLg1r9+PAysLZhYjU8h1/MQFXY\
Bdq7eQ4oweRWhzYQMIQbJtov0Ds6tuuwnpjIc+8PtgB3to/ihY\
wN2AazNNNDR+fFN3uwmwIHBNHhkrQBm513YOtpD8EbqQbRy/PJ\
CXb4D/e+UzrNrwzRfDfMZ840vsBF/wWeMl5oGoOu/geLNWIs/n\
dfdAAAAABJRU5ErkJggg==");
}

QuickBenchmark provides a method of graphically comparing the performance of pieces of JavaScript code, including DOM manipulation. ---------------------------------------- ベンチマーク結果をグラフで比較できるアプリ。テストコードはそれぞれ別のiframe上で実行されるためDOM操作の比較も可能です。ライブラリ読み込み機能は後日...? 全画面推奨です / Fullscreen view is DEFINITELY recommended!//<![CDATA[ /** * @charset utf-8 * @modified February 10, 2011 * @description QuickBenchmark * @author Tohl SMALLFIELD */ (function(Data, Graph, Table, Sandbox){///////////////////////////////////////////////////////////// var doc = this.document, bdy = doc.body, $ = function(xpr){ return doc.querySelector(xpr); }, $$ = function(xpr){ return doc.querySelectorAll(xpr); }, //エラー時ハイライト用 codeA = $("code.a"), codeB = $("code.b"), //入力フィールド interval = $("#interval"), loopA = $("#loopA"), loopB = $("#loopB"), initA = $("#initA"), initB = $("#initB"), endA = $("#endA"), endB = $("#endB"), loopNum = $("#iMax"), loopNum2 = $("#iMax2"), testNum = $("#testNum"), //実行ボタン btn = $("#btnRun button"), //テストコード作成用 sbA = new Sandbox("#secSandbox section.a article", "A").reset(), sbB = new Sandbox("#secSandbox section.b article", "B").reset(); /** * Textarea 自動リサイズ設定 * * @see http://jsdo.it/tsmallfield/auto_resize_textarea */ Array.prototype.forEach.call($$("#secCodes textarea"), function(elm){ var sty = elm.style, cch; elm.onkeydown = elm.onkeypress = elm.onkeyup = elm.onfocus = function me(){ var val = elm.value, rgx = /\r?\n/g, lns = 0; if(val !== cch){ cch = val; //まずは改行の数でチェック(ES5:正規表現リテラルで直接書くと無限ループ) while( rgx.exec(val) ) ++lns; elm.rows = lns || 1;//0だとエラー@IE //折り返している場合を考慮しscrollHeightで調整 sty.height = "auto"; sty.height = elm.scrollHeight + "px"; //レンダリングが追いつかない?とき用(主にIE) setTimeout(function(){ sty.height = elm.scrollHeight + "px"; }, 0); } return me; }(); }); /** * iframe 表示／非表示 */ (function(){ var chk = $("#toggleIframes"), elm = $("#secSandbox"), prn = chk.parentNode; (chk.onchange = function(){ prn.className = elm.className = chk.checked ? "" : "hidden"; })(); })(); /** * テキスト情報表示用 */ var log = function(){ var elm = $("#secSettings > div"); return { show : function(){ elm.innerHTML += Array.prototype.slice.call(arguments).join(", ") + "<br />"; }, reset : function(){ elm.innerHTML = ""; } }; }(); /** * 生成コード表示用 */ var generatedCodes = function(){ var elmA = $("#secTestCodes section.a textarea"), elmB = $("#secTestCodes section.b textarea"), show = function(a, b){ elmA.value = a; elmB.value = b; }, reset = function(){ elmA.value = elmB.value = ""; }; reset(); return { show : show, reset : reset }; }(); /** * プログレスバー */ var progress = function(){ var sty = $("#bar").style; return { show : function(per){ sty.width = 100 - per + "%"; }, reset : function(){ sty.width = 0; } }; }(); /** * AとBでforループ回数を同期 */ (function(){ var elms = $$("input.num"), len = elms.length, i = len, e; while(i--){ e = elms[i]; e.onchange = e.onkeypress = e.onkeyup = e.onkeydown = function(){ var v = this.value, i = len, e; while(i--){ e = elms[i]; if(e !== this) e.value = v; } }; } })(); /** * ページ上部へ */ $("footer a").addEventListener("mouseup", function me(){ var y = bdy.scrollTop || doc.documentElement.scrollTop; scrollTo(0, y = (y << 3) - y >> 3); y && setTimeout(me, 16); }, false); /** * Run */ var run = function(evt){ var dataA = new Data("A", "#3cf"), dataB = new Data("B", "#0f0"), iMax = +( /\D/.test( loopNum.value) ? ( loopNum.value = loopNum2.value = 0) : loopNum.value ), jMax = +( /\D/.test( testNum.value) ? ( testNum.value = 0) : testNum.value ), itv = +( /\D/.test(interval.value) ? (interval.value = 0) : interval.value ), j = jMax, testA, testB, tmr, graph, table; var stop = function(){ clearTimeout(tmr); tmr = null; btn.className = ""; btn.removeEventListener("click", stop, false); btn.addEventListener("click", run, false); }; /** * エラーチェック用関数作成 */ testA = sbA.reset().createTest( loopA.value, initA.value, endA.value, iMax ); testB = sbB.reset().createTest( loopB.value, initB.value, endB.value, iMax ); /** * エラーチェック:A */ try{ testA(); }catch(err){ codeA.className += " invalid";//classList使えるなら使いたいところだが… throw err; } codeA.className = "a"; /** * エラーチェック:B */ try{ testB(); }catch(err){ codeB.className += " invalid"; throw err; } codeB.className = "b"; /** * 本番用関数作成 */ testA = sbA.reset().createTest( loopA.value, initA.value, endA.value, iMax ); testB = sbB.reset().createTest( loopB.value, initB.value, endB.value, iMax ); /** * テスト準備 * * TODO: TableとGraphのインスタンスを毎回生成しないようにする */ graph = new Graph("#secGraph > div", "auto", 200);//画面リサイズの関係でとりあえず毎回作成することにした graph.titleX = "Cycle of Test [ops]"; graph.titleY = "Time [ms]"; graph.reset(); table = new Table("#secTable > div");//graphに合わせてとりあえず毎回作成することにした table.reset(); generatedCodes.reset(); log.reset(); /** * テスト開始 */ if(j){ btn.className = "running"; btn.removeEventListener("click", run, false); btn.addEventListener("click", stop, false); (function me(){ if(j--){ dataA.add( testA() ); dataB.add( testB() ); progress.show(j * 100 / jMax); tmr = setTimeout(me, itv); }else{ btn.className = ""; btn.removeEventListener("click", stop, false); btn.addEventListener("click", run, false); graph.drawDatas( dataA, dataB ); table.drawDatas( dataA, dataB ); log.show( location.href ); log.show( navigator.userAgent ); log.show( new Date ); log.show( "Cycle of Test : " + jMax + " ops" ); log.show( "Interval : " + itv + " ms" ); generatedCodes.show( sbA.getCodeString(), sbB.getCodeString() ); progress.reset(); } })(); } }; btn.addEventListener("click", run, false); })(function(){////////////////////////////////////////////////////////////////////////////////////// /** * Dataクラス */ var Data = function(n, c){ this.name = n; this.color = c; this.reset(); }; Data.INFINITY = "Infinity"; Data.prototype.reset = function(){ this.data = []; }; Data.prototype.add = function(n){ this.data.push(n); }; Data.prototype.getMax = function(){ var d = this.data, i = d.length, n, max = 0; while(i--){ if( (n = d[i]) > max ) max = n; } return max; }; Data.prototype.getMin = function(){ var d = this.data, i = d.length, n, min; if(i){ min = d[--i]; }else{ return; } while(i--){ if( (n = d[i]) < min ) min = n; } return min; }; Data.prototype.getTotal = function(){ var d = this.data, i = d.length, sum = 0; while(i--){ sum += d[i]; } return sum; }; Data.prototype.getAverage = function(){ var data = this.data, len = data.length, i = len, sum = 0; while(i--){ sum += data[i]; } return len ? (sum / len) : Data.INFINITY; }; Data.prototype.getError = function(){ var max = this.getMax(), min = this.getMin(), avg = this.getAverage(); return ( (max - avg) + (avg - min) ) / 2; }; Data.prototype.getLength = function(){ return this.data.length; }; return Data; }(),function(){///////////////////////////////////////////////////////////////////////////////////// var win = this, doc = win.document; /** * Graphクラス */ var Graph = function(xpr, w, h){ var wpr = this.wpr = doc.querySelector(xpr), cvs = this.cvs = doc.createElement("canvas"), ctx = this.ctx = cvs.getContext("2d"); if(w === "auto"){ w = wpr.offsetWidth - Graph.PADDING_RIGHT - Graph.PADDING_LEFT; } this.width = w; this.height = h; this.outerWidth = cvs.width = w + Graph.PADDING_RIGHT + Graph.PADDING_LEFT; this.outerHeight = cvs.height = h + Graph.PADDING_TOP + Graph.PADDING_BOTTOM; ctx.strokeStyle = "#cff"; ctx.translate( Graph.PADDING_LEFT, Graph.PADDING_TOP ); /* //座標チェック用 for(var x=0; x<=w; x+=50){ for(var y=0; y<=h; y+=50){ ctx.fillStyle = "#f00"; ctx.fillRect(x, y, 1, 1); ctx.fillStyle = "#666"; ctx.fillText("("+x+", "+(h-y)+")", x+2, y-2); } }*/ }; Graph.PADDING_TOP = 20; Graph.PADDING_RIGHT = 30; Graph.PADDING_BOTTOM = 60; Graph.PADDING_LEFT = 60; Graph.STEP_X = 10;//x軸の目盛分割数 Graph.STEP_Y = 5; //y軸の目盛分割数 Graph.FONT_FAMILY = ' "ＭＳゴシック","ヒラギノ角ゴ Pro W3", verdana, Osaka, sans-serif'; Graph.prototype.reset = function(){ var wpr = this.wpr, ctx = this.ctx, e; while( (e = wpr.firstChild) ) wpr.removeChild(e); ctx.save(); ctx.translate( -Graph.PADDING_LEFT, -Graph.PADDING_TOP ); ctx.clearRect(0, 0, this.outerWidth, this.outerHeight); ctx.restore(); }; Graph.prototype.drawDatas = function(/* data0, data1, data2,...dataN */){ var w = this.width, h = this.height, c = this.ctx, arg = arguments, len = arg.length, xMin = 0, xMax = 0, yMin = [], yMax = [], d, i, j, x, y; i = len; while(i--){ d = arg[i]; yMax.push( d.getMax() ); yMin.push( d.getMin() ); } yMax = Math.max.apply(null, yMax) * 1.1 >> 0; yMin = Math.min.apply(null, yMin); xMax = d.data.length; this.reset(); //0で割らないように xMax = xMax || 1; yMax = yMax || 1; this.drawAxises(xMin, xMax, yMin, yMax); c.save(); c.lineWidth = 2; c.textAlign = "left"; c.font = "normal bold 16px" + Graph.FONT_FAMILY; for(i=0; i<len; ++i){ d = arg[i].data; c.strokeStyle = c.fillStyle = arg[i].color; c.beginPath(); c.globalAlpha = 1; x = 0; y = h - h * d[0] / yMax; c.moveTo(x, y); for(j=0; j<xMax; ++j){ x = w * j / xMax; y = h - h * d[j] / yMax; c.lineTo(x, y); c.fillRect(x-1.5, y-1.5, 3, 3); } c.fillText( arg[i].name, x+10, y+5 ); c.globalAlpha = 0.5; c.stroke(); } c.restore(); this.wpr.appendChild( new Image ).src = this.cvs.toDataURL(); }; Graph.prototype.drawAxises = function(xMin, xMax, yMin, yMax){ var w = this.width, h = this.height, c = this.ctx, rng, x, y, i, stp; c.fillStyle = "#666"; // 縦線＆横線 c.strokeStyle = "#999"; c.beginPath(); c.moveTo(0, 0); c.lineTo(0, h); c.lineTo(w, h); c.stroke(); c.font = "normal normal 12px" + Graph.FONT_FAMILY; // 横線の目盛 c.textAlign = "center"; c.strokeStyle = "#222"; //目盛間隔調節 rng = xMax - xMin; stp = rng <= 20 ? 1 : rng <= 40 ? 5 : ( rng / (Graph.STEP_X * 10) >> 0 ) * 10 || 10; for(i=0; i <= xMax; i+=stp){ x = w * i / xMax; c.beginPath(); c.moveTo(x, 0); c.lineTo(x, h); c.stroke(); } c.strokeStyle = "#999"; for(i=0; i <= xMax; i+=stp){ x = w * i / xMax; c.beginPath(); c.moveTo(x, h); c.lineTo(x, h+5); c.stroke(); c.fillText(i+"", x, h+20); } //縦線の目盛 c.textAlign = "right"; c.strokeStyle = "#222"; //目盛間隔調節 rng = yMax - yMin; stp = rng <= 5 ? 1 : rng <= 10 ? 5 : ( rng / (Graph.STEP_Y * 10) >> 0 ) * 10 || 10; for(i=0; i <= yMax; i+=stp){ y = h - h * i / yMax; c.beginPath(); c.moveTo(0, y); c.lineTo(w, y); c.stroke(); } c.strokeStyle = "#999"; for(i=0; i <= yMax; i+=stp){ y = h - h * i / yMax; c.beginPath(); c.moveTo( 0, y); c.lineTo(-5, y); c.stroke(); c.fillText(i, -10, y+5); } // TODO: investigate @font-face c.save(); c.fillStyle = "#ccc"; c.textAlign = "center"; c.font = "normal normal 16px" + Graph.FONT_FAMILY; c.fillText(this.titleX, w >> 1, h+45); c.translate(-35, h >> 1); c.rotate(-Math.PI/2); c.fillText(this.titleY, 0, 0); c.restore(); }; return Graph; }(),function(){///////////////////////////////////////////////////////////////////////////////////// var win = this, doc = win.document; /** * Tableクラス */ var Table = function(xpr){ this.elm = doc.querySelector(xpr); }; Table.prototype.reset = function(){ this.elm.innerHTML = ""; }; Table.prototype.drawDatas = function(a, b){ var INFINITY = "Infinity", rgx = /^(\d+)([\.]\d*)$/, lenA = a.getLength(), lenB = b.getLength(), sumA = a.getTotal(), sumB = b.getTotal(), scoreA = sumA ? (lenA * 1000 / sumA) : INFINITY, scoreB = sumB ? (lenB * 1000 / sumB) : INFINITY; //とりあえずのInfinity対策 var toFixed = function(n){ return n.toFixed ? n.toFixed(2) : n; }; this.elm.innerHTML = [ '<table cellspacing="0" cellpadding="0" summary="benchmark results">', '<thead>', '<tr>', '<td><\/td>', '<th scope="col" class="a"><em><span>TEST<\/span> ', a.name, '<\/em><\/th>', '<th scope="col" class="b"><em><span>TEST<\/span> ', b.name, '<\/em><\/th>', '<\/tr>', '<\/thead>', '<tbody>', '<tr>', '<th scope="row">TOTAL :<\/th>', '<td class="a">', sumA.toString().replace(rgx, "$1<span>$2<\/span>"), ' <span>ms<\/span><\/td>', '<td class="b">', sumB.toString().replace(rgx, "$1<span>$2<\/span>"), ' <span>ms<\/span><\/td>', '<\/tr>', '<tr>', '<th scope="row">MAX :<\/th>', '<td class="a">', a.getMax().toString().replace(rgx, "$1<span>$2<\/span>"), ' <span>ms<\/span><\/td>', '<td class="b">', b.getMax().toString().replace(rgx, "$1<span>$2<\/span>"), ' <span>ms<\/span><\/td>', '<\/tr>', '<tr>', '<th scope="row">MIN :<\/th>', '<td class="a">', a.getMin().toString().replace(rgx, "$1<span>$2<\/span>"), ' <span>ms<\/span><\/td>', '<td class="b">', b.getMin().toString().replace(rgx, "$1<span>$2<\/span>"), ' <span>ms<\/span><\/td>', '<\/tr>', '<tr>', '<th scope="row">AVERAGE :<\/th>', '<td class="a">', toFixed( a.getAverage() ).replace(rgx, "$1<span>$2<\/span>"), ' <span>ms<\/span><\/td>', '<td class="b">', toFixed( b.getAverage() ).replace(rgx, "$1<span>$2<\/span>"), ' <span>ms<\/span><\/td>', '<\/tr>', '<tr>', '<th scope="row">SCORE :<\/th>', '<td class="a">', toFixed( scoreA ).replace(rgx, "$1<span>$2<\/span>"), ' <span>ops/sec<\/span><\/td>', '<td class="b">', toFixed( scoreB ).replace(rgx, "$1<span>$2<\/span>"), ' <span>ops/sec<\/span><\/td>', '<\/tr>', '<tr>', '<th scope="row"><\/th><td class="a">' ].join("") + ( ( scoreA === scoreB ) ? '<strong class="draw">draw<\/strong><\/td><td class="b"><strong class="draw">draw<\/strong>' : ( scoreA === INFINITY || scoreA > scoreB ) ? '<strong class="win">win<\/strong><\/td><td class="b"><strong class="lose">lose<\/strong>' : ( scoreB === INFINITY || scoreB > scoreA ) ? '<strong class="lose">lose<\/strong><\/td><td class="b"><strong class="win">win<\/strong>' : '<\/td><td class="b">'//無いはずだが念のため ) + '<\/td><\/tr><\/tbody><\/table>'; }; return Table; }(),function(){///////////////////////////////////////////////////////////////////////////////////// /** * Sandboxクラス */ var Sandbox = function(xpr, name){ this.parent = document.querySelector(xpr); this.name = name; }; Sandbox.parse = function(code){ return code.replace(/^\s+/g, "").replace(/\s+$/g, ""); }; /** * 子windowのFunctionで生成した関数の実行スコープが * 親windowのグロバールスコープとなる場合がある（Safari） * のでチェックしておく * * @see http://jsdo.it/tsmallfield/function_scope_test */ Sandbox.NEEDS_FIX = function(){ var ifr = document.createElement("iframe"), iwin; ifr.style.display = "none"; iwin = document.body.appendChild( ifr ).contentWindow; iwin.execScript && iwin.execScript("null"); try{ return iwin.Function("return window;")() === window; }finally{ ifr.parentNode.removeChild( ifr ); } }(); Sandbox.prototype.reset = function(){ var ifr = this.ifr, iwin, idoc; if(ifr){ ifr.parentNode.removeChild(ifr); this.ifr = this.iwin = null; } ifr = this.ifr = document.createElement("iframe"); iwin = this.parent.appendChild( ifr ).contentWindow; idoc = iwin.document; if( Sandbox.NEEDS_FIX ){ var fnc = "_" + (+new Date); idoc.open().write( '<!doctype html>' + '<html>' + '<head>' + '<title><\/title>' + // MessageChannelで通信とか考えたが複雑になるので止めた。 '<script>' + 'var ' + fnc + ' = function(code){' + 'setTimeout(function(){' + 'delete window.' + fnc + ';' + '}, 0);' + 'return Function(code);' + '};' + '<\/scr' + 'ipt>' + '<\/head>' + '<body><\/body>' + '<\/html>' ); idoc.close(); iwin.execScript && iwin.execScript("null"); this.Function = iwin[fnc]; }else{ idoc.open().write( '<!doctype html>' + '<html>' + '<head>' + '<title><\/title>' + '<\/head>' + '<body><\/body>' + '<\/html>' ); idoc.close(); iwin.execScript && iwin.execScript("null"); this.Function = iwin.Function; } return this; }; Sandbox.prototype.createTest = function(loop, init, end, iMax){ var code = Sandbox.parse(init) + "\nvar t = +new Date;\n" + "for(var i=0; i<" + iMax + "; ++i){\n" + Sandbox.parse(loop).replace(/^/gm, "\t") + "\n}\n" + "t = +new Date - t;\n" + Sandbox.parse(end) + "\nreturn t;"; this.reset(); code = code.replace(/^\s+/, "").replace(/\n\t*\n/g, "\n"); this.codeString = "var " + this.name + " = function(){\n" + code.replace(/^/gm, "\t") + "\n};"; return this.Function.call(null, code); }; Sandbox.prototype.getCodeString = function(){ return this.codeString; }; return Sandbox; }());//////////////////////////////////////////////////////////////////////////////////////////// //]]><header><div> <h1>QuickBenchmark</h1> <p><a href="http://www.w3.org/html/logo/" target="_blank">HTML5 Powered with CSS3 / Styling, Graphics, 3D & Effects, and Semantics</a></p> </div></header> <section id="secCodes"><div> <code class="a"> <span class="reserved">var</span> <var class="funcName">A</var> = <span class="reserved">function</span>(){<br /> <span class="indent"> <textarea id="initA" name="initA" class="init"></textarea> <span class="reserved">var</span> <var>t</var> = +<span class="reserved">new</span> <span class="global">Date</span>;<br /> <span class="reserved">for</span>(<span class="reserved">var</span> <var>i</var>=<span class="number">0</span>; <var>i</var><<input type="Number" id="iMax" name="iMax" class="num" value="100" />; ++<var>i</var>){<br /> <span class="indent"> <textarea id="loopA" name="loopA" class="loop">document.body.appendChild( document.createTextNode("A") );</textarea> </span> }<br /> <var>t</var> = +<span class="reserved">new</span> <span class="global">Date</span> - <var>t</var>;<br /> <textarea id="endA" name="endA" class="end"></textarea> <span class="reserved">return</span> <var>t</var>;<br /> </span> };<br /> </code> <code class="b"> <span class="reserved">var</span> <var class="funcName">B</var> = <span class="reserved">function</span>(){<br /> <span class="indent"> <textarea id="initB" name="initB" class="init"></textarea> <span class="reserved">var</span> <var>t</var> = +<span class="reserved">new</span> <span class="global">Date</span>;<br /> <span class="reserved">for</span>(<span class="reserved">var</span> <var>i</var>=<span class="number">0</span>; <var>i</var><<input type="Number" id="iMax2" name="iMax2" class="num" value="100" />; ++<var>i</var>){<br /> <span class="indent"> <textarea id="loopB" name="loopB" class="loop">document.body.innerHTML += "B";</textarea> </span> }<br /> <var>t</var> = +<span class="reserved">new</span> <span class="global">Date</span> - <var>t</var>;<br /> <textarea id="endB" name="endB" class="end"></textarea> <span class="reserved">return</span> <var>t</var>;<br /> </span> };<br /> </code> </div></section> <section id="secSandbox"><div> <section class="a"> <h2>Iframe for A</h2> <article></article> </section> <section class="b"> <h2>Iframe for B</h2> <article></article> </section> </div></section> <nav id="navControls"><div> <p id="controlConfig">Run<input type="Number" id="testNum" name="testNum" value="50" />tests every<input type="Number" id="interval" name="interval" value="50" />ms</p> <p id="btnRun"><button>Run</button></p> <p><input type="checkbox" id="toggleIframes" name="toggleIframes" checked="checked" /><label for="toggleIframes">hide iframes</label></p> </div></nav> <div id="progress"><div id="bar"></div></div> <section id="secResults"> <section id="secGraph"> <h2><span>Graph :</span></h2> <div></div> </section> <section id="secTable"> <h2><span>Table of Results :</span></h2> <div></div> </section> <section id="secTestCodes"> <h2><span>Tested codes :</span></h2> <div> <section class="a"><textarea readonly="readonly"></textarea></section> <section class="b"><textarea readonly="readonly"></textarea></section> </div> </section> <section id="secSettings"> <h2><span>Settings :</span></h2> <div></div> </section> </section> <footer><p><a href="javascript:;">Back to Top</a></p></footer>/** * @charset utf-8 * @modified February 10, 2011 * @description QuickBenchmark * @author Tohl SMALLFIELD */ /*------------------------------------------------------------------------------ reset ------------------------------------------------------------------------------*/ body, h1,h2, header,section,article,footer,hgroup, div,p,span,em,a,code,var, input,button,textarea{ margin: 0; padding: 0; background: no-repeat scroll left top; border-style: none; font-style: normal; outline: none; font-size: 100%; } header,section,article,footer,hgroup{ display: block; } /*------------------------------------------------------------------------------ clearFix ------------------------------------------------------------------------------*/ header > div:after, section#secResults h2:after { display: block; visibility: hidden; clear: both; height: 0; line-height: 0; font-size: 0; content: "."; } /*------------------------------------------------------------------------------ テキスト画像代替 ------------------------------------------------------------------------------*/ h1, header a, button, section#secSandbox h2, nav#navControls label, p#controlConfig, td strong, footer a { display: block; margin: 0; padding: 0; border-style: none; text-indent: -10000px; text-decoration: none; text-align: left; } /*------------------------------------------------------------------------------ 非表示部 ------------------------------------------------------------------------------*/ input#toggleIframes { position: absolute; top: -9999px; left: -9999px; z-index: -9999; width: 0; height: 0; overflow: hidden; } /*------------------------------------------------------------------------------ ------------------------------------------------------------------------------*/ body{ min-width: 900px; height: 100%; background-color: #000; color: #fff; font-family: "ＭＳゴシック","ヒラギノ角ゴ Pro W3", verdana, Osaka, sans-serif; font-size: 100%; text-align: center; letter-spacing: 1px; line-height: 1.25; } input,textarea{ outline: 0 none #000;; } section > div, header > div, nav > div, section#secResults h2{ max-width: 1250px; margin: 0 auto; text-align: left; } /*------------------------------------------------------------------------------ ------------------------------------------------------------------------------*/ header{ display: block; margin-top: 1px; background-color: #333; background: -moz-linear-gradient(top, #555, #222); background: -webkit-gradient(linear, left top, left bottom, from(#555), to(#222)); border-top: 1px solid #888; border-bottom: 1px solid #000; } h1{ float: left; width: 221px; height: 36px; margin-left: 10px; background-position: left 7px; } header a{ float: right; width: 78px; height: 36px; margin-right: 10px; background-position: left center; } header a:hover{ opacity: 0.75; } header a:active{ opacity: 0.5; } /*------------------------------------------------------------------------------ ------------------------------------------------------------------------------*/ footer p{ background-color: #300; background: -moz-linear-gradient(top, #005b88, #002e46); background: -webkit-gradient(linear, left top, left bottom, from(#005b88), to(#002e46)); border-top: 1px solid #0089c4; } footer a{ display: block; height: 36px; background-position: center 7px; } footer p:hover{ opacity: 0.75; } footer p:active{ opacity: 0.5; } /*------------------------------------------------------------------------------ section#secCodes ------------------------------------------------------------------------------*/ section#secCodes{ margin-bottom: 1px; background-color: #300; background: -moz-linear-gradient(top, #005b88, #002e46); background: -webkit-gradient(linear, left top, left bottom, from(#005b88), to(#002e46)); border-top: 1px solid #0089c4; border-bottom: 1px solid #004062; border-bottom: 1px solid #0089c4; /*font-size: 90%;*/ font-family: verdana; letter-spacing: 1px; color: #ccf; } /*----- boxレイアウト -----*/ section#secCodes > div{ display: -webkit-box; display: -moz-box; display: box; width: 100%; border-right: 1px solid #001a26; border-left: 1px solid #0089c4; } code{ display: block; /* -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; */ /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; */ -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; padding: 10px 30px 10px 15px; border-left: 1px solid #001a26; border-right: 1px solid #0089c4; } /*----- indent用ブロック -----*/ span.indent{ display: block; padding: 5px 0; padding-left: 20px; } /*----- 入力フィールド -----*/ code input, code textarea{ padding: 3px; background-color: #002436; border-right: 1px solid #0089c4; border-bottom: 1px solid #0089c4; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; color: #ccc; letter-spacing: 1px; } code.invalid input, code.invalid textarea{ background-color: #300!important; color: #f00!important; border-right: 1px solid #900!important; border-bottom: 1px solid #900!important; } /*----- 効かない？？ -----*/ textarea::selection, textarea::-moz-selection, textarea::-webkit-selection{ background: #00f; color: #fff; } code input{ width: 4em; margin: 0 3px; text-align: right; } code textarea{ display: block; width: 100%; overflow: hidden; } code textarea:hover, code input:hover{ background-color: #111; color: #ddd; } code textarea:focus, code input:focus{ background-color: #111; color: #fff; } textarea.init, textarea.end{ height: 2.5em; min-height: 2.5em; } textarea.loop{ height: 5em; min-height: 5em; } /*----- コードハイライト -----*/ span.reserved{ color: #f0f; } span.native, span.global{ color: #f00; } span.number, span.tring{ color: #0cf!important; } var{ color: #ff0; } var.funcName{ font-size: 140%; font-weight: bold; } /*------------------------------------------------------------------------------ ------------------------------------------------------------------------------*/ section#secSandbox{ padding-bottom: 5px; background: #666 repeat-x scroll left bottom; border-top: 1px solid #fff; } /*----- boxレイアウト -----*/ section#secSandbox > div{ position: relative; width: 100%; display: -webkit-box; display: -moz-box; display: box; border-right: 1px solid #ccc; border-left: 1px solid #666; } section#secSandbox section{ /* -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; */ /* -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; */ -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; padding: 5px 10px 4px 10px; border-left: 1px solid #ccc; border-right: 1px solid #666; } /*----- 見出し -----*/ section#secSandbox h2{ height: 16px; margin-bottom: 5px; margin-left: 1px; } /*----- iframe -----*/ section#secSandbox article{ height: 80px; padding: 5px; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #999; } section#secSandbox iframe{ width: 100%; height: 80px; margin: 0; padding: 0; border-style: none; background-color: #fff; color: #000; } /*----- 表示／非表示 -----*/ section#secSandbox.hidden{ height: 8px; margin-bottom: 0; padding: 0; overflow: hidden; } section#secSandbox.hidden section{ display: none; } /*------------------------------------------------------------------------------ コントロール ------------------------------------------------------------------------------*/ nav#navControls{ display: block; height: 38px; margin-top: 2px; background-color: #444; background: -moz-linear-gradient(top, #505050, #212121); background: -webkit-gradient(linear, left top, left bottom, from(#505050), to(#212121)); border-top: 1px solid #777; border-bottom: 1px solid #333; text-align: center; } nav#navControls > div{ position: relative; } /*----- 実行ボタン -----*/ p#btnRun{ position: relative; width: 281px; height: 40px; margin: 0 auto; margin-top: -1px; } p#btnRun button{ position: absolute; top: 5px; left: 72px; width: 140px; height: 30px; border-style: none; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; cursor: pointer; } p#btnRun button:hover{ opacity: 0.9; } p#btnRun button:active{ opacity: 0.75; } p#btnRun button.running{ background-position: left bottom; } /*----- テスト回数・間隔設定 -----*/ p#controlConfig{ position: relative; float: left; width: 290px; height: 38px; margin-left: 8px; background: no-repeat scroll left center; } p#controlConfig input{ position: absolute; top: 5px; width: 53px; padding: 4px; background-color: #eee; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border: 1px solid #333; color: #333; text-align: right; } p#controlConfig input.invalid{ background-color: #fcc; color: #f00; } p#controlConfig input:hover{ background-color: #fff; color: #333; } p#controlConfig input.invalid:hover{ background-color: #fdd; color: #f00; } p#controlConfig input:focus{ background-color: #ffc!important; color: #333!important; } input#testNum { left: 61px; } input#interval{ left: 204px; } /*----- 表示／非表示ボタン(諸事情により#secSandbox内ではなく#navControls内に置いた) -----*/ nav#navControls label{ position: absolute; top: -4px; right: 1px; width: 126px; height: 32px; border-style: none; cursor: pointer; z-index: 100; } nav#navControls .hidden label{ bottom: -28px; background-position: right top; } /*------------------------------------------------------------------------------ 結果 ------------------------------------------------------------------------------*/ section#secResults section{ padding: 15px 10px; border-bottom: 1px solid #222; background-color: #000; color: #ccc; } /*----- 見出し -----*/ section#secResults h2{ line-height: 1; margin-bottom: 10px; border-bottom: 3px solid #333; font-size: 100%; font-family: myriad, helvetica, verdana, osaka, sans-serif; } section#secResults h2 span{ line-height: 1; float: left; margin-bottom: -3px; padding-bottom: 3px; border-bottom: 3px solid #666; font-size: 110%; font-family: myriad, helvetica, verdana, osaka, sans-serif; color: #bbb; letter-spacing: 0; } /*----- boxレイアウト -----*/ section#secTestCodes > div{ display: -webkit-box; display: -moz-box; display: box; width: 100%; } section#secTestCodes section{ -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; padding: 10px; background-color: #222; border: 1px solid #000; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border-right: 1px solid #666; border-bottom: 1px solid #666; } section#secTestCodes section.a{ margin-right: 5px; } section#secTestCodes section.b{ margin-left: 5px; } /*----- -----*/ section#secTestCodes textarea{ display: block; width: 100%; height: 150px; background-color: transparent; border-style: none; color: #fff; } /*------------------------------------------------------------------------------ table ------------------------------------------------------------------------------*/ table, th, td{ border-collapse: collapse; vertical-align: middle; } table{ width: 100%; margin-bottom: 20px; } td, th{ border-bottom: 1px dotted #333; } /*----- -----*/ th em{ display: block; margin-bottom: 3px; margin-left: -1px; padding: 8px 0 7px 0; background-color: #222; border-top: 1px solid #404040; border-left: 1px solid #404040; font-weight: bold; font-style: normal; text-align: center; } th.a em{ margin-right: 3px; -moz-border-radius-topleft: 5px; -webkit-border-top-left-radius: 5px; border-bottom: 2px solid #3cf; color: #3cf; } th.b em{ margin-right: -1px; -moz-border-radius-topright: 5px; -webkit-border-top-right-radius: 5px; border-bottom: 2px solid #3c3; color: #0f0; } /*----- -----*/ tbody th, tbody td{ padding: 8px 15px; border-right: 1px solid #666; text-align: right; } tbody th{ width: 89px; padding-right: 7px; padding-left: 0; font-size: 75%; font-weight: normal; } tbody tr:nth-child(even) td{ background-color: #141414; } /*----- 小数部＆単位 -----*/ table span{ font-size: 80%; } tbody tr:last-child td{ background-color: #222; border-top: 1px solid #666; border-bottom: 1px solid #666; } tbody tr:last-child th{ border-bottom-style: none; } td strong{ height: 17px; margin: 0 auto; } strong.win { width: 71px; } strong.lose{ width: 50px; } strong.draw{ width: 65px; } /*------------------------------------------------------------------------------ ------------------------------------------------------------------------------*/ div#progress{ position: relative; width: 100%; height: 5px; margin: 0; margin-top: 1px; background-color: #200; border-top: 1px solid #000; border-bottom: 1px solid #700; } div#bar{ position: absolute; width: 0; height: 3px; background: #c00 repeat-x scroll right top; } /*------------------------------------------------------------------------------ DATA URIs @see http://jsdo.it/tsmallfield/datauriplayground2 ------------------------------------------------------------------------------*/ h1{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAN0A\ AAAVCAMAAAD1oRvxAAACXlBMVEX////////fwcXoprrpssLx6u\ znprrSsLz33Obhy9Px5ur2lLv7tND7ttHgy9P26e71jrn6rcz3\ rMr6utT0ytv2zd751uT23ef33uj06+/x6e36+Pnu7O3dfLCXjJ\ Lsfbz55vHx6u76hsz7j9D4js32lc/2mtH2rNjzq9b4x+T54/Dy\ 7/Ezmcw4m81CodBstttutttvt9twt9xyuNx0ut12u914vN57vd\ 59vt+AwOCCweCBwN+FwuGHw+GJxOKLxeKMxeKOx+MzZ4CQyOMx\ PkIqUl0AzP8DwvEHuOQKrtYOo8kRmbsVj64YhaAce5MfcYUjZ3\ gmXWotSE/C3MLB28HG4MbF38XC28LB2sHL4cvP5c/Q5NDX6tfU\ 5tTa7NrZ69nY6tjX6dfW6NbV59Xc7dzb7Nva69rZ6tnY6djX6N\ fV5tXd7d3c7NzZ6dnf7t/e697d6t3b6NvZ5tnY5djX5NfW49bV\ 4tWFi4WIjoiGjIbq8+rp8unj7OPs8+yMkIzG1sLb5tjY39JhZ0\ aJeESJeUSOe0mPe0qQfEtPQiZLQChuURZiSx2UfU+VflCWf1GY\ gVNCOy2ShGmWfU+YgFOWe0+Xc03Jw72YZEfd2NbMuLPg1NHgyc\ n9/f38/Pz7+/v6+vr5+fn4+Pj39/f29vb19fX09PTz8/Py8vLx\ 8fHw8PDv7+/u7u7t7e3s7Ozq6urp6enn5+fm5ubk5OTW1tbJyc\ m7u7uurq6goKCYmJiXl5eWlpaVlZWUlJSTk5OSkpKRkZGQkJCP\ j4+Ojo6NjY2FhYV4eHhqampdXV1PT09CQkJb7CMcAAAAAXRSTl\ MAQObYZgAABTdJREFUeNrNmId720QUwGX23nvvGfbeUOTzUhTL\ oWxo2YWGUaDsDYWqjkvYM3ESk0RJIQ5eaSmXkCBL1n/F3bs7SW\ cbYgPfl77vO0u693S6n967905WtmbbyVblX0pvMqr8J4kQcf63\ m7OXXX7lVVdfc+11199w48233Hr7HXde0dPTk22+L2MYaifjJ5\ GxR9PddEkLXUaLISJxXe2KLsLEqmBvT6G77VIC17PNNId8E52Q\ JZLJOEKxvubx1EQsugIdkbK3WnTDRH4MZHiEygdr1pjCQkMxPU\ NPohpCzXgGQvrKdJHaatK9SdobpL09PJx/Pn9yPh+i60UJ3zvp\ GEo3p5GU+k90JVyFw2rR5fMjIw8Tdz1O2nMjY2MvnHH2RWMBnY\ FimcA6jWJqV+uuoiiYHleLbpTIutHR/EA+n984XigceNaFhcKn\ O3dyupQcjJociJ3QOTSzsJ5GHdvs6Q4RT3ExtsWSdG1c98QEha\ JBzFzFszF2wQbjOrP2yEgNrma/ioMdQefR4WlfduyRB9evX/fe\ k08MDGy8f+3a/U8/bNOmiS927WJ0KopJs4+iBPlh1QEO/FxN63\ rUp4sahk/XqIh151RYDsVcV4dry6a6egl0LlNANFsu83ulbsFI\ nlfxMxRmXfPwBDBySQ/mdF5ZGGYLRDYcd8ih34+PF+6++Pxzvp\ 0i8s1pv5k8MDXZOXHkOwgO7FyHkpHIsMs+BIk0SCpWg1zaQQpl\ OitQCp0jKTyYOL+KVMv8qCi1UMJidCVqxelcy38L2Z+I/HDk4S\ fsc/Tx1rvnnnfmi9NEvtq92+TVQG8NvRY6jdRCIy1UHC5EVyMv\ tMFObDpHHM6n5MqJSHSBAjOAUrg3otQjLXTMHoZgcFWI+Ozk5O\ Sxe584MfHUAQcfceoFp+x4aQeRT177vQs6HSUgPPtAJeCkidbg\ fdOYVEp0GUIidRTHAmdUIEI9D7PItHyFiLUKnzA4zQEnzjssgD\ mdhZ06ULOg5SUoO/XQXvu9/+jTG569r/+7r/v7+18m8st2jE2e\ JDV5KxZHmRY62ufDawKOVwRcg8c50vsHZ9EFByvHE1f8JvoSav\ 7Ey3RZ0u4GDwBb2CjVgM6R3qeor9npY4466TFrauqB2dnZu0jb\ TNpsbmGB0WX8rKKBg+C6iQ4yjU+H/JLIcyaLu3kpuGwxIcgITq\ hmSAr+y4fw1b65E6w7KVrKfkWYOWjf6Wemrel7isXivaRtJq2Y\ W1w0xXT7wnga9WUTnYGSEl1ClenYCbxSzMVppfO6owPzumTUzn\ dklc28NTNTfGVubk60uY9f/yOo5tEAj2w5My10GRQP0aVTAk/y\ XaUSRF8LhB9qndPR+UPmb6arhfGyP9MsMlP8VZLBpSXTZ4oHeG\ xXqbHgSwjSuCjhsCTVBF+rfN2xKodhCYnk35AhID3U6vWa0xEd\ mJfxfCnShs6xQ3jk63Vb7svPc1ty23MfDQ4OfkjalsHPAjqyW+\ G7aIOEHXipD6WgsMe5A9PcvxpLpwIvvNCshgdzKZfZo2WIhiVV\ hJXo3NaKEKJTbCk4zcXFxYV3FhaWXl1eXhZt2Qw2yv4XUDwF81\ bjKKn3xsCPEJ7EIqX3xkWxiDJVGI7sO9xS6INIhlBsqxs6v/iX\ 29LJeJSO8C39KYnZ8vWaIF+vzC1RmjxierCxTCdoR68qdmIxmo\ sETKnKPl89XGLB2rK8SKqHukEityM6tqkr2bg9ncCDpw6Z7WSo\ 7T8PKj9mjKZ/GFSjkz9UGnTv/DfiOl18wpONsruy0V9E7fXu54\ vtvgAAAABJRU5ErkJggg=="); } header a{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAE4A\ AAAbCAMAAADlN0lrAAAC+lBMVEX////////r7e7r8PLx+fzs9f\ jr9Pfr8fPr7u/w9/nr8vTq8fPr+v7r8/Xr7/Dr9/nw9vfr8fLq\ 8PHr8/Tr7Ozr6+r+9/P97eX+9O//+fbr5+XwXh7wYSLwZCbxZi\ jwZSjxZynxaCrxbzbxcDbyfUnzgE31lGn70sDvXB3vXh/wXyHv\ XyLwYSTwYiXuXyXxZSjwZCjvYyjwZCnwZSnvYinuYinuYynxai\ /xazLxcTrxcz3ydD7ydUDzf03zhFT0jmL2oX32o4D3qYf6xa76\ yrX83tL849n95tz96N/96uL+9/TtXifsXCftXyjrWyj+8Ov+8e\ z+8+/+9vPpWCfqWijpVyjoVSfuz8Xv4t44NTTr5ePmSRzmTyPm\ UCTkTybnVCfmUSfmUifnXDTnYTnobUljOzDrl39JNzLttqbpzc\ Xq1c/jPhXjQxvjRBziQx3jRh7iRR/jSCHjSSLiSCLjSSPjSiPi\ SSPiSiXkTSbjSybjTCbjTSbiSibiSybhTCbgSybcSyfbSifjTi\ nXSifSSifjUCvQSSjISCjARym/RynjVTK4RinkVzS1RiqyRSrk\ WzilRCuiQyvkYD6fQyucQiyaQizkZkblaEmNQC2JQC3kbE+CPy\ 7lb1LlcFN8Pi7ldVl2PS/lel5xPC/mfWRsPDBqOzDmhW3njnfn\ kXtbOTFXOTHnl4Pnn4znoI7orp/os6bpuKzpvLDpwbfpycHp0M\ rq083p1tH/+/pSODI+NTPq3Nnq4d/w5+Xr4uDr6en//v7w7+/r\ 6+uampqZmZmYmJiXl5eVlZWUlJSTk5OSkpKRkZGQkJCPj4+Ojo\ 6NjY2MjIyLi4uIiIiHh4eGhoaFhYWEhISCgoKAgIB+fn58fHx7\ e3t4eHh2dnZ0dHRycnJxcXFubm5tbW1sbGxoaGhmZmZkZGRiYm\ JgYGBfX19cXFxaWlpZWVlXV1dUVFRSUlJRUVFOTk5MTExLS0tI\ SEhGRkZFRUVERERDQ0NAQEA+Pj47Ozs6Ojo4ODg2NjYTiqjWAA\ AAAXRSTlMAQObYZgAAA39JREFUeNqllUtsG1UUhr87cz12/Izr\ V+y0TdMIhaa0SLCpBKgCVVBVBVVZVBUsu+iKFWILG3asEBvEs6\ qQKiSkZIFgg1qhAIsGNRSikBJSUJynScb2+BGP7ZlhMTNJoBII\ +2zmztxzP/3/PfeeEe/sCh4O+Ro9hWwb+y97YEejR1xgb6gWFx\ xveOKRfnAdC0B0d91v2gGd/xengpNxJVbirrqNwYLaB672RLYL\ 2Kdefhr49sktS1X6MWu9VNMGEHZ1CsC2RpxAHzhhy0Padfi4BU\ C9+x+VbTaMTiwePrghtU0xFAWkBDp17aPZAOFZByCrOPv1Xtrx\ RyN5AEwruFPSKZFYi8d82NYcrD/IRpG38m26QUesK8J0NdWV0J\ 7Z9h3bx7mTy3OdZHJ0tLGzU60GPbHrc6SO2Curqw/ycnK2rbSn\ Lyon4W53CKCrCqTPqHnn+hczDEC5LXRdpGLZQrPYded+q6SGo4\ aYMNZW6/L6aZTOh63Ym3w28QrAc2dXxsWMh6vX3BNotUOuYFVM\ mIa+bSbziYWymxM9HK8t6qQLJ6oVefNxRPvq58+rvGi7pXAY4N\ wHbuqfRd9r0hPshFK0rAjgX6Hj5UWdo05xO10YkwQINo2rF4BP\ dQh8hZMQSsJLjR1zF1UrYZ9rQ+hvhV7+mSM5jczW2vayREO0vo\ 98Y6tCW0zUxvny1aAtpvA8Rt2lv+4j5D8bRmO4ENgqqodHhjYa\ Cho0zjSfPdUSqiLy93g3pxbkpJvZ+mG+C9DaZsCnVEz3cKzXPd\ 74SPXucoCln+rHxiUBsMSNG+/bjkAPCwIbUUW+4GbuOs35lXi7\ +mNX03yrS4HFZLhcmdvzXP2jNXA852yt348clUjANqPhx/Q1e1\ T75IKZSeNfioH8jmEAMpvxPI4Z1XKpBARSsbhXLmUsowFmabMk\ mclAJzx9qfpF8dH5zdvYG2nH7wARzEp5N56IBX2rg1AxKq1EPL\ m3mSe9ZxCQnLuH2ohcNMWVpgXcessWB3pq8OErO/hvLYCE7Ebu\ v56OfP2ewqWFwhu1lEKv7Q6VSNxC1Yu/567karZZK5ntI+nsdK\ 8Nisk7QChETW+o9YaSE4Wo9V2v6gS87d09dfX2oWEtVlCs4Jnz\ PavjdKVi1DtgWWedYVWEo8mZ832oA7j2lN6so8pYJDl1k95j/w\ 947Zm6Fr1Mf/EXARNOQ6focRcAAAAASUVORK5CYII="); } section#secSandbox{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA\ AACCCAMAAAC5BPK3AAAAyVBMVEWMjIydnZ3V1dWGhobT09ONjY\ 3ExMSVlZWWlpbNzc3Hx8eSkpKtra2lpaXCwsLS0tKLi4vR0dGw\ sLCkpKSoqKjIyMjKysqJiYnAwMCEhITY2NiAgICOjo64uLiamp\ p9fX2CgoK+vr6KioqqqqqTk5POzs7d3d2fn5+0tLSioqKsrKyv\ r6+rq6uYmJimpqbFxcWnp6eurq6cnJy3t7fBwcGHh4exsbGUlJ\ SRkZG/v7/JycnW1taenp6FhYWpqam2trbDw8PQ0NCDg4PdDDdw\ AAAA4ElEQVR42k3R11ICURRE0cYIIoiIiCioGAmCETCH//8oat\ P9wHq4dapP34Gp0Qe0D/1BN5DzDaiNzHvI1n3fdb4GNaFDJHHz\ HbpGkhKS/yLJC5J4u4PkEyTZQpotZPavv0Ed5K6TKnL6CT/QMz\ K7eYfkF8hcR5pT6BsaIskIaiD91eYltAsNkOYj9IA0K0jzAEk+\ oVuk6aQAjaE+kvv0E7pI8wmZt6F7aIYkRagMzZHTnU2kcwWZ++\ 4cQTVk+4/MX0jizjqSe/b2FTpDtqt3T6Bz6Bjp+/T/7EGnyFss\ v+MCh0Rc5ZdvlJIAAAAASUVORK5CYII="); } section#secSandbox section.a h2{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQA\ AAAQCAMAAADXjyqxAAABsFBMVEX////////09/vs8vlkl8lmmM\ tlmMppmstqm8xwn813pNB/qdKAqtOJsNaIr9WTt9qSttmdvd2n\ xOGyy+S80ujH2ezR4O/b5/Pk7fbs8vjz9/twoM54pdCcvdynxO\ CyzOW90+jH2uz6/P3+/v79/f38/Pz7+/v6+vr5+fn4+Pj39/f2\ 9vb19fX09PTz8/Py8vLw8PDu7u7t7e3s7Ozr6+vq6urp6enn5+\ fm5ubk5OTj4+Ph4eHg4ODe3t7d3d3b29va2trY2NjX19fV1dXU\ 1NTPz8/Ozs7Nzc3MzMzLy8vKysrJycnHx8fGxsbFxcXDw8PCws\ LBwcG/v7+9vb27u7u6urq5ubm4uLi3t7e2tra1tbW0tLSysrKw\ sLCurq6srKypqamoqKihoaGfn5+dnZ2UlJSTk5OSkpKRkZGPj4\ +Ojo6NjY2MjIyLi4uJiYmIiIiGhoaBgYGAgIB9fX18fHx7e3t5\ eXl4eHh3d3d1dXVzc3NwcHBvb29qampoaGhkZGRjY2NiYmJgYG\ BfX19dXV1XV1dWVlZVVVVTU1NLS0tKSkpJSUlISEg/Pz8+Pj4z\ MzNO4OVKAAAAAXRSTlMAQObYZgAAAopJREFUeNqtlOlbElEUxi\ /t+77vCTbgBmZekGB0lCwTV9JRo8hyxCydClOjksoBN4b3X+7c\ mYlKeB6/8H6Y53Duy/zmvPfOsEdVxGqt3oMV6q055PGR6zdOnD\ x99tztO3cvXb6yf1/docc1h/QdPnrs+KkzN2+dv3CRIFev1R3o\ qzmkX5LukerrPR6Pm+RySf32ig6dsfSmuO6p+FoJld2Ers/Yyz\ 6v1ytA9YIjKL64bcliSU4CH1R5b8gaCrO8oqsD212iGGxsaPAR\ SLKnIUjjoONJ8oiOHI8qe0MAtUOugs5hWBRDzc1NgiOmIQpBmo\ dsi4GFaZCmkc2AZYsoZeP0cBkDRjKD4jQ9xSaKadsKLLDkWsm2\ 6IZhhYSCBq2bqhE/qaWxwRpGjOLyj/yBaAPr2NJUmADPrqTzWI\ lRAhsmzJ1tmEqitDOXx0uypoEldaCE5R8o9Ovk/xmm7gz0EeTF\ gKMBS/4mn9cexRUYLUPkReRCL4A3nLPE21WYlF+evwI6u4CJDG\ Yn57Gk2HFFPuEzj2xjZhHmEA9bm5qKlvBEnIBWR4EmaxS3uzXx\ F0J7EqbMeGfcwM4GEKRGh2jE6LbrIkzkIjZEIX9E/OkdckGRES\ tZ61oPY2NtZd1vkQSkbawSQoEU+CQV5Qbd9gs0VVUHww5EnEZW\ RGqeLNa5oai1HL5SXuPt/+iBX/K428erQsy54i5ICubqwvfhbg\ eSMLFiUJrvHUgGekh+BtAkE/x/BSQ+UQXCPppb87sgyusc8Otp\ jwNhU99gLssdugOhoaIis1SMTQUrNOUc8zCXmUxbqHDxnkWDIZ\ mKcoNzhXWFOQ8LiPWLdT/kwUjMsgiFuHgTg3R9XkW1/nT9BtPH\ ICOUdnT+AAAAAElFTkSuQmCC"); } section#secSandbox section.b h2{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGMA\ AAAQCAMAAAA1UzHIAAABrVBMVEX////////09/vs8vlkl8lmmM\ tlmMppmstqm8xwn813pNB/qdKAqtOJsNaIr9WTt9qSttmdvd2n\ xOGyy+S80ujH2ezR4O/b5/Pk7fbs8vjz9/twoM54pdCcvdynxO\ CyzOW90+jH2uz6/P3+/v79/f38/Pz7+/v6+vr5+fn4+Pj39/f2\ 9vb19fX09PTz8/Py8vLw8PDu7u7t7e3s7Ozr6+vq6urp6enn5+\ fm5ubk5OTj4+Ph4eHg4ODe3t7d3d3b29va2trY2NjX19fV1dXU\ 1NTPz8/Ozs7Nzc3MzMzLy8vJycnHx8fFxcXDw8PCwsLBwcG/v7\ +9vb26urq5ubm4uLi3t7e1tbW0tLSysrKsrKyrq6uoqKinp6ef\ n5+dnZ2ampqZmZmXl5eWlpaUlJSTk5OSkpKRkZGPj4+Ojo6Li4\ uJiYmIiIiHh4eGhoaFhYWEhISDg4OBgYF/f399fX18fHx5eXl1\ dXVzc3NwcHBvb29tbW1sbGxqampoaGhkZGRjY2NiYmJgYGBfX1\ 9dXV1XV1dWVlZVVVVUVFRTU1NLS0tKSkpISEg/Pz8+Pj4zMzME\ qECgAAAAAXRSTlMAQObYZgAAAoxJREFUeNqtlOlX2kAUxYfu+7\ 7vFWzADax1WNRAxGoVraJRQatdkBab2sUutrXSImiDJPdv7psE\ bQXOsR+45yRnuDNnfu/dlwN7WEOszuo/WKX+ejMGjly/ceLk6b\ Pnbt+5e+nylf37Gg4N1JsxePjoseOnzty8df7CRWJcvdZwYLDe\ jCFJukdqbHS5XE6SwyEN2Ttr5iyLrZn4n1vSOrRKL6FpWjohVj\ GP2+0WnEaBERBPzD5Twpyyho0FvjciASypcoWZh9AXWg03NzV5\ iCPZvRCjedg+E3vMw4AalPdmaMjyHqWKkeIqEGdspLW1RWBELw\ QhRuuIfQaYEaUsatDy+TiFVtKEmTZNbbaEFZFQCboIY1YUTCQd\ +ry4e16cFAw5Rn4vG/WS2pqbrFZEIw7v6DZDfQF8UjMw8Cukv1\ sw8IxMYxMw14FXbB65tGE8Yiy+jmKKf8TWkoHndLeBtCwYxZxp\ JnmUjfkseVs8brsRh29sh6HQ070IY4SH2FQmh68UXtK/Ac3/Fl\ lZR3J6FXN9jL1GNkDnWeApiuE8CmFuM34a+BahGtrL8rVYjTid\ 7fFdDIXC9vcmSvi9hWwXGREKoYfMkDVTpMLWPEIUGI/SK0DbwT\ 47q0BvEU8YG+/Y0f02STA6xqsYIbaCN/ylda+qiKCFWUJSVVUm\ 24y4GEkaBS62yzOXmY5UhE10/qMHXsnl7JyoySi8NysYGoofFn\ 8oUZvBllFcNpEM/mVkMzQbqmGS75ZP4pM1GLHv2MhUMFimAHO1\ i5UZLFPE5gyPbDNWKMjNz8wfZVP+Kk2VP3DOFeuRaeKsr4sHxU\ IYIRqpZcpB7hcM+xeTAzxIIxbbQt1UcrCb2pyuoTr/Xf0BOFAh\ ZPX9or4AAAAASUVORK5CYII="); } p#btnRun{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAARkA\ 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\ owAAAABJRU5ErkJggg=="); } p#btnRun button{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwA\ AAA8CAMAAACD1KJ5AAAC/VBMVEUAAAD///+0AAB5AAB3AABzAA\ BvAABqAABpAABKAAD+AAD8AAD6AAD4AAD3AAD0AADzAADwAADu\ AADsAADqAADoAADmAADkAADiAADhAADfAADdAADbAADYAADWAA\ DUAADSAADPAADMAADLAADIAADGAADFAADCAADAAAC9AAC6AAC5\ AAC3AAC1AACzAACwAACuAACsAACqAACpAACmAACkAACiAACgAA\ CeAACcAACaAACXAACUAACSAACRAACOAACMAACKAACIAACGAACF\ AACCAACAAAB+AAB9AAB7AAB2AAB1AAByAABwAABuAABtAABrAA\ BkAABjAABdAABaAABVAABRAABOAAA1AAAmAAAUAAD/AgJDAQH/\ CAjNCwv/Dw/AERH/GBiyERGeERGUERGHERHwICB0ERHGIiJbER\ HUKir/MzP6MjLzMjKmIiL/NjbrMjL/ODjjMjKZIiLbMjJ+Hh6F\ ISH/QUGyLi59IiJzIiL/TEzDOjr/T09tIiKfMzPRRETkUFDARE\ SJMzO1RETbU1OrRETPVVWkRET/bGz/dHTfZmY/HR3/dnb8dnaS\ RET/eXmURkb/enqNRET+fHz9fX38fn7/gYHJZmb8gID8goL8hI\ T8hob8iIjbd3f9i4vkfX39jIx+Rkb9jo7Ud3e5aGigWlr9kJD/\ k5P9kpL9lJQ/JSX9lpbId3f9mJjFd3f9mpr9nJzBd3emZmb9n5\ ++d3f/oaG9d3fHfn79oqK6d3f9pKT9pqa1d3etcnL9qKj9qqrj\ mZnJiIiwd3f9rKy4fn79rq6sd3f9sLC1fn61gYGld3f/ubnSmZ\ mjd3e5iIivgYGqfn6hd3f/xMTbqqrFmZnwu7v/yMj/ysr8yMjr\ u7v9y8u/mZn/z8/8zc3/0dH9z8/lu7v90ND/09Piu7vOqqr90t\ Lhu7v91NT91tbdvLz92Nj92trYu7v93Nzpy8vWu7v+39/93t7+\ 4eH+4uLQu7vw3d3dzMzt3d3r3t7o3d347u748PD27u7z7u4ZhF\ qIAAAJuklEQVR42s2Za4xV1RXHf2utfe+dBwwKKEhRG6zVqoMV\ 8NW0VSlzLg/fpg9MP9UYY5M28VGbxlatRtuk2Cb6wfqB2qih2r\ EKRIV7Z3yAUmNswaZEIMbGB0nRFkUE5nn36odzzsydYUauZKyu\ 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\ QmCC"); } p#controlConfig{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASIA\ AAAWCAMAAABT/GGLAAABrVBMVEX///8lJSUmJiYnJycoKCgpKS\ kqKiorKyssLCwtLS0uLi4vLy8wMDAxMTEyMjI0NDQ1NTU2NjY3\ Nzc4ODg5OTk6Ojo7Ozs8PDw9PT0+Pj4/Pz9AQEBBQUFCQkJDQ0\ NERERFRUVGRkZHR0dISEhJSUlKSkpLS0tMTExNTU1OTk5PT09Q\ UFBRUVFSUlJTU1NUVFRVVVVWVlZXV1dYWFhZWVlaWlpbW1tcXF\ xdXV1eXl5fX19gYGBhYWFiYmJjY2NkZGRlZWVmZmZnZ2doaGhp\ aWlqampra2tsbGxtbW1ubm5vb29wcHBxcXFycnJzc3N0dHR1dX\ V2dnZ3d3d4eHh5eXl6enp7e3t8fHx9fX1/f3+AgICBgYGCgoKE\ hISJiYmLi4uMjIyNjY2Ojo6QkJCRkZGSkpKUlJSWlpaZmZmamp\ qbm5udnZ2enp6fn5+hoaGioqKlpaWmpqaoqKipqamrq6usrKyt\ ra2urq60tLS1tbW2tra4uLi6urq7u7u8vLy+vr7Dw8PFxcXGxs\ bHx8fIyMjT09PU1NTV1dXW1tbi4uLj4+Pk5OTw8PDx8fH////p\ ZK2TAAAAAXRSTlMAQObYZgAABEVJREFUeNrtmP1b2lYUx294KY\ Fo0KoRxVfoBFTAaokW5D1q4ztaS9vBUqzpsKvd5jq2Md2Giy8I\ OX/zbgK01G79Keypz8P5AZ5zw73nez98zyUBoUYsxKJ21I7PRY\ LjRtoU/iOYWSt+jScTDvzmmmgD+ST6l5cDjD/Jrywn2aF7j2L3\ 2khuho9LJpY2d56k91JrS4nF8MO7bSY3ossbi2+n9x7vpra31u\ PBgK3pmoUkSaqNCN2NbO7t7Gzw/Poaz4cdTVcoKy8IwmIrIZlN\ n6zeQZq+NETuldTWZtzncC1wy1zCb21CFAQlrtnWFSfSP99cnR\ zOHX1hiOb5jfXIqJWm+/yxWJQd+BgR3VeCgpEgEUkYEUUYTTqd\ WbvaRgIgjL2kJwzYTZSRMJAUIUCJQmYDYawZjDIQejMy4fJIR1\ jqKZ5p0ZMWgkDoDqGZ65T9EXqK1OnIuho8OMWyIZ5f8tBK2Nlw\ KOCf9TcjMusEODWWQCQFkPBA6XW1mtGuz0rYpZKFeHYNFwGkmz\ 6Dy4Ow4tw48fQSJE7pO533EsoZKo/LEzJs11KEJfHX4iqAXVcE\ rVyn7O8QyqEX1erLmhoRoen7M+zyUmRURdRzf+HNu0WPqxlRMC\ 0D14QI5AsA7TovDVDIGniQclXZZq3CUSHrLEFFdAZBFk+VOqZh\ +Xr/HDgfADkNlUaKJclYVBkymBurHSKolEFW9vigpgahSZ93Nh\ EPjakmygSib/M7E9vJj8+iA7oZkd14DqJ2ZxEARxPnwAeLkJ0B\ EBhaKUR35qC6qjaaMQ9CUIACeQ5rAhw1Uizpyo46BHiHuSENEd\ mtACllj6oaPNjT2ze1uBjy9GBEu2/yxT9Piq8OxbEPM7hDkO0K\ IlMdkWJxjRHp1W8CRPoImzSrIqLtUv13wlRSL0qYxuEZsI20rs\ IBsqCdHHV/iiRl9ZoadXx07uH87MRQj23m4Ne//vit+Mu3QWvT\ DFMZsmQJXhP5ViAyAERp3C4b0QjnMpA9eZAtApxR5jvkWAlOFR\ HHsB+NJFg0Dufy1fu0rgKnZXC3AtFBTU3tvsgVmJvze9we3/cn\ PzyaT7/9LtI8w3wMBbQP8De0AhF1AddHePnyYe6UGr8QfgcJbe\ BKs8+KLy5rdeJQPc6duNWjXXyfNlSE8IdRKxC9rKtRwuacmPF5\ vZPpzI/H0aH+vufi01h9CodnoCzudXsBH6H48+qApCEixFYUr4\ hXIJ8iVpJl5YjGDmezElQKtb9nUrjnJLciRPVLPa2pIPFhndVO\ jbo/jEhZvaEGE/pqZNg5NeVxPdnOv5q0DfSvZlLR2/JkYMI3UZ\ WWV+kdHOrvYkbGHRPeb3KhIWZqa2u+97YgIn8CmW19mW4VCMMw\ nfGvd7nEylJ08PY8YIoS+7/VsvX2Oh6E11bi0QX3qLX9cP8v0d\ fdNejsHpj2jVgZpo3jMzHIdNJ0R5vDh/gH4clxyBZyV3cAAAAA\ SUVORK5CYII="); } nav#navControls label{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPwA\ AAAgCAMAAAABieUBAAAC0FBMVEX///////8zZpn+/v77+/v4+P\ j29vb09PTw8PDs7Ozi4uKxsbGoqKienp6bm5uampqYmJiWlpYh\ QnUiRHYjRnk1U4EqQWJ/kq6ClbF6iqIkSXwmTYA1V4bP0tbe4e\ UoUYQcOVwqVYh5h5ksWYwfPmIuXZAgQWWVorCdqriir72qt8Wn\ tMKwvcu1wtCzwM6yv824xdOmsLvFy9LS2N8xYpUjRmolSm4+bp\ 49bJw+bZ0+bp0/b55Gcp9FcZ1JdaJKd6NJdaFMeKRQeaFSe6NW\ f6hVfqZYgapXgKhZf6RbgKZdg6hcgadeg6lehKlfhKphh6xgha\ pjia5iiK1kia9liq9jhadqjK5sjrBukLJti6p1lLN0krF7mrlx\ jKd2ka17lrF5lK+En7uDnrqCnbiDnrmGobx6kqp+lq6Ko72Dm7\ OHn7eFnbWKorqJobmNpb2btc+Pp7+as82SqsKWrsaVrcWUq8OD\ l6yTpLWXqLmnuMmmt8itvs+qu8ypusuisL6otsStu8m7yde7xc\ +ss7qmrbTCydC/xs3M09rJ0NfIz9bGzdTFyMvh5Ofv8PE1ap04\ b6IoUHQnTXE6c6ZpiKZvjqx3lrSAmK+eutOduNGRqcCQqL+Jnr\ KVqr6XrMCdssahr7ymtMGvvcqruca2xNGxv8y6yNW5x9S3xdKx\ vMY8d6o+e64rVXhAf7IuWn6fvNWwt71DhrlCg7ZAgLJFir1Dhr\ c7dqI6c58xYYUyYoZPjLs5ZIQ+aIl5mLBogpVnf5K5vcCvs7bJ\ zdDGys2cnp78/Pz5+fn19fXy8vLx8fHv7+/t7e3q6urp6eno6O\ jn5+fm5ubk5OTj4+Pg4ODf39/e3t7c3Nza2trZ2dnY2NjX19fW\ 1tbV1dXU1NTR0dHPz8/Nzc3Ly8vKysrJycnHx8fExMTDw8PAwM\ C+vr66urq4uLiysrKpqamfn5+IiIiAgIApKSnTB3I1AAAAAXRS\ TlMAQObYZgAABWJJREFUeNrlk/tfU2Ucxx8/lrlp9+xOWWZSkW\ hkmwwd18Q7QsrFRYm5vOAUlTIzRSs1LTVKEFHMS16ysNLKMi95\ y8MYZ7Cz4RgTWp4F5uVf6Hm2s8G28CX0aucH3q/XM77P9/t8v+\ /zcDZydzeG3NmNIXd1Y8jt3RhyRzeGXJE4ffzokQCOHj99JWzI\ Yyd9JY799MPhQwEc/vXvvuHi2BE57P7L//Ljt8H87A7b5f/Ffu\ j/t5M+Et98/10Ijj7hQh572+W/DuVC+C4vi51cljjwVSj1l8OF\ 315ZGUY7aZU4sJ9S2UOiku32W33F1kH6t+inXv/ByREjTnoywK\ DWNvTQt7a+OiIg1xk27vdS2qNnqRT67OV6fWTrIOAG3V21kxaJ\ jcWMUu/dSz2bYsFXbNFjrKulBXjmfeBDTwaIEv3lls+w6Q89hu\ evbZfrDF578WYm31zczn4yEYDaTS8vdNxN7S491IbO2olb4tMN\ Hrx6b7yhzld0v4mJdrcbiHYdXFN3iWVY7G5jeV1jKuYLFy+5u4\ TXPs/7r5/Xzp6LlOgl84VIoO4G7V20E1HipfVe6APMk8L1Sl9R\ LMHEelEEBi8D/hTfTkQ2jZvFXDUmn2D1VMwpoa9oTCSycyFmx0\ GdfYImS+KQfTAVqQdFsTwOiUPpn0SkRooheOwFvh9dQZs9FZnW\ 5iYnvfwWtbpcFE/Q2ZOHitkoEXNRLk6mix2a1SU7cUkMg0RBgS\ +C2Vd0zYIqbfRo4PkvaHY7kJdOY+fryJmGtGZaH42ynfFIr4iC\ ih74PGdLMnKa6fnxQGySCplNizFui0q1bjuGz89a6XQF47e3w2\ NfDIyc63JRpTYF2OdKQtomxBYtRnpDEnSNcbA2dsauDrCTJolh\ L4bC+4pNc6QH2vUswL8GHR9B498wcteOkfiI1sdiQf04LLDsBC\ p4vmmlIQca61jM4PMwyvwO/cEmYenuKaiYA8179YKzKZiO7cu0\ QMq6oXRErRYLtkPLWzZBdwoaO5K1a5Fuvnhz9mhqnx1kJ06Jpw\ dSevhhu4EmX9E5G5NMJhMwhM43jUGhxemNGUManU6asrL1HC3b\ To1BPH1NPE0ItLGWJb1HCyPS6Jvc5wzhBvb6vRpULKcjGuk8Ay\ bx7GEs47AUM+gqVDo7ad/RZiUOiacGUNr0bDfA6Cs65iLD7HAA\ e4oA41RkWFbR+AUk7KE8ZnU4xmORhS36xTA6tiLZuJcGLMEaWT\ Ie79KjMZaG1RnIqncE06F9FV0pWBTF5tJ5C5FgdkzFTDOdG7sG\ WYixOLpuJ3aJ/k+EovAV7fnI4O124MsdgIK+8VGxNLamYZRhus\ F6wW6fgEV1bNGSwr4VmsJ4GrAEa2TJfCS8YZhi3TYln17FbA+m\ Q/v02Akp0MREs7lsXgom5UAVoxwMja46FlqFzX5z9jxDZoid2C\ T6Px5Kla9oM+AVk80GrNgNVNmWJGhmZmCFJUKXAG1ZLa2nYWEt\ W0WsbJumSSijAUuwRk+y7GWosvhtE6HVfVxrC6ZDuyEZyFqtiG\ Ij2LwInYbtrTYtlpgzMdNoC7HntbdnBNjTA+1EkOj/SCic4Ifn\ jPST45RKjmbNiqoaI6cULCYFp+BZ3cjxnuUpCzVVCp4GLMEaPU\ lewVVVC7yRU5gsQjAd22kbZ1J6R7B5FlMV2wuCgm6quRrhP9iJ\ UuL+h0N49LwyXMhjJzUST957XzAP/l4TLuSxk2oJ80P97gmg3w\ OfcNXhQh47Ufg5f65XAOfOK8KIHHbSuxtDuNtkhJPXThp6yUiD\ vHZy9eytsnH2qrx2cv2vM7fIxBn3dXnthFy/5uzdUwZ6O6/Jbf\ 8HYoAolFC9hLYAAAAASUVORK5CYII="); } strong.win{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEcA\ AAARCAMAAAC4uUHHAAABHVBMVEX////GxgnBwQre2Anc1gna1A\ nc1QrQzAs/PjdOTEE/OR3/zADwwQLTqgfEnwm1kwuniA6YfRCJ\ cRJ6ZhRsWxdORBv/32Dw0lzErU+Yh0OJej/Eu5W1rYsxLyaJg2\ t6dWExMCzitQVdTxnTuVSnk0dsYTddVDMwLSL/8r/i1qrw5LXT\ yKCnn4CYkXbxwTDnuS7dsSzFnie7mCyvjipuXCRoVyJiUiFORC\ NLQSJQRiVHPiFIPyMxLSAvLCJsZ1ZdWUytiiL/zDP5xzLRpyq5\ lCWggCKriSXGoC/BnC6dfyaUeCSNciSEayJnVSJaTSZYSyZNQi\ JLQSRGPSNDOiIuKyLx8fHn5+fd3d3R0dG7u7u0tLSmpqZVVVVT\ U1NOTk7DFlVmAAAAAXRSTlMAQObYZgAAAahJREFUeNqtk9dWwk\ AQhgcsBIJRAkQUlIAtNBV7gQQiKvbey/s/hjM7m5Bw4w1zTvbf\ nfzz7exCALyIRGAkEYuNhtM/H87YixgOTkhRHFLb4axJUsSs4r\ k4vt3u7RBn0cJAgE2K6wppvE6jAw6JZQIUSYsQGX8SRR9uty8m\ j2PeRTmSk2eOWNahRqLwJvRWTOIQnehcHgP8vLhd9w7g4aI3GZ\ UchZ1CkFNnAI1VubIq/i6w1+k1v34/ibN1uH3S7O36B2MOVygK\ txMnyctyy7LFaWtoPkLO+9srcdY3NpFz73PIWzC5wKH+qyZfVo\ P3EEQaC2h+Hua0fU6DjFhfJU4lcB3eYalPeU0Ap2HO2eAHmzcM\ I7dkGMuoNJ9dAMihGquwQkL5OV5jXIc5VwNOWVXVEj4ZqTrmSF\ UAnSSbVDkS5L4Jc3YGnBa7SiC1hTlOwLTA6ZIj3Adhzn7gnyg2\ xzZY07JFVQOYErgEYzRhboc5awGORq5ki7VEGZ3BIMtnBCf13z\ enS5fmtQMpmmW4LcRlZcMiwv0EOWl5iZrfvCBm+UXGW5dhZPEH\ RZdhkCgUgTYAAAAASUVORK5CYII="); } strong.lose{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIA\ AAARCAMAAACo2Q8bAAAAbFBMVEX////l5eXY2NjLy8u/v7++vr\ 6xsbGkpKSgoKCZmZmXl5eVlZWRkZGKioqJiYmBgYF9fX15eXlx\ cXFwcHBra2tpaWljY2NhYWFaWlpWVlZSUlJMTExKSkpJSUlCQk\ I8PDw6OjoyMjIvLy8qKioruLKsAAAAAXRSTlMAQObYZgAAARhJ\ REFUeNq9Utt2gzAMU2hJF0pJgMEIXYGS///H2bmUbKfP00tkx5\ IcDsA/wRrCI1UPI6U0ayrXVO4mgboXQbBRIEXAbedyr2I5wkYm\ TtQ/MfET6MULkhVlGtth8gs+i78KIXqgesdpMZukWH2rkGV083\ UJjBe69Bv31to1WvObglG5J8cYKsOnCQnGUCBuMRko0qNCHMa0\ S5VageN6JtyJ3JlckbGPc8Qn7EGBWhF4cGGimXXMJsBNWnl0mF\ TEQm0+m4WhwqQL109srBpCs4vjL29G62qVgcZbpafJNzf4ON22\ 7TeOxAFfmWLIzGgvqGyxIbPt8gzXHPmZ3HH6Icfs85vhySvPwU\ HPzNNU/ea/XhZ3FNuvKuIHUPgWP6L6jOIAAAAASUVORK5CYII="); } strong.draw{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEEA\ AAARCAMAAAC1pzGAAAAAflBMVEX///9jUmdWSFnlsvLYqOTLn9\ a+lcixjLukgq2XeJ+Kb5F9ZYNwXHVJP0w8NT4vLDC1hdKLaaBh\ TG5MPlS/jN+VcK2AYpN2W4drU3pBN0haQnFSPWZCNE+ZZsyRYc\ GJXbWBWKp5VJ9xT5NpS4hhRn1KOVs6MEQyKzkqJy0sKS/yhJVt\ AAAAAXRSTlMAQObYZgAAAVxJREFUeNrNU2F3gjAMDA6GCIjb1G\ 2lBVRU/P9/cMklZfh9H5bH43JNcr32AdG/iFWJSLZPtFzFeg3K\ 1QaJtUg58uLFIsfQOtKsVoUcrOIMCeMrA09WQtfGLRKm2czSBp\ 6UlFHLVkqj26j8O7Og8GSKeXRrUNJWoJBjYjRPzSs2WK9eo0IV\ xeXcUMAkjxbRQiLJhppMlSsFlGuzEHuhXm/UU5Pa2VS4nBH1Aj\ OZWUgTM9QAeZKfvJpv6rDn+CD6FHxXith9Ez12nBwfQr+4V5j0\ Hff7w5utEfWBg2gC3qkLFuOdi06yG8n7zPTEyH2DA4RugoJUe7\ oOgieawqzAtWnW4zHmo6atU3QQ8GERN6WuUz/klkVubpF0hr1+\ ccum1mh7kfflyUIIPm7nDFtVGOeOnlsIs/6KhTvI6L0f4gDWJ1\ UwC7gcOeVZFQf1i83P1m/bjHbtF/Pi/+rX/gEGPi74uhNU4gAA\ AABJRU5ErkJggg=="); } div#bar{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgA\ AAADAQMAAACUBtwLAAAABlBMVEXMAACyAAAFl01+AAAADklEQV\ R42mOwYahg+AAAA4oBpWJ11qgAAAAASUVORK5CYII="); } footer a{ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF4A\ AAASCAMAAADllplLAAABcVBMVEX////////z9ffu8fO7ydHM2N\ /P2uDM193d5uvd5Ojk6ewARGYAQ2UAQ2QAQmMAQWEAP18APl4A\ PVwAPFoAO1kAO1gAOlcAOVUAOFQAN1MANlIANlEANVAANU8ANE\ 4AM00AM0wDRmgDNU4MTW0RUHARTmwRSGMbWHYiXXoiWnYiVW4i\ TmQwZ4MzaYUwWW5Edo9IeZFEbIFEbIBEan1EaXxVgplVgphjjK\ FVd4hmjJ93m613map3l6d+n7B3lKN3k6KIqLh3k6F3kqCIpLOI\ pLKIoq+Ioa6ZtMKZs8CZsLyZr7qZrbeqv8qqvce0yNK7zda7y9\ O7ytK7ydDM2N7M1tvk6u3u8vQAQmIMPVQRUG4RQVgbSV8zaYMz\ XHBEdItIb4JVgZZVfpJVfI9Veoxmj6NjgpFmhZR3mKh3lqV+mK\ SIo7CIoa2IoKuZrriqwcyqv8mqvcaqu8O7ytG7yc/M2uDP2d3d\ 5Ofu8/Xz9vfu8vP8/f1LeUWTAAAAAXRSTlMAQObYZgAAAlVJRE\ FUeNq1lGt70kAQhXPECzUiCSsgiOmqqLWKaAuKsUIbW2OLNCoY\ FK1XpFoLWsFE++vdDSQ0D/AN5sM+bPbMG+bMbASBhyQJs4wLH+\ 7MkB65/OfkpZnRz1z8CtyfGf7c69PAqyuDXUgmhEihERWlExsk\ ESciYw/PKt/B4pGrbRQ0TVu+OoIHsq4k6ieRnMaj2ByHj709xv\ F/rw9yc3wHMzMZn8it+0j1h04KjDH08Hy5f/h0iBevHaAjJShN\ yuyJHKdKhOPfU8r3hHahscS4osT6Ji5kWZKazZCkk0FoNE5T/Q\ rP3z7s4w9vefgk3YMeXnoO1D4KMi1UYDYZfmkHyDNFicvryk7F\ DGy9GdYmRmmpitongWjYq8B64JxsYxDbHv54Dc/S4rsTKz+AhW\ QB0NUsA+SqcEy5a8FQozdN6C9RTXv4EN1H8HEATYZHZ9Mzk3K4\ NwYMb1TxLxtRGl/WLKi0BlUURSbqYrXvfZc9SexDFxNW/4UOXm\ qwPyO1EGT4nkjK0CfgRZkJUi0TvwNQU7xuBw/8HOJjfEmxxcPX\ eWaELQxviDHNbfUIPqoUYKcsfGZNVImFb0Tm+JUA7nFJtIuiWG\ 9jM0HneDPcuVoEFpUWegx/KkbLg1r9+PAysLZhYjU8h1/MQFXY\ Bdq7eQ4oweRWhzYQMIQbJtov0Ds6tuuwnpjIc+8PtgB3to/ihY\ wN2AazNNNDR+fFN3uwmwIHBNHhkrQBm513YOtpD8EbqQbRy/PJ\ CXb4D/e+UzrNrwzRfDfMZ840vsBF/wWeMl5oGoOu/geLNWIs/n\ dfdAAAAABJRU5ErkJggg=="); }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/rRSa/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/tsmallfield/quickbenchmark" title="QuickBenchmark">QuickBenchmark - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code