From 5f8de423f190bbb79a62f804151bc24824fa32d8 Mon Sep 17 00:00:00 2001
From: "Matt A. Tobin" <mattatobin@localhost.localdomain>
Date: Fri, 2 Feb 2018 04:16:08 -0500
Subject: Add m-esr52 at 52.6.0

---
 layout/reftests/transform-3d/1035611-1-ref.html    | 29 +++++++
 layout/reftests/transform-3d/1035611-1.html        | 38 +++++++++
 layout/reftests/transform-3d/1157984-1.html        | 32 ++++++++
 layout/reftests/transform-3d/1245450-1.html        | 36 +++++++++
 layout/reftests/transform-3d/1271058-1-ref.html    | 12 +++
 layout/reftests/transform-3d/1271058-1.html        | 34 ++++++++
 .../transform-3d/animate-backface-hidden.html      | 40 ++++++++++
 .../transform-3d/animate-cube-degrees-ref.html     | 46 +++++++++++
 .../animate-cube-degrees-zoom-ref.html             | 46 +++++++++++
 .../transform-3d/animate-cube-degrees-zoom.html    | 52 ++++++++++++
 .../transform-3d/animate-cube-degrees.html         | 52 ++++++++++++
 .../transform-3d/animate-cube-radians-ref.html     | 47 +++++++++++
 .../animate-cube-radians-zoom-ref.html             | 47 +++++++++++
 .../transform-3d/animate-cube-radians-zoom.html    | 53 ++++++++++++
 .../transform-3d/animate-cube-radians.html         | 53 ++++++++++++
 .../transform-3d/animate-preserve3d-child.html     | 56 +++++++++++++
 .../transform-3d/animate-preserve3d-parent.html    | 52 ++++++++++++
 .../transform-3d/animate-preserve3d-ref.html       | 33 ++++++++
 .../transform-3d/backface-visibility-1a.html       |  9 +++
 .../transform-3d/backface-visibility-1b.html       |  9 +++
 .../transform-3d/backface-visibility-1c.html       |  9 +++
 .../transform-3d/backface-visibility-2-ref.html    | 43 ++++++++++
 .../transform-3d/backface-visibility-2.html        | 45 +++++++++++
 .../transform-3d/backface-visibility-3-ref.html    | 21 +++++
 .../transform-3d/backface-visibility-3.html        | 33 ++++++++
 layout/reftests/transform-3d/green-rect.html       | 14 ++++
 layout/reftests/transform-3d/mask-layer-1.html     | 29 +++++++
 layout/reftests/transform-3d/mask-layer-2.html     | 37 +++++++++
 layout/reftests/transform-3d/mask-layer-3.html     | 36 +++++++++
 layout/reftests/transform-3d/mask-layer-ref.html   | 28 +++++++
 layout/reftests/transform-3d/matrix3d-1-ref.html   |  9 +++
 layout/reftests/transform-3d/matrix3d-1a.html      |  9 +++
 layout/reftests/transform-3d/matrix3d-2-ref.html   |  9 +++
 layout/reftests/transform-3d/matrix3d-2a.html      |  9 +++
 .../transform-3d/opacity-preserve3d-1-ref.html     | 45 +++++++++++
 .../transform-3d/opacity-preserve3d-1.html         | 45 +++++++++++
 .../transform-3d/opacity-preserve3d-2-ref.html     | 28 +++++++
 .../transform-3d/opacity-preserve3d-2.html         | 31 ++++++++
 .../transform-3d/opacity-preserve3d-3-ref.html     | 42 ++++++++++
 .../transform-3d/opacity-preserve3d-3.html         | 42 ++++++++++
 .../transform-3d/opacity-preserve3d-4-ref.html     | 38 +++++++++
 .../transform-3d/opacity-preserve3d-4.html         | 38 +++++++++
 .../transform-3d/opacity-preserve3d-5-ref.html     | 29 +++++++
 .../transform-3d/opacity-preserve3d-5.html         | 36 +++++++++
 .../transform-3d/overflow-hidden-1-ref.html        | 27 +++++++
 .../reftests/transform-3d/overflow-hidden-1a.html  | 27 +++++++
 .../transform-3d/perspective-clipping-1-ref.html   | 13 +++
 .../transform-3d/perspective-clipping-1.html       | 32 ++++++++
 .../transform-3d/perspective-origin-1a.html        | 11 +++
 .../transform-3d/perspective-origin-1b.html        | 11 +++
 .../transform-3d/perspective-origin-2-ref.html     | 31 ++++++++
 .../transform-3d/perspective-origin-2a.html        | 31 ++++++++
 .../transform-3d/perspective-origin-3-ref.html     | 41 ++++++++++
 .../transform-3d/perspective-origin-3a.html        | 41 ++++++++++
 .../transform-3d/perspective-origin-4-ref.html     | 20 +++++
 .../transform-3d/perspective-origin-4a.html        | 29 +++++++
 .../transform-3d/perspective-zindex-2.html         | 34 ++++++++
 .../reftests/transform-3d/perspective-zindex.html  | 34 ++++++++
 layout/reftests/transform-3d/preserve3d-1-ref.html |  9 +++
 layout/reftests/transform-3d/preserve3d-1a.html    | 15 ++++
 layout/reftests/transform-3d/preserve3d-1b.html    | 11 +++
 layout/reftests/transform-3d/preserve3d-2-ref.html | 27 +++++++
 layout/reftests/transform-3d/preserve3d-2a.html    | 28 +++++++
 layout/reftests/transform-3d/preserve3d-2b.html    | 28 +++++++
 layout/reftests/transform-3d/preserve3d-2c.html    | 28 +++++++
 layout/reftests/transform-3d/preserve3d-2d.html    | 30 +++++++
 layout/reftests/transform-3d/preserve3d-3-ref.html |  8 ++
 layout/reftests/transform-3d/preserve3d-3a.html    |  8 ++
 layout/reftests/transform-3d/preserve3d-4a.html    |  9 +++
 layout/reftests/transform-3d/preserve3d-5-ref.html |  3 +
 layout/reftests/transform-3d/preserve3d-5a.html    | 10 +++
 layout/reftests/transform-3d/preserve3d-6-ref.html | 12 +++
 layout/reftests/transform-3d/preserve3d-6a.html    | 12 +++
 layout/reftests/transform-3d/preserve3d-7-ref.html | 11 +++
 layout/reftests/transform-3d/preserve3d-7a.html    |  9 +++
 .../reftests/transform-3d/preserve3d-clipped.html  | 10 +++
 .../transform-3d/preserves3d-nested-ref.html       | 44 ++++++++++
 .../reftests/transform-3d/preserves3d-nested.html  | 46 +++++++++++
 layout/reftests/transform-3d/reftest-stylo.list    | 93 ++++++++++++++++++++++
 layout/reftests/transform-3d/reftest.list          | 84 +++++++++++++++++++
 layout/reftests/transform-3d/rotate3d-1a.html      |  9 +++
 layout/reftests/transform-3d/rotate3d-2a.html      |  9 +++
 layout/reftests/transform-3d/rotatex-1-ref.html    |  9 +++
 layout/reftests/transform-3d/rotatex-1a.html       |  9 +++
 .../transform-3d/rotatex-perspective-1a.html       |  9 +++
 .../transform-3d/rotatex-perspective-1b.html       | 11 +++
 .../transform-3d/rotatex-perspective-1c.html       |  9 +++
 .../transform-3d/rotatex-perspective-3-ref.html    | 33 ++++++++
 .../transform-3d/rotatex-perspective-3a.html       | 34 ++++++++
 .../rotatex-transformorigin-1-ref.html             | 11 +++
 .../transform-3d/rotatex-transformorigin-1a.html   | 11 +++
 layout/reftests/transform-3d/rotatey-1-ref.html    |  9 +++
 layout/reftests/transform-3d/rotatey-1a.html       |  9 +++
 layout/reftests/transform-3d/scale3d-1-ref.html    |  9 +++
 .../transform-3d/scale3d-all-separate.html         |  9 +++
 layout/reftests/transform-3d/scale3d-all.html      |  9 +++
 layout/reftests/transform-3d/scale3d-xz.html       |  9 +++
 layout/reftests/transform-3d/scale3d-z.html        |  9 +++
 layout/reftests/transform-3d/scalez-1-ref.html     | 10 +++
 layout/reftests/transform-3d/scalez-1a.html        |  9 +++
 .../reftests/transform-3d/scalezrotatex-1-ref.html |  9 +++
 layout/reftests/transform-3d/scalezrotatex-1.html  |  9 +++
 .../transform-3d/scroll-perspective-1-ref.html     | 12 +++
 .../transform-3d/scroll-perspective-1.html         | 10 +++
 .../transform-3d/snap-perspective-1-ref.html       |  5 ++
 .../reftests/transform-3d/snap-perspective-1.html  | 12 +++
 layout/reftests/transform-3d/sorting-1-ref.html    | 35 ++++++++
 layout/reftests/transform-3d/sorting-1a.html       | 35 ++++++++
 layout/reftests/transform-3d/sorting-2-ref.html    | 21 +++++
 layout/reftests/transform-3d/sorting-2a.html       | 29 +++++++
 layout/reftests/transform-3d/sorting-2b.html       | 30 +++++++
 layout/reftests/transform-3d/sorting-3a.html       | 25 ++++++
 .../transform-3d/transform-style-flat-1-ref.html   |  6 ++
 .../transform-3d/transform-style-flat-1a.html      |  8 ++
 .../reftests/transform-3d/translate3d-1-ref.html   |  9 +++
 layout/reftests/transform-3d/translate3d-1a.html   |  9 +++
 layout/reftests/transform-3d/translatez-1-ref.html |  9 +++
 layout/reftests/transform-3d/translatez-1a.html    |  9 +++
 layout/reftests/transform-3d/translatez-1b.html    |  9 +++
 .../transform-3d/willchange-containing-block.html  | 43 ++++++++++
 120 files changed, 2968 insertions(+)
 create mode 100644 layout/reftests/transform-3d/1035611-1-ref.html
 create mode 100644 layout/reftests/transform-3d/1035611-1.html
 create mode 100644 layout/reftests/transform-3d/1157984-1.html
 create mode 100644 layout/reftests/transform-3d/1245450-1.html
 create mode 100644 layout/reftests/transform-3d/1271058-1-ref.html
 create mode 100644 layout/reftests/transform-3d/1271058-1.html
 create mode 100644 layout/reftests/transform-3d/animate-backface-hidden.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-degrees-ref.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-degrees-zoom-ref.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-degrees-zoom.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-degrees.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-radians-ref.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-radians-zoom-ref.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-radians-zoom.html
 create mode 100644 layout/reftests/transform-3d/animate-cube-radians.html
 create mode 100644 layout/reftests/transform-3d/animate-preserve3d-child.html
 create mode 100644 layout/reftests/transform-3d/animate-preserve3d-parent.html
 create mode 100644 layout/reftests/transform-3d/animate-preserve3d-ref.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-1a.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-1b.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-1c.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-2-ref.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-2.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-3-ref.html
 create mode 100644 layout/reftests/transform-3d/backface-visibility-3.html
 create mode 100644 layout/reftests/transform-3d/green-rect.html
 create mode 100644 layout/reftests/transform-3d/mask-layer-1.html
 create mode 100644 layout/reftests/transform-3d/mask-layer-2.html
 create mode 100644 layout/reftests/transform-3d/mask-layer-3.html
 create mode 100644 layout/reftests/transform-3d/mask-layer-ref.html
 create mode 100644 layout/reftests/transform-3d/matrix3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/matrix3d-1a.html
 create mode 100644 layout/reftests/transform-3d/matrix3d-2-ref.html
 create mode 100644 layout/reftests/transform-3d/matrix3d-2a.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-1.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-2-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-2.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-3-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-3.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-4-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-4.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-5-ref.html
 create mode 100644 layout/reftests/transform-3d/opacity-preserve3d-5.html
 create mode 100644 layout/reftests/transform-3d/overflow-hidden-1-ref.html
 create mode 100644 layout/reftests/transform-3d/overflow-hidden-1a.html
 create mode 100644 layout/reftests/transform-3d/perspective-clipping-1-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-clipping-1.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-1a.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-1b.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-2-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-2a.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-3-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-3a.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-4-ref.html
 create mode 100644 layout/reftests/transform-3d/perspective-origin-4a.html
 create mode 100644 layout/reftests/transform-3d/perspective-zindex-2.html
 create mode 100644 layout/reftests/transform-3d/perspective-zindex.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-1a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-1b.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2b.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2c.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-2d.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-3-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-3a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-4a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-5-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-5a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-6-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-6a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-7-ref.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-7a.html
 create mode 100644 layout/reftests/transform-3d/preserve3d-clipped.html
 create mode 100644 layout/reftests/transform-3d/preserves3d-nested-ref.html
 create mode 100644 layout/reftests/transform-3d/preserves3d-nested.html
 create mode 100644 layout/reftests/transform-3d/reftest-stylo.list
 create mode 100644 layout/reftests/transform-3d/reftest.list
 create mode 100644 layout/reftests/transform-3d/rotate3d-1a.html
 create mode 100644 layout/reftests/transform-3d/rotate3d-2a.html
 create mode 100644 layout/reftests/transform-3d/rotatex-1-ref.html
 create mode 100644 layout/reftests/transform-3d/rotatex-1a.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-1a.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-1b.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-1c.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-3-ref.html
 create mode 100644 layout/reftests/transform-3d/rotatex-perspective-3a.html
 create mode 100644 layout/reftests/transform-3d/rotatex-transformorigin-1-ref.html
 create mode 100644 layout/reftests/transform-3d/rotatex-transformorigin-1a.html
 create mode 100644 layout/reftests/transform-3d/rotatey-1-ref.html
 create mode 100644 layout/reftests/transform-3d/rotatey-1a.html
 create mode 100644 layout/reftests/transform-3d/scale3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/scale3d-all-separate.html
 create mode 100644 layout/reftests/transform-3d/scale3d-all.html
 create mode 100644 layout/reftests/transform-3d/scale3d-xz.html
 create mode 100644 layout/reftests/transform-3d/scale3d-z.html
 create mode 100644 layout/reftests/transform-3d/scalez-1-ref.html
 create mode 100644 layout/reftests/transform-3d/scalez-1a.html
 create mode 100644 layout/reftests/transform-3d/scalezrotatex-1-ref.html
 create mode 100644 layout/reftests/transform-3d/scalezrotatex-1.html
 create mode 100644 layout/reftests/transform-3d/scroll-perspective-1-ref.html
 create mode 100644 layout/reftests/transform-3d/scroll-perspective-1.html
 create mode 100644 layout/reftests/transform-3d/snap-perspective-1-ref.html
 create mode 100644 layout/reftests/transform-3d/snap-perspective-1.html
 create mode 100644 layout/reftests/transform-3d/sorting-1-ref.html
 create mode 100644 layout/reftests/transform-3d/sorting-1a.html
 create mode 100644 layout/reftests/transform-3d/sorting-2-ref.html
 create mode 100644 layout/reftests/transform-3d/sorting-2a.html
 create mode 100644 layout/reftests/transform-3d/sorting-2b.html
 create mode 100644 layout/reftests/transform-3d/sorting-3a.html
 create mode 100644 layout/reftests/transform-3d/transform-style-flat-1-ref.html
 create mode 100644 layout/reftests/transform-3d/transform-style-flat-1a.html
 create mode 100644 layout/reftests/transform-3d/translate3d-1-ref.html
 create mode 100644 layout/reftests/transform-3d/translate3d-1a.html
 create mode 100644 layout/reftests/transform-3d/translatez-1-ref.html
 create mode 100644 layout/reftests/transform-3d/translatez-1a.html
 create mode 100644 layout/reftests/transform-3d/translatez-1b.html
 create mode 100644 layout/reftests/transform-3d/willchange-containing-block.html

