repaint and reflow test (v3)

Revision 3 of this benchmark created on August 4, 2014

Preparation HTML

<style>
#test{
  left: 0px;
  top: 0px;
  textIdent: 0px;
  opacity: 1;
  height: 0px;
  fontSize: 0px;  
}
</style>
<div style="background-color:#ccc; text-align:center">

  <div style="position:relative; width:100%; height:300px; border:2px solid #333; overflow:hidden; text-align:center">

    <div id="test" style="position:relative; margin:auto; background-color:#555; left:0px"></div>

  </div>

</div>
<script>

var fn1 = function(){

  var style = document.getElementById("test").style;

  style.left = (Math.random() * 100 | 0) + 'px';
  style.textIdent = (Math.random() * 100 | 0) + 'px';
  style.top  = (Math.random() * 100 | 0) + 'px';
  style.opacity = (Math.random() * 100 | 0) / 100;
  style.height  = (Math.random() * 100 | 0) + 'px';
  style.fontSize = (Math.random() * 50 | 0) + 'px';
};

var fn2 = function(){

  var style = document.getElementById("test").style;

  style.textIdent = (Math.random() * 100 | 0) + 'px';
  style.opacity = (Math.random() * 100 | 0) / 100;
  style.fontSize = (Math.random() * 50 | 0) + 'px';

  style.left = (Math.random() * 100 | 0) + 'px';
  style.top  = (Math.random() * 100 | 0) + 'px';
  style.height  = (Math.random() * 100 | 0) + 'px';

};

var fn3 = function(){

  var style = document.getElementById("test").style;

  var val1 = style.left = (Math.random() * 100 | 0) + 'px';
  var val2 = style.top  = (Math.random() * 100 | 0) + 'px';
  var val3 = style.textIdent = (Math.random() * 100 | 0) + 'px';
  var val4 = style.opacity = (Math.random() * 100 | 0) / 100;
  var val5 = style.height  = (Math.random() * 100 | 0) + 'px';
  var val6 = style.fontSize = (Math.random() * 50 | 0) + 'px';
};

var fn4 = function(){

  var style = document.getElementById("test").style;

  style.left = (Math.random() * 100 | 0) + 'px';
  style.top  = (Math.random() * 100 | 0) + 'px';
  style.textIdent = (Math.random() * 100 | 0) + 'px';
  style.opacity = (Math.random() * 100 | 0) / 100;
  style.height  = (Math.random() * 100 | 0) + 'px';
  style.fontSize = (Math.random() * 50 | 0) + 'px';

  var val1 = style.left;
  var val2 = style.top;
  var val3 = style.textIdent;
  var val4 = style.opacity;
  var val5 = style.height;
  var val6 = style.fontSize;
};

var fn5 = function(){

  var style = document.getElementById("test").style;

  style.left = (Math.random() * 100 | 0) + 'px';
  var val1 = style.left;
  style.top  = (Math.random() * 100 | 0) + 'px';
  var val2 = style.top;
  style.textIdent = (Math.random() * 100 | 0) + 'px';
  var val3 = style.textIdent;
  style.opacity = (Math.random() * 100 | 0) / 100;
  var val4 = style.opacity;
  style.height  = (Math.random() * 100 | 0) + 'px';
  var val5 = style.height;
  style.fontSize = (Math.random() * 50 | 0) + 'px';
  var val6 = style.fontSize;
};

var fn6 = function(){

  var style = document.getElementById("test").style;

  var val1 = style.left;
  style.left = (Math.random() * 100 | 0) + 'px';
  var val2 = style.top;
  style.top  = (Math.random() * 100 | 0) + 'px';
  var val3 = style.textIdent;
  style.textIdent = (Math.random() * 100 | 0) + 'px';
  var val4 = style.opacity;
  style.opacity = (Math.random() * 100 | 0) / 100;
  var val5 = style.height;
  style.height  = (Math.random() * 100 | 0) + 'px';
  var val6 = style.fontSize;
  style.fontSize = (Math.random() * 50 | 0) + 'px';

};

var fn7 = function(){

  var style = document.getElementById("test").style;

  var val1 = style.left;
  var val2 = style.top;
  var val3 = style.textIdent;
  var val4 = style.opacity;
  var val5 = style.height;
  var val6 = style.fontSize;

  style.left = (Math.random() * 100 | 0) + 'px';
  style.top  = (Math.random() * 100 | 0) + 'px';
  style.textIdent = (Math.random() * 100 | 0) + 'px';
  style.opacity = (Math.random() * 100 | 0) / 100;
  style.height  = (Math.random() * 100 | 0) + 'px';
  style.fontSize = (Math.random() * 50 | 0) + 'px';

};

var fn8 = function(){

  var style = document.getElementById("test").style;

  style.left = (Math.random() * 100 | 0) + 'px';
  style.textIdent = (Math.random() * 100 | 0) + 'px';
  style.top  = (Math.random() * 100 | 0) + 'px';
  style.opacity = (Math.random() * 100 | 0) / 100;
  style.height  = (Math.random() * 100 | 0) + 'px';
  style.fontSize = (Math.random() * 50 | 0) + 'px';

};

</script>

Test runner

fn1();

fn2();

fn3();

fn4();

fn5();

fn6();

fn7();

// async test
window.requestAnimationFrame(function(){
  fn8();
  deferred.resolve();
}.bind(this));

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 3: published on August 4, 2014