A test against the preciseness in calculation of browsers.

The red frame should be rendered OK with different values of width and height. The result shows that IE 11 and FireFox 31 pass the test (FireFox is still worse than IE). All webkit-based browsers including Google Chrome, Opera and Maxthon suck together fairly much (causing the red frame hidden and very unstable at some points).

by viphalongpro

HTML

<div></div>

CSS

div {
    width:30px;
    height:30px;
    background:linear-gradient(to bottom, red 1px, transparent 1px),
               linear-gradient(to top, red 1px, transparent 1px),
               linear-gradient(to right, red 1px, transparent 1px),
               linear-gradient(to left, red 1px, transparent 1px);
    background-repeat:no-repeat;
    background-size:80% 100%, 80% 100%, 100% 80%, 100% 80%;        
    background-position:center;       
    -webkit-animation:test 10s infinite alternate;
    -moz-animation:test 10s infinite alternate;
    -ms-animation:test 10s infinite alternate;
    animation:test 10s infinite alternate;
}
div:before {
    content:'Where is the frame?';
    font-size:30px;
    color:red;
    opacity:0;    
}
@-webkit-keyframes test {    
    100% {
        width:500px;
        height:500px;
    }    
}
@-webkit-keyframes wonder {
    40% {
        opacity:0;
    }
    50%, 100% {
      opacity:1;
    }    
}
@-moz-keyframes test {    
    100% {
        width:500px;
        height:500px;
    }    
}
@-moz-keyframes wonder {
    40% {
        opacity:0;
    }
    50%, 100% {
      opacity:1;
    }    
}
@-ms-keyframes test {    
    100% {
        width:500px;
        height:500px;
    }    
}
@-ms-keyframes wonder {
    40% {
        opacity:0;
    }
    50%, 100% {
      opacity:1;
    }    
}
@keyframes test {    
    100% {
        width:500px;
        height:500px;
    }    
}
@keyframes wonder {
    40% {
        opacity:0;
    }
    50%, 100% {
      opacity:1;
    }    
}
@supports (-webkit-animation:'') {
    div:before {
        -webkit-animation:wonder 10s infinite alternate;        
    }
}