2008-09-15 Dean Jackson <dino@apple.com>
authordino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 15 Sep 2008 21:21:15 +0000 (21:21 +0000)
committerdino@apple.com <dino@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Mon, 15 Sep 2008 21:21:15 +0000 (21:21 +0000)
        Reviewed by Tim Hatcher.

        Tests for -webkit-transform
        https://bugs.webkit.org/show_bug.cgi?id=20771

        * transforms/2d/compound-2d-transforms-expected.txt: Added.
        * transforms/2d/compound-2d-transforms.html: Added.
        * transforms/2d/compound-transforms-vs-containers.html: Added.
        * transforms/2d/transform-2d-expected.txt: Added.
        * transforms/2d/transform-2d.html: Added.
        * transforms/2d/transform-accuracy-expected.txt: Added.
        * transforms/2d/transform-accuracy.html: Added.
        * transforms/2d/transform-borderbox.html: Added.
        * transforms/2d/transform-origin-borderbox.html: Added.
        * transforms/2d/resources/transform-test-utils.js: Added.
        * platform/mac/transforms/2d/compound-transforms-vs-containers-expected.txt: Added.
        * platform/mac/transforms/2d/transform-borderbox-expected.txt: Added.
        * platform/mac/transforms/2d/transform-origin-borderbox-expected.txt: Added.

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@36454 268f45cc-cd09-0410-ab3c-d52691b4dbfc

13 files changed:
LayoutTests/ChangeLog
LayoutTests/platform/mac/transforms/2d/compound-transforms-vs-containers-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/transforms/2d/transform-borderbox-expected.txt [new file with mode: 0644]
LayoutTests/platform/mac/transforms/2d/transform-origin-borderbox-expected.txt [new file with mode: 0644]
LayoutTests/transforms/2d/compound-2d-transforms-expected.txt [new file with mode: 0644]
LayoutTests/transforms/2d/compound-2d-transforms.html [new file with mode: 0644]
LayoutTests/transforms/2d/compound-transforms-vs-containers.html [new file with mode: 0644]
LayoutTests/transforms/2d/transform-2d-expected.txt [new file with mode: 0644]
LayoutTests/transforms/2d/transform-2d.html [new file with mode: 0644]
LayoutTests/transforms/2d/transform-accuracy-expected.txt [new file with mode: 0644]
LayoutTests/transforms/2d/transform-accuracy.html [new file with mode: 0644]
LayoutTests/transforms/2d/transform-borderbox.html [new file with mode: 0644]
LayoutTests/transforms/2d/transform-origin-borderbox.html [new file with mode: 0644]

index a879755..aec5be0 100644 (file)
@@ -1,5 +1,26 @@
 2008-09-15  Dean Jackson  <dino@apple.com>
 
+        Reviewed by Tim Hatcher.
+
+        Tests for -webkit-transform
+        https://bugs.webkit.org/show_bug.cgi?id=20771
+
+        * transforms/2d/compound-2d-transforms-expected.txt: Added.
+        * transforms/2d/compound-2d-transforms.html: Added.
+        * transforms/2d/compound-transforms-vs-containers.html: Added.
+        * transforms/2d/transform-2d-expected.txt: Added.
+        * transforms/2d/transform-2d.html: Added.
+        * transforms/2d/transform-accuracy-expected.txt: Added.
+        * transforms/2d/transform-accuracy.html: Added.
+        * transforms/2d/transform-borderbox.html: Added.
+        * transforms/2d/transform-origin-borderbox.html: Added.
+        * transforms/2d/resources/transform-test-utils.js: Added.
+        * platform/mac/transforms/2d/compound-transforms-vs-containers-expected.txt: Added.
+        * platform/mac/transforms/2d/transform-borderbox-expected.txt: Added.
+        * platform/mac/transforms/2d/transform-origin-borderbox-expected.txt: Added.
+
+2008-09-15  Dean Jackson  <dino@apple.com>
+
         Reviewed by Tim Hatcher
 
         Tests for animations.
