Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /layout/reftests/transform
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
164 files changed, 2327 insertions, 0 deletions
diff --git a/layout/reftests/transform/601894-1.html b/layout/reftests/transform/601894-1.html
new file mode 100644
index 000000000..28af1fa28
--- /dev/null
+++ b/layout/reftests/transform/601894-1.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html>
+  <body style="background: -moz-linear-gradient(lime, lime) fixed; overflow: hidden;">
+    <div style="position: absolute; left: 21.0138px; top: 507.24px; z-index: 17567; -moz-transform: scale(8);">
+      <div style="height: 128px; left: -64px; position: absolute; top: -64px; visibility: visible; width: 128px;"></div>
+    </div>
+    <div style="position: absolute; left: 640.572px; top: 386.574px; -moz-transform: scale(1); z-index: -157863;">
+      <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+    </div>
+    <div style="position: absolute; left: 568.346px; top: 582.669px; -moz-transform: scale(1); z-index: -62592;">
+      <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+    </div>
+    <div style="position: absolute; left: 573.27px; top: 168.861px; -moz-transform: scale(1); z-index: -137632;">
+      <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+    </div>
+    <div style="position: absolute; left: 519.063px; top: 182.9px; -moz-transform: scale(1); z-index: -50558;">
+      <div style="position: absolute; top: -64px; left: -64px; width: 128px; height: 128px; visibility: visible;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/601894-2.html b/layout/reftests/transform/601894-2.html
new file mode 100644
index 000000000..7bf87215b
--- /dev/null
+++ b/layout/reftests/transform/601894-2.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  <body style="background: -moz-linear-gradient(lime, lime) fixed;">
+    <div style="position: absolute; left: 0; top: 0; -moz-transform: scale(1)">
+      <div style="position: absolute; width: 200px; height: 200px;"></div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/601894-ref.html b/layout/reftests/transform/601894-ref.html
new file mode 100644
index 000000000..f4e6cdae8
--- /dev/null
+++ b/layout/reftests/transform/601894-ref.html
@@ -0,0 +1,2 @@
+<!DOCTYPE html>
+<body style="background: lime;">
diff --git a/layout/reftests/transform/830299-1-ref.html b/layout/reftests/transform/830299-1-ref.html
new file mode 100644
index 000000000..d5cf00710
--- /dev/null
+++ b/layout/reftests/transform/830299-1-ref.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en-US">
+<head>
+	<title>Testcase, bug 830299</title>
+	<meta charset=UTF-8>
+	<style type="text/css">
+
+	html { margin: 1px; padding: 2px }
+	body { margin: 4px; padding: 8px }
+
+	#outer {
+		position: absolute;
+		top: 3px; left: 5px;
+		width: 200px; height: 200px;
+		background: yellow;
+	}
+	
+	#inner {
+		position: absolute;
+		top: 7px; left: 9px;
+		width: 100px; height: 100px;
+		background: aqua;
+	}
+
+	</style>
+</head>
+<body>
+
+<div id="outer">
+  <div id="inner">inner</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/830299-1.html b/layout/reftests/transform/830299-1.html
new file mode 100644
index 000000000..a34dcd8d4
--- /dev/null
+++ b/layout/reftests/transform/830299-1.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en-US" class="reftest-wait">
+<head>
+	<title>Testcase, bug 830299</title>
+	<meta charset=UTF-8>
+	<style type="text/css">
+
+	html { margin: 1px; padding: 2px }
+	body { margin: 4px; padding: 8px }
+
+	#outer {
+		position: absolute;
+		overflow: hidden;
+		transform: translateX(0px);
+		top: 3px; left: 5px;
+		width: 200px; height: 200px;
+		background: yellow;
+	}
+	
+	#inner {
+		position: fixed;
+		top: 7px; left: 9px;
+		width: 100px; height: 100px;
+		background: aqua;
+	}
+
+	</style>
+	<script type="text/javascript">
+
+	window.addEventListener("load", function(event) {
+	                        	setTimeout(function() {
+	                        	           	document.getElementById("inner").style.display = "";
+	                        	           	document.documentElement.removeAttribute("class");
+	                        	           }, 100);
+	                        }, false);
+
+	</script>
+</head>
+<body>
+
+<div id="outer">
+  <div id="inner" style="display:none">inner</div>
+</div>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1-ref.html b/layout/reftests/transform/abspos-1-ref.html
new file mode 100644
index 000000000..337c849b5
--- /dev/null
+++ b/layout/reftests/transform/abspos-1-ref.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; position: relative; left: 50px; top: 50px; background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1a.html b/layout/reftests/transform/abspos-1a.html
new file mode 100644
index 000000000..a999bee74
--- /dev/null
+++ b/layout/reftests/transform/abspos-1a.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px); background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1b.html b/layout/reftests/transform/abspos-1b.html
new file mode 100644
index 000000000..54c37fdf6
--- /dev/null
+++ b/layout/reftests/transform/abspos-1b.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1c.html b/layout/reftests/transform/abspos-1c.html
new file mode 100644
index 000000000..d3cc9a4c2
--- /dev/null
+++ b/layout/reftests/transform/abspos-1c.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; right: -150px; bottom: 0px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1d.html b/layout/reftests/transform/abspos-1d.html
new file mode 100644
index 000000000..47ac1b9dc
--- /dev/null
+++ b/layout/reftests/transform/abspos-1d.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -150px; bottom: 0px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1e.html b/layout/reftests/transform/abspos-1e.html
new file mode 100644
index 000000000..310d33e4b
--- /dev/null
+++ b/layout/reftests/transform/abspos-1e.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; right: -151px; bottom: 0px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1f.html b/layout/reftests/transform/abspos-1f.html
new file mode 100644
index 000000000..2b9d954e6
--- /dev/null
+++ b/layout/reftests/transform/abspos-1f.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px); background-color: gold; display: table">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: absolute; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/abspos-1g.html b/layout/reftests/transform/abspos-1g.html
new file mode 100644
index 000000000..32cf19e0c
--- /dev/null
+++ b/layout/reftests/transform/abspos-1g.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width: 100px; height: 200px; -moz-transform: translate(50px, 50px) ;background-color: gold;display: inline-table">
+    A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
+    <div style="background-color: navy; color: gold; width: 200px; height: 100px; position: fixed; left: 50px; top: 100px;">
+      0 1 2 3 4 5 6 7 8 9
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html
new file mode 100644
index 000000000..3f2974597
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-1-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+  will-change: transform;
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-1.html b/layout/reftests/transform/animate-layer-scale-inherit-1.html
new file mode 100644
index 000000000..b04c4a8fa
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-1.html
@@ -0,0 +1,27 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+#outer { transform: scale(5) }
+#inner { animation: HoldTransform linear infinite 1s }
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+  from, to { transform: scale(0.2) }
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html b/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html
new file mode 100644
index 000000000..714f6f222
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-2-ref.html
@@ -0,0 +1,24 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+  opacity: 0.6;
+  will-change: transform, opacity;
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-2.html b/layout/reftests/transform/animate-layer-scale-inherit-2.html
new file mode 100644
index 000000000..f7297d121
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-2.html
@@ -0,0 +1,31 @@
+<!DOCTYPE HTML>
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+#outer { transform: scale(5) }
+#inner { animation: HoldTransform linear infinite 1s,
+                    HoldOpacity   linear infinite 1s; }
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+  from, to { transform: scale(0.2) }
+}
+@keyframes HoldOpacity {
+  from, to { opacity: 0.6 }
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
diff --git a/layout/reftests/transform/animate-layer-scale-inherit-3.html b/layout/reftests/transform/animate-layer-scale-inherit-3.html
new file mode 100644
index 000000000..666920955
--- /dev/null
+++ b/layout/reftests/transform/animate-layer-scale-inherit-3.html
@@ -0,0 +1,51 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<title>Testcase, bug 1122526</title>
+<style>
+
+#outer, #inner {
+  display: inline-block;
+  background: white;
+  color: black;
+}
+/*
+ * We use step-end with reverse direction to paint the initial state
+ * on the first frame, and step to the last state on the next frame.
+ */
+#inner { animation: HoldTransform step-end 100s reverse }
+#inner {
+  vertical-align: top;
+  height: 100px;
+  width: 100px;
+  background: repeating-linear-gradient(to top left, yellow, blue 10px);
+}
+@keyframes HoldTransform {
+  /* need to initially rasterize at non-identity transform to hit the
+   * bug at all
+   * NOTE: These keyframes will be used reverse direction.
+   */
+  0% { transform: none }
+  100% { transform: scale(0.2) }
+}
+
+</style>
+
+<div id="outer">
+  <div id="inner">
+  </div>
+</div>
+
+<script>
+
+document.getElementById("inner").addEventListener("animationstart", StartListener, false);
+
+function StartListener(event) {
+  // Animation should be zoomed to transform:none after the first frame.
+  requestAnimationFrame(RemoveReftestWait);
+}
+
+function RemoveReftestWait() {
+  document.documentElement.classList.remove("reftest-wait");
+}
+
+</script>
diff --git a/layout/reftests/transform/compound-1-fail.html b/layout/reftests/transform/compound-1-fail.html
new file mode 100644
index 000000000..dd8b75654
--- /dev/null
+++ b/layout/reftests/transform/compound-1-fail.html
@@ -0,0 +1,31 @@
+<html>
+<head>
+  <style type="text/css">
+    div.test
+    {
+    background-color: gold;
+    width:200px;
+    height:100px;
+    border: 1px solid black;
+    }
+    div
+    {
+    -moz-transform-origin: top left;
+    }
+  </style>
+</head>
+<body>
+  <div style="position:relative; left:400px; top:200px;">
+    <div style="-moz-transform: skew(15deg);">
+      <div style="-moz-transform: rotate(90deg);">
+	<div style="-moz-transform: scale(2);">
+	  <div style="-moz-transform: translate(100px);">
+	    <div class="test">
+	    </div>
+	  </div>
+	</div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/compound-1-ref.html b/layout/reftests/transform/compound-1-ref.html
new file mode 100644
index 000000000..48a47117c
--- /dev/null
+++ b/layout/reftests/transform/compound-1-ref.html
@@ -0,0 +1,35 @@
+<html>
+<head>
+  <style type="text/css">
+    div.test
+    {
+    background-color: gold;
+    width:200px;
+    height:100px;
+    border: 1px solid black;
+    }
+    div
+    {
+    -moz-transform-origin: top left;
+    }
+    body
+    {
+    overflow:hidden;
+    }
+  </style>
+</head>
+<body>
+  <div style="position:relative; left:400px; top:200px;">
+    <div style="-moz-transform: translate(100px);">
+      <div style="-moz-transform: scale(2);">
+	<div style="-moz-transform: rotate(90deg);">
+	  <div style="-moz-transform: skew(15deg);">
+	    <div class="test">
+	    </div>
+	  </div>
+	</div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/compound-1a.html b/layout/reftests/transform/compound-1a.html
new file mode 100644
index 000000000..31c677b2e
--- /dev/null
+++ b/layout/reftests/transform/compound-1a.html
@@ -0,0 +1,27 @@
+<html>
+<head>
+  <style type="text/css">
+    div.test
+    {
+    background-color: gold;
+    width:200px;
+    height:100px;
+    border: 1px solid black;
+    }
+    div
+    {
+    -moz-transform-origin: top left;
+    }
+    body
+    {
+    overflow:hidden;
+    }
+  </style>
+</head>
+<body>
+  <div style="position:relative; left:400px; top:200px;">
+    <div class="test" style="-moz-transform: translate(100px) scale(2) rotate(90deg) skew(15deg);">
+    </div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/descendant-1-ref.html b/layout/reftests/transform/descendant-1-ref.html
new file mode 100644
index 000000000..827090c7e
--- /dev/null
+++ b/layout/reftests/transform/descendant-1-ref.html
@@ -0,0 +1,21 @@
+<html>
+<head>
+  <style>
+    #div1 {
+      background: green;
+      height: 100px;
+      width: 100px;
+    }
+    span {
+      background: yellow;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <span style="position: relative; top: 150px; left: 20px">span 1</span>
+  </div>
+  <span>span 2</span>
+  
+</body>
+</html>
diff --git a/layout/reftests/transform/descendant-1.html b/layout/reftests/transform/descendant-1.html
new file mode 100644
index 000000000..6de49fc5f
--- /dev/null
+++ b/layout/reftests/transform/descendant-1.html
@@ -0,0 +1,23 @@
+<html>
+<head>
+  <style>
+    #div1 {
+      background: green;
+      height: 100px;
+      width: 100px;
+    }
+    span {
+      background: yellow;
+    }
+    #div1 div {-moz-transform: translate(20px, 150px);
+               -moz-transform-origin: 0% 0%;
+    }
+  </style>
+</head>
+<body>
+  <div id="div1">
+    <div><span>span 1</span></div>
+  </div>
+  <span>span 2</span>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html
new file mode 100644
index 000000000..e2d067e1f
--- /dev/null
+++ b/layout/reftests/transform/dynamic-add-without-change-cb-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE html>
+<html>
+  The green square below should be centered.
+  <div style="width: 400px; height: 400px; position: absolute;
+              perspective: 600px; left: calc(50% - 200px);
+              top: calc(50% - 200px); background: green;">
+  </div>
+</html>
diff --git a/layout/reftests/transform/dynamic-add-without-change-cb-1.html b/layout/reftests/transform/dynamic-add-without-change-cb-1.html
new file mode 100644
index 000000000..7b8307b4f
--- /dev/null
+++ b/layout/reftests/transform/dynamic-add-without-change-cb-1.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  The green square below should be centered.
+  <div style="width: 400px; height: 400px; position: absolute;
+              perspective: 600px; left: 50%; top: 50%; background: green;">
+  </div>
+  <script>
+    document.body.offsetWidth;
+    document.querySelector("div").style.transform = "translate(-50%, -50%)";
+  </script>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1-ref.html b/layout/reftests/transform/dynamic-addremove-1-ref.html
new file mode 100644
index 000000000..271b1a647
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1-ref.html
@@ -0,0 +1,8 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<div style="position:absolute; left:80px; top:20px; width:100px; height:100px; background:yellow">
+  <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; background:orange"></div>
+</div>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1a.html b/layout/reftests/transform/dynamic-addremove-1a.html
new file mode 100644
index 000000000..358cd938b
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1a.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+  <div style="position:absolute; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+</div>
+<script>
+function doTest() {
+  document.getElementById("t").style.transform = "translate(80px,20px)";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest, false);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1b.html b/layout/reftests/transform/dynamic-addremove-1b.html
new file mode 100644
index 000000000..0ce3547c1
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1b.html
@@ -0,0 +1,15 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+  <div style="position:fixed; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+</div>
+<script>
+function doTest() {
+  document.getElementById("t").style.transform = "translate(80px,20px)";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest, false);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-1c.html b/layout/reftests/transform/dynamic-addremove-1c.html
new file mode 100644
index 000000000..c53596914
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-1c.html
@@ -0,0 +1,17 @@
+<!DOCTYPE HTML>
+<html class="reftest-wait">
+<body style="margin:0;">
+<div id="t" style="width:100px; height:100px; background:yellow;">
+  <div style="float:left;">
+    <div style="position:fixed; left:50px; top:50px; width:100px; height:100px; background:orange;"></div>
+  </div>
+</div>
+<script>
+function doTest() {
+  document.getElementById("t").style.transform = "translate(80px,20px)";
+  document.documentElement.removeAttribute("class");
+}
+window.addEventListener("MozReftestInvalidate", doTest, false);
+</script>
+</body>
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-2-ref.html b/layout/reftests/transform/dynamic-addremove-2-ref.html
new file mode 100644
index 000000000..d92058201
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-2-ref.html
@@ -0,0 +1,3 @@
+<!DOCTYPE html>
+<html style="background: green">
+</html>
diff --git a/layout/reftests/transform/dynamic-addremove-2.html b/layout/reftests/transform/dynamic-addremove-2.html
new file mode 100644
index 000000000..b6718b29a
--- /dev/null
+++ b/layout/reftests/transform/dynamic-addremove-2.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html style="background: red">
+  <div style="transform: translate3d(0, 0, 0); position: absolute;
+              top: 0; left: 0; width: 100px; height: 100px">
+    <div style="position: absolute">
+      <div style="position: fixed; width: 100%; height: 100%; top: 0; left: 0;
+                  background: green">
+      </div>
+    </div>
+  </div>
+  <script>
+    onload = function() {
+      document.body.offsetWidth;
+      document.querySelector("div").style.transform = "none";
+    }
+  </script>
+</html>
diff --git a/layout/reftests/transform/dynamic-inherit-1-ref.html b/layout/reftests/transform/dynamic-inherit-1-ref.html
new file mode 100644
index 000000000..f0f7eae47
--- /dev/null
+++ b/layout/reftests/transform/dynamic-inherit-1-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+<title>Test for bug 521720</title>
+<style type="text/css">
+
+p {
+  -moz-transform-origin: inherit;
+  -moz-transform: scale(2);
+  height: 10px;
+  width: 10px;
+  background: green;
+  margin: 50px;
+}
+
+</style>
+<head>
+<body>
+<div id="a">
+<p style="font-size: 10px"></p>
+</div>
+</body>
diff --git a/layout/reftests/transform/dynamic-inherit-1.html b/layout/reftests/transform/dynamic-inherit-1.html
new file mode 100644
index 000000000..e04512a6f
--- /dev/null
+++ b/layout/reftests/transform/dynamic-inherit-1.html
@@ -0,0 +1,21 @@
+<!DOCTYPE HTML>
+<head>
+<title>Test for bug 521720</title>
+<style type="text/css">
+
+p {
+  -moz-transform-origin: inherit;
+  -moz-transform: scale(2);
+  height: 10px;
+  width: 10px;
+  background: green;
+  margin: 50px;
+}
+
+</style>
+<head>
+<body onload="document.getElementById('a').style.removeProperty('-moz-transform-origin');">
+<div id="a" style="-moz-transform-origin: 10px 10px">
+<p style="font-size: 10px"></p>
+</div>
+</body>
diff --git a/layout/reftests/transform/iframe-1-ref.html b/layout/reftests/transform/iframe-1-ref.html
new file mode 100644
index 000000000..43c76457a
--- /dev/null
+++ b/layout/reftests/transform/iframe-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+  <head>
+    <style>
+      iframe {
+        overflow: hidden;
+        height: 200px;
+        width: 300px;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe src="about:blank">
+    </iframe>
+  </body>
+</html>
diff --git a/layout/reftests/transform/iframe-1.html b/layout/reftests/transform/iframe-1.html
new file mode 100644
index 000000000..6a2b621df
--- /dev/null
+++ b/layout/reftests/transform/iframe-1.html
@@ -0,0 +1,14 @@
+<html>
+  <head>
+    <style>
+      iframe {
+        height: 200px;
+        width: 300px;
+      }
+    </style>
+  </head>
+  <body>
+    <iframe scrolling="no" src="iframe-transform.html">
+    </iframe>
+  </body>
+</html>
diff --git a/layout/reftests/transform/iframe-transform.html b/layout/reftests/transform/iframe-transform.html
new file mode 100644
index 000000000..ffe15e78d
--- /dev/null
+++ b/layout/reftests/transform/iframe-transform.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <style>
+      div {
+        height: 200px;
+        width: 200px;
+        background: green;
+        -moz-transform: translate(500px, 500px);
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/inline-1-ref.html b/layout/reftests/transform/inline-1-ref.html
new file mode 100644
index 000000000..84a2f6dd4
--- /dev/null
+++ b/layout/reftests/transform/inline-1-ref.html
@@ -0,0 +1,2 @@
+<!doctype html>
+This is some text<br>that is not transformed
diff --git a/layout/reftests/transform/inline-1a.html b/layout/reftests/transform/inline-1a.html
new file mode 100644
index 000000000..fab499d72
--- /dev/null
+++ b/layout/reftests/transform/inline-1a.html
@@ -0,0 +1,3 @@
+<!doctype html>
+This is some <span style="-moz-transform:rotate(180deg)">text<br>
+that is</span> not transformed
diff --git a/layout/reftests/transform/matrix-1-ref.html b/layout/reftests/transform/matrix-1-ref.html
new file mode 100644
index 000000000..0b24d517b
--- /dev/null
+++ b/layout/reftests/transform/matrix-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: translatex(100px); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-1a.html b/layout/reftests/transform/matrix-1a.html
new file mode 100644
index 000000000..95307ec19
--- /dev/null
+++ b/layout/reftests/transform/matrix-1a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: matrix(1, 0, 0, 1, 100, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-2-ref.html b/layout/reftests/transform/matrix-2-ref.html
new file mode 100644
index 000000000..0bb5f10b5
--- /dev/null
+++ b/layout/reftests/transform/matrix-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: translatey(100px); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-2a.html b/layout/reftests/transform/matrix-2a.html
new file mode 100644
index 000000000..26c195872
--- /dev/null
+++ b/layout/reftests/transform/matrix-2a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: matrix(1, 0, 0, 1, 0, 100); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-3-ref.html b/layout/reftests/transform/matrix-3-ref.html
new file mode 100644
index 000000000..7eaa66a60
--- /dev/null
+++ b/layout/reftests/transform/matrix-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: translatex(47%); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-3a.html b/layout/reftests/transform/matrix-3a.html
new file mode 100644
index 000000000..36949de86
--- /dev/null
+++ b/layout/reftests/transform/matrix-3a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: matrix(1, 0, 0, 1, 47, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-4-ref.html b/layout/reftests/transform/matrix-4-ref.html
new file mode 100644
index 000000000..31627a0cb
--- /dev/null
+++ b/layout/reftests/transform/matrix-4-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: translatey(23%); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-4a.html b/layout/reftests/transform/matrix-4a.html
new file mode 100644
index 000000000..1fde9f6c5
--- /dev/null
+++ b/layout/reftests/transform/matrix-4a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: matrix(1, 0, 0, 1, 0, 23); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-5-ref.html b/layout/reftests/transform/matrix-5-ref.html
new file mode 100644
index 000000000..04e7730ce
--- /dev/null
+++ b/layout/reftests/transform/matrix-5-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: skewx(45deg); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-5a.html b/layout/reftests/transform/matrix-5a.html
new file mode 100644
index 000000000..89a7c9c1a
--- /dev/null
+++ b/layout/reftests/transform/matrix-5a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: matrix(1, 0, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-6-ref.html b/layout/reftests/transform/matrix-6-ref.html
new file mode 100644
index 000000000..a3846372c
--- /dev/null
+++ b/layout/reftests/transform/matrix-6-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: skewy(45deg); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-6a.html b/layout/reftests/transform/matrix-6a.html
new file mode 100644
index 000000000..50f0c3dd5
--- /dev/null
+++ b/layout/reftests/transform/matrix-6a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: matrix(1, 1, 0, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-7-ref.html b/layout/reftests/transform/matrix-7-ref.html
new file mode 100644
index 000000000..460f5d645
--- /dev/null
+++ b/layout/reftests/transform/matrix-7-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: scale(2, 4); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix-7a.html b/layout/reftests/transform/matrix-7a.html
new file mode 100644
index 000000000..8603c37b2
--- /dev/null
+++ b/layout/reftests/transform/matrix-7a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+	<div style="-moz-transform: matrix(2, 0, 0, 4, 0, 0); width: 100px; height: 100px; background-color: gold;">
+        </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix3d-1-ref.html b/layout/reftests/transform/matrix3d-1-ref.html
new file mode 100644
index 000000000..d2f257d53
--- /dev/null
+++ b/layout/reftests/transform/matrix3d-1-ref.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+  <style>
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/matrix3d-1.html b/layout/reftests/transform/matrix3d-1.html
new file mode 100644
index 000000000..09226ffb0
--- /dev/null
+++ b/layout/reftests/transform/matrix3d-1.html
@@ -0,0 +1,20 @@
+<html>
+<head>
+  <!-- We do not support the 3d matrix yet, so this should do nothing -->
+  <style>
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      -moz-transform: matrix3d(1, 0, 100, 1, 10,
+                               1, 100, 1, 1, 10,
+                               1, 100, 2, 3, 12,
+                               12, 100, 3, 4, 5);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1-ref.html b/layout/reftests/transform/origin-1-ref.html
new file mode 100644
index 000000000..643c8434a
--- /dev/null
+++ b/layout/reftests/transform/origin-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg);">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1a.html b/layout/reftests/transform/origin-1a.html
new file mode 100644
index 000000000..51e091442
--- /dev/null
+++ b/layout/reftests/transform/origin-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 0% 0%">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-1b.html b/layout/reftests/transform/origin-1b.html
new file mode 100644
index 000000000..71ddbc388
--- /dev/null
+++ b/layout/reftests/transform/origin-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin:100% 50%">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2-ref.html b/layout/reftests/transform/origin-2-ref.html
new file mode 100644
index 000000000..643c8434a
--- /dev/null
+++ b/layout/reftests/transform/origin-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg);">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2a.html b/layout/reftests/transform/origin-2a.html
new file mode 100644
index 000000000..ac18108d4
--- /dev/null
+++ b/layout/reftests/transform/origin-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 101px 51px;">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2b.html b/layout/reftests/transform/origin-2b.html
new file mode 100644
index 000000000..7e95c7ba2
--- /dev/null
+++ b/layout/reftests/transform/origin-2b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 101px 50%;">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-2c.html b/layout/reftests/transform/origin-2c.html
new file mode 100644
index 000000000..8daef897f
--- /dev/null
+++ b/layout/reftests/transform/origin-2c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black; -moz-transform: rotate(45deg); -moz-transform-origin: 50% 51px;">
+	Some text!
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1-ref.html b/layout/reftests/transform/origin-name-1-ref.html
new file mode 100644
index 000000000..70bb6d479
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 0% 0%;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1a.html b/layout/reftests/transform/origin-name-1a.html
new file mode 100644
index 000000000..5167634ac
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top left;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-1b.html b/layout/reftests/transform/origin-name-1b.html
new file mode 100644
index 000000000..b7c5ca24e
--- /dev/null
+++ b/layout/reftests/transform/origin-name-1b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: left top;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2-ref.html b/layout/reftests/transform/origin-name-2-ref.html
new file mode 100644
index 000000000..2397fdf53
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 50% 0%;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2a.html b/layout/reftests/transform/origin-name-2a.html
new file mode 100644
index 000000000..ff893641c
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2b.html b/layout/reftests/transform/origin-name-2b.html
new file mode 100644
index 000000000..1f30a1073
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top center;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-2c.html b/layout/reftests/transform/origin-name-2c.html
new file mode 100644
index 000000000..aa9fe5120
--- /dev/null
+++ b/layout/reftests/transform/origin-name-2c.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: center top;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3-ref.html b/layout/reftests/transform/origin-name-3-ref.html
new file mode 100644
index 000000000..c0570bf33
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3-ref.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: 100% 0%;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3a.html b/layout/reftests/transform/origin-name-3a.html
new file mode 100644
index 000000000..06b9324a4
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3a.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: top right;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/origin-name-3b.html b/layout/reftests/transform/origin-name-3b.html
new file mode 100644
index 000000000..cbc44043b
--- /dev/null
+++ b/layout/reftests/transform/origin-name-3b.html
@@ -0,0 +1,8 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 300px; margin-top:300px; width:100px; height:200px; background-color:#202040; -moz-transform: rotate(45deg); -moz-transform-origin: right top;">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1-ref.html b/layout/reftests/transform/percent-1-ref.html
new file mode 100644
index 000000000..2f011ce6f
--- /dev/null
+++ b/layout/reftests/transform/percent-1-ref.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1a.html b/layout/reftests/transform/percent-1a.html
new file mode 100644
index 000000000..4641d8968
--- /dev/null
+++ b/layout/reftests/transform/percent-1a.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25px, 25px);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1b.html b/layout/reftests/transform/percent-1b.html
new file mode 100644
index 000000000..e836b92dd
--- /dev/null
+++ b/layout/reftests/transform/percent-1b.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1c.html b/layout/reftests/transform/percent-1c.html
new file mode 100644
index 000000000..156d5eb1d
--- /dev/null
+++ b/layout/reftests/transform/percent-1c.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1d.html b/layout/reftests/transform/percent-1d.html
new file mode 100644
index 000000000..9a4a88ec0
--- /dev/null
+++ b/layout/reftests/transform/percent-1d.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25px, 25px);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1e.html b/layout/reftests/transform/percent-1e.html
new file mode 100644
index 000000000..6034e0757
--- /dev/null
+++ b/layout/reftests/transform/percent-1e.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1f.html b/layout/reftests/transform/percent-1f.html
new file mode 100644
index 000000000..de3f704c7
--- /dev/null
+++ b/layout/reftests/transform/percent-1f.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    -moz-transform: rotate(10deg) translatex(50%) rotate(10deg) translatey(50px) skewx(10deg) translate(25%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/percent-1g.html b/layout/reftests/transform/percent-1g.html
new file mode 100644
index 000000000..52b263314
--- /dev/null
+++ b/layout/reftests/transform/percent-1g.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+  <style type="text/css">
+    .transformed
+    {
+    -moz-transform: rotate(10deg) translatex(50px) rotate(10deg) translatey(100%) skewx(10deg) translate(25%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div style="width:100px; height:50px; background-color:gold; position: absolute; left:100px; top:100px;" class="transformed">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/propagate-inherit-boolean-ref.html b/layout/reftests/transform/propagate-inherit-boolean-ref.html
new file mode 100644
index 000000000..4d59957c3
--- /dev/null
+++ b/layout/reftests/transform/propagate-inherit-boolean-ref.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title></title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	p {
+		font-size: 20px;
+		margin: 0;
+		height: 0;
+		width: 100px;
+		-moz-transform: translateX(80px);
+	}
+
+	p#two {
+		font-size: 40px;
+		-moz-transform: translateX(160px);
+	}
+
+	</style>
+</head>
+<body>
+
+<p id="one">One</p>
+
+<p id="two">Two</p>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/propagate-inherit-boolean.html b/layout/reftests/transform/propagate-inherit-boolean.html
new file mode 100644
index 000000000..869b4f4bc
--- /dev/null
+++ b/layout/reftests/transform/propagate-inherit-boolean.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
+	"http://www.w3.org/TR/html4/strict.dtd">
+<html lang="en-US">
+<head>
+	<title></title>
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+	<meta http-equiv="Content-Style-Type" content="text/css">
+	<style type="text/css">
+
+	p {
+		font-size: 20px;
+		margin: 0;
+		height: 0;
+		width: 100px;
+		-moz-transform: translateX(4em);
+	}
+
+	p#two {
+		font-size: 40px;
+	}
+
+	</style>
+</head>
+<body>
+
+<p id="one">One</p>
+
+<p id="two">Two</p>
+
+</body>
+</html>
diff --git a/layout/reftests/transform/reftest-stylo.list b/layout/reftests/transform/reftest-stylo.list
new file mode 100644
index 000000000..7ccbcba5f
--- /dev/null
+++ b/layout/reftests/transform/reftest-stylo.list
@@ -0,0 +1,159 @@
+# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing
+# Transforms specifying singular matrices shouldn't display at all.
+# NOTE: Regressions might manifest themselves as reftest timeouts on
+# this test.
+== singular-1a.html singular-1a.html
+# Multiple transforms should act identically to nested divs.
+== compound-1a.html compound-1a.html
+== compound-1a.html compound-1a.html
+== dynamic-inherit-1.html dynamic-inherit-1.html
+== dynamic-addremove-1a.html dynamic-addremove-1a.html
+skip == dynamic-addremove-1b.html dynamic-addremove-1b.html
+== dynamic-addremove-1c.html dynamic-addremove-1c.html
+# translatex should act like position: relative
+skip-if(B2G||Mulet) == translatex-1a.html translatex-1a.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translatex-1b.html translatex-1b.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translatex-1c.html translatex-1c.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translatex-1d.html translatex-1d.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translatex-1e.html translatex-1e.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translatex-1a.html translatex-1a.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+# translatey should act like position: relative
+== translatey-1a.html translatey-1a.html
+== translatey-1b.html translatey-1b.html
+== translatey-1c.html translatey-1c.html
+== translatey-1d.html translatey-1d.html
+== translatey-1e.html translatey-1e.html
+# matrices defined to be translations should act like position: relative
+skip-if(B2G||Mulet) == translatex-2.html translatex-2.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+== translatey-2.html translatey-2.html
+# translate should act like position: relative
+skip-if(B2G||Mulet) == translate-1a.html translate-1a.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translate-1b.html translate-1b.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translate-1c.html translate-1c.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translate-1d.html translate-1d.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translate-1e.html translate-1e.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+skip-if(B2G||Mulet) == translate-2a.html translate-2a.html
+# Initial mulet triage: parity with B2G/B2G Desktop
+# rotate: Several rotations of the same object should be idempotent.  These
+# tests are currently disabled because of subpixel (< 0.00001 gfx units)
+# rounding errors.
+random == rotate-1a.html rotate-1a.html
+random == rotate-1b.html rotate-1b.html
+random == rotate-1c.html rotate-1c.html
+random == rotate-1d.html rotate-1d.html
+random == rotate-1e.html rotate-1e.html
+random == rotate-1f.html rotate-1f.html
+# rotate: 90deg rotations should be indistinguishable from objects constructed
+# to look the same.
+== rotate-2a.html rotate-2a.html
+== rotate-2b.html rotate-2b.html
+# -transform-origin: We should NOT get the same images when using different
+# -transform-origins.
+== origin-1a.html origin-1a.html
+== origin-1b.html origin-1b.html
+# -transform-origin: We should get the same images when using equivalent
+# -transform-origins.
+== origin-2a.html origin-2a.html
+== origin-2b.html origin-2b.html
+== origin-2c.html origin-2c.html
+# "Translate" with percentages should be indistinguishable from translate with
+# equivalent values.
+== percent-1a.html percent-1a.html
+== percent-1b.html percent-1b.html
+fails fuzzy-if(skiaContent,1,80) == percent-1c.html percent-1c.html
+fails fuzzy-if(skiaContent,1,80) == percent-1d.html percent-1d.html
+fails fuzzy-if(skiaContent,1,80) == percent-1e.html percent-1e.html
+fails fuzzy-if(skiaContent,1,80) == percent-1f.html percent-1f.html
+fails fuzzy-if(skiaContent,1,80) == percent-1g.html percent-1g.html
+# Transformed elements are abs-pos and fixed-pos containing blocks.
+== abspos-1a.html abspos-1a.html
+== abspos-1b.html abspos-1b.html
+== abspos-1c.html abspos-1c.html
+== abspos-1d.html abspos-1d.html
+== abspos-1e.html abspos-1e.html
+== abspos-1f.html abspos-1f.html
+== abspos-1g.html abspos-1g.html
+# Origin can use "top" "right" etc.
+== origin-name-1a.html origin-name-1a.html
+== origin-name-1b.html origin-name-1b.html
+== origin-name-2a.html origin-name-2a.html
+== origin-name-2b.html origin-name-2b.html
+fails fuzzy-if(skiaContent,1,350) == origin-name-2c.html origin-name-2c.html
+== origin-name-3a.html origin-name-3a.html
+== origin-name-3b.html origin-name-3b.html
+# Snapping still applies after 90 degree rotations.
+skip == snapping-1.html snapping-1.html
+# SVG effects should work on transforms.
+== transform-svg-1a.xhtml transform-svg-1a.xhtml
+fuzzy-if(skiaContent,2,500) == transform-svg-2a.xhtml transform-svg-2a.xhtml
+== transform-svg-2a.xhtml transform-svg-2a.xhtml
+# skew should allow a mix of one and two parameters.
+== skew-1a.html skew-1a.html
+fails fuzzy-if(skiaContent,1,80) == skew-1b.html skew-1b.html
+skip == skew-2a.html skew-2a.html
+# matrix with values equal to other transforms should behave indistinguishably
+== matrix-1a.html matrix-1a.html
+== matrix-2a.html matrix-2a.html
+skip == matrix-3a.html matrix-3a.html
+== matrix-4a.html matrix-4a.html
+fails fuzzy-if(skiaContent,1,120) == matrix-5a.html matrix-5a.html
+fails fuzzy-if(skiaContent,1,110) == matrix-6a.html matrix-6a.html
+== matrix-7a.html matrix-7a.html
+# ensure matrix 3d does not break us - should do nothing
+== matrix3d-1.html matrix3d-1.html
+# Test that complex transform can be reversed
+skip-if(B2G||Mulet) fuzzy-if(skiaContent,2,5) == stresstest-1.html stresstest-1.html
+# bug 773482
+# Initial mulet triage: parity with B2G/B2G Desktop
+# Test scale transforms
+== scalex-1.html scalex-1.html
+== scaley-1.html scaley-1.html
+== scale-1a.html scale-1a.html
+== scale-1b.html scale-1b.html
+== scale-percent-1.html scale-percent-1.html
+# Some simple checks that it obeys selector operations
+== descendant-1.html descendant-1.html
+== propagate-inherit-boolean.html propagate-inherit-boolean.html
+# Ensure you can't move outside an iframe
+== iframe-1.html iframe-1.html
+# Bugs
+== 601894-1.html 601894-1.html
+== 601894-2.html 601894-2.html
+== 830299-1.html 830299-1.html
+# Bug 722777
+== table-1a.html table-1a.html
+== table-1b.html table-1b.html
+== table-1c.html table-1c.html
+== table-2a.html table-2a.html
+== table-2b.html table-2b.html
+# Bug 722463
+== inline-1a.html inline-1a.html
+pref(svg.transform-box.enabled,true) == transform-box-svg-1a.svg transform-box-svg-1a.svg
+pref(svg.transform-box.enabled,true) == transform-box-svg-1b.svg transform-box-svg-1b.svg
+pref(svg.transform-box.enabled,true) == transform-box-svg-2a.svg transform-box-svg-2a.svg
+pref(svg.transform-box.enabled,true) == transform-box-svg-2b.svg transform-box-svg-2b.svg
+== transform-origin-svg-1a.svg transform-origin-svg-1a.svg
+== transform-origin-svg-1b.svg transform-origin-svg-1b.svg
+== transform-origin-svg-2a.svg transform-origin-svg-2a.svg
+== transform-origin-svg-2b.svg transform-origin-svg-2b.svg
+# Bug 1122526
+skip == animate-layer-scale-inherit-1.html animate-layer-scale-inherit-1.html
+skip == animate-layer-scale-inherit-2.html animate-layer-scale-inherit-2.html
+skip == animate-layer-scale-inherit-3.html animate-layer-scale-inherit-3.html
diff --git a/layout/reftests/transform/reftest.list b/layout/reftests/transform/reftest.list
new file mode 100644
index 000000000..57ad46673
--- /dev/null
+++ b/layout/reftests/transform/reftest.list
@@ -0,0 +1,142 @@
+# Transforms specifying singular matrices shouldn't display at all.
+# NOTE: Regressions might manifest themselves as reftest timeouts on
+# this test.
+== singular-1a.html about:blank
+# Multiple transforms should act identically to nested divs.
+== compound-1a.html compound-1-ref.html
+!= compound-1a.html compound-1-fail.html
+== dynamic-inherit-1.html dynamic-inherit-1-ref.html
+== dynamic-addremove-1a.html dynamic-addremove-1-ref.html
+== dynamic-addremove-1b.html dynamic-addremove-1-ref.html
+== dynamic-addremove-1c.html dynamic-addremove-1-ref.html
+== dynamic-addremove-2.html dynamic-addremove-2-ref.html
+# translatex should act like position: relative
+== translatex-1a.html translatex-1-ref.html
+== translatex-1b.html translatex-1-ref.html
+== translatex-1c.html translatex-1-ref.html
+== translatex-1d.html translatex-1-ref.html
+== translatex-1e.html translatex-1-ref.html
+== translatex-1a.html translatex-1-ref-2.html
+# translatey should act like position: relative
+== translatey-1a.html translatey-1-ref.html
+== translatey-1b.html translatey-1-ref.html
+== translatey-1c.html translatey-1-ref.html
+== translatey-1d.html translatey-1-ref.html
+== translatey-1e.html translatey-1-ref.html
+# matrices defined to be translations should act like position: relative
+== translatex-2.html translatex-1-ref.html
+== translatey-2.html translatey-1-ref.html
+# translate should act like position: relative
+!= translate-1a.html translate-1-ref.html
+== translate-1b.html translate-1-ref.html
+== translate-1c.html translate-1-ref.html
+== translate-1d.html translate-1-ref.html
+== translate-1e.html translate-1-ref.html
+== translate-2a.html translate-2-ref.html
+# rotate: Several rotations of the same object should be idempotent.  These
+# tests are currently disabled because of subpixel (< 0.00001 gfx units)
+# rounding errors.
+random == rotate-1a.html rotate-1-ref.html
+random == rotate-1b.html rotate-1-ref.html
+random == rotate-1c.html rotate-1-ref.html
+random == rotate-1d.html rotate-1-ref.html
+random == rotate-1e.html rotate-1-ref.html
+random == rotate-1f.html rotate-1-ref.html
+# rotate: 90deg rotations should be indistinguishable from objects constructed
+# to look the same.
+== rotate-2a.html rotate-2-ref.html
+== rotate-2b.html rotate-2-ref.html
+# -transform-origin: We should NOT get the same images when using different
+# -transform-origins.
+!= origin-1a.html origin-1-ref.html
+!= origin-1b.html origin-1-ref.html
+# -transform-origin: We should get the same images when using equivalent
+# -transform-origins.
+== origin-2a.html origin-2-ref.html
+== origin-2b.html origin-2-ref.html
+== origin-2c.html origin-2-ref.html
+# "Translate" with percentages should be indistinguishable from translate with
+# equivalent values.
+== percent-1a.html percent-1-ref.html
+== percent-1b.html percent-1-ref.html
+fuzzy-if(skiaContent,1,80) == percent-1c.html percent-1-ref.html
+fuzzy-if(skiaContent,1,80) == percent-1d.html percent-1-ref.html
+fuzzy-if(skiaContent,1,80) == percent-1e.html percent-1-ref.html
+fuzzy-if(skiaContent,1,80) == percent-1f.html percent-1-ref.html
+fuzzy-if(skiaContent,1,80) == percent-1g.html percent-1-ref.html
+# Transformed elements are abs-pos and fixed-pos containing blocks.
+== abspos-1a.html abspos-1-ref.html
+== abspos-1b.html abspos-1-ref.html
+== abspos-1c.html abspos-1-ref.html
+== abspos-1d.html abspos-1-ref.html
+!= abspos-1e.html abspos-1-ref.html
+== abspos-1f.html abspos-1-ref.html
+== abspos-1g.html abspos-1-ref.html
+# Origin can use "top" "right" etc.
+== origin-name-1a.html origin-name-1-ref.html
+== origin-name-1b.html origin-name-1-ref.html
+== origin-name-2a.html origin-name-2-ref.html
+== origin-name-2b.html origin-name-2-ref.html
+fuzzy-if(skiaContent,1,350) == origin-name-2c.html origin-name-2-ref.html
+== origin-name-3a.html origin-name-3-ref.html
+== origin-name-3b.html origin-name-3-ref.html
+# Snapping still applies after 90 degree rotations.
+== snapping-1.html snapping-1-ref.html
+# SVG effects should work on transforms.
+== transform-svg-1a.xhtml transform-svg-1-ref.xhtml
+fuzzy-if(skiaContent,2,500) == transform-svg-2a.xhtml transform-svg-2-ref.xhtml
+!= transform-svg-2a.xhtml transform-svg-2-fail.xhtml
+# skew should allow a mix of one and two parameters.
+== skew-1a.html skew-1-ref.html
+fuzzy-if(skiaContent,1,80) == skew-1b.html skew-1-ref.html
+== skew-2a.html skew-2-ref.html
+# matrix with values equal to other transforms should behave indistinguishably
+== matrix-1a.html matrix-1-ref.html
+== matrix-2a.html matrix-2-ref.html
+== matrix-3a.html matrix-3-ref.html
+== matrix-4a.html matrix-4-ref.html
+fuzzy-if(skiaContent,1,120) == matrix-5a.html matrix-5-ref.html
+fuzzy-if(skiaContent,1,110) == matrix-6a.html matrix-6-ref.html
+== matrix-7a.html matrix-7-ref.html
+# ensure matrix 3d does not break us - should do nothing
+== matrix3d-1.html matrix3d-1-ref.html
+# Test that complex transform can be reversed
+fuzzy-if(skiaContent,2,5) == stresstest-1.html stresstest-1-ref.html
+# Test scale transforms
+== scalex-1.html scalex-1-ref.html
+== scaley-1.html scaley-1-ref.html
+== scale-1a.html scale-1-ref.html
+== scale-1b.html scale-1-ref.html
+== scale-percent-1.html scale-percent-1-ref.html
+# Some simple checks that it obeys selector operations
+== descendant-1.html descendant-1-ref.html
+== propagate-inherit-boolean.html propagate-inherit-boolean-ref.html
+# Ensure you can't move outside an iframe
+== iframe-1.html iframe-1-ref.html
+# Bugs
+== 601894-1.html 601894-ref.html
+== 601894-2.html 601894-ref.html
+== 830299-1.html 830299-1-ref.html
+# Bug 722777
+== table-1a.html table-1-ref.html
+== table-1b.html table-1-ref.html
+== table-1c.html table-1-ref.html
+== table-2a.html table-2-ref.html
+== table-2b.html table-2-ref.html
+# Bug 722463
+== inline-1a.html inline-1-ref.html
+pref(svg.transform-box.enabled,true) == transform-box-svg-1a.svg transform-box-svg-1-ref.svg
+pref(svg.transform-box.enabled,true) == transform-box-svg-1b.svg transform-box-svg-1-ref.svg
+pref(svg.transform-box.enabled,true) == transform-box-svg-2a.svg transform-box-svg-2-ref.svg
+pref(svg.transform-box.enabled,true) == transform-box-svg-2b.svg transform-box-svg-2-ref.svg
+== transform-origin-svg-1a.svg transform-origin-svg-1-ref.svg
+== transform-origin-svg-1b.svg transform-origin-svg-1-ref.svg
+== transform-origin-svg-2a.svg transform-origin-svg-2-ref.svg
+== transform-origin-svg-2b.svg transform-origin-svg-2-ref.svg
+# Bug 1122526
+== animate-layer-scale-inherit-1.html animate-layer-scale-inherit-1-ref.html
+== animate-layer-scale-inherit-2.html animate-layer-scale-inherit-2-ref.html
+== animate-layer-scale-inherit-3.html animate-layer-scale-inherit-1-ref.html
+# Bug 1301500
+== dynamic-add-without-change-cb-1.html dynamic-add-without-change-cb-1-ref.html
+fuzzy-if(d2d,1,5) == table-overflowed-by-animation.html table-overflowed-by-animation-ref.html
diff --git a/layout/reftests/transform/rotate-1-ref.html b/layout/reftests/transform/rotate-1-ref.html
new file mode 100644
index 000000000..4ebbf5a56
--- /dev/null
+++ b/layout/reftests/transform/rotate-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate(45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1a.html b/layout/reftests/transform/rotate-1a.html
new file mode 100644
index 000000000..fc8e67380
--- /dev/null
+++ b/layout/reftests/transform/rotate-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate(45deg) rotate(360deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1b.html b/layout/reftests/transform/rotate-1b.html
new file mode 100644
index 000000000..79fa5c6b7
--- /dev/null
+++ b/layout/reftests/transform/rotate-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate(45deg) rotate(400grad); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1c.html b/layout/reftests/transform/rotate-1c.html
new file mode 100644
index 000000000..780739ca2
--- /dev/null
+++ b/layout/reftests/transform/rotate-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate(45deg) rotate(100deg) rotate(80deg) rotate(200grad); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1d.html b/layout/reftests/transform/rotate-1d.html
new file mode 100644
index 000000000..ab44c7fc7
--- /dev/null
+++ b/layout/reftests/transform/rotate-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate(-45deg) rotate(100grad); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1e.html b/layout/reftests/transform/rotate-1e.html
new file mode 100644
index 000000000..1f2ef1438
--- /dev/null
+++ b/layout/reftests/transform/rotate-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate(-135deg) rotate(3.1415926535897932384626433rad); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-1f.html b/layout/reftests/transform/rotate-1f.html
new file mode 100644
index 000000000..1dd88ed00
--- /dev/null
+++ b/layout/reftests/transform/rotate-1f.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate(0.125turn); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2-ref.html b/layout/reftests/transform/rotate-2-ref.html
new file mode 100644
index 000000000..51be5f08c
--- /dev/null
+++ b/layout/reftests/transform/rotate-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:200px;height:100px;border:1px solid black;">
+
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2a.html b/layout/reftests/transform/rotate-2a.html
new file mode 100644
index 000000000..9805bd79a
--- /dev/null
+++ b/layout/reftests/transform/rotate-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:100px;height:200px;-moz-transform: translate(50px, -50px) rotate(-90deg); border: 1px solid black;">
+
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/rotate-2b.html b/layout/reftests/transform/rotate-2b.html
new file mode 100644
index 000000000..040d8a99c
--- /dev/null
+++ b/layout/reftests/transform/rotate-2b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="width:100px;height:200px;-moz-transform: translate(50px, -50px) rotate(-0.25turn); border: 1px solid black;">
+
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1-ref.html b/layout/reftests/transform/scale-1-ref.html
new file mode 100644
index 000000000..7c39dd850
--- /dev/null
+++ b/layout/reftests/transform/scale-1-ref.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    #test {
+      background: green;
+      width: 50px;
+      height: 50px;
+      margin: 25px;
+    }
+  </style>
+<body>
+  <div id="test">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1a.html b/layout/reftests/transform/scale-1a.html
new file mode 100644
index 000000000..007d23e88
--- /dev/null
+++ b/layout/reftests/transform/scale-1a.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    #test {
+      background: green;
+      width: 100px;
+      height: 100px;
+      -moz-transform: scale(0.5, 0.5);
+    }
+  </style>
+</head>
+<body>
+  <div id="test">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-1b.html b/layout/reftests/transform/scale-1b.html
new file mode 100644
index 000000000..6da74f0cf
--- /dev/null
+++ b/layout/reftests/transform/scale-1b.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    #test {
+      background: green;
+      width: 100px;
+      height: 100px;
+      -moz-transform: scale(0.5);
+    }
+  </style>
+</head>
+<body>
+  <div id="test">
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-percent-1-ref.html b/layout/reftests/transform/scale-percent-1-ref.html
new file mode 100644
index 000000000..a6baeab57
--- /dev/null
+++ b/layout/reftests/transform/scale-percent-1-ref.html
@@ -0,0 +1,16 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scale-percent-1.html b/layout/reftests/transform/scale-percent-1.html
new file mode 100644
index 000000000..a76ecd7ed
--- /dev/null
+++ b/layout/reftests/transform/scale-percent-1.html
@@ -0,0 +1,18 @@
+<html>
+<head>
+  <!-- Percent values are not allowed for scale, so this shouldn't do anything -->
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      -moz-transform: scale(50%, 50%);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scalex-1-ref.html b/layout/reftests/transform/scalex-1-ref.html
new file mode 100644
index 000000000..b95fa2a46
--- /dev/null
+++ b/layout/reftests/transform/scalex-1-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 50px;
+      height: 100px;
+      margin-left: 25px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scalex-1.html b/layout/reftests/transform/scalex-1.html
new file mode 100644
index 000000000..becada6bb
--- /dev/null
+++ b/layout/reftests/transform/scalex-1.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      -moz-transform: scalex(0.5);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaley-1-ref.html b/layout/reftests/transform/scaley-1-ref.html
new file mode 100644
index 000000000..58a01d195
--- /dev/null
+++ b/layout/reftests/transform/scaley-1-ref.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 50px;
+      margin-top: 25px;
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/scaley-1.html b/layout/reftests/transform/scaley-1.html
new file mode 100644
index 000000000..b909fbad7
--- /dev/null
+++ b/layout/reftests/transform/scaley-1.html
@@ -0,0 +1,17 @@
+<html>
+<head>
+  <style>
+    body { margin: 0px; }
+    div {
+      background: green;
+      width: 100px;
+      height: 100px;
+      -moz-transform: scaley(0.5);
+    }
+  </style>
+</head>
+<body>
+  <div>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/singular-1a.html b/layout/reftests/transform/singular-1a.html
new file mode 100644
index 000000000..1ef61dc99
--- /dev/null
+++ b/layout/reftests/transform/singular-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: matrix(1, 1, 1, 1, 0, 0); width: 100px; height: 100px; background-color: gold;">
+    This shouldn't be visible.
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/skew-1-ref.html b/layout/reftests/transform/skew-1-ref.html
new file mode 100644
index 000000000..d83368970
--- /dev/null
+++ b/layout/reftests/transform/skew-1-ref.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skewx(10deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/skew-1a.html b/layout/reftests/transform/skew-1a.html
new file mode 100644
index 000000000..125b45bc4
--- /dev/null
+++ b/layout/reftests/transform/skew-1a.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(10deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/skew-1b.html b/layout/reftests/transform/skew-1b.html
new file mode 100644
index 000000000..5776ba008
--- /dev/null
+++ b/layout/reftests/transform/skew-1b.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(10deg, 0deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/skew-2-ref.html b/layout/reftests/transform/skew-2-ref.html
new file mode 100644
index 000000000..e017dd0e2
--- /dev/null
+++ b/layout/reftests/transform/skew-2-ref.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skewy(10deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/skew-2a.html b/layout/reftests/transform/skew-2a.html
new file mode 100644
index 000000000..e3e5df6da
--- /dev/null
+++ b/layout/reftests/transform/skew-2a.html
@@ -0,0 +1,8 @@
+<html>
+  <head>
+  </head>
+  <body>
+    <div style="width: 100px; height: 100px; background-color: gold; border: 1px solid black; -moz-transform: skew(0deg, 10deg);">
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/snapping-1-ref.html b/layout/reftests/transform/snapping-1-ref.html
new file mode 100644
index 000000000..99006901b
--- /dev/null
+++ b/layout/reftests/transform/snapping-1-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div { 
+  background: red;
+  position: relative;
+  left: 0.5px;
+  top: 100px;
+  height: 100px;
+  width: 100px;
+}
+</style>
+</head>
+<body>
+  <div></div>
+</body>
+</html>
diff --git a/layout/reftests/transform/snapping-1.html b/layout/reftests/transform/snapping-1.html
new file mode 100644
index 000000000..e5a7d9abd
--- /dev/null
+++ b/layout/reftests/transform/snapping-1.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+div { 
+  background: red;
+  margin-left: 100.5px;
+  height: 100px;
+  width: 100px;
+  -moz-transform-origin: bottom left;
+  -moz-transform: rotate(-90deg) translate(-100px, 0);
+  transform-origin: bottom left;
+  transform: rotate(-90deg) translate(-100px, 0);
+}
+</style>
+</head>
+<body>
+  <div></div>
+</html>
diff --git a/layout/reftests/transform/square.html b/layout/reftests/transform/square.html
new file mode 100644
index 000000000..2f6e4950b
--- /dev/null
+++ b/layout/reftests/transform/square.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <style>
+      div {
+        background: green;
+        width: 100px;
+        height: 100px;
+      }
+      span {
+        background: yellow;
+        width: 50px;
+      }
+    </style>
+  </head>
+  <body>
+    <div>
+      <span></span>
+    </div>
+  </body>
+</html>
diff --git a/layout/reftests/transform/stresstest-1-ref.html b/layout/reftests/transform/stresstest-1-ref.html
new file mode 100644
index 000000000..a84cff23d
--- /dev/null
+++ b/layout/reftests/transform/stresstest-1-ref.html
@@ -0,0 +1,7 @@
+<html>
+  <body>
+    <iframe src="square.html" style="height: 200px; width: 300px" id="test">
+      test
+    </iframe>
+  </body>
+</html>
diff --git a/layout/reftests/transform/stresstest-1.html b/layout/reftests/transform/stresstest-1.html
new file mode 100644
index 000000000..f0202ab86
--- /dev/null
+++ b/layout/reftests/transform/stresstest-1.html
@@ -0,0 +1,27 @@
+<html class="reftest-wait">
+  <head>
+      <script type="application/javascript">
+        function runtest() {
+          var iframe = document.getElementById("test");
+          var style = iframe.getAttribute("style");
+          // We depend on the transform being the last rule so clip the ending ';'
+          style = style.substring(0, style.length-1);
+
+          // Here, we add transform functions to explicitly undo the effects of
+          // each already-applied transform.  This should leave us with an
+          // effectively-untransformed iframe.
+          style = style + " scale(0.5, 0.25) translatex(-50px) rotate(-45deg) translate(-50px, -50px) skewx(135deg);"
+          iframe.setAttribute("style", style);
+          document.documentElement.className = "";
+        }
+      </script>
+  </head>
+  <body>
+    <iframe
+      src="square.html"
+      style="height: 200px; width: 300px; -moz-transform: skewx(45deg) translate(50px, 50px) rotate(45deg) translatex(50px) scale(2.0, 4.0);"
+      id="test"
+      onload="runtest();">
+    </iframe>
+  </body>
+</html>
diff --git a/layout/reftests/transform/table-1-ref.html b/layout/reftests/transform/table-1-ref.html
new file mode 100644
index 000000000..ca213123b
--- /dev/null
+++ b/layout/reftests/transform/table-1-ref.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<div style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<table>
+<caption>Hello</caption>
+<tr><td>there!
+</table>
+</div>
diff --git a/layout/reftests/transform/table-1a.html b/layout/reftests/transform/table-1a.html
new file mode 100644
index 000000000..ce7458c8d
--- /dev/null
+++ b/layout/reftests/transform/table-1a.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
diff --git a/layout/reftests/transform/table-1b.html b/layout/reftests/transform/table-1b.html
new file mode 100644
index 000000000..ad045a3af
--- /dev/null
+++ b/layout/reftests/transform/table-1b.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="display:inline-table;-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
diff --git a/layout/reftests/transform/table-1c.html b/layout/reftests/transform/table-1c.html
new file mode 100644
index 000000000..50f4d1add
--- /dev/null
+++ b/layout/reftests/transform/table-1c.html
@@ -0,0 +1,7 @@
+<!doctype html>
+<div style="-moz-transform:translateX(200px) rotate(180deg) translateY(-100%);-moz-transform-origin:left">
+<table style="-moz-transform:translateY(100%)">
+<caption>Hello</caption>
+<tr><td>there!
+</table>
+</div>
diff --git a/layout/reftests/transform/table-2-ref.html b/layout/reftests/transform/table-2-ref.html
new file mode 100644
index 000000000..60e7bbb29
--- /dev/null
+++ b/layout/reftests/transform/table-2-ref.html
@@ -0,0 +1,6 @@
+<!doctype html>
+<div style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<table>
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-2a.html b/layout/reftests/transform/table-2a.html
new file mode 100644
index 000000000..6e7f91ee5
--- /dev/null
+++ b/layout/reftests/transform/table-2a.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-2b.html b/layout/reftests/transform/table-2b.html
new file mode 100644
index 000000000..3d94dcf97
--- /dev/null
+++ b/layout/reftests/transform/table-2b.html
@@ -0,0 +1,5 @@
+<!doctype html>
+<table style="display:inline-table;-moz-transform:translate(200px) rotate(180deg);-moz-transform-origin:left">
+<caption style=caption-side:bottom>there!</caption>
+<tr><td>Hello
+</table>
diff --git a/layout/reftests/transform/table-overflowed-by-animation-ref.html b/layout/reftests/transform/table-overflowed-by-animation-ref.html
new file mode 100644
index 000000000..242dc5350
--- /dev/null
+++ b/layout/reftests/transform/table-overflowed-by-animation-ref.html
@@ -0,0 +1,7 @@
+<!DOCTYPE html>
+<html>
+<table style="width: 100px; height: 100px;">
+  <td style="transform: rotateZ(45deg); background-color: rgb(212, 61, 188);">
+  </td>
+</table>
+</html>
diff --git a/layout/reftests/transform/table-overflowed-by-animation.html b/layout/reftests/transform/table-overflowed-by-animation.html
new file mode 100644
index 000000000..d3d2b8355
--- /dev/null
+++ b/layout/reftests/transform/table-overflowed-by-animation.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<style>
+@keyframes anim {
+  /*
+   * We need to use different transform functions to produce
+   * UpdatePostTransformOverflow change hint, also these functions have to be
+   * the same matrix to being the same position while running reftest.
+   */
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+</style>
+<table id="test" style="width: 100px; height: 100px; animation: anim 1s infinite;">
+  <td style="transform: rotateZ(45deg); background-color: rgb(212, 61, 188);">
+  </td>
+</table>
+<script>
+document.getElementById("test").addEventListener("animationstart", () => {
+  requestAnimationFrame(() => {
+    document.documentElement.classList.remove("reftest-wait");
+  });
+}, false);
+</script>
+</html>
diff --git a/layout/reftests/transform/transform-box-svg-1-ref.svg b/layout/reftests/transform/transform-box-svg-1-ref.svg
new file mode 100644
index 000000000..8f748b73d
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue'/>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-1a.svg b/layout/reftests/transform/transform-box-svg-1a.svg
new file mode 100644
index 000000000..e74989823
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1a.svg
@@ -0,0 +1,10 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point relative to the top left of the
+       element's paint bbox when transform-box is set to 'fill-box'
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue'
+        style="transform:rotate(90deg); transform-origin:0px 100px;
+               transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-1b.svg b/layout/reftests/transform/transform-box-svg-1b.svg
new file mode 100644
index 000000000..84d0da992
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-1b.svg
@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point relative to the top left of the
+       element's fill bbox when transform-box is set to 'fill-box', with
+       percentage values resolved against the size of the fill bbox.
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue'
+        style="transform:rotate(90deg); transform-origin:0px calc(110% - 10px);
+               transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2-ref.svg b/layout/reftests/transform/transform-box-svg-2-ref.svg
new file mode 100644
index 000000000..905fafcca
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue' stroke-width='20' stroke='black'/>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2a.svg b/layout/reftests/transform/transform-box-svg-2a.svg
new file mode 100644
index 000000000..7ae4cfe0b
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2a.svg
@@ -0,0 +1,10 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point relative to the top left of the
+       element's paint bbox when transform-box is set to 'fill-box'
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+        style="transform:rotate(90deg); transform-origin:0px 100px;
+               transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-box-svg-2b.svg b/layout/reftests/transform/transform-box-svg-2b.svg
new file mode 100644
index 000000000..8b1474482
--- /dev/null
+++ b/layout/reftests/transform/transform-box-svg-2b.svg
@@ -0,0 +1,11 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point relative to the top left of the
+       element's fill bbox when transform-box is set to 'fill-box', with
+       percentage values resolved against the size of the fill bbox.
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+        style="transform:rotate(90deg); transform-origin:0px calc(110% - 10px);
+               transform-box:fill-box;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-1-ref.svg b/layout/reftests/transform/transform-origin-svg-1-ref.svg
new file mode 100644
index 000000000..8f748b73d
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue'/>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-1a.svg b/layout/reftests/transform/transform-origin-svg-1a.svg
new file mode 100644
index 000000000..c1591e65b
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1a.svg
@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point in user space -->
+  <rect x='10' y='10' width='100' height='100' fill='blue'
+        style="transform:rotate(90deg); transform-origin:10px 110px;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-1b.svg b/layout/reftests/transform/transform-origin-svg-1b.svg
new file mode 100644
index 000000000..ca4eead39
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-1b.svg
@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point in user space with percentages
+       resolved against the nearest viewport's dimensions.
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue'
+        style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2-ref.svg b/layout/reftests/transform/transform-origin-svg-2-ref.svg
new file mode 100644
index 000000000..905fafcca
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2-ref.svg
@@ -0,0 +1,3 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<rect x='40' y='140' width='100' height='100' fill='blue' stroke-width='20' stroke='black'/>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2a.svg b/layout/reftests/transform/transform-origin-svg-2a.svg
new file mode 100644
index 000000000..46de3c480
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2a.svg
@@ -0,0 +1,7 @@
+<svg xmlns='http://www.w3.org/2000/svg'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point in user space -->
+  <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+        style="transform:rotate(90deg); transform-origin:10px 110px;"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-origin-svg-2b.svg b/layout/reftests/transform/transform-origin-svg-2b.svg
new file mode 100644
index 000000000..29d4187aa
--- /dev/null
+++ b/layout/reftests/transform/transform-origin-svg-2b.svg
@@ -0,0 +1,9 @@
+<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'>
+<g transform="translate(30,30)">
+  <!-- transform-origin specifies a point in user space with percentages
+       resolved against the nearest viewport's dimensions.
+  -->
+  <rect x='10' y='10' width='100' height='100' fill='blue' stroke-width='20' stroke='black'
+        style="transform:rotate(90deg); transform-origin:2% calc(20% + 10px);"/>
+</g>
+</svg>
diff --git a/layout/reftests/transform/transform-svg-1-ref.xhtml b/layout/reftests/transform/transform-svg-1-ref.xhtml
new file mode 100644
index 000000000..1d303d1ad
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1-ref.xhtml
@@ -0,0 +1,12 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+<body style="margin:0">
+  <div style="position: relative; left:100px; top:100px; width:300px; height:300px; background:lime;">
+    <div style="height:200px;"/>
+    <div style="height:100px; background:blue;"/>
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-1a.xhtml b/layout/reftests/transform/transform-svg-1a.xhtml
new file mode 100644
index 000000000..99ffa75a0
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1a.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:200px; background:lime; -moz-transform: translate(100px, 100px);">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:blue;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:rect x="0" y="0" width="300" height="300"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-1b.xhtml b/layout/reftests/transform/transform-svg-1b.xhtml
new file mode 100644
index 000000000..73bcb5498
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-1b.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; -moz-transform: rotate(135deg);">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:lime;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:rect x="0" y="0" width="300" height="300"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2-fail.xhtml b/layout/reftests/transform/transform-svg-2-fail.xhtml
new file mode 100644
index 000000000..b3fe934e2
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2-fail.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:400px; background:blue;">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:lime;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:circle cx="100" cy="100" r="200"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2-ref.xhtml b/layout/reftests/transform/transform-svg-2-ref.xhtml
new file mode 100644
index 000000000..7d3da096d
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2-ref.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; position: relative; left:100px; top:100px;">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:lime;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:circle cx="200" cy="200" r="200"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/transform-svg-2a.xhtml b/layout/reftests/transform/transform-svg-2a.xhtml
new file mode 100644
index 000000000..c6e86b294
--- /dev/null
+++ b/layout/reftests/transform/transform-svg-2a.xhtml
@@ -0,0 +1,20 @@
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/licenses/publicdomain/
+-->
+<html xmlns="http://www.w3.org/1999/xhtml"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns:xlink="http://www.w3.org/1999/xlink">
+<body style="margin:0">
+  <div style="clip-path: url(#c1); width:400px; height:400px; background:blue; -moz-transform: translate(100px, 100px);">
+    <div style="height:200px;"/>
+    <div style="height:200px; background:lime;"/>
+  </div>
+
+  <svg:svg height="0">
+    <svg:clipPath id="c1" clipPathUnits="userSpaceOnuse">
+      <svg:circle cx="200" cy="200" r="200"/>
+    </svg:clipPath>
+  </svg:svg>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1-ref.html b/layout/reftests/transform/translate-1-ref.html
new file mode 100644
index 000000000..5463d15e4
--- /dev/null
+++ b/layout/reftests/transform/translate-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="position: relative; left: 50px; top: 50px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1a.html b/layout/reftests/transform/translate-1a.html
new file mode 100644
index 000000000..194f4cbb9
--- /dev/null
+++ b/layout/reftests/transform/translate-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translate(50px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1b.html b/layout/reftests/transform/translate-1b.html
new file mode 100644
index 000000000..a1e4b9f58
--- /dev/null
+++ b/layout/reftests/transform/translate-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translate(50px, 50px) rotate(360deg);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1c.html b/layout/reftests/transform/translate-1c.html
new file mode 100644
index 000000000..485f7dcc9
--- /dev/null
+++ b/layout/reftests/transform/translate-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translate(25px, 25px) translate(25px, 25px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1d.html b/layout/reftests/transform/translate-1d.html
new file mode 100644
index 000000000..686c721aa
--- /dev/null
+++ b/layout/reftests/transform/translate-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translate(25px, 25px); position:relative; top:25px; left:25px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-1e.html b/layout/reftests/transform/translate-1e.html
new file mode 100644
index 000000000..c7b8fc0d4
--- /dev/null
+++ b/layout/reftests/transform/translate-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translate(50px) translate(-100px) translate(150px) translate(-50px) translate(0px, 50px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-2-ref.html b/layout/reftests/transform/translate-2-ref.html
new file mode 100644
index 000000000..e89c01854
--- /dev/null
+++ b/layout/reftests/transform/translate-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="position: relative; left: 50px; top: 0px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translate-2a.html b/layout/reftests/transform/translate-2a.html
new file mode 100644
index 000000000..194f4cbb9
--- /dev/null
+++ b/layout/reftests/transform/translate-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translate(50px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1-ref-2.html b/layout/reftests/transform/translatex-1-ref-2.html
new file mode 100644
index 000000000..319fcc0b8
--- /dev/null
+++ b/layout/reftests/transform/translatex-1-ref-2.html
@@ -0,0 +1,12 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-left: 50px;">
+    Test Text
+  </div>
+  <div style="position:relative; left:50px; height:10px;">
+    <!-- make the body overflow by 50px horizontally -->
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1-ref.html b/layout/reftests/transform/translatex-1-ref.html
new file mode 100644
index 000000000..40a591180
--- /dev/null
+++ b/layout/reftests/transform/translatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="position:relative; left:50px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1a.html b/layout/reftests/transform/translatex-1a.html
new file mode 100644
index 000000000..50777d421
--- /dev/null
+++ b/layout/reftests/transform/translatex-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatex(50px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1b.html b/layout/reftests/transform/translatex-1b.html
new file mode 100644
index 000000000..953245aa9
--- /dev/null
+++ b/layout/reftests/transform/translatex-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatex(50px) rotate(360deg);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1c.html b/layout/reftests/transform/translatex-1c.html
new file mode 100644
index 000000000..656702a30
--- /dev/null
+++ b/layout/reftests/transform/translatex-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatex(25px) translatex(25px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1d.html b/layout/reftests/transform/translatex-1d.html
new file mode 100644
index 000000000..d135a62b1
--- /dev/null
+++ b/layout/reftests/transform/translatex-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatex(25px); position:relative; left:25px; top:0px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-1e.html b/layout/reftests/transform/translatex-1e.html
new file mode 100644
index 000000000..1d80e0332
--- /dev/null
+++ b/layout/reftests/transform/translatex-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatex(50px) translatex(-100px) translatex(150px) translatex(-50px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatex-2.html b/layout/reftests/transform/translatex-2.html
new file mode 100644
index 000000000..65e8b3016
--- /dev/null
+++ b/layout/reftests/transform/translatex-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: matrix(1, 0, 0, 1, 50, 0);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1-ref-2.html b/layout/reftests/transform/translatey-1-ref-2.html
new file mode 100644
index 000000000..f1500dc39
--- /dev/null
+++ b/layout/reftests/transform/translatey-1-ref-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="margin-top: 50px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1-ref.html b/layout/reftests/transform/translatey-1-ref.html
new file mode 100644
index 000000000..af4340c44
--- /dev/null
+++ b/layout/reftests/transform/translatey-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="position:relative; top:50px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1a.html b/layout/reftests/transform/translatey-1a.html
new file mode 100644
index 000000000..874df266f
--- /dev/null
+++ b/layout/reftests/transform/translatey-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatey(50px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1b.html b/layout/reftests/transform/translatey-1b.html
new file mode 100644
index 000000000..5dd1a9ad5
--- /dev/null
+++ b/layout/reftests/transform/translatey-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatey(50px) rotate(360deg);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1c.html b/layout/reftests/transform/translatey-1c.html
new file mode 100644
index 000000000..9892e195a
--- /dev/null
+++ b/layout/reftests/transform/translatey-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatey(25px) translatey(25px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1d.html b/layout/reftests/transform/translatey-1d.html
new file mode 100644
index 000000000..906412ec9
--- /dev/null
+++ b/layout/reftests/transform/translatey-1d.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatey(25px); position:relative; top:25px; left:0px;">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-1e.html b/layout/reftests/transform/translatey-1e.html
new file mode 100644
index 000000000..43a2c7aed
--- /dev/null
+++ b/layout/reftests/transform/translatey-1e.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatey(50px) translatey(-100px) translatey(150px) translatey(-50px);">
+    Test Text
+  </div>
+</body>
+</html>
diff --git a/layout/reftests/transform/translatey-2.html b/layout/reftests/transform/translatey-2.html
new file mode 100644
index 000000000..3bcaaf32a
--- /dev/null
+++ b/layout/reftests/transform/translatey-2.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: matrix(1, 0, 0, 1, 0, 50);">
+    Test Text
+  </div>
+</body>
+</html>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /layout/reftests/transform
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip