summaryrefslogtreecommitdiffstats
path: root/layout/reftests/transform-3d
diff options
context:
space:
mode:
Diffstat (limited to 'layout/reftests/transform-3d')
-rw-r--r--layout/reftests/transform-3d/1035611-1-ref.html29
-rw-r--r--layout/reftests/transform-3d/1035611-1.html38
-rw-r--r--layout/reftests/transform-3d/1157984-1.html32
-rw-r--r--layout/reftests/transform-3d/1245450-1.html36
-rw-r--r--layout/reftests/transform-3d/1271058-1-ref.html12
-rw-r--r--layout/reftests/transform-3d/1271058-1.html34
-rw-r--r--layout/reftests/transform-3d/1467277-1.html9
-rw-r--r--layout/reftests/transform-3d/1544995-1-ref.html25
-rw-r--r--layout/reftests/transform-3d/1544995-1.html31
-rw-r--r--layout/reftests/transform-3d/1637067-1-ref.html32
-rw-r--r--layout/reftests/transform-3d/1637067-1.html49
-rw-r--r--layout/reftests/transform-3d/animate-backface-hidden.html47
-rw-r--r--layout/reftests/transform-3d/animate-cube-degrees-ref.html46
-rw-r--r--layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html46
-rw-r--r--layout/reftests/transform-3d/animate-cube-degrees-zoom.html52
-rw-r--r--layout/reftests/transform-3d/animate-cube-degrees.html52
-rw-r--r--layout/reftests/transform-3d/animate-cube-radians-ref.html47
-rw-r--r--layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html47
-rw-r--r--layout/reftests/transform-3d/animate-cube-radians-zoom.html53
-rw-r--r--layout/reftests/transform-3d/animate-cube-radians.html53
-rw-r--r--layout/reftests/transform-3d/animate-preserve3d-child.html57
-rw-r--r--layout/reftests/transform-3d/animate-preserve3d-parent.html58
-rw-r--r--layout/reftests/transform-3d/animate-preserve3d-ref.html33
-rw-r--r--layout/reftests/transform-3d/backface-visibility-1a.html9
-rw-r--r--layout/reftests/transform-3d/backface-visibility-1b.html9
-rw-r--r--layout/reftests/transform-3d/backface-visibility-1c.html9
-rw-r--r--layout/reftests/transform-3d/backface-visibility-2-ref.html43
-rw-r--r--layout/reftests/transform-3d/backface-visibility-2.html45
-rw-r--r--layout/reftests/transform-3d/backface-visibility-3-ref.html21
-rw-r--r--layout/reftests/transform-3d/backface-visibility-3.html33
-rw-r--r--layout/reftests/transform-3d/component-alpha-1-ref.html27
-rw-r--r--layout/reftests/transform-3d/component-alpha-1.html30
-rw-r--r--layout/reftests/transform-3d/green-rect.html14
-rw-r--r--layout/reftests/transform-3d/intermediate-1-ref.html43
-rw-r--r--layout/reftests/transform-3d/intermediate-1.html50
-rw-r--r--layout/reftests/transform-3d/mask-layer-1.html29
-rw-r--r--layout/reftests/transform-3d/mask-layer-2.html37
-rw-r--r--layout/reftests/transform-3d/mask-layer-3.html36
-rw-r--r--layout/reftests/transform-3d/mask-layer-ref.html28
-rw-r--r--layout/reftests/transform-3d/matrix3d-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/matrix3d-1a.html9
-rw-r--r--layout/reftests/transform-3d/matrix3d-2-ref.html9
-rw-r--r--layout/reftests/transform-3d/matrix3d-2a.html9
-rw-r--r--layout/reftests/transform-3d/nested-transform-1-ref.html22
-rw-r--r--layout/reftests/transform-3d/nested-transform-1.html26
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-1-ref.html45
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-1.html45
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-2-ref.html28
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-2.html31
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-3-ref.html42
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-3.html42
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-4-ref.html38
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-4.html38
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-5-ref.html29
-rw-r--r--layout/reftests/transform-3d/opacity-preserve3d-5.html36
-rw-r--r--layout/reftests/transform-3d/overflow-hidden-1-ref.html27
-rw-r--r--layout/reftests/transform-3d/overflow-hidden-1a.html27
-rw-r--r--layout/reftests/transform-3d/perspective-clipping-1-ref.html13
-rw-r--r--layout/reftests/transform-3d/perspective-clipping-1.html32
-rw-r--r--layout/reftests/transform-3d/perspective-clipping-2-ref.html6
-rw-r--r--layout/reftests/transform-3d/perspective-clipping-2.html12
-rw-r--r--layout/reftests/transform-3d/perspective-origin-1a.html11
-rw-r--r--layout/reftests/transform-3d/perspective-origin-1b.html11
-rw-r--r--layout/reftests/transform-3d/perspective-origin-2-ref.html31
-rw-r--r--layout/reftests/transform-3d/perspective-origin-2a.html31
-rw-r--r--layout/reftests/transform-3d/perspective-origin-3-ref.html41
-rw-r--r--layout/reftests/transform-3d/perspective-origin-3a.html41
-rw-r--r--layout/reftests/transform-3d/perspective-origin-4-ref.html20
-rw-r--r--layout/reftests/transform-3d/perspective-origin-4a.html29
-rw-r--r--layout/reftests/transform-3d/perspective-overflow-1-ref.html28
-rw-r--r--layout/reftests/transform-3d/perspective-overflow-1.html36
-rw-r--r--layout/reftests/transform-3d/perspective-overflow-2-ref.html29
-rw-r--r--layout/reftests/transform-3d/perspective-overflow-2.html30
-rw-r--r--layout/reftests/transform-3d/perspective-zindex-2.html36
-rw-r--r--layout/reftests/transform-3d/perspective-zindex.html36
-rw-r--r--layout/reftests/transform-3d/preserve3d-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/preserve3d-1a.html15
-rw-r--r--layout/reftests/transform-3d/preserve3d-1b.html11
-rw-r--r--layout/reftests/transform-3d/preserve3d-2-ref.html27
-rw-r--r--layout/reftests/transform-3d/preserve3d-2a.html28
-rw-r--r--layout/reftests/transform-3d/preserve3d-2b.html28
-rw-r--r--layout/reftests/transform-3d/preserve3d-2c.html28
-rw-r--r--layout/reftests/transform-3d/preserve3d-2d.html30
-rw-r--r--layout/reftests/transform-3d/preserve3d-3-ref.html8
-rw-r--r--layout/reftests/transform-3d/preserve3d-3a.html8
-rw-r--r--layout/reftests/transform-3d/preserve3d-4a.html9
-rw-r--r--layout/reftests/transform-3d/preserve3d-5-ref.html3
-rw-r--r--layout/reftests/transform-3d/preserve3d-5a.html10
-rw-r--r--layout/reftests/transform-3d/preserve3d-6-ref.html12
-rw-r--r--layout/reftests/transform-3d/preserve3d-6a.html12
-rw-r--r--layout/reftests/transform-3d/preserve3d-7-ref.html11
-rw-r--r--layout/reftests/transform-3d/preserve3d-7a.html9
-rw-r--r--layout/reftests/transform-3d/preserve3d-8-ref.html11
-rw-r--r--layout/reftests/transform-3d/preserve3d-8.html17
-rw-r--r--layout/reftests/transform-3d/preserve3d-clipped.html10
-rw-r--r--layout/reftests/transform-3d/preserve3d-scale-ref.html28
-rw-r--r--layout/reftests/transform-3d/preserve3d-scale.html63
-rw-r--r--layout/reftests/transform-3d/preserve3d-table-ref.html7
-rw-r--r--layout/reftests/transform-3d/preserve3d-table.html7
-rw-r--r--layout/reftests/transform-3d/preserve3d-will-change-large-frame.html14
-rw-r--r--layout/reftests/transform-3d/preserve3d-will-change-ref.html7
-rw-r--r--layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html36
-rw-r--r--layout/reftests/transform-3d/preserves3d-nested-filter-1.html38
-rw-r--r--layout/reftests/transform-3d/preserves3d-nested-ref.html44
-rw-r--r--layout/reftests/transform-3d/preserves3d-nested.html46
-rw-r--r--layout/reftests/transform-3d/reftest.list102
-rw-r--r--layout/reftests/transform-3d/rotate3d-1a.html9
-rw-r--r--layout/reftests/transform-3d/rotate3d-2a.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-1a.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-1a.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-1b.html11
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-1c.html9
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-3-ref.html33
-rw-r--r--layout/reftests/transform-3d/rotatex-perspective-3a.html34
-rw-r--r--layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html11
-rw-r--r--layout/reftests/transform-3d/rotatex-transformorigin-1a.html11
-rw-r--r--layout/reftests/transform-3d/rotatey-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/rotatey-1a.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-all-separate.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-all.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-xz.html9
-rw-r--r--layout/reftests/transform-3d/scale3d-z.html9
-rw-r--r--layout/reftests/transform-3d/scalez-1-ref.html10
-rw-r--r--layout/reftests/transform-3d/scalez-1a.html9
-rw-r--r--layout/reftests/transform-3d/scalezrotatex-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/scalezrotatex-1.html9
-rw-r--r--layout/reftests/transform-3d/scroll-perspective-1-ref.html12
-rw-r--r--layout/reftests/transform-3d/scroll-perspective-1.html10
-rw-r--r--layout/reftests/transform-3d/snap-perspective-1-ref.html5
-rw-r--r--layout/reftests/transform-3d/snap-perspective-1.html12
-rw-r--r--layout/reftests/transform-3d/sorting-1-ref.html35
-rw-r--r--layout/reftests/transform-3d/sorting-1a.html35
-rw-r--r--layout/reftests/transform-3d/sorting-2-ref.html21
-rw-r--r--layout/reftests/transform-3d/sorting-2a.html29
-rw-r--r--layout/reftests/transform-3d/sorting-2b.html30
-rw-r--r--layout/reftests/transform-3d/sorting-3a.html25
-rw-r--r--layout/reftests/transform-3d/split-intersect1-ref.html41
-rw-r--r--layout/reftests/transform-3d/split-intersect1.html43
-rw-r--r--layout/reftests/transform-3d/split-intersect2-ref.html82
-rw-r--r--layout/reftests/transform-3d/split-intersect2.html50
-rw-r--r--layout/reftests/transform-3d/split-non-ortho1-ref.html88
-rw-r--r--layout/reftests/transform-3d/split-non-ortho1.html54
-rw-r--r--layout/reftests/transform-3d/transform-geometry-1-ref.html45
-rw-r--r--layout/reftests/transform-3d/transform-geometry-1.html45
-rw-r--r--layout/reftests/transform-3d/transform-style-flat-1-ref.html6
-rw-r--r--layout/reftests/transform-3d/transform-style-flat-1a.html8
-rw-r--r--layout/reftests/transform-3d/translate3d-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/translate3d-1a.html9
-rw-r--r--layout/reftests/transform-3d/translatez-1-ref.html9
-rw-r--r--layout/reftests/transform-3d/translatez-1a.html9
-rw-r--r--layout/reftests/transform-3d/translatez-1b.html9
-rw-r--r--layout/reftests/transform-3d/willchange-containing-block.html43
154 files changed, 4072 insertions, 0 deletions
diff --git a/layout/reftests/transform-3d/1035611-1-ref.html b/layout/reftests/transform-3d/1035611-1-ref.html
new file mode 100644
index 0000000000..4c79af3e43
--- /dev/null
+++ b/layout/reftests/transform-3d/1035611-1-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/1035611-1.html b/layout/reftests/transform-3d/1035611-1.html
new file mode 100644
index 0000000000..2d7e787077
--- /dev/null
+++ b/layout/reftests/transform-3d/1035611-1.html
@@ -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>
diff --git a/layout/reftests/transform-3d/1157984-1.html b/layout/reftests/transform-3d/1157984-1.html
new file mode 100644
index 0000000000..be0f6526aa
--- /dev/null
+++ b/layout/reftests/transform-3d/1157984-1.html
@@ -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>
diff --git a/layout/reftests/transform-3d/1245450-1.html b/layout/reftests/transform-3d/1245450-1.html
new file mode 100644
index 0000000000..59c7b67d8c
--- /dev/null
+++ b/layout/reftests/transform-3d/1245450-1.html
@@ -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>
diff --git a/layout/reftests/transform-3d/1271058-1-ref.html b/layout/reftests/transform-3d/1271058-1-ref.html
new file mode 100644
index 0000000000..fc56c22e0a
--- /dev/null
+++ b/layout/reftests/transform-3d/1271058-1-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/1271058-1.html b/layout/reftests/transform-3d/1271058-1.html
new file mode 100644
index 0000000000..845785d591
--- /dev/null
+++ b/layout/reftests/transform-3d/1271058-1.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/1467277-1.html b/layout/reftests/transform-3d/1467277-1.html
new file mode 100644
index 0000000000..ae6c4ccc33
--- /dev/null
+++ b/layout/reftests/transform-3d/1467277-1.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="transform: rotate3d(1e50, 0, 0, 45deg); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/1544995-1-ref.html b/layout/reftests/transform-3d/1544995-1-ref.html
new file mode 100644
index 0000000000..091725c02a
--- /dev/null
+++ b/layout/reftests/transform-3d/1544995-1-ref.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+ .scene {
+ transform-style: preserve-3d;
+ }
+ .hidden {
+ backface-visibility: hidden;
+ }
+ #inner {
+ width: 20px;
+ height: 20px;
+ box-shadow: rgb(255, 205, 31) 0px 0px 0px 3px;
+ }
+</style>
+</head>
+<body>
+<div class="scene">
+ <div class="hidden">
+ <div id="inner">
+ </div>
+ </div>
+</div
+</body>
diff --git a/layout/reftests/transform-3d/1544995-1.html b/layout/reftests/transform-3d/1544995-1.html
new file mode 100644
index 0000000000..260231deb0
--- /dev/null
+++ b/layout/reftests/transform-3d/1544995-1.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<style>
+ .scene {
+ transform-style: preserve-3d;
+ }
+ .hidden {
+ backface-visibility: hidden;
+ }
+ #inner {
+ width: 20px;
+ height: 20px;
+ }
+</style>
+<script type="text/javascript">
+ function doTest() {
+ document.getElementById("inner").style.boxShadow = "rgb(255, 205, 31) 0px 0px 0px 3px";
+ document.documentElement.removeAttribute('class');
+ }
+ window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</head>
+<body>
+<div class="scene">
+ <div class="hidden">
+ <div id="inner">
+ </div>
+ </div>
+</div
+</body>
diff --git a/layout/reftests/transform-3d/1637067-1-ref.html b/layout/reftests/transform-3d/1637067-1-ref.html
new file mode 100644
index 0000000000..e46b352f07
--- /dev/null
+++ b/layout/reftests/transform-3d/1637067-1-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+.text {
+ position: absolute;
+ top: 100px;
+ left: 45px;
+ height: 400px;
+ width: 400px;
+}
+
+.thing {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 512px;
+ height: 512px;
+ background: url('data:image/svg+xml;utf8,<svg width="512" height="200" viewBox="0 0 512 512" fill="black" xmlns="http://www.w3.org/2000/svg"><text x="0" y="400" font-size="100">some text</text></svg>');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+}
+
+</style>
+</head>
+<body>
+<div class='text'>
+<div class="thing"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/1637067-1.html b/layout/reftests/transform-3d/1637067-1.html
new file mode 100644
index 0000000000..0f2b125082
--- /dev/null
+++ b/layout/reftests/transform-3d/1637067-1.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+
+@keyframes rotate {
+ 100% {
+ transform: rotatey(1800deg);
+ }
+}
+
+@keyframes rotate2 {
+ 100% {
+ transform: rotatey(2800deg);
+ }
+}
+
+
+.text {
+ position: absolute;
+ top: 100px;
+ left: 100px;
+ height: 400px;
+ width: 400px;
+ transform-style: preserve-3d;
+ transform: rotatey(271deg);
+ /*animation: rotate 30s linear infinite reverse;*/
+}
+
+.thing {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 512px;
+ height: 512px;
+ background: url('data:image/svg+xml;utf8,<svg width="512" height="200" viewBox="0 0 512 512" fill="black" xmlns="http://www.w3.org/2000/svg"><text x="0" y="400" font-size="100">some text</text></svg>');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ transform: rotatey(89deg) translatez(117.04394px);
+}
+
+</style>
+</head>
+<body>
+<div class='text'>
+<div class="thing"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/animate-backface-hidden.html b/layout/reftests/transform-3d/animate-backface-hidden.html
new file mode 100644
index 0000000000..f52b912f66
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-backface-hidden.html
@@ -0,0 +1,47 @@
+<!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 paused;
+}
+
+</style>
+
+<div id="test">
+</div>
+
+<script>
+
+document.getElementById("test")
+ .addEventListener("animationstart", StartListener);
+
+function StartListener(event) {
+ var test = document.getElementById("test");
+ test.style.animationPlayState = 'running';
+ test.addEventListener("animationiteration", IterationListener);
+}
+
+function IterationListener(event) {
+ setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+ document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform-3d/animate-cube-degrees-ref.html b/layout/reftests/transform-3d/animate-cube-degrees-ref.html
new file mode 100644
index 0000000000..bbaa9d0b8b
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-degrees-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html b/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html
new file mode 100644
index 0000000000..aff04d5c9e
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/animate-cube-degrees-zoom.html b/layout/reftests/transform-3d/animate-cube-degrees-zoom.html
new file mode 100644
index 0000000000..26c989a540
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-degrees-zoom.html
@@ -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>
diff --git a/layout/reftests/transform-3d/animate-cube-degrees.html b/layout/reftests/transform-3d/animate-cube-degrees.html
new file mode 100644
index 0000000000..d2d80b5202
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-degrees.html
@@ -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>
diff --git a/layout/reftests/transform-3d/animate-cube-radians-ref.html b/layout/reftests/transform-3d/animate-cube-radians-ref.html
new file mode 100644
index 0000000000..fe15a3729e
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-radians-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html b/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html
new file mode 100644
index 0000000000..01eb930494
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/animate-cube-radians-zoom.html b/layout/reftests/transform-3d/animate-cube-radians-zoom.html
new file mode 100644
index 0000000000..b7075f3283
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-radians-zoom.html
@@ -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>
diff --git a/layout/reftests/transform-3d/animate-cube-radians.html b/layout/reftests/transform-3d/animate-cube-radians.html
new file mode 100644
index 0000000000..5a8f61ec3d
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-cube-radians.html
@@ -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>
diff --git a/layout/reftests/transform-3d/animate-preserve3d-child.html b/layout/reftests/transform-3d/animate-preserve3d-child.html
new file mode 100644
index 0000000000..5ac5f290cf
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-preserve3d-child.html
@@ -0,0 +1,57 @@
+<!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);
+
+function IterationListener(event) {
+ setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+ document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform-3d/animate-preserve3d-parent.html b/layout/reftests/transform-3d/animate-preserve3d-parent.html
new file mode 100644
index 0000000000..9aa8816d3f
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-preserve3d-parent.html
@@ -0,0 +1,58 @@
+<!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 paused;
+}
+
+#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("animationstart", StartListener);
+
+function StartListener(event) {
+ var test = document.getElementById("parent");
+ test.style.animationPlayState = 'running';
+ test.addEventListener("animationiteration", IterationListener);
+}
+
+function IterationListener(event) {
+ setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+ document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform-3d/animate-preserve3d-ref.html b/layout/reftests/transform-3d/animate-preserve3d-ref.html
new file mode 100644
index 0000000000..60c560804b
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-preserve3d-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/backface-visibility-1a.html b/layout/reftests/transform-3d/backface-visibility-1a.html
new file mode 100644
index 0000000000..0c1d0a3a64
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/backface-visibility-1b.html b/layout/reftests/transform-3d/backface-visibility-1b.html
new file mode 100644
index 0000000000..8590a6f600
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1b.html
@@ -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>
diff --git a/layout/reftests/transform-3d/backface-visibility-1c.html b/layout/reftests/transform-3d/backface-visibility-1c.html
new file mode 100644
index 0000000000..6129b443e0
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1c.html
@@ -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>
diff --git a/layout/reftests/transform-3d/backface-visibility-2-ref.html b/layout/reftests/transform-3d/backface-visibility-2-ref.html
new file mode 100644
index 0000000000..bc5146dbef
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-2-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/backface-visibility-2.html b/layout/reftests/transform-3d/backface-visibility-2.html
new file mode 100644
index 0000000000..d55a8c9b41
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-2.html
@@ -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>
diff --git a/layout/reftests/transform-3d/backface-visibility-3-ref.html b/layout/reftests/transform-3d/backface-visibility-3-ref.html
new file mode 100644
index 0000000000..b75cb6def5
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-3-ref.html
@@ -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>
+
+
diff --git a/layout/reftests/transform-3d/backface-visibility-3.html b/layout/reftests/transform-3d/backface-visibility-3.html
new file mode 100644
index 0000000000..ec8d648de9
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-3.html
@@ -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>
+
+
diff --git a/layout/reftests/transform-3d/component-alpha-1-ref.html b/layout/reftests/transform-3d/component-alpha-1-ref.html
new file mode 100644
index 0000000000..3ec2905742
--- /dev/null
+++ b/layout/reftests/transform-3d/component-alpha-1-ref.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>red box</title>
+<style>
+
+#wrapper {
+}
+
+#shape {
+ background-color: red;
+
+ width: 200px;
+ height: 200px;
+}
+</style>
+
+</head>
+<body>
+<div id="wrapper">
+ <div id="shape">foo</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/component-alpha-1.html b/layout/reftests/transform-3d/component-alpha-1.html
new file mode 100644
index 0000000000..3726a4fbca
--- /dev/null
+++ b/layout/reftests/transform-3d/component-alpha-1.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>red box</title>
+<style>
+
+#wrapper {
+ perspective: 0px;
+}
+
+#shape {
+ background-color: red;
+
+ width: 200px;
+ height: 200px;
+
+ transform: rotateX(0deg);
+}
+</style>
+
+</head>
+<body>
+<div id="wrapper">
+ <div id="shape">foo</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/green-rect.html b/layout/reftests/transform-3d/green-rect.html
new file mode 100644
index 0000000000..4e6d13e951
--- /dev/null
+++ b/layout/reftests/transform-3d/green-rect.html
@@ -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>
diff --git a/layout/reftests/transform-3d/intermediate-1-ref.html b/layout/reftests/transform-3d/intermediate-1-ref.html
new file mode 100644
index 0000000000..53f8045c87
--- /dev/null
+++ b/layout/reftests/transform-3d/intermediate-1-ref.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="UTF-8">
+<style type="text/css">
+
+div {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+}
+
+.opacity {
+ opacity: 0.99;
+}
+
+.green {
+ background-color: green;
+}
+
+.red {
+ width: 300px;
+ height: 100px;
+ background-color: red;
+}
+
+.translate {
+ transform: translateX(100px);
+}
+
+</style>
+</head>
+
+<body>
+<div class="red"></div>
+<div class="green">
+ <div class="translate opacity green">
+ <div class="translate green"></div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/intermediate-1.html b/layout/reftests/transform-3d/intermediate-1.html
new file mode 100644
index 0000000000..cfc822f4b2
--- /dev/null
+++ b/layout/reftests/transform-3d/intermediate-1.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta charset="UTF-8">
+<style type="text/css">
+
+div {
+ position: absolute;
+ width: 100px;
+ height: 100px;
+}
+
+.opacity {
+ opacity: 0.99;
+}
+
+.green {
+ transform-style: preserve-3d;
+ background-color: green;
+}
+
+.flat {
+ transform: translateZ(0px);
+}
+
+.red {
+ width: 300px;
+ height: 100px;
+ background-color: red;
+}
+
+.translate {
+ transform: translateX(100px);
+}
+
+</style>
+</head>
+
+<body>
+<div class="red"></div>
+<div class="green">
+ <div class="flat">
+ <div class="translate opacity green">
+ <div class="translate green"> </div>
+ </div>
+ </div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/mask-layer-1.html b/layout/reftests/transform-3d/mask-layer-1.html
new file mode 100644
index 0000000000..834ed44633
--- /dev/null
+++ b/layout/reftests/transform-3d/mask-layer-1.html
@@ -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>
diff --git a/layout/reftests/transform-3d/mask-layer-2.html b/layout/reftests/transform-3d/mask-layer-2.html
new file mode 100644
index 0000000000..23315e2249
--- /dev/null
+++ b/layout/reftests/transform-3d/mask-layer-2.html
@@ -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>
diff --git a/layout/reftests/transform-3d/mask-layer-3.html b/layout/reftests/transform-3d/mask-layer-3.html
new file mode 100644
index 0000000000..58a04a45ab
--- /dev/null
+++ b/layout/reftests/transform-3d/mask-layer-3.html
@@ -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>
diff --git a/layout/reftests/transform-3d/mask-layer-ref.html b/layout/reftests/transform-3d/mask-layer-ref.html
new file mode 100644
index 0000000000..bc4f963e63
--- /dev/null
+++ b/layout/reftests/transform-3d/mask-layer-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/matrix3d-1-ref.html b/layout/reftests/transform-3d/matrix3d-1-ref.html
new file mode 100644
index 0000000000..ef27cb984b
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-1-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/matrix3d-1a.html b/layout/reftests/transform-3d/matrix3d-1a.html
new file mode 100644
index 0000000000..38b98b2740
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/matrix3d-2-ref.html b/layout/reftests/transform-3d/matrix3d-2-ref.html
new file mode 100644
index 0000000000..ac665fb66d
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-2-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/matrix3d-2a.html b/layout/reftests/transform-3d/matrix3d-2a.html
new file mode 100644
index 0000000000..222dd6a82a
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-2a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/nested-transform-1-ref.html b/layout/reftests/transform-3d/nested-transform-1-ref.html
new file mode 100644
index 0000000000..294ef4bd8b
--- /dev/null
+++ b/layout/reftests/transform-3d/nested-transform-1-ref.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title></title>
+
+<style type="text/css">
+div {
+ position: absolute;
+ margin: 0 0;
+}
+</style>
+</head>
+
+<body>
+<div style="left: 58px;">
+ <div style="width: 100px; height: 100px; background-color: red;"></div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/nested-transform-1.html b/layout/reftests/transform-3d/nested-transform-1.html
new file mode 100644
index 0000000000..f0264a4e00
--- /dev/null
+++ b/layout/reftests/transform-3d/nested-transform-1.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title></title>
+
+<style type="text/css">
+div {
+ position: absolute;
+ margin: 0 0;
+}
+</style>
+</head>
+
+<body>
+<div style="transform-style: preserve-3d;">
+ <div style="left: 50px; transform-style: flat;">
+ <div style="transform: rotateX(0.1deg); transform-style: flat;">
+ <div style="transform: rotateX(0.1deg); width: 100px; height: 100px; background-color: red;"></div>
+ </div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
new file mode 100644
index 0000000000..8a42fa3c98
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-1.html b/layout/reftests/transform-3d/opacity-preserve3d-1.html
new file mode 100644
index 0000000000..b73be49238
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-1.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html
new file mode 100644
index 0000000000..80336b5cf5
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-2-ref.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-2.html b/layout/reftests/transform-3d/opacity-preserve3d-2.html
new file mode 100644
index 0000000000..a04b998291
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-2.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html
new file mode 100644
index 0000000000..ffacd8277b
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-3-ref.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-3.html b/layout/reftests/transform-3d/opacity-preserve3d-3.html
new file mode 100644
index 0000000000..f7bbf2da88
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-3.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
new file mode 100644
index 0000000000..9fe799b61a
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-4.html b/layout/reftests/transform-3d/opacity-preserve3d-4.html
new file mode 100644
index 0000000000..9fd6728644
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-4.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html
new file mode 100644
index 0000000000..ab64e1e9da
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-5-ref.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/opacity-preserve3d-5.html b/layout/reftests/transform-3d/opacity-preserve3d-5.html
new file mode 100644
index 0000000000..37808dd581
--- /dev/null
+++ b/layout/reftests/transform-3d/opacity-preserve3d-5.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/overflow-hidden-1-ref.html b/layout/reftests/transform-3d/overflow-hidden-1-ref.html
new file mode 100644
index 0000000000..f78592e8db
--- /dev/null
+++ b/layout/reftests/transform-3d/overflow-hidden-1-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/overflow-hidden-1a.html b/layout/reftests/transform-3d/overflow-hidden-1a.html
new file mode 100644
index 0000000000..f78592e8db
--- /dev/null
+++ b/layout/reftests/transform-3d/overflow-hidden-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-clipping-1-ref.html b/layout/reftests/transform-3d/perspective-clipping-1-ref.html
new file mode 100644
index 0000000000..78411f4cbc
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-clipping-1-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-clipping-1.html b/layout/reftests/transform-3d/perspective-clipping-1.html
new file mode 100644
index 0000000000..90ffcf528a
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-clipping-1.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-clipping-2-ref.html b/layout/reftests/transform-3d/perspective-clipping-2-ref.html
new file mode 100644
index 0000000000..026b95bdd0
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-clipping-2-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+ <div style="width:100px; height:200px; background-color:green"></div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-clipping-2.html b/layout/reftests/transform-3d/perspective-clipping-2.html
new file mode 100644
index 0000000000..466b52c3a1
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-clipping-2.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+ <div style="width:100px; height:100px; background-color:green"></div>
+ <div style="width:100px; height:100px; overflow:hidden">
+ <div style="transform: translateY(-100px) perspective(1px); will-change:transform">
+ <div style="background-color:red; width:100px; height:100px"></div>
+ <div style="background-color:green; width:100px; height:100px"></div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-origin-1a.html b/layout/reftests/transform-3d/perspective-origin-1a.html
new file mode 100644
index 0000000000..c918e05baf
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-origin-1b.html b/layout/reftests/transform-3d/perspective-origin-1b.html
new file mode 100644
index 0000000000..ee934dec13
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-1b.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-origin-2-ref.html b/layout/reftests/transform-3d/perspective-origin-2-ref.html
new file mode 100644
index 0000000000..7c9e0d58ae
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-2-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-origin-2a.html b/layout/reftests/transform-3d/perspective-origin-2a.html
new file mode 100644
index 0000000000..ff80938167
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-2a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-origin-3-ref.html b/layout/reftests/transform-3d/perspective-origin-3-ref.html
new file mode 100644
index 0000000000..8271d2d3e4
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-3-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-origin-3a.html b/layout/reftests/transform-3d/perspective-origin-3a.html
new file mode 100644
index 0000000000..345db2c7f1
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-3a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-origin-4-ref.html b/layout/reftests/transform-3d/perspective-origin-4-ref.html
new file mode 100644
index 0000000000..087e572b79
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-4-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-origin-4a.html b/layout/reftests/transform-3d/perspective-origin-4a.html
new file mode 100644
index 0000000000..800756ebb1
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-4a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/perspective-overflow-1-ref.html b/layout/reftests/transform-3d/perspective-overflow-1-ref.html
new file mode 100644
index 0000000000..424a7993bb
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-overflow-1-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="UTF-8">
+<title>Testcase for bug 1483659</title>
+<style>
+
+#container {
+ position: absolute;
+ top: 400px;
+ left: 200px;
+ perspective: 100px;
+}
+
+#content {
+ width: 300px;
+ height: 300px;
+ background-color: green;
+ transform: rotateY(60deg);
+}
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="content"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-1.html b/layout/reftests/transform-3d/perspective-overflow-1.html
new file mode 100644
index 0000000000..178e3d2e28
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-overflow-1.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<!-- Use reftest-snapshot-all as a workaround for bug 1485705 -->
+<html class="reftest-wait reftest-snapshot-all">
+<head>
+<meta charset="UTF-8">
+<title>Testcase for bug 1483659</title>
+<style>
+#container {
+ position: absolute;
+ top: 400px;
+ left: 200px;
+ perspective: 100px;
+}
+
+#content {
+ width: 300px;
+ height: 300px;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+<div id="container">
+ <div id="content"></div>
+</div>
+<script>
+function doTest() {
+ var e = document.getElementById("content");
+ e.style.transform = "rotateY(60deg)";
+
+ document.documentElement.classList.remove("reftest-wait");
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-2-ref.html b/layout/reftests/transform-3d/perspective-overflow-2-ref.html
new file mode 100644
index 0000000000..45116d2195
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-overflow-2-ref.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Transform Overflow Bug</title>
+ <style>
+ .container {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ scrollbar-width: none;
+ perspective: 1px;
+ }
+
+ .inner {
+ background-color: red;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <p class="inner"></p>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-overflow-2.html b/layout/reftests/transform-3d/perspective-overflow-2.html
new file mode 100644
index 0000000000..f4eefe1572
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-overflow-2.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+ <meta charset="utf-8">
+ <title>Transform Overflow Bug</title>
+ <style>
+ .container {
+ width: 100px;
+ height: 100px;
+ overflow: scroll;
+ scrollbar-width: none;
+ perspective: 1px;
+ }
+
+ .inner {
+ will-change: transform;
+ background-color: red;
+ width: 200px;
+ height: 200px;
+ }
+ </style>
+</head>
+
+<body>
+ <div class="container">
+ <p class="inner"></p>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/perspective-zindex-2.html b/layout/reftests/transform-3d/perspective-zindex-2.html
new file mode 100644
index 0000000000..92b884ab26
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-zindex-2.html
@@ -0,0 +1,36 @@
+<!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;
+ position: relative;
+ 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);
+ position: relative;
+}
+
+</style>
+
+<div id="perspective">
+ <div id="front"></div>
+</div>
+<div id="back"></div>
diff --git a/layout/reftests/transform-3d/perspective-zindex.html b/layout/reftests/transform-3d/perspective-zindex.html
new file mode 100644
index 0000000000..877f50898a
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-zindex.html
@@ -0,0 +1,36 @@
+<!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);
+ position: relative;
+}
+
+#back {
+ z-index: 1;
+ width: 100px;
+ height: 100px;
+ background-color: #FF0000;
+ transform: translateY(-100px);
+ position: relative;
+}
+
+</style>
+
+<div id="perspective">
+ <div id="front"></div>
+ <div id="back"></div>
+</div>
diff --git a/layout/reftests/transform-3d/preserve3d-1-ref.html b/layout/reftests/transform-3d/preserve3d-1-ref.html
new file mode 100644
index 0000000000..9d7bf6434d
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-1a.html b/layout/reftests/transform-3d/preserve3d-1a.html
new file mode 100644
index 0000000000..005ec797a7
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-1b.html b/layout/reftests/transform-3d/preserve3d-1b.html
new file mode 100644
index 0000000000..ef535fcce6
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1b.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-2-ref.html b/layout/reftests/transform-3d/preserve3d-2-ref.html
new file mode 100644
index 0000000000..1a396bcc80
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-2a.html b/layout/reftests/transform-3d/preserve3d-2a.html
new file mode 100644
index 0000000000..3bdd7ab8d2
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-2b.html b/layout/reftests/transform-3d/preserve3d-2b.html
new file mode 100644
index 0000000000..36d1827dee
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2b.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-2c.html b/layout/reftests/transform-3d/preserve3d-2c.html
new file mode 100644
index 0000000000..cc8ff8a0a4
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2c.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-2d.html b/layout/reftests/transform-3d/preserve3d-2d.html
new file mode 100644
index 0000000000..6cfe1e3bde
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-2d.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-3-ref.html b/layout/reftests/transform-3d/preserve3d-3-ref.html
new file mode 100644
index 0000000000..2590d9df31
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px; background:red;">
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-3a.html b/layout/reftests/transform-3d/preserve3d-3a.html
new file mode 100644
index 0000000000..a28f814e9e
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-3a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-4a.html b/layout/reftests/transform-3d/preserve3d-4a.html
new file mode 100644
index 0000000000..0bf0cbe4c7
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-4a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-5-ref.html b/layout/reftests/transform-3d/preserve3d-5-ref.html
new file mode 100644
index 0000000000..2bdd5c539f
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-5-ref.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<div style="width: 100px; height: 100px; background: lime;
+border-style: solid; border-width: 0 2px 2px 0"></div>
diff --git a/layout/reftests/transform-3d/preserve3d-5a.html b/layout/reftests/transform-3d/preserve3d-5a.html
new file mode 100644
index 0000000000..03e9e7ed0d
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-5a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-6-ref.html b/layout/reftests/transform-3d/preserve3d-6-ref.html
new file mode 100644
index 0000000000..f24abbe730
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-6-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-6a.html b/layout/reftests/transform-3d/preserve3d-6a.html
new file mode 100644
index 0000000000..0b604ba5d5
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-6a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-7-ref.html b/layout/reftests/transform-3d/preserve3d-7-ref.html
new file mode 100644
index 0000000000..cb17ddba5a
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-7-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-7a.html b/layout/reftests/transform-3d/preserve3d-7a.html
new file mode 100644
index 0000000000..d962d4fd4f
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-7a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserve3d-8-ref.html b/layout/reftests/transform-3d/preserve3d-8-ref.html
new file mode 100644
index 0000000000..afddf05d4d
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-8-ref.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body style="width:100px">
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="js" viewBox="0 0 200 200" style="transform: rotateX(180deg)">
+ <g>
+ <rect width="100" height="100" style="fill:rgb(0,0,255)"></rect>
+ </g>
+ </svg>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-8.html b/layout/reftests/transform-3d/preserve3d-8.html
new file mode 100644
index 0000000000..76e9c10c33
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-8.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+ <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+ <div style="transform: rotatex(45deg); transform-style: preserve-3d; width: 100px;">
+ <svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="js" viewBox="0 0 200 200" style="transform: rotateX(45deg)">
+ <g>
+ <rect width="100" height="100" style="fill:rgb(0,0,255)"></rect>
+ </g>
+ </svg>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserve3d-clipped.html b/layout/reftests/transform-3d/preserve3d-clipped.html
new file mode 100644
index 0000000000..4647fd56d6
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-clipped.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/preserve3d-scale-ref.html b/layout/reftests/transform-3d/preserve3d-scale-ref.html
new file mode 100644
index 0000000000..243e88fdda
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-scale-ref.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<!-- This was just "drawn by hand" well after the original test landed to look
+ like the proper rendering of the test file without any transforms or
+ preserve3d. It's not identical, but a fuzzy match should be a good test
+ considering the original test just checked that it wasn't rendering blank
+-->
+<html>
+ <style>
+ div {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ </style>
+</head>
+<body>
+ <div>
+ <svg width="600px" height="600px">
+
+ <polygon fill="#DAD6CC" points="57, 51 114, 84 66, 124 10, 91"/>
+ <ellipse fill="#F8F1E5" cx="62" cy="88" rx="27" ry="19"/>
+
+ <polygon fill="#DAD6CC" points="57, -1 114, 32 66, 72 10, 39"/>
+ <ellipse fill="#F8F1E5" cx="62" cy="36" rx="27" ry="19"/>
+
+ </svg>
+ </div>
+</body></html>
diff --git a/layout/reftests/transform-3d/preserve3d-scale.html b/layout/reftests/transform-3d/preserve3d-scale.html
new file mode 100644
index 0000000000..5a3694fa1a
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-scale.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html>
+ <style>
+ svg{
+ display: block;
+ margin: auto;
+ -webkit-transform-origin: top center;
+ -webkit-transform: scale(1.5);
+ }
+ #cube{
+ position: absolute;
+ left: 25px;
+ top: 25px;
+ width: 74px;
+ height: 74px;
+ backface-visibility: visible;
+ -webkit-transform-style: preserve-3d;
+ -webkit-transform-origin: center center;
+ -webkit-backface-visibility: visible;
+ -webkit-transform: rotateX(-45deg) rotateY(50deg);
+ -webkit-transition: -webkit-transform 1s;
+ }
+
+ .side{
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 74px;
+ height: 74px;
+ backface-visibility: visible;
+ -webkit-transform-origin: center center;
+ -webkit-backface-visibility: visible;
+ }
+
+ #cube .side:nth-child(1) {
+ -webkit-transform: translateY(37px) rotateX(90deg);
+ -moz-transform: translateY(37px) rotateX(90deg);
+ }
+
+ #cube .side:nth-child(2) {
+ -webkit-transform: translateY(-37px) rotateX(-90deg);
+ -moz-transform: translateY(-37px) rotateX(-90deg);
+
+ }
+ </style>
+</head>
+<body>
+ <div id="cube">
+ <svg class="side" width="100px" height="100px">
+ <rect fill="#DAD6CC" width="74" height="74"></rect>
+ <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle>
+ <g>
+ </g>
+ </svg>
+ <svg class="side" width="100px" height="100px">
+ <rect fill="#DAD6CC" width="74" height="74"></rect>
+ <circle fill="#F8F1E5" cx="37" cy="37" r="27"></circle>
+ <g>
+ </g>
+ </svg>
+
+ </div>
+</body></html>
diff --git a/layout/reftests/transform-3d/preserve3d-table-ref.html b/layout/reftests/transform-3d/preserve3d-table-ref.html
new file mode 100644
index 0000000000..94b660b747
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-table-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<table>
+ <tbody>
+ <tr><td>RISK-184</td></tr>
+ </tbody>
+</table>
+
diff --git a/layout/reftests/transform-3d/preserve3d-table.html b/layout/reftests/transform-3d/preserve3d-table.html
new file mode 100644
index 0000000000..b4b0a78df5
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-table.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<table style="transform-style: preserve-3d">
+ <tbody style="transform: translate3d(0, 0, 0)">
+ <tr><td>RISK-184</td></tr>
+ </tbody>
+</table>
+
diff --git a/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html b/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html
new file mode 100644
index 0000000000..964b11e0e6
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-will-change-large-frame.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<style>
+ .transform {
+ will-change: transform;
+ transform-style: preserve-3d;
+ }
+</style>
+<body>
+ <div class="transform">
+ <div>TEST PAGE</div>
+ <div style="text-indent: -9999em">TEST PAGE</div>
+ </div>
+</body>
diff --git a/layout/reftests/transform-3d/preserve3d-will-change-ref.html b/layout/reftests/transform-3d/preserve3d-will-change-ref.html
new file mode 100644
index 0000000000..4ee913bd22
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-will-change-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<body>
+ <div style="transform-style: preserve-3d">
+ <div>TEST PAGE</div>
+ </div>
+</body>
diff --git a/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html b/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html
new file mode 100644
index 0000000000..836525d876
--- /dev/null
+++ b/layout/reftests/transform-3d/preserves3d-nested-filter-1-ref.html
@@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Green square</title>
+<style>
+.filter {
+ filter: brightness(0.75);
+}
+
+.container {
+ width: 200px;
+ height: 200px;
+
+ background-color: green;
+}
+
+.square {
+ position: absolute;
+
+ width: 200px;
+ height: 200px;
+
+ background-color: green;
+}
+</style>
+</head>
+<body>
+
+<div class="filter">
+ <div class="container">
+ <div class="square"></div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserves3d-nested-filter-1.html b/layout/reftests/transform-3d/preserves3d-nested-filter-1.html
new file mode 100644
index 0000000000..d25df6169c
--- /dev/null
+++ b/layout/reftests/transform-3d/preserves3d-nested-filter-1.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+<title>Green square</title>
+<style>
+.filter {
+ filter: brightness(0.75);
+}
+
+.container {
+ width: 200px;
+ height: 200px;
+
+ transform-style: preserve-3d;
+ background-color: red;
+}
+
+.square {
+ position: absolute;
+
+ width: 200px;
+ height: 200px;
+
+ transform-style: preserve-3d;
+ background-color: green;
+}
+</style>
+</head>
+<body>
+
+<div class="filter">
+ <div class="container">
+ <div class="square"></div>
+ </div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/preserves3d-nested-ref.html b/layout/reftests/transform-3d/preserves3d-nested-ref.html
new file mode 100644
index 0000000000..b8a744eb76
--- /dev/null
+++ b/layout/reftests/transform-3d/preserves3d-nested-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/preserves3d-nested.html b/layout/reftests/transform-3d/preserves3d-nested.html
new file mode 100644
index 0000000000..673a982e99
--- /dev/null
+++ b/layout/reftests/transform-3d/preserves3d-nested.html
@@ -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>
diff --git a/layout/reftests/transform-3d/reftest.list b/layout/reftests/transform-3d/reftest.list
new file mode 100644
index 0000000000..4eea36e102
--- /dev/null
+++ b/layout/reftests/transform-3d/reftest.list
@@ -0,0 +1,102 @@
+== scalez-1a.html scalez-1-ref.html
+fuzzy(0-1,0-6) == 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(0-16,0-346) fuzzy-if(cocoaWidget,0-200,0-310) fuzzy-if(winWidget,0-175,0-250) == 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(0-16,0-100) == preserve3d-5a.html preserve3d-5-ref.html
+== preserve3d-6a.html preserve3d-6-ref.html
+== preserve3d-table.html preserve3d-table-ref.html
+== scale3d-z.html scalez-1-ref.html
+fuzzy-if(winWidget,0-143,0-689) fuzzy-if(OSX,0-224,0-924) fuzzy-if(winWidget,0-154,0-644) == scale3d-all.html scale3d-1-ref.html # subpixel AA
+fuzzy-if(winWidget,0-143,0-689) fuzzy-if(OSX,0-224,0-924) fuzzy-if(winWidget,0-154,0-644) == 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(0-1,0-4) == matrix3d-1a.html matrix3d-1-ref.html
+== matrix3d-2a.html matrix3d-2-ref.html
+== rotate3d-1a.html rotatex-1-ref.html
+== 1467277-1.html rotatex-1-ref.html
+fuzzy(0-1,0-6) == 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,0-1,0-251) fuzzy-if(useDrawSnapshot,64-64,1438-1438) == 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-clipping-2.html perspective-clipping-2-ref.html
+!= perspective-origin-1a.html rotatex-perspective-1a.html
+fuzzy(0-1,0-3) == perspective-origin-1b.html perspective-origin-1a.html
+fuzzy(0-3,0-99) random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2-ref.html # subpixel AA, bug 732568
+fuzzy-if(winWidget&&!layersGPUAccelerated,0-1,0-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
+fuzzy(0-1,0-4) == rotatex-transformorigin-1a.html rotatex-transformorigin-1-ref.html
+fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),0-1,0-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(0-3,0-304) == scroll-perspective-1.html scroll-perspective-1-ref.html
+# Bugs
+fails-if(!layersGPUAccelerated) fails-if(useDrawSnapshot) fuzzy-if(!useDrawSnapshot,0-60,0-826) == 1035611-1.html 1035611-1-ref.html # Bug 1072898 for !layersGPUAccelerated failures
+!= 1157984-1.html about:blank # Bug 1157984
+fuzzy(0-220,0-660) == animate-cube-radians.html animate-cube-radians-ref.html # subpixel AA
+fuzzy(0-240,0-400) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,0-16,0-6) == animate-cube-radians-zoom.html animate-cube-radians-zoom-ref.html
+!= animate-cube-radians-ref.html animate-cube-radians-zoom-ref.html
+fuzzy(0-240,0-660) == animate-cube-degrees.html animate-cube-degrees-ref.html # subpixel AA
+fuzzy(0-240,0-400) fails-if(useDrawSnapshot) == 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,0-128,0-100) fuzzy-if(Android||(gtkWidget&&layersGPUAccelerated),0-143,0-100) fuzzy-if(winWidget||OSX,0-141,0-100) == preserves3d-nested.html preserves3d-nested-ref.html
+fuzzy(0-255,0-153) == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac
+fuzzy(0-255,0-153) == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac, bug 1461311 for Android
+== animate-backface-hidden.html about:blank
+== 1245450-1.html green-rect.html
+fuzzy(0-1,0-2000) == opacity-preserve3d-1.html opacity-preserve3d-1-ref.html
+fuzzy(0-1,0-15000) == opacity-preserve3d-2.html opacity-preserve3d-2-ref.html
+fuzzy(0-1,0-10000) == opacity-preserve3d-3.html opacity-preserve3d-3-ref.html
+fuzzy(0-1,0-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
+fuzzy(0-120,0-590) == mask-layer-1.html mask-layer-ref.html
+fuzzy(0-120,0-590) == mask-layer-2.html mask-layer-ref.html
+fuzzy(0-120,0-590) == mask-layer-3.html mask-layer-ref.html
+== split-intersect1.html split-intersect1-ref.html
+fuzzy(0-255,0-150) fails-if(useDrawSnapshot) == split-intersect2.html split-intersect2-ref.html
+fuzzy(0-255,0-100) fails-if(useDrawSnapshot) == split-non-ortho1.html split-non-ortho1-ref.html
+fuzzy-if(winWidget,0-150,0-120) == component-alpha-1.html component-alpha-1-ref.html
+== nested-transform-1.html nested-transform-1-ref.html
+fuzzy-if(winWidget,0-4,0-51) == transform-geometry-1.html transform-geometry-1-ref.html
+== intermediate-1.html intermediate-1-ref.html
+== preserves3d-nested-filter-1.html preserves3d-nested-filter-1-ref.html
+!= preserve3d-scale.html about:blank
+fuzzy(0-52,0-1600) == preserve3d-scale.html preserve3d-scale-ref.html
+fuzzy(0-50,0-22) == perspective-overflow-1.html perspective-overflow-1-ref.html
+== perspective-overflow-2.html perspective-overflow-2-ref.html
+== 1544995-1.html 1544995-1-ref.html
+== preserve3d-will-change-large-frame.html preserve3d-will-change-ref.html
+fuzzy(0-6,0-3117) fuzzy-if(useDrawSnapshot,4-4,13-13) == 1637067-1.html 1637067-1-ref.html
diff --git a/layout/reftests/transform-3d/rotate3d-1a.html b/layout/reftests/transform-3d/rotate3d-1a.html
new file mode 100644
index 0000000000..ba2d222e46
--- /dev/null
+++ b/layout/reftests/transform-3d/rotate3d-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotate3d-2a.html b/layout/reftests/transform-3d/rotate3d-2a.html
new file mode 100644
index 0000000000..edf3c1be4b
--- /dev/null
+++ b/layout/reftests/transform-3d/rotate3d-2a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotatex-1-ref.html b/layout/reftests/transform-3d/rotatex-1-ref.html
new file mode 100644
index 0000000000..0ee28cfe80
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatex-1a.html b/layout/reftests/transform-3d/rotatex-1a.html
new file mode 100644
index 0000000000..f0c6b01838
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-1a.html b/layout/reftests/transform-3d/rotatex-perspective-1a.html
new file mode 100644
index 0000000000..0b8671e7a0
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-1b.html b/layout/reftests/transform-3d/rotatex-perspective-1b.html
new file mode 100644
index 0000000000..d8be199534
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1b.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-1c.html b/layout/reftests/transform-3d/rotatex-perspective-1c.html
new file mode 100644
index 0000000000..9cae306962
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1c.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-3-ref.html b/layout/reftests/transform-3d/rotatex-perspective-3-ref.html
new file mode 100644
index 0000000000..c0691b77f8
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-3-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotatex-perspective-3a.html b/layout/reftests/transform-3d/rotatex-perspective-3a.html
new file mode 100644
index 0000000000..593ca82bb3
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-3a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html
new file mode 100644
index 0000000000..11a2dcf2d0
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-transformorigin-1-ref.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>
diff --git a/layout/reftests/transform-3d/rotatex-transformorigin-1a.html b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html
new file mode 100644
index 0000000000..2c54cef326
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-transformorigin-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/rotatey-1-ref.html b/layout/reftests/transform-3d/rotatey-1-ref.html
new file mode 100644
index 0000000000..0b3339824c
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatey-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatey(45deg); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/rotatey-1a.html b/layout/reftests/transform-3d/rotatey-1a.html
new file mode 100644
index 0000000000..359105b01e
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatey-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/scale3d-1-ref.html b/layout/reftests/transform-3d/scale3d-1-ref.html
new file mode 100644
index 0000000000..664d1d4f35
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-1-ref.html
@@ -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>
diff --git a/layout/reftests/transform-3d/scale3d-all-separate.html b/layout/reftests/transform-3d/scale3d-all-separate.html
new file mode 100644
index 0000000000..1c0fe50145
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-all-separate.html
@@ -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>
diff --git a/layout/reftests/transform-3d/scale3d-all.html b/layout/reftests/transform-3d/scale3d-all.html
new file mode 100644
index 0000000000..afe4639aa3
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-all.html
@@ -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>
diff --git a/layout/reftests/transform-3d/scale3d-xz.html b/layout/reftests/transform-3d/scale3d-xz.html
new file mode 100644
index 0000000000..81d0909794
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-xz.html
@@ -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>
diff --git a/layout/reftests/transform-3d/scale3d-z.html b/layout/reftests/transform-3d/scale3d-z.html
new file mode 100644
index 0000000000..e168dabc24
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-z.html
@@ -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>
diff --git a/layout/reftests/transform-3d/scalez-1-ref.html b/layout/reftests/transform-3d/scalez-1-ref.html
new file mode 100644
index 0000000000..6efdc2681b
--- /dev/null
+++ b/layout/reftests/transform-3d/scalez-1-ref.html
@@ -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>
+
diff --git a/layout/reftests/transform-3d/scalez-1a.html b/layout/reftests/transform-3d/scalez-1a.html
new file mode 100644
index 0000000000..5661addc16
--- /dev/null
+++ b/layout/reftests/transform-3d/scalez-1a.html
@@ -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>
diff --git a/layout/reftests/transform-3d/scalezrotatex-1-ref.html b/layout/reftests/transform-3d/scalezrotatex-1-ref.html
new file mode 100644
index 0000000000..2f250fd786
--- /dev/null
+++ b/layout/reftests/transform-3d/scalezrotatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: scaleY(-1); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scalezrotatex-1.html b/layout/reftests/transform-3d/scalezrotatex-1.html
new file mode 100644
index 0000000000..2cc10c8405
--- /dev/null
+++ b/layout/reftests/transform-3d/scalezrotatex-1.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(180deg) scaleZ(-1); width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/scroll-perspective-1-ref.html b/layout/reftests/transform-3d/scroll-perspective-1-ref.html
new file mode 100644
index 0000000000..b314133f85
--- /dev/null
+++ b/layout/reftests/transform-3d/scroll-perspective-1-ref.html
@@ -0,0 +1,12 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div id="s" style="perspective:300px; width: 500px; height:500px; position:relative; overflow:scroll">
+ <div id="t" style="position:absolute; top:3000px; transform-style:preserve-3d; transform:translateZ(20px); background:yellow; width:300px; height:0"></div>
+ <div style="height:4000px"></div>
+</div>
+<script>
+s.scrollTop = 3000;
+var tr = t.getBoundingClientRect();
+t.style.height = "300px";
+</script>
diff --git a/layout/reftests/transform-3d/scroll-perspective-1.html b/layout/reftests/transform-3d/scroll-perspective-1.html
new file mode 100644
index 0000000000..2c17c02543
--- /dev/null
+++ b/layout/reftests/transform-3d/scroll-perspective-1.html
@@ -0,0 +1,10 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div id="s" style="perspective:300px; width: 500px; height:500px; position:relative; overflow:scroll">
+ <div style="position:absolute; top:3000px; transform-style:preserve-3d; transform:translateZ(20px); background:yellow; width:300px; height:300px;"></div>
+ <div style="height:4000px"></div>
+</div>
+<script>
+s.scrollTop = 3000;
+</script>
diff --git a/layout/reftests/transform-3d/snap-perspective-1-ref.html b/layout/reftests/transform-3d/snap-perspective-1-ref.html
new file mode 100644
index 0000000000..ca84e9e738
--- /dev/null
+++ b/layout/reftests/transform-3d/snap-perspective-1-ref.html
@@ -0,0 +1,5 @@
+<html>
+<body>
+ <div style="width: 100px; height: 100px; background-color:red"><div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/snap-perspective-1.html b/layout/reftests/transform-3d/snap-perspective-1.html
new file mode 100644
index 0000000000..a5bd65f084
--- /dev/null
+++ b/layout/reftests/transform-3d/snap-perspective-1.html
@@ -0,0 +1,12 @@
+<html>
+<body>
+ <div style="perspective:1000px">
+ <div style="transform: translateX(-100.2px)">
+ <div style="width: 300px; height: 300px; overflow:hidden">
+ <div style="transform: translateX(100.2px); background-color:red; width: 100px; height: 100px; will-change: transform;">
+ </div>
+ </div>
+ </div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-1-ref.html b/layout/reftests/transform-3d/sorting-1-ref.html
new file mode 100644
index 0000000000..340d2eb0bb
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-1-ref.html
@@ -0,0 +1,35 @@
+<html>
+ <head>
+ <style type="text/css">
+ #stage {
+ -moz-perspective: 1000px;
+ }
+
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #big {
+ width: 1000px;
+ height: 1000px;
+ background-color: #995C7F;
+ -moz-transform: rotatey(45deg);
+ }
+
+ #small {
+ width: 100px;
+ height: 100px;
+ background-color: #995C7F;
+ -moz-transform: translate3d(600px, 200px, 0px);
+ }
+ </style>
+ </head>
+ <body>
+ <div id="stage">
+ <div id="parent">
+ <div id="small"></div>
+ <div id="big"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-1a.html b/layout/reftests/transform-3d/sorting-1a.html
new file mode 100644
index 0000000000..98414f843b
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-1a.html
@@ -0,0 +1,35 @@
+<html>
+ <head>
+ <style type="text/css">
+ #stage {
+ -moz-perspective: 1000px;
+ }
+
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #big {
+ width: 1000px;
+ height: 1000px;
+ background-color: #995C7F;
+ -moz-transform: rotatey(45deg);
+ }
+
+ #small {
+ width: 100px;
+ height: 100px;
+ background-color: #835A99;
+ -moz-transform: translate3d(600px, 200px, 0px);
+ }
+ </style>
+ </head>
+ <body>
+ <div id="stage">
+ <div id="parent">
+ <div id="small"></div>
+ <div id="big"></div>
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-2-ref.html b/layout/reftests/transform-3d/sorting-2-ref.html
new file mode 100644
index 0000000000..cb34eaf4ed
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-2-ref.html
@@ -0,0 +1,21 @@
+<html>
+ <head>
+ <style type="text/css">
+ #one {
+ width: 100px;
+ height: 100px;
+ background-color: #00FF00;
+ }
+
+ #two {
+ width: 100px;
+ height: 50px;
+ background-color: red;
+ }
+ </style>
+ </head>
+ <body>
+ <div id="one"></div>
+ <div id="two"></div>
+ </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-2a.html b/layout/reftests/transform-3d/sorting-2a.html
new file mode 100644
index 0000000000..988ba323c2
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-2a.html
@@ -0,0 +1,29 @@
+<html>
+ <head>
+ <style type="text/css">
+ #parent {
+ -moz-transform-style: preserve-3d;
+ }
+
+ #one {
+ width: 100px;
+ height: 100px;
+ background-color: #00FF00;
+ -moz-transform: translatez(10px);
+ }
+
+ #two {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-transform: translatez(-10px) translatey(-50px);
+ }
+ </style>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="one"></div>
+ <div id="two"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-2b.html b/layout/reftests/transform-3d/sorting-2b.html
new file mode 100644
index 0000000000..5828be845e
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-2b.html
@@ -0,0 +1,30 @@
+<html>
+ <head>
+ <style type="text/css">
+ #parent {
+ -moz-transform-style: preserve-3d;
+ -moz-transform: rotatex(180deg);
+ }
+
+ #one {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-transform: translatez(10px) translatey(50px);
+ }
+
+ #two {
+ width: 100px;
+ height: 100px;
+ background-color: #00FF00;
+ -moz-transform: translatez(10px);
+ }
+ </style>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="one"></div>
+ <div id="two"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform-3d/sorting-3a.html b/layout/reftests/transform-3d/sorting-3a.html
new file mode 100644
index 0000000000..00c62b5ce6
--- /dev/null
+++ b/layout/reftests/transform-3d/sorting-3a.html
@@ -0,0 +1,25 @@
+<html>
+ <head>
+ <style type="text/css">
+ #parent {
+ -moz-transform-style: preserve-3d;
+ -moz-transform: rotateX(180deg);
+ width: 100px;
+ height: 100px;
+ background-color: #00FF00;
+ }
+
+ #child {
+ width: 100px;
+ height: 100px;
+ background-color: red;
+ -moz-transform: translatez(10px);
+ }
+ </style>
+ </head>
+ <body>
+ <div id="parent">
+ <div id="child"></div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform-3d/split-intersect1-ref.html b/layout/reftests/transform-3d/split-intersect1-ref.html
new file mode 100644
index 0000000000..c30c35615f
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect1-ref.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 1 ref</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+
+ width: 50px;
+ height: 100px;
+}
+
+.first {
+ background-color: rgba(255,0,0,1);
+ left: 58px;
+}
+
+.second {
+ background-color: rgba(0,255,0,1);
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape first"></div>
+ <div class="shape second"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/split-intersect1.html b/layout/reftests/transform-3d/split-intersect1.html
new file mode 100644
index 0000000000..73dc67f12b
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect1.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 1</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+
+ transform-style: preserve-3d;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+
+ width: 100px;
+ height: 100px;
+}
+
+.first {
+ background-color: rgba(255,0,0,1);
+}
+
+.second {
+ background-color: rgba(0,255,0,1);
+ transform: rotateY(0.1deg);
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape first"></div>
+ <div class="shape second"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/split-intersect2-ref.html b/layout/reftests/transform-3d/split-intersect2-ref.html
new file mode 100644
index 0000000000..5a19840c17
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect2-ref.html
@@ -0,0 +1,82 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 2 ref</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+}
+
+.red {
+ background-color: rgba(255,0,0,1);
+
+ width: 100px;
+ height: 15px;
+
+ top: 150.5px;
+ left: 73px;
+}
+
+.green1 {
+ background-color: rgba(0,255,0,1);
+
+ width: 30px;
+ height: 42.5px;
+
+ top: 108px;
+ left: 88px;
+}
+
+.green2 {
+ background-color: rgba(0,255,0,1);
+
+ width: 30px;
+ height: 50px;
+
+ top: 158px;
+ left: 88px;
+}
+
+.blue1 {
+ background-color: rgba(0,0,255,1);
+
+ top: 108px;
+ left: 128px;
+
+ width: 30px;
+ height: 42.5px;
+}
+
+.blue2 {
+ background-color: rgba(0,0,255,1);
+
+ width: 30px;
+ height: 50px;
+
+ top: 158px;
+ left: 128px;
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape red"></div>
+ <div class="shape green1"></div>
+ <div class="shape green2"></div>
+ <div class="shape blue1"></div>
+ <div class="shape blue2"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/split-intersect2.html b/layout/reftests/transform-3d/split-intersect2.html
new file mode 100644
index 0000000000..345e4a5630
--- /dev/null
+++ b/layout/reftests/transform-3d/split-intersect2.html
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split intersect 2</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+
+ transform-style: preserve-3d;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+
+ width: 30px;
+ height: 100px;
+}
+
+.red {
+ background-color: rgba(255,0,0,1);
+ transform: translate(100px, 100px) rotateZ(90deg) rotateY(60deg);
+}
+
+.green {
+ background-color: rgba(0,255,0,1);
+ transform: translate(80px, 100px);
+}
+
+.blue {
+ background-color: rgba(0,0,255,1);
+ transform: translate(120px, 100px);
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape red"></div>
+ <div class="shape green"></div>
+ <div class="shape blue"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/split-non-ortho1-ref.html b/layout/reftests/transform-3d/split-non-ortho1-ref.html
new file mode 100644
index 0000000000..d519431de6
--- /dev/null
+++ b/layout/reftests/transform-3d/split-non-ortho1-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split non-orthogonal 1 ref</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+
+ position: absolute;
+ transform-style: preserve-3d;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+}
+
+.red-square-back {
+ background-color: rgba(255,0,0,1);
+
+ width: 100px;
+ height: 100px;
+
+ top: 50px;
+ left: 50px;
+}
+
+.green-square-back {
+ background-color: rgba(0,255,0,1);
+
+ width: 150px;
+ height: 150px;
+
+ top: 50px;
+ left: 50px;
+
+ transform: rotateZ(45deg);
+}
+
+.red-square-front {
+ background-color: rgba(255,0,0,1);
+
+ width: 50px;
+ height: 50px;
+
+ top: 100px;
+ left: 100px;
+}
+
+.green-square-front {
+ background-color: rgba(0,255,0,1);
+
+ width: 72px;
+ height: 72px;
+
+ top: 63.5px;
+ left: 63.5px;
+
+ transform: rotateZ(45deg);
+}
+
+#canvas {
+ width: 100px
+ height: 100px;
+
+ top: 100px;
+ left: 100px;
+}
+
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape red-square-back"></div>
+ <div class="shape green-square-back"></div>
+ <div class="shape red-square-front"></div>
+ <div class="shape green-square-front"></div>
+ </div>
+</body>
+
+</html>
diff --git a/layout/reftests/transform-3d/split-non-ortho1.html b/layout/reftests/transform-3d/split-non-ortho1.html
new file mode 100644
index 0000000000..4612e0b9ff
--- /dev/null
+++ b/layout/reftests/transform-3d/split-non-ortho1.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+<meta charset="utf-8">
+<title>Split non-orthogonal 1</title>
+
+<style>
+.container {
+ margin: 0 0;
+ width: 400px;
+ height: 400px;
+
+ position: absolute;
+ transform-style: preserve-3d;
+}
+
+.shape {
+ margin: 0 0;
+ position: absolute;
+}
+
+.first {
+ background-color: rgba(255,0,0,1);
+
+ width: 100px;
+ height: 100px;
+
+ top: 50px;
+ left: 50px;
+}
+
+.second {
+ background-color: rgba(0,255,0,1);
+
+ width: 150px;
+ height: 150px;
+
+ top: 50px;
+ left: 50px;
+
+ transform: rotateZ(45deg) rotateY(0.1deg);
+}
+</style>
+</head>
+
+<body>
+ <div class="container">
+ <div class="shape second"></div>
+ <div class="shape first"></div>
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/transform-geometry-1-ref.html b/layout/reftests/transform-3d/transform-geometry-1-ref.html
new file mode 100644
index 0000000000..c9c03ece43
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-geometry-1-ref.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+<style type="text/css">
+#parent {
+ width: 400px;
+ height: 400px;
+ transform-style: flat;
+}
+
+#child {
+ width: 400px;
+ height: 400px;
+ overflow: scroll;
+}
+
+.box {
+ width: 400px;
+ height: 300px;
+ background-color: red;
+}
+</style>
+
+</head>
+<body>
+
+<div id="parent">
+ <div id="child">
+ <div class="box"></div>
+ <div class="box"></div>
+ </div>
+</div>
+
+<script>
+function doTest() {
+ document.documentElement.removeAttribute("class");
+ document.getElementById("child").scrollTop = 200;
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/transform-geometry-1.html b/layout/reftests/transform-3d/transform-geometry-1.html
new file mode 100644
index 0000000000..0ee592e3ee
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-geometry-1.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<head>
+<meta http-equiv="content-type" content="text/html; charset=UTF-8">
+
+<style type="text/css">
+#parent {
+ width: 400px;
+ height: 400px;
+ transform-style: preserve-3d;
+}
+
+#child {
+ width: 400px;
+ height: 400px;
+ overflow: scroll;
+}
+
+.box {
+ width: 400px;
+ height: 300px;
+ background-color: red;
+}
+</style>
+
+</head>
+<body>
+
+<div id="parent">
+ <div id="child">
+ <div class="box"></div>
+ <div class="box"></div>
+ </div>
+</div>
+
+<script>
+function doTest() {
+ document.documentElement.removeAttribute("class");
+ document.getElementById("child").scrollTop = 200;
+}
+window.addEventListener("MozReftestInvalidate", doTest);
+</script>
+
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/transform-style-flat-1-ref.html b/layout/reftests/transform-3d/transform-style-flat-1-ref.html
new file mode 100644
index 0000000000..e73834bb64
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-style-flat-1-ref.html
@@ -0,0 +1,6 @@
+<html>
+ <body>
+ <div style="height: 100px; width: 100px; background: lime">
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform-3d/transform-style-flat-1a.html b/layout/reftests/transform-3d/transform-style-flat-1a.html
new file mode 100644
index 0000000000..946dc28a31
--- /dev/null
+++ b/layout/reftests/transform-3d/transform-style-flat-1a.html
@@ -0,0 +1,8 @@
+<html>
+ <body>
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: top">
+ <div style="-moz-transform: rotatex(-45deg); -moz-transform-origin: top; height: 200px; width: 100px; background: lime">
+ </div>
+ </div>
+ </body>
+</html>
diff --git a/layout/reftests/transform-3d/translate3d-1-ref.html b/layout/reftests/transform-3d/translate3d-1-ref.html
new file mode 100644
index 0000000000..d3b919e992
--- /dev/null
+++ b/layout/reftests/transform-3d/translate3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: 10px 30px -10px; width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/translate3d-1a.html b/layout/reftests/transform-3d/translate3d-1a.html
new file mode 100644
index 0000000000..418d127869
--- /dev/null
+++ b/layout/reftests/transform-3d/translate3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translate3d(10px, 30px, -10px) rotatex(45deg) translate3d(-10px, -30px, 10px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/translatez-1-ref.html b/layout/reftests/transform-3d/translatez-1-ref.html
new file mode 100644
index 0000000000..e4a00aca15
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: 0 0 -10px; width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/translatez-1a.html b/layout/reftests/transform-3d/translatez-1a.html
new file mode 100644
index 0000000000..a19a128b26
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatez(-10px) rotatex(45deg) translatez(10px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/translatez-1b.html b/layout/reftests/transform-3d/translatez-1b.html
new file mode 100644
index 0000000000..7e6f1dead1
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+ <div style="-moz-transform: translatez(-20px) rotatex(45deg) translatez(20px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;">
+ Test Text
+ </div>
+</body>
+</html>
diff --git a/layout/reftests/transform-3d/willchange-containing-block.html b/layout/reftests/transform-3d/willchange-containing-block.html
new file mode 100644
index 0000000000..95de2c74d0
--- /dev/null
+++ b/layout/reftests/transform-3d/willchange-containing-block.html
@@ -0,0 +1,43 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<style>
+body {
+ padding: 100px;
+ width: 5000px;
+ height: 5000px;
+ overflow: scroll;
+}
+div {
+}
+#parent {
+ background:red;
+ width: 64px;
+ height: 64px;
+}
+#child {
+ background:green;
+ position:fixed;
+ width: 32px;
+ height: 32px;
+}
+</style>
+<div id="parent">
+<div id="child">
+
+</div>
+</div>
+<script type="application/javascript">
+
+if (document.location.search == '?willchange') {
+ document.getElementById("parent").style.willChange = "transform";
+} else if (document.location.search == '?ref') {
+ document.getElementById("parent").style.transform = "translateZ(1px)";
+} else if (document.location.search == '?noblock') {
+}
+
+document.documentElement.scrollTop = 10;
+document.documentElement.scrollLeft = 10;
+</script>
+</body>
+</html>