CSS Performance Test (v4)

Revision 4 of this benchmark created on

Preparation HTML

html{
  /*-webkit-text-size-adjust: none;*/
  height: 100%;
}
body{
  height: 100%;
  font-family: Helvetica, Arial, 'Sans Serif';
  font-size: 9pt;
}
a {
  text-decoration: none;
}
input {
  filter:alpha(opacity=50);     
  -moz-opacity:0.5;              
  opacity: 0.5;          
}
#toolbar{
  background-color: black;
  width: 100%;
  height: 30px;
}
#toolbar ul{
  position: relative;
  display: block;
  list-style: none;
  width: 900px;
  margin: 0px auto 0;
  padding: 0px;
  overflow: hidden;
}
#toolbar ul li{
  float: right;
  margin-left: 15px;
}
#toolbar a{
  color: white;
  text-decoration: none;
}
#wrap{
  display: block;
  /*border-bottom: 1px solid gray;*/
  position: relative;
  margin: 0 auto;
  width: 100%;
  height: 99%;
  padding: 0 0px;
  overflow: hidden;
}
#content{
  margin: 5px auto 0;
  width: 980px;
  height: 650px;
  overflow: auto;
}
#sidenav{
  float: left;
  width: 140px;
  height: 100%;
  border-right: 1px solid #BFBAB0;
}
#sidenav ul{
  margin: 0px;
  list-style: none;
  padding: 0 10px 20px 10px;
  font-size: 12px;
}
#sidenav ul li{
  margin: 10px 10px 10px 10px;
  width: 100%
}
#sidenav  ul li a{
  text-decoration: none;
  color: black;
}
#sidenav  ul li a:hover{
  border: 1px solid #BFBAB0;
}
#workspace{
  float: left;
  width: 820px;
  height: 100%;
}
#main_info{
  margin: 5px 5px;
  width: 98%;
  height:50%;
  clear: both;
  height: auto;
}
fieldset {  
  /*margin: 1.5em 0 0 1.5em;  */
  margin: 0 0 -1em .5em;  
  padding: 0; 
  border: 1px solid #BFBAB0;
  /*background-color: #F2EFE9;*/
  background: white url(../image/gradient.png) repeat-x;
  background: linear-gradient(top, #FFFFFF, #F2EFE9);
} 
fieldset label{
  display: block;
  float: left;
  width: 80px;
  margin-right: 1em;
  text-align: right;
}
fieldset ol {  
  float: left;
  padding: 1em 1em 0 1em;  
  list-style: none; 
  width: 45%;
} 
fieldset ol.ol_main {  
  width: 95%;
} 
fieldset li {  
  padding-bottom: .8em; 
  float: left;
  clear: left;
  width: 100%;
} 
legend {  
  margin-left: 1em;  
  color: #000000;  
  font-size:18px;
  font-weight: bold; 
}
#tar_list {
  float: left;
  margin: 0em 0 1em .5em;
  padding: 2px;
  border: 1px solid #BFBAB0;
  /*background-color: #F2EFE9;*/
  background: white url(../image/gradient.png) repeat-x;
  background: -webkit-linear-gradient(top, #FFFFFF, #F2EFE9);
  height: 190px;
  width: 99%;
}
#tar_list table{
  margin: 0px;
  width: 100%;
  font-size: 12px;
  border-collapse: collapse;
  table-layout:fixed;
}
#tar_list div{
  margin: 0;
  width: 100%;
  height: 85%;
  overflow-y: scroll;
  overflow-x: hidden;
}
#tar_list table tr:hover{
  background: silver;
}
#tar_list table td,th{
  border-right: 1px solid #BFBAB0;
  padding: 3px;
  vertical-align: top;
  text-align: center;
}
#tar_list table tr.title{
  background-color: #DDDDDD;
}
#tar_list td.shortM,th.shortM{
  width: 10%;
  text-align: left;
}
#tar_list td.shortC,th.shortC{
  width: 5%;
  text-align: left;
}
#tar_list td.longC,th.longC{
  width: 70%;
  text-align: left;
}
#etab {
  float: left;
  margin: 2em 0 1em .5em;
  padding: 0;
  border: 1px solid #BFBAB0;
  /*background-color: #F2EFE9;*/
  background: white url(../image/gradient.png) repeat-x;
  background: -webkit-linear-gradient(top, #FFFFFF, #F2EFE9);
  height: 150px;
  width: 50.5%;
}
.tColumn {
  float: left;
  margin: 2em 0 1em .5em;  
  padding: 0; 
  border: 1px solid #BFBAB0;
  /*background-color: #F2EFE9;*/
  background: white url(../image/gradient.png) repeat-x;
  background: -webkit-linear-gradient(top, #FFFFFF, #F2EFE9);
  height: 150px;
  width: 15%;
}
.tColumn h2{
  text-align: center;
  padding: .2em;
  font-size: 14px;
  font-weight: bold;
  border-bottom: 1px solid #BFBAB0;
}
.tColumn ul{
  padding: .2em .5em .2em .5em;
}
.tColumn ul li{
  border-bottom: 1px solid #BFBAB0;
}
.tColumn ul li>span{
  float:right;
}
#bottom_list{
  z-index: 99;
  position: fixed;
  bottom: -199px; 
  /*margin: 0 auto;*/
  left: 0px;
  height: 220px;
  width: 100%;
}
#upList{
  cursor: pointer;
  position:relative;
  border: 1px solid #BFBAB0;
  background: #F2EFE9;
  width: 100px;
  padding: 5px;
  left: 60px;
  border-radius: 5px;
  font-weight: bold;
  font-size: 16px;
}
#footer{
  margin: 0 auto;
  width: 980px;
  height: 40px;
}
#footer span{
  position: relative;
  display: block;
  margin: 0 auto;
  width: 200px;
}
.MeSH_tit{
  display: inline-block;
  width: 150px;
  border-bottom: 1px solid #E0E0E0;
}
.MeSH_ct{
  display: inline-block;
  width: 20px;
  border-bottom: 1px solid #E0E0E0;
}

