import FIREFOX_52_6_0esr_RELEASE from mozilla-esr52 hg repo

This commit is contained in:
Roy Tam 2018-01-19 03:59:58 +08:00
commit dcd9973243
150858 changed files with 23884658 additions and 0 deletions

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View file

@ -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>

View 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>

View 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>

View 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>

View file

@ -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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View file

@ -0,0 +1,8 @@
<html>
<head>
</head>
<body>
<div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px; background:red;">
</div>
</body>
</html>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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

View 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

View 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>

View 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>

View file

@ -0,0 +1,9 @@
<html>
<head>
</head>
<body>
<div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;">
Test Text
</div>
</body>
</html>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View file

@ -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>

View 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>

View file

@ -0,0 +1,9 @@
<html>
<head>
</head>
<body>
<div style="-moz-transform: rotatey(45deg); width: 100px; height: 100px;">
Test Text
</div>
</body>
</html>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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>

View 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