mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-26 19:55:39 +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
48 lines
797 B
HTML
48 lines
797 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;
|
|
}
|
|
|
|
div {
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
margin: auto;
|
|
transform-origin: 50% 50% 100px;
|
|
background: #006;
|
|
/* approximately rotateY(-120deg) rotateX(60deg); */
|
|
transform: rotateY(-2.0944rad) rotateX(1.0472rad);
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
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>
|