diff --git a/LayoutTests/platform/mac/transforms/2d/compound-transforms-vs-containers-expected.txt b/LayoutTests/platform/mac/transforms/2d/compound-transforms-vs-containers-expected.txt
new file mode 100644 (file)
index 0000000..38fa122
--- /dev/null
@@ -0,0 +1,43 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x556
+  RenderBlock {HTML} at (0,0) size 800x556
+    RenderBody {BODY} at (8,16) size 784x520
+      RenderBlock {P} at (0,0) size 784x36
+        RenderText {#text} at (0,0) size 769x36
+          text run at (0,0) width 769: "Test ensures that nested transformed elements produce the same result as a single compound transform.You should not see"
+          text run at (0,18) width 188: "any red in the two tests below"
+layer at (78,72) size 402x222
+  RenderBlock (relative positioned) {DIV} at (20,56) size 402x222 [border: (1px solid #000000)]
+    RenderBlock {P} at (1,17) size 400x18
+      RenderText {#text} at (0,0) size 86x18
+        text run at (0,0) width 86: "Translate first"
+layer at (79,123) size 80x80
+  RenderBlock (positioned) {DIV} at (1,51) size 80x80
+layer at (79,123) size 80x80
+  RenderBlock (positioned) {DIV} at (0,0) size 80x80
+layer at (79,123) size 80x80
+  RenderBlock (positioned) {DIV} at (0,0) size 80x80
+layer at (79,123) size 80x80
+  RenderBlock (positioned) {DIV} at (0,0) size 80x80 [bgcolor=#FF0000]
+    RenderText {#text} at (0,0) size 64x18
+      text run at (0,0) width 64: "Individual"
+layer at (79,123) size 80x80
+  RenderBlock (positioned) {DIV} at (1,51) size 80x80 [bgcolor=#008000]
+layer at (78,314) size 402x222
+  RenderBlock (relative positioned) {DIV} at (20,298) size 402x222 [border: (1px solid #000000)]
+    RenderBlock {P} at (1,17) size 400x18
+      RenderText {#text} at (0,0) size 106x18
+        text run at (0,0) width 106: "Translate second"
+layer at (79,365) size 80x80
+  RenderBlock (positioned) {DIV} at (1,51) size 80x80
+layer at (79,365) size 80x80
+  RenderBlock (positioned) {DIV} at (0,0) size 80x80
+layer at (79,365) size 80x80
+  RenderBlock (positioned) {DIV} at (0,0) size 80x80
+layer at (79,365) size 80x80
+  RenderBlock (positioned) {DIV} at (0,0) size 80x80 [bgcolor=#FF0000]
+    RenderText {#text} at (0,0) size 64x18
+      text run at (0,0) width 64: "Individual"
+layer at (79,365) size 80x80
+  RenderBlock (positioned) {DIV} at (1,51) size 80x80 [bgcolor=#008000]
diff --git a/LayoutTests/platform/mac/transforms/2d/transform-borderbox-expected.txt b/LayoutTests/platform/mac/transforms/2d/transform-borderbox-expected.txt
new file mode 100644 (file)
index 0000000..0910e74
--- /dev/null
@@ -0,0 +1,19 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x304
+  RenderBlock {HTML} at (0,0) size 800x304
+    RenderBody {BODY} at (8,16) size 784x258
+      RenderBlock {P} at (0,0) size 784x0
+      RenderBlock {P} at (0,0) size 784x18
+        RenderText {#text} at (0,0) size 671x18
+          text run at (0,0) width 671: "Top box should have gray part extending outside the black outline. Lower box should lie inside the outline"
+      RenderBlock {DIV} at (30,48) size 400x210
+layer at (38,64) size 250x100
+  RenderBlock {DIV} at (0,0) size 250x100 [bgcolor=#008000] [border: (50px solid #808080) none]
+    RenderText {#text} at (0,0) size 154x18
+      text run at (0,0) width 154: "-webkit-box-sizing: auto"
+layer at (38,174) size 200x100
+  RenderBlock {DIV} at (0,110) size 200x100 [bgcolor=#008000] [border: (50px solid #808080) none]
+    RenderText {#text} at (0,0) size 123x36
+      text run at (0,0) width 123: "-webkit-box-sizing:"
+      text run at (0,18) width 70: "border-box"
diff --git a/LayoutTests/platform/mac/transforms/2d/transform-origin-borderbox-expected.txt b/LayoutTests/platform/mac/transforms/2d/transform-origin-borderbox-expected.txt
new file mode 100644 (file)
index 0000000..c43ddf3
--- /dev/null
@@ -0,0 +1,20 @@
+layer at (0,0) size 800x600
+  RenderView at (0,0) size 800x600
+layer at (0,0) size 800x524
+  RenderBlock {HTML} at (0,0) size 800x524
+    RenderBody {BODY} at (8,16) size 784x478
+      RenderBlock {P} at (0,0) size 784x18
+        RenderText {#text} at (0,0) size 600x18
+          text run at (0,0) width 600: "Tests that origin of rotation is the center of the border box, with and without -webkit-box-sizing"
+      RenderBlock {DIV} at (30,48) size 200x200 [bgcolor=#FF0000]
+      RenderBlock {DIV} at (30,278) size 200x200 [bgcolor=#FF0000]
+layer at (38,64) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000] [border: (100px solid #808080) none]
+    RenderText {#text} at (0,0) size 82x36
+      text run at (0,0) width 82: "-webkit-box-"
+      text run at (0,18) width 72: "sizing: auto"
+layer at (38,294) size 200x200
+  RenderBlock {DIV} at (0,0) size 200x200 [bgcolor=#008000] [border: (100px solid #808080) none]
+    RenderText {#text} at (0,0) size 82x36
+      text run at (0,0) width 82: "-webkit-box-"
+      text run at (0,18) width 72: "sizing: auto"
diff --git a/LayoutTests/transforms/2d/compound-2d-transforms-expected.txt b/LayoutTests/transforms/2d/compound-2d-transforms-expected.txt
new file mode 100644 (file)
index 0000000..5583bd0
--- /dev/null
@@ -0,0 +1,22 @@
+transform "none" expected "none" : PASS
+transform "" expected "matrix(5.96046e-08, 1, -1, 5.96046e-08, 0, 0)" : PASS
+transform "translate(50px, 20px)" expected "matrix(1, 0, 0, 1, 50, 20)" : PASS
+transform "rotate(12deg)" expected "matrix(0.978148, 0.207912, -0.207912, 0.978148, 0, 0)" : PASS
+transform "scale(1.7)" expected "matrix(1.7, 0, 0, 1.7, 0, 0)" : PASS
+transform "skew(12deg)" expected "matrix(1, 0, 0.212557, 1, 0, 0)" : PASS
+transform "matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20)" expected "matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20)" : PASS
+transform "translate(50px, 20px) rotate(12deg)" expected "matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20)" : PASS
+transform "rotate(12deg) translate(50px, 20px)" expected "matrix(0.978148, 0.207912, -0.207912, 0.978148, 44.7491, 29.9585)" : PASS
+transform "rotate(12deg) translate(50px, 20px) scale(1.4)" expected "matrix(1.36941, 0.291076, -0.291076, 1.36941, 44.7491, 29.9585)" : PASS
+transform "scale(1.4) rotate(12deg) translate(50px, 20px) " expected "matrix(1.36941, 0.291076, -0.291076, 1.36941, 62.6488, 41.942)" : PASS
+transform "scale(1.4) translate(50px, 20px) rotate(12deg)" expected "matrix(1.36941, 0.291076, -0.291076, 1.36941, 70, 28)" : PASS
+transform "translate(50px, 20px) rotate(12deg) translateY(50px) scale(1.4)" expected "matrix(1.36941, 0.291076, -0.291076, 1.36941, 39.6044, 68.9074)" : PASS
+transform "rotate(12deg) translate(50px, 20px) scale(1.4) translate(-80px, 40px) skew(34deg) translate(10px, 10px) scale(0.7) skewY(-25deg) rotate(21deg) translateX(50px) scale(1.4, 1.8)" expected "matrix(1.20517, 0.148207, 0.258987, 2.04004, -13.3847, 85.31)" : PASS
+transform ",rotate(12deg) translate(50px, 20px)" expected "none" : PASS
+transform "rotate(12deg), translate(50px, 20px)" expected "none" : PASS
+transform "rotate(12deg) + translate(50px, 20px)" expected "none" : PASS
+transform "rotate(12deg) translate(50, 20)" expected "none" : PASS
+transform "(rotate(12deg) translate(50px, 20px))" expected "none" : PASS
+transform "rotate(12deg) translate(50px, 20px) eggs(10)" expected "none" : PASS
+transform "rotate(12deg) matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20, 666)" expected "none" : PASS
+
diff --git a/LayoutTests/transforms/2d/compound-2d-transforms.html b/LayoutTests/transforms/2d/compound-2d-transforms.html
new file mode 100644 (file)
index 0000000..16003c3
--- /dev/null
@@ -0,0 +1,87 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Compound 2D Transforms</title>
+  <style type="text/css" media="screen">
+    .container {
+      height: 100px;
+      width: 200px;
+      margin: 30px;
+      outline: 1px solid black;
+    }
+    .box {
+      height: 100%;
+      width: 100%;
+      background-color: green;
+      -webkit-transform: rotate(90deg);
+    }
+    #results {
+      margin-top: 100px;
+    }
+  </style>
+  <script src="resources/transform-test-utils.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController) {
+      layoutTestController.dumpAsText();
+      layoutTestController.waitUntilDone();
+    }
+
+    var gTests = [
+      // zero functions
+      { 'transform' : 'none', 'result' : 'none' },
+      { 'transform' : '', 'result' : 'matrix(5.96046e-08, 1, -1, 5.96046e-08, 0, 0)' }, // revert back to box
+
+      // one function - see non-compound test for tougher examples
+      { 'transform' : 'translate(50px, 20px)', 'result' : 'matrix(1, 0, 0, 1, 50, 20)' },
+      { 'transform' : 'rotate(12deg)',         'result' : 'matrix(0.978148, 0.207912, -0.207912, 0.978148, 0, 0)' },
+      { 'transform' : 'scale(1.7)',            'result' : 'matrix(1.7, 0, 0, 1.7, 0, 0)' },
+      { 'transform' : 'skew(12deg)',           'result' : 'matrix(1, 0, 0.212557, 1, 0, 0)' },
+      { 'transform' : 'matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20)', 'result' : 'matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20)' },
+      
+      // two functions
+      { 'transform' : 'translate(50px, 20px) rotate(12deg)',          'result' : 'matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20)' },
+      { 'transform' : 'rotate(12deg) translate(50px, 20px)',          'result' : 'matrix(0.978148, 0.207912, -0.207912, 0.978148, 44.7491, 29.9585)' },
+
+      // three functions
+      { 'transform' : 'rotate(12deg) translate(50px, 20px) scale(1.4)',   'result' : 'matrix(1.36941, 0.291076, -0.291076, 1.36941, 44.7491, 29.9585)' },
+      { 'transform' : 'scale(1.4) rotate(12deg) translate(50px, 20px) ',  'result' : 'matrix(1.36941, 0.291076, -0.291076, 1.36941, 62.6488, 41.942)' },
+      { 'transform' : 'scale(1.4) translate(50px, 20px) rotate(12deg)',   'result' : 'matrix(1.36941, 0.291076, -0.291076, 1.36941, 70, 28)' },
+      { 'transform' : 'translate(50px, 20px) rotate(12deg) translateY(50px) scale(1.4)',   'result' : 'matrix(1.36941, 0.291076, -0.291076, 1.36941, 39.6044, 68.9074)' },
+
+      // lots of functions
+      { 'transform' : 'rotate(12deg) translate(50px, 20px) scale(1.4) translate(-80px, 40px) skew(34deg) translate(10px, 10px) scale(0.7) skewY(-25deg) rotate(21deg) translateX(50px) scale(1.4, 1.8)', 
+        'result' : 'matrix(1.20517, 0.148207, 0.258987, 2.04004, -13.3847, 85.31)' },
+        
+      // invalid compound functions
+      { 'transform' : ',rotate(12deg) translate(50px, 20px)', 'result' : 'none' }, // has comma
+      { 'transform' : 'rotate(12deg), translate(50px, 20px)', 'result' : 'none' }, // has comma
+      { 'transform' : 'rotate(12deg) + translate(50px, 20px)', 'result' : 'none' }, // has plus
+      { 'transform' : 'rotate(12deg) translate(50, 20)', 'result' : 'none' }, // missing units
+      { 'transform' : '(rotate(12deg) translate(50px, 20px))', 'result' : 'none' }, // bad syntax
+      { 'transform' : 'rotate(12deg) translate(50px, 20px) eggs(10)', 'result' : 'none' }, // invalid function
+      { 'transform' : 'rotate(12deg) matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20, 666)', 'result' : 'none' }, // too many arguments
+      
+    ];
+    
+    function runTests()
+    {
+      testTransforms();
+
+      if (window.layoutTestController)
+        layoutTestController.notifyDone();
+    }
+  </script>
+</head>
+<body onload="runTests()">
+
+  <div class="container">
+    <div id="test-box" class="box"></div>
+  </div>
+
+  <div id="results">
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/transforms/2d/compound-transforms-vs-containers.html b/LayoutTests/transforms/2d/compound-transforms-vs-containers.html
new file mode 100644 (file)
index 0000000..0555019
--- /dev/null
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Compare Compound Transforms (translate scale rotate)</title>
+
+  <style type="text/css" media="screen">
+    div {
+      width: 80px;
+      height: 80px;
+      position: absolute;
+    }
+    .container {
+        position: relative;
+        left: 50px;
+        width: 400px;
+        height: 220px;
+        margin: 20px;
+        border: 1px solid black;
+    }
+    .box {
+      background-color: green;
+    }
+  </style>
+</head>
+<body>
+
+<p>Test ensures that nested transformed elements produce the same result as a single compound transform.You should not see any red in the two tests below</p>
+<div class="container">
+  <p>Translate first</p>
+  <div style="-webkit-transform: translate(75px, 20px)">
+    <div style="-webkit-transform: scale(1.6, 1.6)">
+      <div style="-webkit-transform: rotate(45deg)">
+        <div class="box" style="background-color: red">Individual</div>
+      </div>
+    </div>
+  </div>
+  <div class="box" style="-webkit-transform: translate(75px, 20px) scale(1.6, 1.6) rotate(45deg);"></div>
+</div>
+
+<div class="container">
+  <p>Translate second</p>
+  <div style="-webkit-transform: scale(1.6, 1.6)">
+    <div style="-webkit-transform: translate(75px, 20px)">
+      <div style="-webkit-transform: rotate(45deg)">
+        <div class="box" style="background-color: red">Individual</div>
+      </div>
+    </div>
+  </div>
+  <div class="box" style="-webkit-transform: scale(1.6, 1.6) translate(75px, 20px) rotate(45deg);"></div>
+</div>
+
+</body>
+</html>
diff --git a/LayoutTests/transforms/2d/transform-2d-expected.txt b/LayoutTests/transforms/2d/transform-2d-expected.txt
new file mode 100644 (file)
index 0000000..b7c3989
--- /dev/null
@@ -0,0 +1,79 @@
+transform "none" expected "none" : PASS
+transform "" expected "matrix(5.96046e-08, 1, -1, 5.96046e-08, 0, 0)" : PASS
+transform "inherit" expected "none" : PASS
+transform "translate(80px, 90px)" expected "matrix(1, 0, 0, 1, 80, 90)" : PASS
+transform "translate(100%, 3em)" expected "matrix(1, 0, 0, 1, 200, 48)" : PASS
+transform "translate(50px)" expected "matrix(1, 0, 0, 1, 50, 0)" : PASS
+transform "translatex(-20px)" expected "matrix(1, 0, 0, 1, -20, 0)" : PASS
+transform "translateX(-20px)" expected "matrix(1, 0, 0, 1, -20, 0)" : PASS
+transform "translatey(23px)" expected "matrix(1, 0, 0, 1, 0, 23)" : PASS
+transform "translateY(-3em)" expected "matrix(1, 0, 0, 1, 0, -48)" : PASS
+transform "scale(1.2)" expected "matrix(1.2, 0, 0, 1.2, 0, 0)" : PASS
+transform "scalex(1.5)" expected "matrix(1.5, 0, 0, 1, 0, 0)" : PASS
+transform "scaleX(1.5)" expected "matrix(1.5, 0, 0, 1, 0, 0)" : PASS
+transform "scaley(1.5)" expected "matrix(1, 0, 0, 1.5, 0, 0)" : PASS
+transform "scaleY(1.5)" expected "matrix(1, 0, 0, 1.5, 0, 0)" : PASS
+transform "scale(1.2, 0.8)" expected "matrix(1.2, 0, 0, 0.8, 0, 0)" : PASS
+transform "scale(-1.2, -0.8)" expected "matrix(-1.2, -0, -0, -0.8, 0, 0)" : PASS
+transform "skew(-0.7rad, 20deg)" expected "matrix(1, 0.36397, -0.842288, 1, 0, 0)" : PASS
+transform "skew(12grad)" expected "matrix(1, 0, 0.19076, 1, 0, 0)" : PASS
+transform "skewx(12grad)" expected "matrix(1, 0, 0.19076, 1, 0, 0)" : PASS
+transform "skewX(12grad)" expected "matrix(1, 0, 0.19076, 1, 0, 0)" : PASS
+transform "skewy(-12grad)" expected "matrix(1, -0.19076, 0, 1, 0, 0)" : PASS
+transform "skewY(-12grad)" expected "matrix(1, -0.19076, 0, 1, 0, 0)" : PASS
+transform "rotate(45deg)" expected "matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)" : PASS
+transform "rotate(90deg)" expected "matrix(-4.37114e-08, 1, -1, -4.37114e-08, 0, 0)" : PASS
+transform "rotate(-90deg)" expected "matrix(-4.37114e-08, -1, 1, -4.37114e-08, 0, 0)" : PASS
+transform "rotate(180deg)" expected "matrix(-1, -8.74228e-08, 8.74228e-08, -1, 0, 0)" : PASS
+transform "rotate(1.2rad)" expected "matrix(0.362358, 0.932039, -0.932039, 0.362358, 0, 0)" : PASS
+transform "matrix(1, 0, 0, 1, 0, 0)" expected "matrix(1, 0, 0, 1, 0, 0)" : PASS
+transform "matrix(1, -0.19076, 0, 1, 0, 0)" expected "matrix(1, -0.19076, 0, 1, 0, 0)" : PASS
+transform "matrix(0.2, 0.3, 0.4, 1.1, 1.2, 1.3)" expected "matrix(0.2, 0.3, 0.4, 1.1, 1.2, 1.3)" : PASS
+transform ",rotate(12deg)" expected "none" : PASS
+transform "rotate(12deg)," expected "none" : PASS
+transform "rotate(12deg) +" expected "none" : PASS
+transform "(translate(50, 20))" expected "none" : PASS
+transform "eggs(10)" expected "none" : PASS
+transform "translate(50, 20)" expected "none" : PASS
+transform "translate()" expected "none" : PASS
+transform "translate(10px, 20px, 30px)" expected "none" : PASS
+transform "translate(10px, 20px, 30px, 40px)" expected "none" : PASS
+transform "translate(10smidgens)" expected "none" : PASS
+transform "translate(10px, 10smidgens)" expected "none" : PASS
+transform "translateX(10px, 20px)" expected "none" : PASS
+transform "translateX(10px, 20px, 30px)" expected "none" : PASS
+transform "translateX(10smidgens)" expected "none" : PASS
+transform "translateX(10px, 10smidgens)" expected "none" : PASS
+transform "translateY(10px, 20px)" expected "none" : PASS
+transform "translateY(10px, 20px, 30px)" expected "none" : PASS
+transform "translateY(10smidgens)" expected "none" : PASS
+transform "translateY(10px, 10smidgens)" expected "none" : PASS
+transform "scale(2px, 2px)" expected "none" : PASS
+transform "scale(2, 2px)" expected "none" : PASS
+transform "scale()" expected "none" : PASS
+transform "scale(1, 2, 3)" expected "none" : PASS
+transform "scale(2smidgens)" expected "none" : PASS
+transform "scale(2, 2smidgens)" expected "none" : PASS
+transform "rotate(10)" expected "none" : PASS
+transform "rotate()" expected "none" : PASS
+transform "rotate(10deg, 20deg)" expected "none" : PASS
+transform "rotate(2spins)" expected "none" : PASS
+transform "rotate(2, 2spins)" expected "none" : PASS
+transform "skew(10)" expected "none" : PASS
+transform "skew()" expected "none" : PASS
+transform "skew(10deg, 20deg, 30deg)" expected "none" : PASS
+transform "skew(2bits)" expected "none" : PASS
+transform "skew(2, 2bits)" expected "none" : PASS
+transform "skewX(10)" expected "none" : PASS
+transform "skewX()" expected "none" : PASS
+transform "skewX(10deg, 20deg)" expected "none" : PASS
+transform "skewX(2bits)" expected "none" : PASS
+transform "skewY(10)" expected "none" : PASS
+transform "skewY()" expected "none" : PASS
+transform "skewY(10deg, 20deg)" expected "none" : PASS
+transform "skewY(2bits)" expected "none" : PASS
+transform "matrix()" expected "none" : PASS
+transform "matrix(2, 0, 0, 2)" expected "none" : PASS
+transform "matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20, 666)" expected "none" : PASS
+transform "matrix(1, 0, 0, 1, 20px, 50px)" expected "none" : PASS
+
diff --git a/LayoutTests/transforms/2d/transform-2d.html b/LayoutTests/transforms/2d/transform-2d.html
new file mode 100644 (file)
index 0000000..5d46647
--- /dev/null
@@ -0,0 +1,155 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>2D Transform Tests</title>
+  <style type="text/css" media="screen">
+    .container {
+      height: 100px;
+      width: 200px;
+      margin: 30px;
+      outline: 1px solid black;
+    }
+    .box {
+      height: 100%;
+      width: 100%;
+      background-color: green;
+      -webkit-transform: rotate(90deg);
+    }
+    #results {
+      margin-top: 100px;
+    }
+  </style>
+  <script src="resources/transform-test-utils.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController) {
+      layoutTestController.dumpAsText();
+      layoutTestController.waitUntilDone();
+    }
+
+    var gTests = [
+      // nothing
+      { 'transform' : 'none', 'result' : 'none' },
+      { 'transform' : '', 'result' : 'matrix(5.96046e-08, 1, -1, 5.96046e-08, 0, 0)' }, // this cancels the style - revert back to box
+      { 'transform' : 'inherit', 'result' : 'none' }, // parent element doesn't have transform
+
+      // translate
+      { 'transform' : 'translate(80px, 90px)',  'result' : 'matrix(1, 0, 0, 1, 80, 90)' },
+      { 'transform' : 'translate(100%, 3em)',   'result' : 'matrix(1, 0, 0, 1, 200, 48)' },  // depends on font size
+      { 'transform' : 'translate(50px)',        'result' : 'matrix(1, 0, 0, 1, 50, 0)' },
+      { 'transform' : 'translatex(-20px)',      'result' : 'matrix(1, 0, 0, 1, -20, 0)' },
+      { 'transform' : 'translateX(-20px)',      'result' : 'matrix(1, 0, 0, 1, -20, 0)' },
+      { 'transform' : 'translatey(23px)',       'result' : 'matrix(1, 0, 0, 1, 0, 23)' },
+      { 'transform' : 'translateY(-3em)',       'result' : 'matrix(1, 0, 0, 1, 0, -48)' },  // depends on font size
+
+      // scale
+      { 'transform' : 'scale(1.2)',             'result' : 'matrix(1.2, 0, 0, 1.2, 0, 0)' },
+      { 'transform' : 'scalex(1.5)',            'result' : 'matrix(1.5, 0, 0, 1, 0, 0)' },
+      { 'transform' : 'scaleX(1.5)',            'result' : 'matrix(1.5, 0, 0, 1, 0, 0)' },
+      { 'transform' : 'scaley(1.5)',            'result' : 'matrix(1, 0, 0, 1.5, 0, 0)' },
+      { 'transform' : 'scaleY(1.5)',            'result' : 'matrix(1, 0, 0, 1.5, 0, 0)' },
+      { 'transform' : 'scale(1.2, 0.8)',        'result' : 'matrix(1.2, 0, 0, 0.8, 0, 0)' },
+      { 'transform' : 'scale(-1.2, -0.8)',      'result' : 'matrix(-1.2, -0, -0, -0.8, 0, 0)' },
+
+      // skew
+      { 'transform' : 'skew(-0.7rad, 20deg)',   'result' : 'matrix(1, 0.36397, -0.842288, 1, 0, 0)' },
+      { 'transform' : 'skew(12grad)',           'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
+      { 'transform' : 'skewx(12grad)',          'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
+      { 'transform' : 'skewX(12grad)',          'result' : 'matrix(1, 0, 0.19076, 1, 0, 0)' },
+      { 'transform' : 'skewy(-12grad)',         'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
+      { 'transform' : 'skewY(-12grad)',         'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
+
+      // rotate
+      { 'transform' : 'rotate(45deg)',          'result' : 'matrix(0.707107, 0.707107, -0.707107, 0.707107, 0, 0)' },
+      { 'transform' : 'rotate(90deg)',          'result' : 'matrix(-4.37114e-08, 1, -1, -4.37114e-08, 0, 0)' },
+      { 'transform' : 'rotate(-90deg)',         'result' : 'matrix(-4.37114e-08, -1, 1, -4.37114e-08, 0, 0)' },
+      { 'transform' : 'rotate(180deg)',         'result' : 'matrix(-1, -8.74228e-08, 8.74228e-08, -1, 0, 0)' },
+      { 'transform' : 'rotate(1.2rad)',         'result' : 'matrix(0.362358, 0.932039, -0.932039, 0.362358, 0, 0)' },
+
+      // matrix
+      { 'transform' : 'matrix(1, 0, 0, 1, 0, 0)', 'result' : 'matrix(1, 0, 0, 1, 0, 0)' },
+      { 'transform' : 'matrix(1, -0.19076, 0, 1, 0, 0)', 'result' : 'matrix(1, -0.19076, 0, 1, 0, 0)' },
+      { 'transform' : 'matrix(0.2, 0.3, 0.4, 1.1, 1.2, 1.3)', 'result' : 'matrix(0.2, 0.3, 0.4, 1.1, 1.2, 1.3)' },
+
+      // invalid syntax
+      { 'transform' : ',rotate(12deg)', 'result' : 'none' }, // has comma
+      { 'transform' : 'rotate(12deg),', 'result' : 'none' }, // has comma
+      { 'transform' : 'rotate(12deg) +', 'result' : 'none' }, // has plus
+      { 'transform' : '(translate(50, 20))', 'result' : 'none' }, // bad syntax
+      { 'transform' : 'eggs(10)', 'result' : 'none' }, // invalid function
+
+      // invalid translate
+      { 'transform' : 'translate(50, 20)', 'result' : 'none' }, // missing units
+      { 'transform' : 'translate()', 'result' : 'none' }, // no arguments
+      { 'transform' : 'translate(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'translate(10px, 20px, 30px, 40px)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'translate(10smidgens)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'translate(10px, 10smidgens)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'translateX(10px, 20px)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'translateX(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'translateX(10smidgens)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'translateX(10px, 10smidgens)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'translateY(10px, 20px)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'translateY(10px, 20px, 30px)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'translateY(10smidgens)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'translateY(10px, 10smidgens)', 'result' : 'none' }, // invalid units
+
+      // invalid scale
+      { 'transform' : 'scale(2px, 2px)', 'result' : 'none' }, // has units
+      { 'transform' : 'scale(2, 2px)', 'result' : 'none' }, // has units
+      { 'transform' : 'scale()', 'result' : 'none' }, // no arguments
+      { 'transform' : 'scale(1, 2, 3)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'scale(2smidgens)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'scale(2, 2smidgens)', 'result' : 'none' }, // invalid units
+
+      // invalid rotate
+      { 'transform' : 'rotate(10)', 'result' : 'none' }, // no units
+      { 'transform' : 'rotate()', 'result' : 'none' }, // no arguments
+      { 'transform' : 'rotate(10deg, 20deg)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'rotate(2spins)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'rotate(2, 2spins)', 'result' : 'none' }, // invalid units
+
+      // invalid skew
+      { 'transform' : 'skew(10)', 'result' : 'none' }, // no units
+      { 'transform' : 'skew()', 'result' : 'none' }, // no arguments
+      { 'transform' : 'skew(10deg, 20deg, 30deg)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'skew(2bits)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'skew(2, 2bits)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'skewX(10)', 'result' : 'none' }, // no units
+      { 'transform' : 'skewX()', 'result' : 'none' }, // no arguments
+      { 'transform' : 'skewX(10deg, 20deg)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'skewX(2bits)', 'result' : 'none' }, // invalid units
+      { 'transform' : 'skewY(10)', 'result' : 'none' }, // no units
+      { 'transform' : 'skewY()', 'result' : 'none' }, // no arguments
+      { 'transform' : 'skewY(10deg, 20deg)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'skewY(2bits)', 'result' : 'none' }, // invalid units
+
+      // invalid matrix
+      { 'transform' : 'matrix()', 'result' : 'none' }, // no arguments
+      { 'transform' : 'matrix(2, 0, 0, 2)', 'result' : 'none' }, // not enough arguments
+      { 'transform' : 'matrix(0.978148, 0.207912, -0.207912, 0.978148, 50, 20, 666)', 'result' : 'none' }, // too many arguments
+      { 'transform' : 'matrix(1, 0, 0, 1, 20px, 50px)', 'result' : 'none' }, // has units
+      
+    ];
+    
+    function runTests()
+    {
+      testTransforms();
+
+      if (window.layoutTestController)
+        layoutTestController.notifyDone();
+    }
+  </script>
+</head>
+<body onload="runTests()">
+
+  <div class="container">
+    <div id="test-box" class="box"></div>
+  </div>
+
+  <div id="results">
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/transforms/2d/transform-accuracy-expected.txt b/LayoutTests/transforms/2d/transform-accuracy-expected.txt
new file mode 100644 (file)
index 0000000..89f306d
--- /dev/null
@@ -0,0 +1,4 @@
+transform "scale(0.0000001) scale(10000000)" expected "matrix(1, 0, 0, 1, 0, 0)" : PASS
+transform "rotate(-10deg) rotate(10deg) rotate(360deg) rotate(-360deg) rotate(360deg)" expected "matrix(1, 0, 0, 1, 0, 0)" : PASS
+transform "translate(10000000px) translate(-10000000px)" expected "matrix(1, 0, 0, 1, 0, 0)" : PASS
+
diff --git a/LayoutTests/transforms/2d/transform-accuracy.html b/LayoutTests/transforms/2d/transform-accuracy.html
new file mode 100644 (file)
index 0000000..4670c2b
--- /dev/null
@@ -0,0 +1,56 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Testing accuracy of transform evaluation</title>
+  <style type="text/css" media="screen">
+    .container {
+      height: 100px;
+      width: 200px;
+      margin: 30px;
+      outline: 1px solid black;
+    }
+    .box {
+      height: 100%;
+      width: 100%;
+      background-color: green;
+      -webkit-transform: rotate(90deg);
+    }
+    #results {
+      margin-top: 100px;
+    }
+  </style>
+  <script src="resources/transform-test-utils.js" type="text/javascript" charset="utf-8"></script>
+  <script type="text/javascript" charset="utf-8">
+    if (window.layoutTestController) {
+      layoutTestController.dumpAsText();
+      layoutTestController.waitUntilDone();
+    }
+
+    var gTests = [
+      { 'transform' : 'scale(0.0000001) scale(10000000)',  'result' : 'matrix(1, 0, 0, 1, 0, 0)' },
+      { 'transform' : 'rotate(-10deg) rotate(10deg) rotate(360deg) rotate(-360deg) rotate(360deg)',  'result' : 'matrix(1, 0, 0, 1, 0, 0)' },
+      { 'transform' : 'translate(10000000px) translate(-10000000px)',  'result' : 'matrix(1, 0, 0, 1, 0, 0)' },
+    ];
+    
+    function runTests()
+    {
+      testTransforms();
+
+      if (window.layoutTestController)
+        layoutTestController.notifyDone();
+    }
+  </script>
+</head>
+<body onload="runTests()">
+
+  <div class="container">
+    <div id="test-box" class="box"></div>
+  </div>
+
+  <div id="results">
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/transforms/2d/transform-borderbox.html b/LayoutTests/transforms/2d/transform-borderbox.html
new file mode 100644 (file)
index 0000000..41e63b5
--- /dev/null
@@ -0,0 +1,39 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Transform Center with Borders</title>
+  <style type="text/css" media="screen">
+    .container {
+      height: 210px;
+      width: 400px;
+      margin: 30px;
+      outline: 5px solid black;
+    }
+    .box {
+      height: 100px;
+      width: 200px;
+      margin-bottom: 10px;
+      background-color: green;
+      border-right: 50px solid gray;
+      -webkit-box-sizing: auto;
+      -webkit-transform: scalex(2);
+      -webkit-transform-origin: left;
+    }
+    .border-box {
+      -webkit-box-sizing: border-box;
+    }
+  </style>
+</head>
+<body>
+
+<p>
+<p>Top box should have gray part extending outside the black outline. Lower box should lie inside the outline</p>
+  <div class="container">
+    <div class="box">-webkit-box-sizing: auto</div>
+    <div class="box border-box">-webkit-box-sizing: border-box</div>
+  </div>
+</body>
+</html>
diff --git a/LayoutTests/transforms/2d/transform-origin-borderbox.html b/LayoutTests/transforms/2d/transform-origin-borderbox.html
new file mode 100644 (file)
index 0000000..3c29342
--- /dev/null
@@ -0,0 +1,41 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
+   "http://www.w3.org/TR/html4/loose.dtd">
+
+<html lang="en">
+<head>
+  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+  <title>Transform Center with Borders</title>
+  <style type="text/css" media="screen">
+    .container {
+      height: 200px;
+      width: 200px;
+      margin: 30px;
+      outline: 5px solid black;
+      background-color: red;
+    }
+    .box {
+      height: 200px;
+      width: 100px;
+      background-color: green;
+      border-right: 100px solid gray;
+      -webkit-box-sizing: auto;
+      -webkit-transform: rotate(90deg);
+    }
+    .border-box {
+      width: 200px;
+      -webkit-box-sizing: border-box;
+    }
+  </style>
+</head>
+<body>
+
+<p>Tests that origin of rotation is the center of the border box, with and without -webkit-box-sizing</p>
+  <div class="container">
+    <div class="box">-webkit-box-sizing: auto</div>
+  </div>
+
+  <div class="container">
+    <div class="box border-box">-webkit-box-sizing: auto</div>
+  </div>
+</body>
+</html>