mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-12 04:45:45 +00:00
4ecd5ea19f
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
53 lines
825 B
HTML
53 lines
825 B
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<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>
|