Bug 505115 - Part 13 - Add basic reftests for 3d transforms. r=roc
authorMatt Woodrow <mwoodrow@mozilla.com>
Wed, 31 Aug 2011 14:03:43 +1200
changeset 76251 819f2a8e13189a7178b58df59be25e92728b48b6
parent 76250 62b958e49c664f69d691660423005c92f242ea7f
child 76252 9f201033b0e6531650c460044d87efacd0a69984
push id3
push userfelipc@gmail.com
push dateFri, 30 Sep 2011 20:09:13 +0000
reviewersroc
bugs505115
milestone9.0a1
Bug 505115 - Part 13 - Add basic reftests for 3d transforms. r=roc
layout/reftests/reftest.list
layout/reftests/transform-3d/backface-visibility-1a.html
layout/reftests/transform-3d/backface-visibility-1b.html
layout/reftests/transform-3d/matrix3d-1-ref.html
layout/reftests/transform-3d/matrix3d-1a.html
layout/reftests/transform-3d/matrix3d-2-ref.html
layout/reftests/transform-3d/matrix3d-2a.html
layout/reftests/transform-3d/perspective-origin-1a.html
layout/reftests/transform-3d/perspective-origin-1b.html
layout/reftests/transform-3d/preserve3d-1-ref.html
layout/reftests/transform-3d/preserve3d-1a.html
layout/reftests/transform-3d/preserve3d-1b.html
layout/reftests/transform-3d/reftest.list
layout/reftests/transform-3d/rotate3d-1a.html
layout/reftests/transform-3d/rotate3d-2a.html
layout/reftests/transform-3d/rotatex-1-ref.html
layout/reftests/transform-3d/rotatex-1a.html
layout/reftests/transform-3d/rotatex-perspective-1a.html
layout/reftests/transform-3d/rotatex-perspective-1b.html
layout/reftests/transform-3d/rotatex-perspective-1c.html
layout/reftests/transform-3d/rotatey-1-ref.html
layout/reftests/transform-3d/rotatey-1a.html
layout/reftests/transform-3d/scale3d-1-ref.html
layout/reftests/transform-3d/scale3d-2-ref.html
layout/reftests/transform-3d/scale3d-all.html
layout/reftests/transform-3d/scale3d-xz.html
layout/reftests/transform-3d/scale3d-z.html
layout/reftests/transform-3d/scalez-1-ref.html
layout/reftests/transform-3d/scalez-1a.html
layout/reftests/transform-3d/scalezrotatex-1-ref.html
layout/reftests/transform-3d/scalezrotatex-1.html
layout/reftests/transform-3d/translate3d-1-ref.html
layout/reftests/transform-3d/translate3d-1a.html
layout/reftests/transform-3d/translatez-1-ref.html
layout/reftests/transform-3d/translatez-1a.html
layout/reftests/transform-3d/translatez-1b.html
--- a/layout/reftests/reftest.list
+++ b/layout/reftests/reftest.list
@@ -268,16 +268,19 @@ skip-if(Android) include text-shadow/ref
 include ../../toolkit/themes/pinstripe/reftests/reftest.list
 
 # text-transform/
 include text-transform/reftest.list
 
 # -moz-transform/
 include transform/reftest.list
 
+# 3d transforms - disabled currently
+#include transform-3d/reftest.list
+
 # unicode/ (verify that we don't do expend effort doing unicode-aware case checks)
 include unicode/reftest.list
 
 # widget/
 include ../../widget/reftests/reftest.list
 
 # xml-stylesheet/
 include ../../content/test/reftest/xml-stylesheet/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(180deg); -moz-backface-visibility: visible; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/backface-visibility-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(180deg); -moz-backface-visibility: hidden; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: matrix(1,2,3,4,5,6); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: matrix3d(1,2,0,0,3,4,0,0,0,0,1,0,5,6,0,1); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: scale3d(1,2,3) translate3d(4px,5px,6px); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/matrix3d-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: matrix3d(1,0,0,0,0,2,0,0,0,0,3,0,4,5,6,1); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-1a.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-perspective: 1000px; -moz-perspective-origin: 0 0;">
