mirror of
https://repo.dactyloidae.xyz/Dactyloidae/UXP.git
synced 2026-10-15 11:47:31 +09:00
import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo
This commit is contained in:
commit
dcd9973243
150858 changed files with 23884658 additions and 0 deletions
29
layout/reftests/transform-3d/1035611-1-ref.html
Normal file
29
layout/reftests/transform-3d/1035611-1-ref.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<title>Testcase, bug 1035611</title>
|
||||
<meta charset=UTF-8>
|
||||
<style type="text/css">
|
||||
|
||||
#outer {
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
overflow:hidden;
|
||||
background: orange;
|
||||
}
|
||||
|
||||
#inner {
|
||||
width: 36px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
38
layout/reftests/transform-3d/1035611-1.html
Normal file
38
layout/reftests/transform-3d/1035611-1.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US" reftest-zoom="1.0">
|
||||
<head>
|
||||
<title>Testcase, bug 1035611</title>
|
||||
<meta charset=UTF-8>
|
||||
<style type="text/css">
|
||||
|
||||
#outer1 {
|
||||
width: 500px;
|
||||
height: 100px;
|
||||
overflow:hidden;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
#outer2 {
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
perspective: 125px;
|
||||
}
|
||||
|
||||
#inner {
|
||||
transform-origin: 0px 0px 70px;
|
||||
transform: rotate3d(0, 1, 0, -54deg);
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
background: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer1">
|
||||
<div id="outer2">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
32
layout/reftests/transform-3d/1157984-1.html
Normal file
32
layout/reftests/transform-3d/1157984-1.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US" reftest-zoom="1.0">
|
||||
<head>
|
||||
<title>Testcase, bug 1157984</title>
|
||||
<meta charset=UTF-8>
|
||||
<style type="text/css">
|
||||
|
||||
#outer {
|
||||
position:absolute;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
perspective-origin: 300px 300px;
|
||||
perspective: 300px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#inner {
|
||||
position:absolute;
|
||||
background-color: green;
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
transform-origin: 300px 300px 0px;
|
||||
transform: translateZ(300px) rotateY(-2rad) translateZ(300px);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
36
layout/reftests/transform-3d/1245450-1.html
Normal file
36
layout/reftests/transform-3d/1245450-1.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
.scene {
|
||||
perspective: 1000px;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
.card {
|
||||
perspective: 1000px;
|
||||
transform-style: preserve-3d;
|
||||
backface-visibility: hidden;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.front {
|
||||
transform: rotateY(0deg);
|
||||
background-color: #00FF00;
|
||||
}
|
||||
|
||||
.back {
|
||||
transform: rotateY(180deg);
|
||||
background-color: #FF0000;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="scene">
|
||||
<div class="card front"></div>
|
||||
<div class="card back"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
layout/reftests/transform-3d/1271058-1-ref.html
Normal file
12
layout/reftests/transform-3d/1271058-1-ref.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<canvas id="canvas" width="200" height="200"></canvas>
|
||||
</body>
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "green";
|
||||
ctx.fillRect(0, 0, 200, 200);
|
||||
</script>
|
||||
</html>
|
||||
34
layout/reftests/transform-3d/1271058-1.html
Normal file
34
layout/reftests/transform-3d/1271058-1.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.preserve {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.leaf {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
position:absolute;
|
||||
transform: translateZ(0px);
|
||||
background-color: red;
|
||||
top: -220px;
|
||||
left: -20px;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<canvas id="canvas" width="200" height="200"></canvas>
|
||||
<div class="preserve">
|
||||
<div class="preserve" style="opacity:0.0001">
|
||||
<div class="leaf"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "green";
|
||||
ctx.fillRect(0, 0, 200, 200);
|
||||
</script>
|
||||
</html>
|
||||
|
||||
40
layout/reftests/transform-3d/animate-backface-hidden.html
Normal file
40
layout/reftests/transform-3d/animate-backface-hidden.html
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait reftest-no-flush">
|
||||
<title>Testcase, bug 1186061</title>
|
||||
<style>
|
||||
|
||||
html { overflow: hidden }
|
||||
|
||||
body { padding: 50px }
|
||||
|
||||
@keyframes flip {
|
||||
0%, 85% { transform: rotateX(170deg); }
|
||||
90%, 100% { transform: rotateX(10deg); }
|
||||
}
|
||||
|
||||
#test {
|
||||
background: blue;
|
||||
height: 200px; width: 200px;
|
||||
backface-visibility: hidden;
|
||||
/* use a -99.9s delay to start at 99.9% and then move to 0% */
|
||||
animation: flip 100s -99.9s linear 2;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="test">
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
document.getElementById("test").addEventListener("animationiteration", IterationListener, false);
|
||||
|
||||
function IterationListener(event) {
|
||||
setTimeout(RemoveReftestWait, 0);
|
||||
}
|
||||
|
||||
function RemoveReftestWait() {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
}
|
||||
|
||||
</script>
|
||||
46
layout/reftests/transform-3d/animate-cube-degrees-ref.html
Normal file
46
layout/reftests/transform-3d/animate-cube-degrees-ref.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!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;
|
||||
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>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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>
|
||||
52
layout/reftests/transform-3d/animate-cube-degrees-zoom.html
Normal file
52
layout/reftests/transform-3d/animate-cube-degrees-zoom.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!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>
|
||||
52
layout/reftests/transform-3d/animate-cube-degrees.html
Normal file
52
layout/reftests/transform-3d/animate-cube-degrees.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!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>
|
||||
47
layout/reftests/transform-3d/animate-cube-radians-ref.html
Normal file
47
layout/reftests/transform-3d/animate-cube-radians-ref.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<!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;
|
||||
/* 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>
|
||||
53
layout/reftests/transform-3d/animate-cube-radians-zoom.html
Normal file
53
layout/reftests/transform-3d/animate-cube-radians-zoom.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!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 {
|
||||
/* approximately rotateY(-120deg) rotateX(60deg); */
|
||||
transform: rotateY(-2.0944rad) rotateX(1.0472rad);
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
53
layout/reftests/transform-3d/animate-cube-radians.html
Normal file
53
layout/reftests/transform-3d/animate-cube-radians.html
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
<!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 {
|
||||
/* approximately rotateY(-120deg) rotateX(60deg); */
|
||||
transform: rotateY(-2.0944rad) rotateX(1.0472rad);
|
||||
}
|
||||
}
|
||||
|
||||
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>
|
||||
56
layout/reftests/transform-3d/animate-preserve3d-child.html
Normal file
56
layout/reftests/transform-3d/animate-preserve3d-child.html
Normal file
|
|
@ -0,0 +1,56 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>Testcase, bug 1176969</title>
|
||||
<style>
|
||||
|
||||
body { padding: 50px }
|
||||
|
||||
#grandparent { perspective: 400px }
|
||||
|
||||
@keyframes spin {
|
||||
0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
|
||||
90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
|
||||
}
|
||||
|
||||
#parent {
|
||||
background: blue;
|
||||
height: 200px; width: 200px;
|
||||
border: 1px solid black;
|
||||
transform-style: preserve-3d;
|
||||
/* use a -99.9s delay to start at 99.9% and then move to 0% */
|
||||
animation: spin 100s -99.9s linear 2;
|
||||
}
|
||||
|
||||
@keyframes noop {
|
||||
from, to { transform: translateZ(15px) }
|
||||
}
|
||||
|
||||
#child {
|
||||
height: 100px; width: 100px; margin: 50px;
|
||||
background: yellow;
|
||||
box-shadow: 3px 3px olive;
|
||||
animation: noop infinite 10s linear;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
document.getElementById("parent").addEventListener("animationiteration", IterationListener, false);
|
||||
|
||||
function IterationListener(event) {
|
||||
setTimeout(RemoveReftestWait, 0);
|
||||
}
|
||||
|
||||
function RemoveReftestWait() {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
}
|
||||
|
||||
</script>
|
||||
52
layout/reftests/transform-3d/animate-preserve3d-parent.html
Normal file
52
layout/reftests/transform-3d/animate-preserve3d-parent.html
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html class="reftest-wait">
|
||||
<title>Testcase, bug 1176969</title>
|
||||
<style>
|
||||
|
||||
body { padding: 50px }
|
||||
|
||||
#grandparent { perspective: 400px }
|
||||
|
||||
@keyframes spin {
|
||||
0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
|
||||
90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
|
||||
}
|
||||
|
||||
#parent {
|
||||
background: blue;
|
||||
height: 200px; width: 200px;
|
||||
border: 1px solid black;
|
||||
transform-style: preserve-3d;
|
||||
/* use a -99.9s delay to start at 99.9% and then move to 0% */
|
||||
animation: spin 100s -99.9s linear 2;
|
||||
}
|
||||
|
||||
#child {
|
||||
transform: translateZ(15px);
|
||||
height: 100px; width: 100px; margin: 50px;
|
||||
background: yellow;
|
||||
box-shadow: 3px 3px olive;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
document.getElementById("parent").addEventListener("animationiteration", IterationListener, false);
|
||||
|
||||
function IterationListener(event) {
|
||||
setTimeout(RemoveReftestWait, 0);
|
||||
}
|
||||
|
||||
function RemoveReftestWait() {
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
}
|
||||
|
||||
</script>
|
||||
33
layout/reftests/transform-3d/animate-preserve3d-ref.html
Normal file
33
layout/reftests/transform-3d/animate-preserve3d-ref.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<title>Testcase, bug 1176969</title>
|
||||
<style>
|
||||
|
||||
body { padding: 50px }
|
||||
|
||||
#grandparent { perspective: 400px }
|
||||
|
||||
#parent {
|
||||
background: blue;
|
||||
height: 200px; width: 200px;
|
||||
border: 1px solid black;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
#child {
|
||||
transform: translateZ(15px);
|
||||
height: 100px; width: 100px; margin: 50px;
|
||||
background: yellow;
|
||||
box-shadow: 3px 3px olive;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="child">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
9
layout/reftests/transform-3d/backface-visibility-1a.html
Normal file
9
layout/reftests/transform-3d/backface-visibility-1a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(180deg); -moz-backface-visibility: visible; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/backface-visibility-1b.html
Normal file
9
layout/reftests/transform-3d/backface-visibility-1b.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(180deg); -moz-backface-visibility: hidden; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/backface-visibility-1c.html
Normal file
9
layout/reftests/transform-3d/backface-visibility-1c.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(180deg); -moz-backface-visibility: hidden; width: 100px; height: 100px; display: table">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
43
layout/reftests/transform-3d/backface-visibility-2-ref.html
Normal file
43
layout/reftests/transform-3d/backface-visibility-2-ref.html
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
margin: 10px auto;
|
||||
width: 450px;
|
||||
height: 281px;
|
||||
z-index: 1;
|
||||
-moz-perspective: 1000px;
|
||||
}
|
||||
#card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-moz-transform: rotateY(165deg);
|
||||
}
|
||||
.face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-backface-visibility: hidden;
|
||||
background: red;
|
||||
}
|
||||
.face.back {
|
||||
display: block;
|
||||
-moz-transform: rotateY(180deg);
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="container" class="hover">
|
||||
<div id="card">
|
||||
<div class="back face">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
45
layout/reftests/transform-3d/backface-visibility-2.html
Normal file
45
layout/reftests/transform-3d/backface-visibility-2.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<body>
|
||||
<style>
|
||||
#container {
|
||||
position: relative;
|
||||
margin: 10px auto;
|
||||
width: 450px;
|
||||
height: 281px;
|
||||
z-index: 1;
|
||||
-moz-perspective: 1000px;
|
||||
}
|
||||
#card {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-moz-transform: rotateY(165deg);
|
||||
}
|
||||
.face {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-moz-backface-visibility: hidden;
|
||||
background: red;
|
||||
}
|
||||
.face.back {
|
||||
display: block;
|
||||
-moz-transform: rotateY(180deg);
|
||||
box-sizing: border-box;
|
||||
padding: 10px;
|
||||
color: white;
|
||||
text-align: center;
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="container" class="hover">
|
||||
<div id="card">
|
||||
<div class="front face">
|
||||
</div>
|
||||
<div class="back face">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
21
layout/reftests/transform-3d/backface-visibility-3-ref.html
Normal file
21
layout/reftests/transform-3d/backface-visibility-3-ref.html
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type='text/css'>
|
||||
div {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
background: red;
|
||||
top:108px;
|
||||
left:308px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
33
layout/reftests/transform-3d/backface-visibility-3.html
Normal file
33
layout/reftests/transform-3d/backface-visibility-3.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style type='text/css'>
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
#test {
|
||||
transform-origin: 0 0;
|
||||
transform: scale(2) translateX(100px);
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
#test div {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: red;
|
||||
top:50px;
|
||||
left:50px;
|
||||
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="test">
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
14
layout/reftests/transform-3d/green-rect.html
Normal file
14
layout/reftests/transform-3d/green-rect.html
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#parent {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #00FF00;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="parent"></div>
|
||||
</body>
|
||||
</html>
|
||||
29
layout/reftests/transform-3d/mask-layer-1.html
Normal file
29
layout/reftests/transform-3d/mask-layer-1.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>border-radius should work correctly for elements with perspective</title>
|
||||
|
||||
<style>
|
||||
|
||||
#a {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: red;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
#b {
|
||||
position: relative;
|
||||
background: green;
|
||||
height: 100%;
|
||||
width: 10000px;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="a">
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
37
layout/reftests/transform-3d/mask-layer-2.html
Normal file
37
layout/reftests/transform-3d/mask-layer-2.html
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>border-radius should work correctly for elements with perspective and preserve-3d</title>
|
||||
|
||||
<style>
|
||||
|
||||
#a {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: red;
|
||||
perspective: 1000px;
|
||||
}
|
||||
|
||||
#b {
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
|
||||
#c {
|
||||
position: relative;
|
||||
background: green;
|
||||
height: 100%;
|
||||
width: 10000px;
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="a">
|
||||
<div id="b">
|
||||
<div id="c"></div>
|
||||
</div>
|
||||
</div>
|
||||
36
layout/reftests/transform-3d/mask-layer-3.html
Normal file
36
layout/reftests/transform-3d/mask-layer-3.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>border-radius should work correctly for elements with preserve-3d</title>
|
||||
|
||||
<style>
|
||||
|
||||
#a {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#b {
|
||||
height: 100%;
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
|
||||
#c {
|
||||
position: relative;
|
||||
background: green;
|
||||
height: 100%;
|
||||
width: 10000px;
|
||||
transform: rotateX(90deg);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="a">
|
||||
<div id="b">
|
||||
<div id="c"></div>
|
||||
</div>
|
||||
</div>
|
||||
28
layout/reftests/transform-3d/mask-layer-ref.html
Normal file
28
layout/reftests/transform-3d/mask-layer-ref.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>border-radius should work correctly for transformed elements</title>
|
||||
|
||||
<style>
|
||||
|
||||
#a {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#b {
|
||||
position: relative;
|
||||
background: green;
|
||||
height: 100%;
|
||||
width: 10000px;
|
||||
transform: translateZ(1px);
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="a">
|
||||
<div id="b"></div>
|
||||
</div>
|
||||
9
layout/reftests/transform-3d/matrix3d-1-ref.html
Normal file
9
layout/reftests/transform-3d/matrix3d-1-ref.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: matrix(1,2,3,4,5,6); width: 100px; height: 100px; background: gold;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/matrix3d-1a.html
Normal file
9
layout/reftests/transform-3d/matrix3d-1a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: matrix3d(1,2,0,0,3,4,0,0,0,0,1,0,5,6,0,1); width: 100px; height: 100px; background: gold;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/matrix3d-2-ref.html
Normal file
9
layout/reftests/transform-3d/matrix3d-2-ref.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: translate3d(4px,5px,6px) scale3d(1,2,3); width: 100px; height: 100px; background: gold;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/matrix3d-2a.html
Normal file
9
layout/reftests/transform-3d/matrix3d-2a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: matrix3d(1,0,0,0,0,2,0,0,0,0,3,0,4,5,6,1); width: 100px; height: 100px; background: gold;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
45
layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
Normal file
45
layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.first {
|
||||
transform: translateZ(10px);
|
||||
background-color: blue;
|
||||
top: 60px;
|
||||
}
|
||||
.second {
|
||||
transform: translateZ(5px);
|
||||
background-color: green;
|
||||
top: 40px;
|
||||
}
|
||||
.third {
|
||||
transform: translateZ(-5px);
|
||||
background-color: yellow;
|
||||
top: 20px;
|
||||
}
|
||||
.fourth {
|
||||
transform: translateZ(-10px);
|
||||
background-color: red;
|
||||
}
|
||||
.preserve {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.leaf {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div class="preserve">
|
||||
<div class="leaf first"></div>
|
||||
<div style="opacity:0.5">
|
||||
<div class="leaf second"></div>
|
||||
<div class="leaf fourth"></div>
|
||||
</div>
|
||||
<div class="leaf third"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
45
layout/reftests/transform-3d/opacity-preserve3d-1.html
Normal file
45
layout/reftests/transform-3d/opacity-preserve3d-1.html
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.first {
|
||||
transform: translateZ(10px);
|
||||
background-color: blue;
|
||||
top: 60px;
|
||||
}
|
||||
.second {
|
||||
transform: translateZ(5px);
|
||||
background-color: green;
|
||||
top: 40px;
|
||||
}
|
||||
.third {
|
||||
transform: translateZ(-5px);
|
||||
background-color: yellow;
|
||||
top: 20px;
|
||||
}
|
||||
.fourth {
|
||||
transform: translateZ(-10px);
|
||||
background-color: red;
|
||||
}
|
||||
.preserve {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.leaf {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div class="preserve">
|
||||
<div class="leaf first"></div>
|
||||
<div class="preserve" style="opacity:0.5">
|
||||
<div class="leaf second"></div>
|
||||
<div class="leaf fourth"></div>
|
||||
</div>
|
||||
<div class="leaf third"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
28
layout/reftests/transform-3d/opacity-preserve3d-2-ref.html
Normal file
28
layout/reftests/transform-3d/opacity-preserve3d-2-ref.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.first {
|
||||
transform: translateZ(10px);
|
||||
background-color: blue;
|
||||
top: 50px;
|
||||
}
|
||||
.second {
|
||||
transform: translateZ(5px);
|
||||
background-color: green;
|
||||
}
|
||||
.leaf {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div style="opacity:0.5; transform:translateX(0px)">
|
||||
<div class="leaf first"></div>
|
||||
<div class="leaf second"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
31
layout/reftests/transform-3d/opacity-preserve3d-2.html
Normal file
31
layout/reftests/transform-3d/opacity-preserve3d-2.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.first {
|
||||
transform: translateZ(10px);
|
||||
background-color: blue;
|
||||
top: 50px;
|
||||
}
|
||||
.second {
|
||||
transform: translateZ(5px);
|
||||
background-color: green;
|
||||
}
|
||||
.preserve {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.leaf {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div class="preserve" style="opacity:0.5">
|
||||
<div class="leaf first"></div>
|
||||
<div class="leaf second"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
42
layout/reftests/transform-3d/opacity-preserve3d-3-ref.html
Normal file
42
layout/reftests/transform-3d/opacity-preserve3d-3-ref.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.first {
|
||||
transform: translateZ(10px);
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
.second {
|
||||
background-color: green;
|
||||
top: 40px;
|
||||
}
|
||||
.third {
|
||||
top: 80px;
|
||||
}
|
||||
.preserve {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.leaf {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div class="preserve">
|
||||
<div style="opacity:0.5; transform:translateX(0px)">
|
||||
<div class="leaf first"></div>
|
||||
<div class="leaf second"></div>
|
||||
<canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
42
layout/reftests/transform-3d/opacity-preserve3d-3.html
Normal file
42
layout/reftests/transform-3d/opacity-preserve3d-3.html
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.first {
|
||||
transform: translateZ(10px);
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
.second {
|
||||
background-color: green;
|
||||
top: 40px;
|
||||
}
|
||||
.third {
|
||||
top: 80px;
|
||||
}
|
||||
.preserve {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.leaf {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div class="preserve">
|
||||
<div class="preserve" style="opacity:0.5">
|
||||
<div class="leaf first"></div>
|
||||
<div class="leaf second"></div>
|
||||
<canvas class="leaf third" width="100px" height="100px" id="canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
38
layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
Normal file
38
layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.first {
|
||||
transform: translateZ(10px);
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
.second {
|
||||
background-color: green;
|
||||
top: 40px;
|
||||
}
|
||||
.preserve {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.leaf {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div class="preserve">
|
||||
<div style="opacity:0.5">
|
||||
<div class="leaf first"></div>
|
||||
<canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
38
layout/reftests/transform-3d/opacity-preserve3d-4.html
Normal file
38
layout/reftests/transform-3d/opacity-preserve3d-4.html
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style>
|
||||
.first {
|
||||
transform: translateZ(10px);
|
||||
background-color: blue;
|
||||
top: 0px;
|
||||
}
|
||||
.second {
|
||||
background-color: green;
|
||||
top: 40px;
|
||||
}
|
||||
.preserve {
|
||||
transform-style: preserve-3d;
|
||||
}
|
||||
.leaf {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position:absolute;
|
||||
}
|
||||
</style>
|
||||
</head><body>
|
||||
|
||||
<div class="preserve">
|
||||
<div class="preserve" style="opacity:0.5">
|
||||
<div class="leaf first"></div>
|
||||
<canvas class="leaf second" width="100px" height="100px" id="canvas"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var canvas = document.getElementById("canvas");
|
||||
var ctx = canvas.getContext("2d");
|
||||
ctx.fillStyle = "red";
|
||||
ctx.fillRect(0, 0, 100, 100);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
29
layout/reftests/transform-3d/opacity-preserve3d-5-ref.html
Normal file
29
layout/reftests/transform-3d/opacity-preserve3d-5-ref.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
.outer {
|
||||
transform-style: preserve-3d;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.inner {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: green;
|
||||
position:relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" class="outer">
|
||||
<div class="inner">
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
36
layout/reftests/transform-3d/opacity-preserve3d-5.html
Normal file
36
layout/reftests/transform-3d/opacity-preserve3d-5.html
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<head>
|
||||
<style>
|
||||
.outer {
|
||||
transform-style: preserve-3d;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.inner {
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
background-color: green;
|
||||
position:relative;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="outer" class="outer">
|
||||
<div class="inner">
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
function doTest() {
|
||||
document.getElementById("outer").style.opacity = 0.7;
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
|
||||
window.addEventListener("MozReftestInvalidate", doTest, false);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
27
layout/reftests/transform-3d/overflow-hidden-1-ref.html
Normal file
27
layout/reftests/transform-3d/overflow-hidden-1-ref.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style type="text/css">
|
||||
.stage{
|
||||
-moz-perspective: 700px;
|
||||
overflow: hidden;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
background-color: red;
|
||||
display: block;
|
||||
-moz-transform: rotate3d(0,1,0, 50deg) translatey(20px);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<div class="stage">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
27
layout/reftests/transform-3d/overflow-hidden-1a.html
Normal file
27
layout/reftests/transform-3d/overflow-hidden-1a.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<style type="text/css">
|
||||
.stage{
|
||||
-moz-perspective: 700px;
|
||||
overflow: hidden;
|
||||
width: 260px;
|
||||
height: 260px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.box {
|
||||
width: 170px;
|
||||
height: 170px;
|
||||
background-color: red;
|
||||
display: block;
|
||||
-moz-transform: rotate3d(0,1,0, 50deg) translatey(20px);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body id="body">
|
||||
<div class="stage">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</body></html>
|
||||
13
layout/reftests/transform-3d/perspective-clipping-1-ref.html
Normal file
13
layout/reftests/transform-3d/perspective-clipping-1-ref.html
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>#inner should not be clipped</title>
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: lime;
|
||||
}
|
||||
|
||||
</style>
|
||||
32
layout/reftests/transform-3d/perspective-clipping-1.html
Normal file
32
layout/reftests/transform-3d/perspective-clipping-1.html
Normal file
|
|
@ -0,0 +1,32 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>#inner should not be clipped</title>
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
background: red;
|
||||
}
|
||||
|
||||
#perspective {
|
||||
perspective: 300px;
|
||||
perspective-origin: top left;
|
||||
}
|
||||
|
||||
#inner {
|
||||
height: 100vh;
|
||||
transform-origin: top left;
|
||||
transform: translateZ(-300px) scale(2);
|
||||
z-index: 2;
|
||||
background: lime;
|
||||
border: 1px solid lime;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="perspective">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
11
layout/reftests/transform-3d/perspective-origin-1a.html
Normal file
11
layout/reftests/transform-3d/perspective-origin-1a.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-perspective: 1000px; -moz-perspective-origin: 0 0;">
|
||||
<div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
11
layout/reftests/transform-3d/perspective-origin-1b.html
Normal file
11
layout/reftests/transform-3d/perspective-origin-1b.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-perspective: 1000px; -moz-perspective-origin: top left;">
|
||||
<div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
31
layout/reftests/transform-3d/perspective-origin-2-ref.html
Normal file
31
layout/reftests/transform-3d/perspective-origin-2-ref.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<html>
|
||||
</head>
|
||||
<style type="text/css">
|
||||
.stage{
|
||||
-moz-perspective: 100px;
|
||||
-moz-perspective-origin: 30px 30px;
|
||||
height:100px;
|
||||
width:100px;
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
border:5px solid gray;
|
||||
}
|
||||
|
||||
.box {
|
||||
-moz-transform:rotateX(45deg);
|
||||
height:70px;
|
||||
width:70px;
|
||||
background:green;
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
border:5px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
31
layout/reftests/transform-3d/perspective-origin-2a.html
Normal file
31
layout/reftests/transform-3d/perspective-origin-2a.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<html>
|
||||
</head>
|
||||
<style type="text/css">
|
||||
.stage{
|
||||
-moz-perspective: 100px;
|
||||
-moz-perspective-origin: 25% 25%;
|
||||
height:100px;
|
||||
width:100px;
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
border:5px solid gray;
|
||||
}
|
||||
|
||||
.box {
|
||||
-moz-transform:rotateX(45deg);
|
||||
height:70px;
|
||||
width:70px;
|
||||
background:green;
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
border:5px solid black;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="stage">
|
||||
<div class="box"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
layout/reftests/transform-3d/perspective-origin-3-ref.html
Normal file
41
layout/reftests/transform-3d/perspective-origin-3-ref.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<style type="text/css">
|
||||
|
||||
.parentWithPerspective {
|
||||
-moz-perspective: 100px;
|
||||
-moz-perspective-origin: 150px 150px;
|
||||
-webkit-perspective: 100px;
|
||||
-webkit-perspective-origin: 150px 150px;
|
||||
/* Changing width/height to 500px should not change the rendering. */
|
||||
height:100%;
|
||||
}
|
||||
|
||||
.parentWithPerspective > div {
|
||||
position:absolute;
|
||||
top:100px;
|
||||
left:100px;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.notTransformed {
|
||||
outline: 1px solid black;
|
||||
}
|
||||
|
||||
.transformed {
|
||||
background:blue;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-moz-transform: rotateY(45deg);
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-webkit-transform: rotateY(45deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div class="parentWithPerspective">
|
||||
<div class="notTransformed"></div>
|
||||
<div class="transformed"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
41
layout/reftests/transform-3d/perspective-origin-3a.html
Normal file
41
layout/reftests/transform-3d/perspective-origin-3a.html
Normal file
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<style type="text/css">
|
||||
|
||||
.parentWithPerspective {
|
||||
-moz-perspective: 100px;
|
||||
-moz-perspective-origin: 150px 150px;
|
||||
-webkit-perspective: 100px;
|
||||
-webkit-perspective-origin: 150px 150px;
|
||||
/* Changing width/height to 500px should not change the rendering. */
|
||||
height:500px;
|
||||
}
|
||||
|
||||
.parentWithPerspective > div {
|
||||
position:absolute;
|
||||
top:100px;
|
||||
left:100px;
|
||||
width:100px;
|
||||
height:100px;
|
||||
}
|
||||
|
||||
.notTransformed {
|
||||
outline: 1px solid black;
|
||||
}
|
||||
|
||||
.transformed {
|
||||
background:blue;
|
||||
-moz-transform-origin: 0% 0%;
|
||||
-moz-transform: rotateY(45deg);
|
||||
-webkit-transform-origin: 0% 0%;
|
||||
-webkit-transform: rotateY(45deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div class="parentWithPerspective">
|
||||
<div class="notTransformed"></div>
|
||||
<div class="transformed"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
20
layout/reftests/transform-3d/perspective-origin-4-ref.html
Normal file
20
layout/reftests/transform-3d/perspective-origin-4-ref.html
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Testcase for bug 770629</title>
|
||||
<style>
|
||||
|
||||
div {
|
||||
position: absolute;
|
||||
left: 125px;
|
||||
width: 50px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
29
layout/reftests/transform-3d/perspective-origin-4a.html
Normal file
29
layout/reftests/transform-3d/perspective-origin-4a.html
Normal file
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>Testcase for bug 770629</title>
|
||||
<style>
|
||||
|
||||
.outer {
|
||||
position: absolute;
|
||||
left: 100px;
|
||||
-moz-transform: scale(0.5,1);
|
||||
-moz-perspective: 200px;
|
||||
-moz-perspective-origin: 50% 0px;
|
||||
}
|
||||
|
||||
.inner {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: blue;
|
||||
-moz-transform: rotateY(0deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="outer">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
34
layout/reftests/transform-3d/perspective-zindex-2.html
Normal file
34
layout/reftests/transform-3d/perspective-zindex-2.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>z-index should work correctly for elements with perspective</title>
|
||||
|
||||
<style>
|
||||
|
||||
#perspective {
|
||||
z-index: 2;
|
||||
perspective: 300px;
|
||||
perspective-origin: top left;
|
||||
}
|
||||
|
||||
#front {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #00FF00;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
#back {
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #FF0000;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="perspective">
|
||||
<div id="front"></div>
|
||||
</div>
|
||||
<div id="back"></div>
|
||||
34
layout/reftests/transform-3d/perspective-zindex.html
Normal file
34
layout/reftests/transform-3d/perspective-zindex.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<meta charset="utf-8">
|
||||
<title>z-index should work correctly for elements with perspective</title>
|
||||
|
||||
<style>
|
||||
|
||||
#perspective {
|
||||
perspective: 300px;
|
||||
perspective-origin: top left;
|
||||
}
|
||||
|
||||
#front {
|
||||
z-index: 2;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #00FF00;
|
||||
transform: translateX(0px);
|
||||
}
|
||||
|
||||
#back {
|
||||
z-index: 1;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: #FF0000;
|
||||
transform: translateY(-100px);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="perspective">
|
||||
<div id="front"></div>
|
||||
<div id="back"></div>
|
||||
</div>
|
||||
9
layout/reftests/transform-3d/preserve3d-1-ref.html
Normal file
9
layout/reftests/transform-3d/preserve3d-1-ref.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(180deg); width: 100px; height: 100px; background-color: white;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
15
layout/reftests/transform-3d/preserve3d-1a.html
Normal file
15
layout/reftests/transform-3d/preserve3d-1a.html
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;">
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;">
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px;">
|
||||
<div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px; background-color: white;">
|
||||
Test Text
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
11
layout/reftests/transform-3d/preserve3d-1b.html
Normal file
11
layout/reftests/transform-3d/preserve3d-1b.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(90deg);">
|
||||
<div style="-moz-transform: rotatex(90deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
27
layout/reftests/transform-3d/preserve3d-2-ref.html
Normal file
27
layout/reftests/transform-3d/preserve3d-2-ref.html
Normal file
|
|
@ -0,0 +1,27 @@
|
|||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#grandparent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
#parent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
-moz-transform: translatex(0px);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
layout/reftests/transform-3d/preserve3d-2a.html
Normal file
28
layout/reftests/transform-3d/preserve3d-2a.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#grandparent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
margin-left: 200px
|
||||
}
|
||||
#parent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
-moz-transform: translatex(-200px);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
layout/reftests/transform-3d/preserve3d-2b.html
Normal file
28
layout/reftests/transform-3d/preserve3d-2b.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#grandparent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
#parent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
margin-left: 200px
|
||||
}
|
||||
|
||||
#child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
-moz-transform: translatex(-200px);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
28
layout/reftests/transform-3d/preserve3d-2c.html
Normal file
28
layout/reftests/transform-3d/preserve3d-2c.html
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#grandparent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
#parent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
-moz-transform: translatex(-200px);
|
||||
margin-left: 200px
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
30
layout/reftests/transform-3d/preserve3d-2d.html
Normal file
30
layout/reftests/transform-3d/preserve3d-2d.html
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#grandparent {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
-moz-transform-style: preserve-3d;
|
||||
-moz-transform: translatex(200%);
|
||||
}
|
||||
#parent {
|
||||
-moz-transform-style: preserve-3d;
|
||||
}
|
||||
|
||||
#child {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: red;
|
||||
-moz-transform: translatex(-200px);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="grandparent">
|
||||
<div id="parent">
|
||||
<div id="child"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
8
layout/reftests/transform-3d/preserve3d-3-ref.html
Normal file
8
layout/reftests/transform-3d/preserve3d-3-ref.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px; background:red;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
8
layout/reftests/transform-3d/preserve3d-3a.html
Normal file
8
layout/reftests/transform-3d/preserve3d-3a.html
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 100px; height: 100px; background:red;">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/preserve3d-4a.html
Normal file
9
layout/reftests/transform-3d/preserve3d-4a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(90deg); -moz-transform-style: preserve-3d; opacity: 0.9999;">
|
||||
<div style="-moz-transform: rotatex(90deg); width: 100px; height: 100px; background-color: #00FF00"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
3
layout/reftests/transform-3d/preserve3d-5-ref.html
Normal file
3
layout/reftests/transform-3d/preserve3d-5-ref.html
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<!doctype html>
|
||||
<div style="width: 100px; height: 100px; background: lime;
|
||||
border-style: solid; border-width: 0 2px 2px 0"></div>
|
||||
10
layout/reftests/transform-3d/preserve3d-5a.html
Normal file
10
layout/reftests/transform-3d/preserve3d-5a.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<!doctype html>
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;">
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;">
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-style: preserve-3d; width: 110px;">
|
||||
<div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;
|
||||
background: lime; border-style: solid; border-width: 2px 2px 0 0">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
12
layout/reftests/transform-3d/preserve3d-6-ref.html
Normal file
12
layout/reftests/transform-3d/preserve3d-6-ref.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="perspective:100px;">
|
||||
<div style="transform-style: preserve-3d">
|
||||
<div style="width:100px; height:100px; background-color:red; transform: rotatex(1deg);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
12
layout/reftests/transform-3d/preserve3d-6a.html
Normal file
12
layout/reftests/transform-3d/preserve3d-6a.html
Normal file
|
|
@ -0,0 +1,12 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="perspective:100px; transform-style: preserve-3d;">
|
||||
<div style="transform-style: preserve-3d">
|
||||
<div style="width:100px; height:100px; background-color:red; transform: rotatex(1deg);">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
11
layout/reftests/transform-3d/preserve3d-7-ref.html
Normal file
11
layout/reftests/transform-3d/preserve3d-7-ref.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="opacity:0.5">
|
||||
<div style="transform: rotatey(90deg); transform-style: preserve-3d; width:100px;">
|
||||
<div style="transform: rotatey(90deg); width: 100px; height: 100px; background-color: #00FF00"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/preserve3d-7a.html
Normal file
9
layout/reftests/transform-3d/preserve3d-7a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="transform: rotatey(90deg); transform-style: preserve-3d; width:100px; opacity:0.5">
|
||||
<div style="transform: rotatey(90deg); width: 100px; height: 100px; background-color: #00FF00"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
layout/reftests/transform-3d/preserve3d-clipped.html
Normal file
10
layout/reftests/transform-3d/preserve3d-clipped.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<html>
|
||||
<body>
|
||||
<div style="-moz-transform-style: preserve-3d; -moz-transform:rotatex(90deg); overflow:hidden;">
|
||||
<div style="-moz-transform:rotatex(90deg)">
|
||||
x
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
44
layout/reftests/transform-3d/preserves3d-nested-ref.html
Normal file
44
layout/reftests/transform-3d/preserves3d-nested-ref.html
Normal file
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>preserve-3d consequence nested context</title>
|
||||
<style>
|
||||
.rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
#outeri {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
|
||||
#rect1 {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#rect2 {
|
||||
transform: translate(50px, 50px);
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
#inneri {
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
|
||||
#rect3 {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="outeri">
|
||||
<div id="rect1" class="rect"></div>
|
||||
<div id="rect2" class="rect"></div>
|
||||
<div id="inner">
|
||||
<div id="inneri">
|
||||
<div id="rect3" class="rect"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
46
layout/reftests/transform-3d/preserves3d-nested.html
Normal file
46
layout/reftests/transform-3d/preserves3d-nested.html
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE HTML>
|
||||
<title>preserve-3d consequence nested context</title>
|
||||
<style>
|
||||
.rect {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
#outeri {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
|
||||
#inner {
|
||||
transform: rotateX(0deg);
|
||||
}
|
||||
|
||||
#inneri {
|
||||
transform-style: preserve-3d;
|
||||
transform: rotateX(45deg);
|
||||
}
|
||||
|
||||
#rect2 {
|
||||
transform: translate(50px, 50px);
|
||||
background-color: pink;
|
||||
}
|
||||
|
||||
#rect3 {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
</style>
|
||||
<body>
|
||||
<div id="outer">
|
||||
<div id="outeri">
|
||||
<div id="rect1" class="rect"></div>
|
||||
<div id="rect2" class="rect"></div>
|
||||
<div id="inner">
|
||||
<div id="inneri">
|
||||
<div id="rect3" class="rect"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
93
layout/reftests/transform-3d/reftest-stylo.list
Normal file
93
layout/reftests/transform-3d/reftest-stylo.list
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
|
||||
== scalez-1a.html scalez-1a.html
|
||||
== rotatey-1a.html rotatey-1a.html
|
||||
== rotatex-1a.html rotatex-1a.html
|
||||
# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg)
|
||||
== scalezrotatex-1.html scalezrotatex-1.html
|
||||
# Check that the perspectve() transform function results in some visual changes
|
||||
== rotatex-perspective-1a.html rotatex-perspective-1a.html
|
||||
# Check that -moz-perspective results in visual changes to child transformed elements
|
||||
== rotatex-perspective-1b.html rotatex-perspective-1b.html
|
||||
# -moz-perspective should only apply to child elements
|
||||
# == rotatex-perspective-1c.html rotatex-perspective-1c.html
|
||||
== rotatex-perspective-3a.html rotatex-perspective-3a.html
|
||||
== scalez-1a.html scalez-1a.html
|
||||
fails fuzzy-if(gtkWidget||winWidget,8,376) fuzzy-if(Android,8,441) fuzzy-if(cocoaWidget,17,4) fuzzy-if(skiaContent,16,250) == preserve3d-1a.html preserve3d-1a.html
|
||||
== preserve3d-1b.html preserve3d-1b.html
|
||||
== preserve3d-clipped.html preserve3d-clipped.html
|
||||
== preserve3d-2a.html preserve3d-2a.html
|
||||
== preserve3d-2b.html preserve3d-2b.html
|
||||
== preserve3d-2c.html preserve3d-2c.html
|
||||
== preserve3d-2d.html preserve3d-2d.html
|
||||
== preserve3d-3a.html preserve3d-3a.html
|
||||
== preserve3d-4a.html preserve3d-4a.html
|
||||
fails fuzzy-if(gtkWidget,4,200) fuzzy-if(Android,4,300) fuzzy-if(winWidget&&!layersGPUAccelerated,2,100) fuzzy-if(skiaContent,16,100) == preserve3d-5a.html preserve3d-5a.html
|
||||
== preserve3d-6a.html preserve3d-6a.html
|
||||
== scale3d-z.html scale3d-z.html
|
||||
fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all.html scale3d-all.html
|
||||
# subpixel AA
|
||||
fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all-separate.html scale3d-all-separate.html
|
||||
# subpixel AA
|
||||
== scale3d-xz.html scale3d-xz.html
|
||||
== translatez-1a.html translatez-1a.html
|
||||
== translatez-1b.html translatez-1b.html
|
||||
== translate3d-1a.html translate3d-1a.html
|
||||
fails fuzzy-if(skiaContent,1,4) == matrix3d-1a.html matrix3d-1a.html
|
||||
== matrix3d-2a.html matrix3d-2a.html
|
||||
== rotate3d-1a.html rotate3d-1a.html
|
||||
== rotate3d-2a.html rotate3d-2a.html
|
||||
== backface-visibility-1a.html backface-visibility-1a.html
|
||||
== backface-visibility-1b.html backface-visibility-1b.html
|
||||
== backface-visibility-1c.html backface-visibility-1c.html
|
||||
fuzzy-if(winWidget&&!layersGPUAccelerated,1,251) == backface-visibility-2.html backface-visibility-2.html
|
||||
== backface-visibility-3.html backface-visibility-3.html
|
||||
== perspective-clipping-1.html perspective-clipping-1.html
|
||||
== perspective-origin-1a.html perspective-origin-1a.html
|
||||
== perspective-origin-1b.html perspective-origin-1b.html
|
||||
random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2a.html
|
||||
# subpixel AA, bug 732568
|
||||
fuzzy-if(winWidget&&!layersGPUAccelerated,1,61) == perspective-origin-3a.html perspective-origin-3a.html
|
||||
== perspective-origin-4a.html perspective-origin-4a.html
|
||||
== perspective-zindex.html perspective-zindex.html
|
||||
== perspective-zindex-2.html perspective-zindex-2.html
|
||||
== sorting-1a.html sorting-1a.html
|
||||
# Parallel planes, different z depth
|
||||
== sorting-2a.html sorting-2a.html
|
||||
# Parallel planes, same z depth (shouldn't be sorted!)
|
||||
== sorting-2b.html sorting-2b.html
|
||||
== sorting-3a.html sorting-3a.html
|
||||
# Different, but equivalent (for the given transform) transform origins
|
||||
== rotatex-transformorigin-1a.html rotatex-transformorigin-1a.html
|
||||
fails fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),1,86) == overflow-hidden-1a.html overflow-hidden-1a.html
|
||||
== transform-style-flat-1a.html transform-style-flat-1a.html
|
||||
== willchange-containing-block.html?willchange willchange-containing-block.html?willchange
|
||||
== willchange-containing-block.html?willchange willchange-containing-block.html?willchange
|
||||
fuzzy-if(winWidget&&!layersGPUAccelerated,1,606) == scroll-perspective-1.html scroll-perspective-1.html
|
||||
# Bugs
|
||||
fails-if(!layersGPUAccelerated) == 1035611-1.html 1035611-1.html
|
||||
# Bug 1072898 for !layersGPUAccelerated failures
|
||||
== 1157984-1.html 1157984-1.html
|
||||
# Bug 1157984
|
||||
== animate-cube-radians.html animate-cube-radians.html
|
||||
# subpixel AA
|
||||
fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,16,6) fuzzy-if(Mulet,16,9) == animate-cube-radians-zoom.html animate-cube-radians-zoom.html
|
||||
== animate-cube-radians-ref.html animate-cube-radians-ref.html
|
||||
== animate-cube-degrees.html animate-cube-degrees.html
|
||||
# subpixel AA
|
||||
== animate-cube-degrees-zoom.html animate-cube-degrees-zoom.html
|
||||
== animate-cube-degrees-ref.html animate-cube-degrees-ref.html
|
||||
fails fuzzy-if(B2G||Android||OSX==1010,143,100) fuzzy-if(winWidget||OSX<1010,141,100) fuzzy-if(gtkWidget,128,100) == preserves3d-nested.html preserves3d-nested.html
|
||||
skip == animate-preserve3d-parent.html animate-preserve3d-parent.html
|
||||
# intermittently fuzzy on Mac
|
||||
skip == animate-preserve3d-child.html animate-preserve3d-child.html
|
||||
# intermittently fuzzy on Mac
|
||||
skip == animate-backface-hidden.html animate-backface-hidden.html
|
||||
== 1245450-1.html 1245450-1.html
|
||||
== opacity-preserve3d-1.html opacity-preserve3d-1.html
|
||||
== opacity-preserve3d-2.html opacity-preserve3d-2.html
|
||||
== opacity-preserve3d-3.html opacity-preserve3d-3.html
|
||||
== opacity-preserve3d-4.html opacity-preserve3d-4.html
|
||||
== snap-perspective-1.html snap-perspective-1.html
|
||||
== mask-layer-1.html mask-layer-1.html
|
||||
== mask-layer-2.html mask-layer-2.html
|
||||
== mask-layer-3.html mask-layer-3.html
|
||||
84
layout/reftests/transform-3d/reftest.list
Normal file
84
layout/reftests/transform-3d/reftest.list
Normal file
|
|
@ -0,0 +1,84 @@
|
|||
== scalez-1a.html scalez-1-ref.html
|
||||
== rotatey-1a.html rotatey-1-ref.html
|
||||
== rotatex-1a.html rotatex-1-ref.html
|
||||
# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg)
|
||||
== scalezrotatex-1.html scalezrotatex-1-ref.html
|
||||
# Check that the perspectve() transform function results in some visual changes
|
||||
!= rotatex-perspective-1a.html rotatex-1-ref.html
|
||||
# Check that -moz-perspective results in visual changes to child transformed elements
|
||||
!= rotatex-perspective-1b.html rotatex-1-ref.html
|
||||
# -moz-perspective should only apply to child elements
|
||||
== rotatex-perspective-1c.html rotatex-1-ref.html
|
||||
== rotatex-perspective-3a.html rotatex-perspective-3-ref.html
|
||||
== scalez-1a.html scalez-1-ref.html
|
||||
fuzzy-if(gtkWidget||winWidget,8,376) fuzzy-if(Android,8,441) fuzzy-if(cocoaWidget,17,4) fuzzy-if(skiaContent,16,286) == preserve3d-1a.html preserve3d-1-ref.html
|
||||
== preserve3d-1b.html about:blank
|
||||
== preserve3d-clipped.html about:blank
|
||||
== preserve3d-2a.html preserve3d-2-ref.html
|
||||
== preserve3d-2b.html preserve3d-2-ref.html
|
||||
== preserve3d-2c.html preserve3d-2-ref.html
|
||||
== preserve3d-2d.html preserve3d-2-ref.html
|
||||
== preserve3d-3a.html preserve3d-3-ref.html
|
||||
== preserve3d-4a.html about:blank
|
||||
fuzzy-if(gtkWidget,4,200) fuzzy-if(Android,4,300) fuzzy-if(winWidget&&!layersGPUAccelerated,2,100) fuzzy-if(skiaContent,16,100) == preserve3d-5a.html preserve3d-5-ref.html
|
||||
== preserve3d-6a.html preserve3d-6-ref.html
|
||||
== scale3d-z.html scalez-1-ref.html
|
||||
fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all.html scale3d-1-ref.html # subpixel AA
|
||||
fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all-separate.html scale3d-1-ref.html # subpixel AA
|
||||
== scale3d-xz.html scale3d-1-ref.html
|
||||
== translatez-1a.html translatez-1-ref.html
|
||||
!= translatez-1b.html translatez-1-ref.html
|
||||
== translate3d-1a.html translate3d-1-ref.html
|
||||
fuzzy-if(skiaContent,1,4) == matrix3d-1a.html matrix3d-1-ref.html
|
||||
== matrix3d-2a.html matrix3d-2-ref.html
|
||||
== rotate3d-1a.html rotatex-1-ref.html
|
||||
== rotate3d-2a.html rotatey-1-ref.html
|
||||
!= backface-visibility-1a.html about:blank
|
||||
== backface-visibility-1b.html about:blank
|
||||
== backface-visibility-1c.html about:blank
|
||||
fuzzy-if(winWidget&&!layersGPUAccelerated,1,251) == backface-visibility-2.html backface-visibility-2-ref.html
|
||||
== backface-visibility-3.html backface-visibility-3-ref.html
|
||||
== perspective-clipping-1.html perspective-clipping-1-ref.html
|
||||
!= perspective-origin-1a.html rotatex-perspective-1a.html
|
||||
== perspective-origin-1b.html perspective-origin-1a.html
|
||||
fuzzy(3,99) random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2-ref.html # subpixel AA, bug 732568
|
||||
fuzzy-if(winWidget&&!layersGPUAccelerated,1,61) == perspective-origin-3a.html perspective-origin-3-ref.html
|
||||
== perspective-origin-4a.html perspective-origin-4-ref.html
|
||||
== perspective-zindex.html green-rect.html
|
||||
== perspective-zindex-2.html green-rect.html
|
||||
!= sorting-1a.html sorting-1-ref.html
|
||||
# Parallel planes, different z depth
|
||||
== sorting-2a.html sorting-2-ref.html
|
||||
# Parallel planes, same z depth (shouldn't be sorted!)
|
||||
== sorting-2b.html sorting-2-ref.html
|
||||
== sorting-3a.html green-rect.html
|
||||
# Different, but equivalent (for the given transform) transform origins
|
||||
== rotatex-transformorigin-1a.html rotatex-transformorigin-1-ref.html
|
||||
fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),1,86) == overflow-hidden-1a.html overflow-hidden-1-ref.html
|
||||
== transform-style-flat-1a.html transform-style-flat-1-ref.html
|
||||
== willchange-containing-block.html?willchange willchange-containing-block.html?ref
|
||||
!= willchange-containing-block.html?willchange willchange-containing-block.html?noblock
|
||||
fuzzy-if(winWidget&&!layersGPUAccelerated,1,606) == scroll-perspective-1.html scroll-perspective-1-ref.html
|
||||
# Bugs
|
||||
fails-if(!layersGPUAccelerated) == 1035611-1.html 1035611-1-ref.html # Bug 1072898 for !layersGPUAccelerated failures
|
||||
!= 1157984-1.html about:blank # Bug 1157984
|
||||
fuzzy(3,99) == animate-cube-radians.html animate-cube-radians-ref.html # subpixel AA
|
||||
fuzzy(3,99) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,16,6) == animate-cube-radians-zoom.html animate-cube-radians-zoom-ref.html
|
||||
!= animate-cube-radians-ref.html animate-cube-radians-zoom-ref.html
|
||||
fuzzy(3,99) == animate-cube-degrees.html animate-cube-degrees-ref.html # subpixel AA
|
||||
== animate-cube-degrees-zoom.html animate-cube-degrees-zoom-ref.html
|
||||
!= animate-cube-degrees-ref.html animate-cube-degrees-zoom-ref.html
|
||||
fuzzy-if(gtkWidget,128,100) fuzzy-if(Android||OSX==1010||(gtkWidget&&layersGPUAccelerated),143,100) fuzzy-if(winWidget||OSX<1010,141,100) == preserves3d-nested.html preserves3d-nested-ref.html
|
||||
fuzzy-if(cocoaWidget,128,9) == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac
|
||||
fuzzy-if(cocoaWidget,128,9) == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac
|
||||
== animate-backface-hidden.html about:blank
|
||||
== 1245450-1.html green-rect.html
|
||||
fuzzy(1,2000) == opacity-preserve3d-1.html opacity-preserve3d-1-ref.html
|
||||
fuzzy(1,15000) == opacity-preserve3d-2.html opacity-preserve3d-2-ref.html
|
||||
fuzzy(1,10000) == opacity-preserve3d-3.html opacity-preserve3d-3-ref.html
|
||||
fuzzy(1,10000) == opacity-preserve3d-4.html opacity-preserve3d-4-ref.html
|
||||
== opacity-preserve3d-5.html opacity-preserve3d-5-ref.html
|
||||
== snap-perspective-1.html snap-perspective-1-ref.html
|
||||
== mask-layer-1.html mask-layer-ref.html
|
||||
== mask-layer-2.html mask-layer-ref.html
|
||||
== mask-layer-3.html mask-layer-ref.html
|
||||
9
layout/reftests/transform-3d/rotate3d-1a.html
Normal file
9
layout/reftests/transform-3d/rotate3d-1a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotate3d(1, 0, 0, 45deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/rotate3d-2a.html
Normal file
9
layout/reftests/transform-3d/rotate3d-2a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotate3d(0, 1, 0, 45deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/rotatex-1-ref.html
Normal file
9
layout/reftests/transform-3d/rotatex-1-ref.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/rotatex-1a.html
Normal file
9
layout/reftests/transform-3d/rotatex-1a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(45deg) rotatey(360deg) rotatex(360deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/rotatex-perspective-1a.html
Normal file
9
layout/reftests/transform-3d/rotatex-perspective-1a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
11
layout/reftests/transform-3d/rotatex-perspective-1b.html
Normal file
11
layout/reftests/transform-3d/rotatex-perspective-1b.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-perspective: 1000px;">
|
||||
<div style="-moz-transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/rotatex-perspective-1c.html
Normal file
9
layout/reftests/transform-3d/rotatex-perspective-1c.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-perspective: 1000px; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
33
layout/reftests/transform-3d/rotatex-perspective-3-ref.html
Normal file
33
layout/reftests/transform-3d/rotatex-perspective-3-ref.html
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
margin: 50px 100px;
|
||||
border: 2px solid blue;
|
||||
|
||||
-moz-perspective: 500px;
|
||||
}
|
||||
|
||||
#parent {
|
||||
margin: 10px;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
background-color: #844BCA;
|
||||
|
||||
-moz-transform: rotateY(40deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<div id="parent">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
34
layout/reftests/transform-3d/rotatex-perspective-3a.html
Normal file
34
layout/reftests/transform-3d/rotatex-perspective-3a.html
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
<html>
|
||||
<head>
|
||||
<style type="text/css">
|
||||
#container {
|
||||
position: relative;
|
||||
height: 300px;
|
||||
width: 300px;
|
||||
margin: 50px 100px;
|
||||
border: 2px solid blue;
|
||||
|
||||
-moz-perspective: 500px;
|
||||
opacity: 0.9999;
|
||||
}
|
||||
|
||||
#parent {
|
||||
margin: 10px;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
background-color: #844BCA;
|
||||
|
||||
-moz-transform: rotateY(40deg);
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div id="container">
|
||||
<div id="parent">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-perspective: 1000px;">
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top right; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
11
layout/reftests/transform-3d/rotatex-transformorigin-1a.html
Normal file
11
layout/reftests/transform-3d/rotatex-transformorigin-1a.html
Normal file
|
|
@ -0,0 +1,11 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-perspective: 1000px;">
|
||||
<div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top left; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/rotatey-1-ref.html
Normal file
9
layout/reftests/transform-3d/rotatey-1-ref.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatey(45deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/rotatey-1a.html
Normal file
9
layout/reftests/transform-3d/rotatey-1a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatey(45deg) rotatey(360deg); width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/scale3d-1-ref.html
Normal file
9
layout/reftests/transform-3d/scale3d-1-ref.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: scaleX(2) scaleY(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/scale3d-all-separate.html
Normal file
9
layout/reftests/transform-3d/scale3d-all-separate.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: scaleX(2) scaleY(2) scaleZ(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/scale3d-all.html
Normal file
9
layout/reftests/transform-3d/scale3d-all.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: scale3D(2,2,2); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/scale3d-xz.html
Normal file
9
layout/reftests/transform-3d/scale3d-xz.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(90deg) scale3D(2,1,2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
9
layout/reftests/transform-3d/scale3d-z.html
Normal file
9
layout/reftests/transform-3d/scale3d-z.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(90deg) scale3D(1,1,2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
10
layout/reftests/transform-3d/scalez-1-ref.html
Normal file
10
layout/reftests/transform-3d/scalez-1-ref.html
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: scaleY(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
9
layout/reftests/transform-3d/scalez-1a.html
Normal file
9
layout/reftests/transform-3d/scalez-1a.html
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
<html>
|
||||
<head>
|
||||
</head>
|
||||
<body>
|
||||
<div style="-moz-transform: rotatex(90deg) scaleZ(2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
|
||||
Test Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue