oli

/**
 * Testing testing
 */

background:silver;
background-image: 
	radial-gradient(100% 150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent),
	radial-gradient(0    150%, circle, silver 24%, white 25%, white 28%, silver 29%, silver 36%, white 36%, white 40%, transparent 40%, transparent)
	;

oli

/* matrix() units for variables e & f */
body {font-size: 10px;}
div {
	width: 100px;
	height: 100px;
	border: 1px solid black;
	line-height: 180px;
	text-align: center;
}
span {font-size: 20px;}

oli

/* Comparing perspective to perspective() */
body {margin-top: 48px;}
.x {float: left;
width: 100px;
 height: 100px;
 border: 1px solid #ccc;}
.x div {width: 100%;
height: 100%;}
.a div {
transform: perspective(200px) rotateY(45deg);

oli

/* CSS Transitions test cases */
/* ref: http://meyerweb.com/eric/thoughts/2011/03/24/inconsistent-transitions/
        http://dev.w3.org/csswg/css3-transitions/#starting */

div {width: 80px; height: 80px; border: 1px solid #ccc;}
div > div {width: 50px; height: 50px; margin: 14px; border-color: #777;}
/* transition on mouseover, not mouseout (snaps back) */
.one:hover div {transition: transform 1s linear; transform: rotate(270deg);}
/* transition on default state: transitions both ways */
.two div {transition: transform 1s linear;}

oli

/* CSS Transitions we’d like to use */
/*
the spec doesn’t allow these atm:
1 background-image
2 gradients
3 float
4 display between none & anything
5 position between static and absolute
6 height/width (plus top/right/bottom/left) between auto & a length/% (ref: 7,8)
7 max-height/max-width workaround for height/width

oli

/* Using multiple values for CSS Transitions
1 individual: declare three transitions as comma-separated per property
2 repeated: as individual, but transition delay only declared once
3 shorthand property
Results:
  * Chrome 16: in .repeated single value is repeated
  * Safari 5.1.2: in .repeated single value is repeated
  * FF 9: in .repeated single value is repeated
  * Opera 11.60: in .repeated single value is repeated (but box-shadow instant in all)

oli

/* Transitions bug with links */
/* ref: http://jsfiddle.net/sMH9K/embedded/result,html,css/ */
body {background-color: #ccc;}
a {
  font-size: 300%;
  color: blue;
  transition: all 1s linear;
}
a:visited {color: yellow;}
a:visited:hover, a:hover, a:focus, a:active {color: red;}

oli

/* anti-aliasing in 2D and 3D transforms */
/* from KrofDrakula https://github.com/LeaVerou/prefixfree/issues/16 */
.wrapper {width: 264px;}
div > div, .box {
  width: 240px;
  height: 80px;
  margin: 24px;
  border: 5px solid #999;
  border-radius: 5px;
  padding: 3px;

oli

/* CSS Animations basic tests */
/* via default (on page load), :hover and :checked */
@keyframes startsame {from {background-color: rgba(245,163,163,.7);}}
@keyframes endsame {to {background-color: rgba(163, 245, 163, .7);}}
@keyframes startonly {from {background-color: #ccc;}}
@keyframes endonly {to {background-color: #ccc;}}
@keyframes bothsame {
  from {background-color: rgba(245,163,163,.7);}
  to {background-color: rgba(163, 245, 163, .7);}
}

oli

/* CSS Animations we’d like to use */
/*
the spec doesn’t allow these atm:
1 background-image
2 gradients
3 float
5 display between none & anything
6 position between static and absolute
6 height/width (plus top/right/bottom/left) between auto & a length/% (ref: 7,8)