+    <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/perspective-origin-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-perspective: 1000px; -moz-perspective-origin: top left;">
+    <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(180deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1a.html
@@ -0,0 +1,15 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(90deg); -moz-transform-style: preserve-3d;">
+    <div style="-moz-transform: rotatex(90deg); -moz-transform-style: preserve-3d;">
+      <div style="-moz-transform: rotatex(90deg); -moz-transform-style: preserve-3d;">
+        <div style="-moz-transform: rotatex(90deg); width: 100px; height: 100px;">
+          Test Text
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/preserve3d-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(90deg);">
+    <div style="-moz-transform: rotatex(90deg); width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/reftest.list
@@ -0,0 +1,27 @@
+== rotatey-1a.html rotatey-1-ref.html 
+== rotatex-1a.html rotatex-1-ref.html 
+# Check that scaleZ(-1) rotateX(180deg) is the same as rotateY(180deg)
+== scalezrotatex-1.html scalezrotatex-1-ref.html
+# Check that the perspectve() transform function results in some visual changes
+!= rotatex-perspective-1a.html rotatex-1-ref.html
+# Check that -moz-perspective results in visual changes to child transformed elements
+!= rotatex-perspective-1b.html rotatex-1-ref.html
+# -moz-perspective should only apply to child elements
+== rotatex-perspective-1c.html rotatex-1-ref.html
+== scalez-1a.html scalez-1-ref.html
+fails == preserve3d-1a.html preserve3d-1-ref.html
+== preserve3d-1b.html about:blank
+== scale3d-z.html scalez-1-ref.html
+== scale3d-all.html scale3d-1-ref.html
+== scale3d-xz.html scale3d-2-ref.html
+== translatez-1a.html translatez-1-ref.html
+!= translatez-1b.html translatez-1-ref.html
+== translate3d-1a.html translate3d-1-ref.html
+== matrix3d-1a.html matrix3d-1-ref.html
+== matrix3d-2a.html matrix3d-2-ref.html
+== rotate3d-1a.html rotatex-1-ref.html
+== rotate3d-2a.html rotatey-1-ref.html
+!= backface-visibility-1a.html about:blank
+== backface-visibility-1b.html about:blank
+!= perspective-origin-1a.html rotatex-perspective-1a.html
+== perspective-origin-1b.html perspective-origin-1a.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotate3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate3d(1, 0, 0, 45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotate3d-2a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotate3d(0, 1, 0, 45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(45deg) rotatey(360deg) rotatex(360deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1b.html
@@ -0,0 +1,11 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-perspective: 1000px;">
+    <div style="-moz-transform: perspective(1000px) rotatex(45deg); width: 100px; height: 100px;">
+      Test Text
+    </div>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatex-perspective-1c.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(45deg); -moz-perspective: 1000px; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatey-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatey(45deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/rotatey-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatey(45deg) rotatey(360deg); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: scaleX(2) scaleY(2) scaleZ(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-2-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: scaleX(2) scaleY(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-all.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: scale3D(2,2,2); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-xz.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(90deg) scale3D(2,1,2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scale3d-z.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(90deg) scale3D(1,1,2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scalez-1-ref.html
@@ -0,0 +1,10 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: scaleY(2); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
+
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scalez-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(90deg) scaleZ(2) rotatex(-90deg); -moz-transform-origin: 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scalezrotatex-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: scaleY(-1); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/scalezrotatex-1.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(180deg) scaleZ(-1); width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/translate3d-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: 10 30 -10; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/translate3d-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translate3d(10px, 30px, -10px) rotatex(45deg) translate3d(-10px, -30px, 10px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1-ref.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: rotatex(45deg); -moz-transform-origin: 0 0 -10; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1a.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatez(-10px) rotatex(45deg) translatez(10px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/transform-3d/translatez-1b.html
@@ -0,0 +1,9 @@
+<html>
+<head>
+</head>
+<body>
+  <div style="-moz-transform: translatez(-20px) rotatex(45deg) translatez(20px); -moz-transform-origin: 0 0 0; width: 100px; height: 100px;">
+    Test Text
+  </div>
+</body>
+</html>