.cktab ul{
  list-style: none;
  padding: 0;
  border: 1px solid #BFBAB0;
  overflow: hidden;
  margin: 1px;
  height: 28px;
  background-color: white;

  -moz-border-radius-bottomleft: 5px;
  border-bottom-left-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  border-bottom-right-radius: 5px;
  -moz-border-radius-topleft: 5px;
  border-top-left-radius: 5px;
  -moz-border-radius-topright: 5px;
  border-top-right-radius: 5px;
}
.cktab ul li{
  display: inline-block;
  padding: 0;
  float: left;
  margin: 0 1px 0 0;
}
.cktab ul li a{
  float: left;
  display: block;
  font: normal 10px Arial;
  color: #333333;
  text-decoration: none;
  margin: 4px; /*Margin between each menu item*/
  padding: 2px 6px 4px 6px; /*Padding within each menu item*/
  background-color: white; /*Default menu color*/
  font-size: 13px;
  font-weight: bold;

  -moz-border-radius-bottomleft: 3px;
  border-bottom-left-radius: 3px;
  -moz-border-radius-bottomright: 3px;
  border-bottom-right-radius: 3px;
  -moz-border-radius-topleft: 3px;
  border-top-left-radius: 3px;
  -moz-border-radius-topright: 3px;
  border-top-right-radius: 3px;
}

.cktab ul li a:hover{
  background-color: #333333;
  color: white;
}

.cktab a.current{
  background-color: #333333;
  color: white;
}
.cktab_cont{
  margin: 0 auto;  
  padding: 3px;
  width: 99%;
}
<script>
  var makeHtml = function(className) {
   className = className || '';
   var items = [];
   for (var i = 1; i < 100; i++) {
    items.push('<li class="' + className + '">index: ' + i + '</li>');
   }
   return items.join('');
  };
  
  var plainItems = makeHtml('plain');
  var fancyItems = makeHtml('fancy');
  var noTSItems = makeHtml('notextshadow');
  var noBSItems = makeHtml('noboxshadow');
  var noCornerItems = makeHtml('nocorners');
</script>

Test runner

Ready to run.

Testing in
TestOps/sec
unstyled
document.getElementById('foo').innerHTML = plainItems;
ready
full style
document.getElementById('foo').innerHTML = fancyItems;
ready
no text shadow
document.getElementById('foo').innerHTML = noTSItems;
ready
no box shadow
document.getElementById('foo').innerHTML = noBSItems;
ready
no corners
document.getElementById('foo').innerHTML = noCornerItems;
ready

Revisions

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