gecko-dev/layout/reftests/transform-3d/animate-cube-degrees-zoom.html
L. David Baron 4ecd5ea19f Bug 1157455 patch 1 - Add tests for OMTA transforms in degrees in addition to those in radians. r=birtles
In bug 1156456 I landed tests with the transform in radians to work
around float rounding issues with having the transform in degrees.  This
bug will fix the problems with degrees, so I'm duplicating the tests
here to have variants with both degrees and radians.

--HG--
rename : layout/reftests/transform-3d/animate-cube-ref.html => layout/reftests/transform-3d/animate-cube-degrees-ref.html
rename : layout/reftests/transform-3d/animate-cube-zoom-ref.html => layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html
rename : layout/reftests/transform-3d/animate-cube-zoom.html => layout/reftests/transform-3d/animate-cube-degrees-zoom.html
rename : layout/reftests/transform-3d/animate-cube.html => layout/reftests/transform-3d/animate-cube-degrees.html
rename : layout/reftests/transform-3d/animate-cube-ref.html => layout/reftests/transform-3d/animate-cube-radians-ref.html
rename : layout/reftests/transform-3d/animate-cube-zoom-ref.html => layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html
rename : layout/reftests/transform-3d/animate-cube-zoom.html => layout/reftests/transform-3d/animate-cube-radians-zoom.html
rename : layout/reftests/transform-3d/animate-cube.html => layout/reftests/transform-3d/animate-cube-radians.html
2015-04-23 09:18:12 -07:00

53 lines
844 B
HTML

<!DOCTYPE HTML>
<html reftest-zoom="1.5">
<title>Reftest, bug 1156456</title>
<style>
html, body {
height: 100%;
}
body {
background: white;
perspective: 1000px;
}
div, div::before, div::after {
width: 200px; height: 200px;
}
@keyframes HoldTransform {
from, to {
transform: rotateY(-120deg) rotateX(60deg);
}
}
div {
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
margin: auto;
transform-origin: 50% 50% 100px;
background: #006;
transform-style: preserve-3d;
animation: 10s HoldTransform infinite;
}
div::before, div::after {
position: absolute;
top: 0; left: 0;
content: "";
}
div::before {
background: #00f;
transform: translate3D(100px, 0, 100px) rotateY(90deg);
}
div::after {
background: #00c;
transform: translate3D(0, -100px, 100px) rotateX(90deg);
}
</style>
<div></div>