(limited to 'layout/reftests/transform-3d')

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 000000000..4c79af3e4
--- /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 000000000..2d7e78707
--- /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 000000000..be0f6526a
--- /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 000000000..59c7b67d8
--- /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 000000000..fc56c22e0
--- /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 000000000..845785d59
--- /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/animate-backface-hidden.html b/layout/reftests/transform-3d/animate-backface-hidden.html
new file mode 100644
index 000000000..ce957bf73
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-backface-hidden.html
@@ -0,0 +1,40 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait reftest-no-flush">
+<title>Testcase, bug 1186061</title>
+<style>
+
+html { overflow: hidden }
+
+body { padding: 50px }
+
+@keyframes flip {
+  0%, 85% { transform: rotateX(170deg); }
+  90%, 100% { transform: rotateX(10deg); }
+}
+
+#test {
+  background: blue;
+  height: 200px; width: 200px;
+  backface-visibility: hidden;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: flip 100s -99.9s linear 2;
+}
+
+</style>
+
+<div id="test">
+</div>
+
+<script>
+
+document.getElementById("test").addEventListener("animationiteration", IterationListener, false);
+
+function IterationListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
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 000000000..bbaa9d0b8
--- /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 000000000..aff04d5c9
--- /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 000000000..26c989a54
--- /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 000000000..d2d80b520
--- /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 000000000..fe15a3729
--- /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 000000000..01eb93049
--- /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 000000000..b7075f328
--- /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 000000000..5a8f61ec3
--- /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 000000000..2404be1b0
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-preserve3d-child.html
@@ -0,0 +1,56 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>Testcase, bug 1176969</title>
+<style>
+
+body { padding: 50px }
+
+#grandparent { perspective: 400px }
+
+@keyframes spin {
+  0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
+  90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
+}
+
+#parent {
+  background: blue;
+  height: 200px; width: 200px;
+  border: 1px solid black;
+  transform-style: preserve-3d;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: spin 100s -99.9s linear 2;
+}
+
+@keyframes noop {
+  from, to { transform: translateZ(15px) }
+}
+
+#child {
+  height: 100px; width: 100px; margin: 50px;
+  background: yellow;
+  box-shadow: 3px 3px olive;
+  animation: noop infinite 10s linear;
+}
+
+</style>
+
+<div id="grandparent">
+  <div id="parent">
+    <div id="child">
+    </div>
+  </div>
+</div>
+
+<script>
+
+document.getElementById("parent").addEventListener("animationiteration", IterationListener, false);
+
+function IterationListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
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 000000000..ae3fec196
--- /dev/null
+++ b/layout/reftests/transform-3d/animate-preserve3d-parent.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>Testcase, bug 1176969</title>
+<style>
+
+body { padding: 50px }
+
+#grandparent { perspective: 400px }
+
+@keyframes spin {
+  0%, 85% { transform: rotateX(-45deg) rotateY(-45deg) rotateZ(-45deg); }
+  90%, 100% { transform: rotateX(-30deg) rotateY(-30deg) rotateZ(-30deg); }
+}
+
+#parent {
+  background: blue;
+  height: 200px; width: 200px;
+  border: 1px solid black;
+  transform-style: preserve-3d;
+  /* use a -99.9s delay to start at 99.9% and then move to 0% */
+  animation: spin 100s -99.9s linear 2;
+}
+
+#child {
+  transform: translateZ(15px);
+  height: 100px; width: 100px; margin: 50px;
+  background: yellow;
+  box-shadow: 3px 3px olive;
+}
+
+</style>
+
+<div id="grandparent">
+  <div id="parent">
+    <div id="child">
+    </div>
+  </div>
+</div>
+
+<script>
+
+document.getElementById("parent").addEventListener("animationiteration", IterationListener, false);
+
+function IterationListener(event) {
+  setTimeout(RemoveReftestWait, 0);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
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 000000000..60c560804
--- /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 000000000..0c1d0a3a6
--- /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 000000000..8590a6f60
--- /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 000000000..6129b443e
--- /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 000000000..bc5146dbe
--- /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 000000000..d55a8c9b4
--- /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 000000000..b75cb6def
--- /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 000000000..ec8d648de
--- /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/green-rect.html b/layout/reftests/transform-3d/green-rect.html
new file mode 100644
index 000000000..4e6d13e95
--- /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/mask-layer-1.html b/layout/reftests/transform-3d/mask-layer-1.html
new file mode 100644
index 000000000..834ed4463
--- /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 000000000..23315e224
--- /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 000000000..58a04a45a
--- /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 000000000..bc4f963e6
--- /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 000000000..ef27cb984
--- /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 000000000..38b98b274
--- /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 000000000..ac665fb66
--- /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 000000000..222dd6a82
--- /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/opacity-preserve3d-1-ref.html b/layout/reftests/transform-3d/opacity-preserve3d-1-ref.html
new file mode 100644
index 000000000..8a42fa3c9
--- /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 000000000..b73be4923
--- /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 000000000..80336b5cf
--- /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 000000000..a04b99829
--- /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 000000000..ffacd8277
--- /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 000000000..f7bbf2da8
--- /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 000000000..9fe799b61
--- /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 000000000..9fd672864
--- /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 000000000..ab64e1e9d
--- /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 000000000..37808dd58
--- /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 000000000..f78592e8d
--- /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 000000000..f78592e8d
--- /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 000000000..78411f4cb
--- /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 000000000..90ffcf528
--- /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-origin-1a.html b/layout/reftests/transform-3d/perspective-origin-1a.html
new file mode 100644
index 000000000..c918e05ba
--- /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 000000000..ee934dec1
--- /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 000000000..7c9e0d58a
--- /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 000000000..ff8093816
--- /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 000000000..8271d2d3e
--- /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 000000000..345db2c7f
--- /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 000000000..087e572b7
--- /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 000000000..800756ebb
--- /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-zindex-2.html b/layout/reftests/transform-3d/perspective-zindex-2.html
new file mode 100644
index 000000000..927d761da
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-zindex-2.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>z-index should work correctly for elements with perspective</title>
+
+<style>
+
+#perspective {
+  z-index: 2;
+  perspective: 300px;
+  perspective-origin: top left;
+}
+
+#front {
+  width: 100px;
+  height: 100px;
+  background-color: #00FF00;
+  transform: translateX(0px);
+}
+
+#back {
+  z-index: 1;
+  width: 100px;
+  height: 100px;
+  background-color: #FF0000;
+  transform: translateY(-100px);
+}
+
+</style>
+
+<div id="perspective">
+  <div id="front"></div>
+</div>
+<div id="back"></div>
diff --git a/layout/reftests/transform-3d/perspective-zindex.html b/layout/reftests/transform-3d/perspective-zindex.html
new file mode 100644
index 000000000..3f6a33870
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-zindex.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<meta charset="utf-8">
+<title>z-index should work correctly for elements with perspective</title>
+
+<style>
+
+#perspective {
+  perspective: 300px;
+  perspective-origin: top left;
+}
+
+#front {
+  z-index: 2;
+  width: 100px;
+  height: 100px;
+  background-color: #00FF00;
+  transform: translateX(0px);
+}
+
+#back {
+  z-index: 1;
+  width: 100px;
+  height: 100px;
+  background-color: #FF0000;
+  transform: translateY(-100px);
+}
+
+</style>
+
+<div id="perspective">
+  <div id="front"></div>
+  <div id="back"></div>
+</div>
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 000000000..9d7bf6434
--- /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 000000000..005ec797a
--- /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 000000000..ef535fcce
--- /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 000000000..1a396bcc8
--- /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 000000000..3bdd7ab8d
--- /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 000000000..36d1827de
--- /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 000000000..cc8ff8a0a
--- /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 000000000..6cfe1e3bd
--- /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 000000000..2590d9df3
--- /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 000000000..a28f814e9
--- /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 000000000..0bf0cbe4c
--- /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 000000000..2bdd5c539
--- /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 000000000..03e9e7ed0
--- /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 000000000..f24abbe73
--- /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 000000000..0b604ba5d
--- /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 000000000..cb17ddba5
--- /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 000000000..d962d4fd4
--- /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-clipped.html b/layout/reftests/transform-3d/preserve3d-clipped.html
new file mode 100644
index 000000000..4647fd56d
--- /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/preserves3d-nested-ref.html b/layout/reftests/transform-3d/preserves3d-nested-ref.html
new file mode 100644
index 000000000..b8a744eb7
--- /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 000000000..673a982e9
--- /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-stylo.list b/layout/reftests/transform-3d/reftest-stylo.list
new file mode 100644
index 000000000..c153fc4fc
--- /dev/null
+++ b/layout/reftests/transform-3d/reftest-stylo.list
@@ -0,0 +1,93 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+== scalez-1a.html scalez-1a.html
+== rotatey-1a.html rotatey-1a.html
+== rotatex-1a.html rotatex-1a.html
+# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg)
+== scalezrotatex-1.html scalezrotatex-1.html
+# Check that the perspectve() transform function results in some visual changes
+== rotatex-perspective-1a.html rotatex-perspective-1a.html
+# Check that -moz-perspective results in visual changes to child transformed elements
+== rotatex-perspective-1b.html rotatex-perspective-1b.html
+# -moz-perspective should only apply to child elements
+# == rotatex-perspective-1c.html rotatex-perspective-1c.html
+== rotatex-perspective-3a.html rotatex-perspective-3a.html
+== scalez-1a.html scalez-1a.html
+fails fuzzy-if(gtkWidget||winWidget,8,376) fuzzy-if(Android,8,441) fuzzy-if(cocoaWidget,17,4) fuzzy-if(skiaContent,16,250) == preserve3d-1a.html preserve3d-1a.html
+== preserve3d-1b.html preserve3d-1b.html
+== preserve3d-clipped.html preserve3d-clipped.html
+== preserve3d-2a.html preserve3d-2a.html
+== preserve3d-2b.html preserve3d-2b.html
+== preserve3d-2c.html preserve3d-2c.html
+== preserve3d-2d.html preserve3d-2d.html
+== preserve3d-3a.html preserve3d-3a.html
+== preserve3d-4a.html preserve3d-4a.html
+fails fuzzy-if(gtkWidget,4,200) fuzzy-if(Android,4,300) fuzzy-if(winWidget&&!layersGPUAccelerated,2,100) fuzzy-if(skiaContent,16,100) == preserve3d-5a.html preserve3d-5a.html
+== preserve3d-6a.html preserve3d-6a.html
+== scale3d-z.html scale3d-z.html
+fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all.html scale3d-all.html
+# subpixel AA
+fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all-separate.html scale3d-all-separate.html
+# subpixel AA
+== scale3d-xz.html scale3d-xz.html
+== translatez-1a.html translatez-1a.html
+== translatez-1b.html translatez-1b.html
+== translate3d-1a.html translate3d-1a.html
+fails fuzzy-if(skiaContent,1,4) == matrix3d-1a.html matrix3d-1a.html
+== matrix3d-2a.html matrix3d-2a.html
+== rotate3d-1a.html rotate3d-1a.html
+== rotate3d-2a.html rotate3d-2a.html
+== backface-visibility-1a.html backface-visibility-1a.html
+== backface-visibility-1b.html backface-visibility-1b.html
+== backface-visibility-1c.html backface-visibility-1c.html
+fuzzy-if(winWidget&&!layersGPUAccelerated,1,251) == backface-visibility-2.html backface-visibility-2.html
+== backface-visibility-3.html backface-visibility-3.html
+== perspective-clipping-1.html perspective-clipping-1.html
+== perspective-origin-1a.html perspective-origin-1a.html
+== perspective-origin-1b.html perspective-origin-1b.html
+random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2a.html
+# subpixel AA, bug 732568
+fuzzy-if(winWidget&&!layersGPUAccelerated,1,61) == perspective-origin-3a.html perspective-origin-3a.html
+== perspective-origin-4a.html perspective-origin-4a.html
+== perspective-zindex.html perspective-zindex.html
+== perspective-zindex-2.html perspective-zindex-2.html
+== sorting-1a.html sorting-1a.html
+# Parallel planes, different z depth
+== sorting-2a.html sorting-2a.html
+# Parallel planes, same z depth (shouldn't be sorted!)
+== sorting-2b.html sorting-2b.html
+== sorting-3a.html sorting-3a.html
+# Different, but equivalent (for the given transform) transform origins
+== rotatex-transformorigin-1a.html rotatex-transformorigin-1a.html
+fails fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),1,86) == overflow-hidden-1a.html overflow-hidden-1a.html
+== transform-style-flat-1a.html transform-style-flat-1a.html
+== willchange-containing-block.html?willchange willchange-containing-block.html?willchange
+== willchange-containing-block.html?willchange willchange-containing-block.html?willchange
+fuzzy-if(winWidget&&!layersGPUAccelerated,1,606) == scroll-perspective-1.html scroll-perspective-1.html
+# Bugs
+fails-if(!layersGPUAccelerated) == 1035611-1.html 1035611-1.html
+# Bug 1072898 for !layersGPUAccelerated failures
+== 1157984-1.html 1157984-1.html
+# Bug 1157984
+== animate-cube-radians.html animate-cube-radians.html
+# subpixel AA
+fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,16,6) fuzzy-if(Mulet,16,9) == animate-cube-radians-zoom.html animate-cube-radians-zoom.html
+== animate-cube-radians-ref.html animate-cube-radians-ref.html
+== animate-cube-degrees.html animate-cube-degrees.html
+# subpixel AA
+== animate-cube-degrees-zoom.html animate-cube-degrees-zoom.html
+== animate-cube-degrees-ref.html animate-cube-degrees-ref.html
+fails fuzzy-if(B2G||Android||OSX==1010,143,100) fuzzy-if(winWidget||OSX<1010,141,100) fuzzy-if(gtkWidget,128,100) == preserves3d-nested.html preserves3d-nested.html
+skip == animate-preserve3d-parent.html animate-preserve3d-parent.html
+# intermittently fuzzy on Mac
+skip == animate-preserve3d-child.html animate-preserve3d-child.html
+# intermittently fuzzy on Mac
+skip == animate-backface-hidden.html animate-backface-hidden.html
+== 1245450-1.html 1245450-1.html
+== opacity-preserve3d-1.html opacity-preserve3d-1.html
+== opacity-preserve3d-2.html opacity-preserve3d-2.html
+== opacity-preserve3d-3.html opacity-preserve3d-3.html
+== opacity-preserve3d-4.html opacity-preserve3d-4.html
+== snap-perspective-1.html snap-perspective-1.html
+== mask-layer-1.html mask-layer-1.html
+== mask-layer-2.html mask-layer-2.html
+== mask-layer-3.html mask-layer-3.html
diff --git a/layout/reftests/transform-3d/reftest.list b/layout/reftests/transform-3d/reftest.list
new file mode 100644
index 000000000..87b882f83
--- /dev/null
+++ b/layout/reftests/transform-3d/reftest.list
@@ -0,0 +1,84 @@
+== scalez-1a.html scalez-1-ref.html
+== rotatey-1a.html rotatey-1-ref.html
+== rotatex-1a.html rotatex-1-ref.html
+# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg)
+== scalezrotatex-1.html scalezrotatex-1-ref.html
+# Check that the perspectve() transform function results in some visual changes
+!= rotatex-perspective-1a.html rotatex-1-ref.html
+# Check that -moz-perspective results in visual changes to child transformed elements
+!= rotatex-perspective-1b.html rotatex-1-ref.html
+# -moz-perspective should only apply to child elements
+== rotatex-perspective-1c.html rotatex-1-ref.html
+== rotatex-perspective-3a.html rotatex-perspective-3-ref.html
+== scalez-1a.html scalez-1-ref.html
+fuzzy-if(gtkWidget||winWidget,8,376) fuzzy-if(Android,8,441) fuzzy-if(cocoaWidget,17,4) fuzzy-if(skiaContent,16,286) == preserve3d-1a.html preserve3d-1-ref.html
+== preserve3d-1b.html about:blank
+== preserve3d-clipped.html about:blank
+== preserve3d-2a.html preserve3d-2-ref.html
+== preserve3d-2b.html preserve3d-2-ref.html
+== preserve3d-2c.html preserve3d-2-ref.html
+== preserve3d-2d.html preserve3d-2-ref.html
+== preserve3d-3a.html preserve3d-3-ref.html
+== preserve3d-4a.html about:blank
+fuzzy-if(gtkWidget,4,200) fuzzy-if(Android,4,300) fuzzy-if(winWidget&&!layersGPUAccelerated,2,100) fuzzy-if(skiaContent,16,100) == preserve3d-5a.html preserve3d-5-ref.html
+== preserve3d-6a.html preserve3d-6-ref.html
+== scale3d-z.html scalez-1-ref.html
+fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all.html scale3d-1-ref.html # subpixel AA
+fuzzy-if(winWidget,102,580) fuzzy-if(d2d,143,681) fuzzy-if(OSX>=1008,224,924) == scale3d-all-separate.html scale3d-1-ref.html # subpixel AA
+== scale3d-xz.html scale3d-1-ref.html
+== translatez-1a.html translatez-1-ref.html
+!= translatez-1b.html translatez-1-ref.html
+== translate3d-1a.html translate3d-1-ref.html
+fuzzy-if(skiaContent,1,4) == matrix3d-1a.html matrix3d-1-ref.html
+== matrix3d-2a.html matrix3d-2-ref.html
+== rotate3d-1a.html rotatex-1-ref.html
+== rotate3d-2a.html rotatey-1-ref.html
+!= backface-visibility-1a.html about:blank
+== backface-visibility-1b.html about:blank
+== backface-visibility-1c.html about:blank
+fuzzy-if(winWidget&&!layersGPUAccelerated,1,251) == backface-visibility-2.html backface-visibility-2-ref.html
+== backface-visibility-3.html backface-visibility-3-ref.html
+== perspective-clipping-1.html perspective-clipping-1-ref.html
+!= perspective-origin-1a.html rotatex-perspective-1a.html
+== perspective-origin-1b.html perspective-origin-1a.html
+fuzzy(3,99) random-if(Android&&!browserIsRemote) == perspective-origin-2a.html perspective-origin-2-ref.html # subpixel AA, bug 732568
+fuzzy-if(winWidget&&!layersGPUAccelerated,1,61) == perspective-origin-3a.html perspective-origin-3-ref.html
+== perspective-origin-4a.html perspective-origin-4-ref.html
+== perspective-zindex.html green-rect.html
+== perspective-zindex-2.html green-rect.html
+!= sorting-1a.html sorting-1-ref.html
+# Parallel planes, different z depth
+== sorting-2a.html sorting-2-ref.html
+# Parallel planes, same z depth (shouldn't be sorted!)
+== sorting-2b.html sorting-2-ref.html
+== sorting-3a.html green-rect.html
+# Different, but equivalent (for the given transform) transform origins
+== rotatex-transformorigin-1a.html rotatex-transformorigin-1-ref.html
+fuzzy-if((gtkWidget&&layersOMTC)||(winWidget&&!layersGPUAccelerated),1,86) == overflow-hidden-1a.html overflow-hidden-1-ref.html
+== transform-style-flat-1a.html transform-style-flat-1-ref.html
+== willchange-containing-block.html?willchange willchange-containing-block.html?ref
+!= willchange-containing-block.html?willchange willchange-containing-block.html?noblock
+fuzzy-if(winWidget&&!layersGPUAccelerated,1,606) == scroll-perspective-1.html scroll-perspective-1-ref.html
+# Bugs
+fails-if(!layersGPUAccelerated) == 1035611-1.html 1035611-1-ref.html # Bug 1072898 for !layersGPUAccelerated failures
+!= 1157984-1.html about:blank # Bug 1157984
+fuzzy(3,99) == animate-cube-radians.html animate-cube-radians-ref.html # subpixel AA
+fuzzy(3,99) fuzzy-if(/^Windows\x20NT\x206\.1/.test(http.oscpu)&&!layersGPUAccelerated,16,6) == animate-cube-radians-zoom.html animate-cube-radians-zoom-ref.html
+!= animate-cube-radians-ref.html animate-cube-radians-zoom-ref.html
+fuzzy(3,99) == animate-cube-degrees.html animate-cube-degrees-ref.html # subpixel AA
+== animate-cube-degrees-zoom.html animate-cube-degrees-zoom-ref.html
+!= animate-cube-degrees-ref.html animate-cube-degrees-zoom-ref.html
+fuzzy-if(gtkWidget,128,100) fuzzy-if(Android||OSX==1010||(gtkWidget&&layersGPUAccelerated),143,100) fuzzy-if(winWidget||OSX<1010,141,100) == preserves3d-nested.html preserves3d-nested-ref.html
+fuzzy-if(cocoaWidget,128,9) == animate-preserve3d-parent.html animate-preserve3d-ref.html # intermittently fuzzy on Mac
+fuzzy-if(cocoaWidget,128,9) == animate-preserve3d-child.html animate-preserve3d-ref.html # intermittently fuzzy on Mac
+== animate-backface-hidden.html about:blank
+== 1245450-1.html green-rect.html
+fuzzy(1,2000) == opacity-preserve3d-1.html opacity-preserve3d-1-ref.html
+fuzzy(1,15000) == opacity-preserve3d-2.html opacity-preserve3d-2-ref.html
+fuzzy(1,10000) == opacity-preserve3d-3.html opacity-preserve3d-3-ref.html
+fuzzy(1,10000) == opacity-preserve3d-4.html opacity-preserve3d-4-ref.html
+== opacity-preserve3d-5.html opacity-preserve3d-5-ref.html
+== snap-perspective-1.html snap-perspective-1-ref.html
+== mask-layer-1.html mask-layer-ref.html
+== mask-layer-2.html mask-layer-ref.html
+== mask-layer-3.html mask-layer-ref.html
diff --git a/layout/reftests/transform-3d/rotate3d-1a.html b/layout/reftests/transform-3d/rotate3d-1a.html
new file mode 100644
index 000000000..ba2d222e4
--- /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 000000000..edf3c1be4
--- /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 000000000..0ee28cfe8
--- /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 000000000..f0c6b0183
--- /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 000000000..0b8671e7a
--- /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 000000000..d8be19953
--- /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 000000000..9cae30696
--- /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 000000000..c0691b77f
--- /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 000000000..593ca82bb
--- /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 000000000..11a2dcf2d
--- /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 000000000..2c54cef32
--- /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 000000000..0b3339824
--- /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 000000000..359105b01
--- /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 000000000..664d1d4f3
--- /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 000000000..1c0fe5014
--- /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 000000000..afe4639aa
--- /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 000000000..81d090979
--- /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 000000000..e168dabc2
--- /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 000000000..6efdc2681
--- /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 000000000..5661addc1
--- /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 000000000..2f250fd78
--- /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 000000000..2cc10c840
--- /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 000000000..b314133f8
--- /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 000000000..2c17c0254
--- /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 000000000..ca84e9e73
--- /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 000000000..a5bd65f08
--- /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 000000000..340d2eb0b
--- /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 000000000..98414f843
--- /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 000000000..cb34eaf4e
--- /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 000000000..988ba323c
--- /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 000000000..5828be845
--- /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 000000000..00c62b5ce
--- /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/transform-style-flat-1-ref.html b/layout/reftests/transform-3d/transform-style-flat-1-ref.html
new file mode 100644
index 000000000..e73834bb6
--- /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 000000000..946dc28a3
--- /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 000000000..d3b919e99
--- /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 000000000..418d12786
--- /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 000000000..e4a00aca1
--- /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 000000000..a19a128b2
--- /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 000000000..7e6f1dead
--- /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 000000000..95de2c74d
--- /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>
-- 
cgit v1.2.3