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
47 lines
754 B
HTML
47 lines
754 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;
|
|
}
|
|
|
|
div {
|
|
position: absolute;
|
|
top: 0; right: 0; bottom: 0; left: 0;
|
|
margin: auto;
|
|
transform-origin: 50% 50% 100px;
|
|
background: #006;
|
|
transform: rotateY(-120deg) rotateX(60deg);
|
|
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>
|